@mui/material 5.14.5 → 5.14.7

package/Popover/Popover.js

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["onEntering"],
-  _excluded2 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "slots", "slotProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"],
+  _excluded2 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "slots", "slotProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps", "disableScrollLock"],
   _excluded3 = ["slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -113,7 +113,8 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
       transitionDuration: transitionDurationProp = 'auto',
       TransitionProps: {
         onEntering
-      } = {}
+      } = {},
+      disableScrollLock = false
     } = props,
     TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded),
     other = _objectWithoutPropertiesLoose(props, _excluded2);
@@ -201,11 +202,11 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     const widthThreshold = containerWindow.innerWidth - marginThreshold;
 
     // Check if the vertical axis needs shifting
-    if (top < marginThreshold) {
+    if (marginThreshold !== null && top < marginThreshold) {
       const diff = top - marginThreshold;
       top -= diff;
       elemTransformOrigin.vertical += diff;
-    } else if (bottom > heightThreshold) {
+    } else if (marginThreshold !== null && bottom > heightThreshold) {
       const diff = bottom - heightThreshold;
       top -= diff;
       elemTransformOrigin.vertical += diff;
@@ -217,7 +218,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     }
 
     // Check if the horizontal axis needs shifting
-    if (left < marginThreshold) {
+    if (marginThreshold !== null && left < marginThreshold) {
       const diff = left - marginThreshold;
       left -= diff;
       elemTransformOrigin.horizontal += diff;
@@ -248,6 +249,12 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     element.style.transformOrigin = positioning.transformOrigin;
     setIsPositioned(true);
   }, [getPositioningStyle]);
+  React.useEffect(() => {
+    if (disableScrollLock) {
+      window.addEventListener('scroll', setPositioningStyles);
+    }
+    return () => window.removeEventListener('scroll', setPositioningStyles);
+  }, [anchorEl, disableScrollLock, setPositioningStyles]);
   const handleEntering = (element, isAppearing) => {
     if (onEntering) {
       onEntering(element, isAppearing);
@@ -328,7 +335,8 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     } = _useSlotProps,
     rootProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded3);
   return /*#__PURE__*/_jsx(RootSlot, _extends({}, rootProps, !isHostComponent(RootSlot) && {
-    slotProps: rootSlotPropsProp
+    slotProps: rootSlotPropsProp,
+    disableScrollLock
   }, {
     children: /*#__PURE__*/_jsx(TransitionComponent, _extends({
       appear: true,
@@ -423,6 +431,11 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
    * so it's simply `document.body` most of the time.
    */
   container: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([HTMLElementType, PropTypes.func]),
+  /**
+   * Disable the scroll lock behavior.
+   * @default false
+   */
+  disableScrollLock: PropTypes.bool,
   /**
    * The elevation of the popover.
    * @default 8
@@ -430,6 +443,7 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
   elevation: integerPropType,
   /**
    * Specifies how close to the edge of the window the popover can appear.
+   * If null, the popover will not be constrained by the window.
    * @default 16
    */
   marginThreshold: PropTypes.number,

package/README.md

@@ -28,7 +28,7 @@
 [![Follow on Twitter](https://img.shields.io/twitter/follow/MUI_hq.svg?label=follow+MUI)](https://twitter.com/MUI_hq)
 [![Renovate status](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://github.com/mui/material-ui/issues/27062)
 [![Average time to resolve an issue](https://isitmaintained.com/badge/resolution/mui/material-ui.svg)](https://isitmaintained.com/project/mui/material-ui 'Average time to resolve an issue')
-[![Open Collective backers and sponsors](https://img.shields.io/opencollective/all/mui)](https://opencollective.com/mui)
+[![Open Collective backers and sponsors](https://img.shields.io/opencollective/all/mui)](https://opencollective.com/mui)
 [![CII Best Practices](https://bestpractices.coreinfrastructure.org/projects/1320/badge)](https://bestpractices.coreinfrastructure.org/projects/1320)
 
 </div>
@@ -121,14 +121,13 @@ Visit our [`styled-engine` guide](https://mui.com/material-ui/guides/styled-engi
 <p>
   <a href="https://octopus.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="128" width="128" src="https://i.ibb.co/w0HF0Nz/Logo-Blue-140px-rgb.png" alt="octopus" title="Repeatable, reliable deployments" loading="lazy" /></a>
   <a href="https://www.doit.com/flexsave/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="128" width="128" src="https://avatars.githubusercontent.com/u/8424863?s=256" alt="doit" title="Management Platform for Google Cloud and AWS" loading="lazy" /></a>
-  <a href="https://www.zesty.io/integrations/mui-nextjs/?utm_source=mui&utm_medium=referral&utm_campaign=sponsor" rel="noopener sponsored" target="_blank"><img height="90" width="90" src="https://brand.zesty.io/zesty-io-logo.svg" alt="zesty.io" title="The only Next.js CMS you need" loading="lazy" /></a>
 </p>
 
 Diamond Sponsors are those who have pledged \$1,500/month or more to MUI.
 
 ### Gold 🏆
 
-via [OpenCollective](https://opencollective.com/mui) or via [Patreon](https://www.patreon.com/oliviertassinari)
+via [Open Collective](https://opencollective.com/mui) or via [Patreon](https://www.patreon.com/oliviertassinari)
 
 <p>
   <a href="https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=npm-material-ui&utm_medium=referral&utm_campaign=homepage" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://avatars.githubusercontent.com/u/30204434?s=192" alt="tidelift.com" title="Enterprise-ready open-source software" loading="lazy" /></a>

package/Select/Select.js

@@ -2,7 +2,8 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"];
+const _excluded = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"],
+  _excluded2 = ["root"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -76,6 +77,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
     classes: classesProp
   });
   const classes = useUtilityClasses(ownerState);
+  const restOfClasses = _objectWithoutPropertiesLoose(classes, _excluded2);
   const InputComponent = input || {
     standard: /*#__PURE__*/_jsx(StyledInput, {
       ownerState: ownerState
@@ -118,13 +120,13 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
           id
         }, SelectDisplayProps)
       }, inputProps, {
-        classes: inputProps ? deepmerge(classes, inputProps.classes) : classes
+        classes: inputProps ? deepmerge(restOfClasses, inputProps.classes) : restOfClasses
       }, input ? input.props.inputProps : {})
     }, multiple && native && variant === 'outlined' ? {
       notched: true
     } : {}, {
       ref: inputComponentRef,
-      className: clsx(InputComponent.props.className, className)
+      className: clsx(InputComponent.props.className, className, classes.root)
     }, !input && {
       variant
     }, other))

package/Select/selectClasses.d.ts

@@ -1,4 +1,6 @@
 export interface SelectClasses {
+    /** Styles applied to the root element. */
+    root: string;
     /** Styles applied to the select component `select` class. */
     select: string;
     /** Styles applied to the select component if `multiple={true}`. */

package/Select/selectClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '../generateUtilityClass';
 export function getSelectUtilityClasses(slot) {
   return generateUtilityClass('MuiSelect', slot);
 }
-const selectClasses = generateUtilityClasses('MuiSelect', ['select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'focused', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput', 'error']);
+const selectClasses = generateUtilityClasses('MuiSelect', ['root', 'select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'focused', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput', 'error']);
 export default selectClasses;

package/Skeleton/Skeleton.js

@@ -105,7 +105,7 @@ const SkeletonRoot = styled('span', {
 }, ({
   ownerState
 }) => ownerState.animation === 'pulse' && css(_t3 || (_t3 = _`
-      animation: ${0} 1.5s ease-in-out 0.5s infinite;
+      animation: ${0} 2s ease-in-out 0.5s infinite;
     `), pulseKeyframe), ({
   ownerState,
   theme
@@ -117,7 +117,7 @@ const SkeletonRoot = styled('span', {
       -webkit-mask-image: -webkit-radial-gradient(white, black);
 
       &::after {
-        animation: ${0} 1.6s linear 0.5s infinite;
+        animation: ${0} 2s linear 0.5s infinite;
         background: linear-gradient(
           90deg,
           transparent,

package/Snackbar/Snackbar.d.ts

@@ -56,10 +56,10 @@ export interface SnackbarProps extends StandardProps<React.HTMLAttributes<HTMLDi
    */
   disableWindowBlurListener?: boolean;
   /**
-   * When displaying multiple consecutive Snackbars from a parent rendering a single
-   * <Snackbar/>, add the key prop to ensure independent treatment of each message.
-   * e.g. <Snackbar key={message} />, otherwise, the message may update-in-place and
-   * features such as autoHideDuration may be canceled.
+   * When displaying multiple consecutive snackbars using a single parent-rendered
+   * `<Snackbar/>`, add the `key` prop to ensure independent treatment of each message.
+   * For instance, use `<Snackbar key={message} />`. Otherwise, messages might update
+   * in place, and features like `autoHideDuration` could be affected.
    */
   key?: any;
   /**

package/Snackbar/Snackbar.js

@@ -227,10 +227,10 @@ process.env.NODE_ENV !== "production" ? Snackbar.propTypes /* remove-proptypes *
    */
   disableWindowBlurListener: PropTypes.bool,
   /**
-   * When displaying multiple consecutive Snackbars from a parent rendering a single
-   * <Snackbar/>, add the key prop to ensure independent treatment of each message.
-   * e.g. <Snackbar key={message} />, otherwise, the message may update-in-place and
-   * features such as autoHideDuration may be canceled.
+   * When displaying multiple consecutive snackbars using a single parent-rendered
+   * `<Snackbar/>`, add the `key` prop to ensure independent treatment of each message.
+   * For instance, use `<Snackbar key={message} />`. Otherwise, messages might update
+   * in place, and features like `autoHideDuration` could be affected.
    */
   key: () => null,
   /**

package/TextField/TextField.d.ts

@@ -111,10 +111,6 @@ export interface BaseTextFieldProps
   name?: string;
   onBlur?: InputBaseProps['onBlur'];
   onFocus?: StandardInputProps['onFocus'];
-  /**
-   * @ignore
-   */
-  onClick?: InputBaseProps['onClick'];
   /**
    * The short hint displayed in the `input` before the user enters a value.
    */

package/TextField/TextField.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["autoComplete", "autoFocus", "children", "className", "color", "defaultValue", "disabled", "error", "FormHelperTextProps", "fullWidth", "helperText", "id", "InputLabelProps", "inputProps", "InputProps", "inputRef", "label", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "placeholder", "required", "rows", "select", "SelectProps", "type", "value", "variant"];
+const _excluded = ["autoComplete", "autoFocus", "children", "className", "color", "defaultValue", "disabled", "error", "FormHelperTextProps", "fullWidth", "helperText", "id", "InputLabelProps", "inputProps", "InputProps", "inputRef", "label", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onFocus", "placeholder", "required", "rows", "select", "SelectProps", "type", "value", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -101,7 +101,6 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
       name,
       onBlur,
       onChange,
-      onClick,
       onFocus,
       placeholder,
       required = false,
@@ -144,14 +143,6 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
     }
     InputMore['aria-describedby'] = undefined;
   }
-  const handleClick = event => {
-    if (!disabled && onClick) {
-      // The `onClick` is registered both on the root and the input elements.
-      // Without stopping the propagation, the event could be triggered twice.
-      event.stopPropagation();
-      onClick(event);
-    }
-  };
   const id = useId(idOverride);
   const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
   const inputLabelId = label && id ? `${id}-label` : undefined;
@@ -174,7 +165,6 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
     onBlur: onBlur,
     onChange: onChange,
     onFocus: onFocus,
-    onClick: handleClick,
     placeholder: placeholder,
     inputProps: inputProps
   }, InputMore, InputProps));
@@ -187,8 +177,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
     required: required,
     color: color,
     variant: variant,
-    ownerState: ownerState,
-    onClick: handleClick
+    ownerState: ownerState
   }, other, {
     children: [label != null && label !== '' && /*#__PURE__*/_jsx(InputLabel, _extends({
       htmlFor: id,
@@ -334,10 +323,6 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
    * You can pull out the new value by accessing `event.target.value` (string).
    */
   onChange: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onClick: PropTypes.func,
   /**
    * @ignore
    */

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.14.5
+ * @mui/material v5.14.7
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/Drawer/Drawer.js

@@ -265,8 +265,10 @@ process.env.NODE_ENV !== "production" ? Drawer.propTypes /* remove-proptypes */
   ModalProps: PropTypes.object,
   /**
    * Callback fired when the component requests to be closed.
+   * The `reason` parameter can optionally be used to control the response to `onClose`.
    *
    * @param {object} event The event source of the callback.
+   * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
    */
   onClose: PropTypes.func,
   /**

package/legacy/InputBase/InputBase.js

@@ -377,7 +377,7 @@ var InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref) {
     if (inputRef.current && event.currentTarget === event.target) {
       inputRef.current.focus();
     }
-    if (onClick && !fcs.disabled) {
+    if (onClick) {
       onClick(event);
     }
   };

package/legacy/Modal/Modal.js

@@ -5,14 +5,28 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { Modal as ModalUnstyled, modalClasses as modalUnstyledClasses } from '@mui/base/Modal';
-import { isHostComponent, resolveComponentProps } from '@mui/base/utils';
 import { elementAcceptingRef, HTMLElementType } from '@mui/utils';
+import { useSlotProps } from '@mui/base';
+import { unstable_useModal as useModal } from '@mui/base/unstable_useModal';
+import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
+import FocusTrap from '../Unstable_TrapFocus';
+import Portal from '../Portal';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import Backdrop from '../Backdrop';
+import { getModalUtilityClass } from './modalClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-export var modalClasses = modalUnstyledClasses;
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var open = ownerState.open,
+    exited = ownerState.exited,
+    classes = ownerState.classes;
+  var slots = {
+    root: ['root', !open && exited && 'hidden'],
+    backdrop: ['backdrop']
+  };
+  return composeClasses(slots, getModalUtilityClass, classes);
+};
 var ModalRoot = styled('div', {
   name: 'MuiModal',
   slot: 'Root',
@@ -66,7 +80,7 @@ var Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
   var _props$BackdropCompon = props.BackdropComponent,
     BackdropComponent = _props$BackdropCompon === void 0 ? ModalBackdrop : _props$BackdropCompon,
     BackdropProps = props.BackdropProps,
-    classes = props.classes,
+    classesProp = props.classes,
     className = props.className,
     _props$closeAfterTran = props.closeAfterTransition,
     closeAfterTransition = _props$closeAfterTran === void 0 ? false : _props$closeAfterTran,
@@ -100,11 +114,7 @@ var Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     slots = props.slots,
     theme = props.theme,
     other = _objectWithoutProperties(props, ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "open", "slotProps", "slots", "theme"]);
-  var _React$useState = React.useState(true),
-    exited = _React$useState[0],
-    setExited = _React$useState[1];
-  var commonProps = {
-    container: container,
+  var propsWithDefaults = _extends({}, props, {
     closeAfterTransition: closeAfterTransition,
     disableAutoFocus: disableAutoFocus,
     disableEnforceFocus: disableEnforceFocus,
@@ -113,48 +123,88 @@ var Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     disableRestoreFocus: disableRestoreFocus,
     disableScrollLock: disableScrollLock,
     hideBackdrop: hideBackdrop,
-    keepMounted: keepMounted,
-    onBackdropClick: onBackdropClick,
-    onClose: onClose,
-    open: open
-  };
-  var ownerState = _extends({}, props, commonProps, {
+    keepMounted: keepMounted
+  });
+  var _useModal = useModal(_extends({}, propsWithDefaults, {
+      rootRef: ref
+    })),
+    getRootProps = _useModal.getRootProps,
+    getBackdropProps = _useModal.getBackdropProps,
+    getTransitionProps = _useModal.getTransitionProps,
+    portalRef = _useModal.portalRef,
+    isTopModal = _useModal.isTopModal,
+    exited = _useModal.exited,
+    hasTransition = _useModal.hasTransition;
+  var ownerState = _extends({}, propsWithDefaults, {
     exited: exited
   });
+  var classes = useUtilityClasses(ownerState);
+  var childProps = {};
+  if (children.props.tabIndex === undefined) {
+    childProps.tabIndex = '-1';
+  }
+
+  // It's a Transition like component
+  if (hasTransition) {
+    var _getTransitionProps = getTransitionProps(),
+      onEnter = _getTransitionProps.onEnter,
+      onExited = _getTransitionProps.onExited;
+    childProps.onEnter = onEnter;
+    childProps.onExited = onExited;
+  }
   var RootSlot = (_ref2 = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref2 : ModalRoot;
   var BackdropSlot = (_ref3 = (_slots$backdrop = slots == null ? void 0 : slots.backdrop) != null ? _slots$backdrop : components.Backdrop) != null ? _ref3 : BackdropComponent;
   var rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
   var backdropSlotProps = (_slotProps$backdrop = slotProps == null ? void 0 : slotProps.backdrop) != null ? _slotProps$backdrop : componentsProps.backdrop;
-  return /*#__PURE__*/_jsx(ModalUnstyled, _extends({
-    slots: {
-      root: RootSlot,
-      backdrop: BackdropSlot
-    },
-    slotProps: {
-      root: function root() {
-        return _extends({}, resolveComponentProps(rootSlotProps, ownerState), !isHostComponent(RootSlot) && {
-          as: component,
-          theme: theme
-        }, {
-          className: clsx(className, rootSlotProps == null ? void 0 : rootSlotProps.className, classes == null ? void 0 : classes.root, !ownerState.open && ownerState.exited && (classes == null ? void 0 : classes.hidden))
-        });
-      },
-      backdrop: function backdrop() {
-        return _extends({}, BackdropProps, resolveComponentProps(backdropSlotProps, ownerState), {
-          className: clsx(backdropSlotProps == null ? void 0 : backdropSlotProps.className, BackdropProps == null ? void 0 : BackdropProps.className, classes == null ? void 0 : classes.backdrop)
-        });
-      }
+  var rootProps = useSlotProps({
+    elementType: RootSlot,
+    externalSlotProps: rootSlotProps,
+    externalForwardedProps: other,
+    getSlotProps: getRootProps,
+    additionalProps: {
+      ref: ref,
+      as: component
     },
-    onTransitionEnter: function onTransitionEnter() {
-      return setExited(false);
-    },
-    onTransitionExited: function onTransitionExited() {
-      return setExited(true);
+    ownerState: ownerState,
+    className: clsx(className, rootSlotProps == null ? void 0 : rootSlotProps.className, classes == null ? void 0 : classes.root, !ownerState.open && ownerState.exited && (classes == null ? void 0 : classes.hidden))
+  });
+  var backdropProps = useSlotProps({
+    elementType: BackdropSlot,
+    externalSlotProps: backdropSlotProps,
+    additionalProps: BackdropProps,
+    getSlotProps: function getSlotProps(otherHandlers) {
+      return getBackdropProps(_extends({}, otherHandlers, {
+        onClick: function onClick(e) {
+          if (onBackdropClick) {
+            onBackdropClick(e);
+          }
+          if (otherHandlers != null && otherHandlers.onClick) {
+            otherHandlers.onClick(e);
+          }
+        }
+      }));
     },
-    ref: ref
-  }, other, commonProps, {
-    children: children
-  }));
+    className: clsx(backdropSlotProps == null ? void 0 : backdropSlotProps.className, BackdropProps == null ? void 0 : BackdropProps.className, classes == null ? void 0 : classes.backdrop),
+    ownerState: ownerState
+  });
+  if (!keepMounted && !open && (!hasTransition || exited)) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(Portal, {
+    ref: portalRef,
+    container: container,
+    disablePortal: disablePortal,
+    children: /*#__PURE__*/_jsxs(RootSlot, _extends({}, rootProps, {
+      children: [!hideBackdrop && BackdropComponent ? /*#__PURE__*/_jsx(BackdropSlot, _extends({}, backdropProps)) : null, /*#__PURE__*/_jsx(FocusTrap, {
+        disableEnforceFocus: disableEnforceFocus,
+        disableAutoFocus: disableAutoFocus,
+        disableRestoreFocus: disableRestoreFocus,
+        isEnabled: isTopModal,
+        open: open,
+        children: /*#__PURE__*/React.cloneElement(children, childProps)
+      })]
+    }))
+  });
 });
 process.env.NODE_ENV !== "production" ? Modal.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

package/legacy/Modal/index.js

@@ -2,4 +2,5 @@
 
 export { ModalManager } from '@mui/base/unstable_useModal';
 export { default } from './Modal';
-export * from './Modal';
+export { default as modalClasses } from './modalClasses';
+export * from './modalClasses';

package/legacy/Modal/modalClasses.js

@@ -0,0 +1,7 @@
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
+export function getModalUtilityClass(slot) {
+  return generateUtilityClass('MuiModal', slot);
+}
+var modalClasses = generateUtilityClasses('MuiModal', ['root', 'hidden', 'backdrop']);
+export default modalClasses;

package/legacy/Popover/Popover.js

@@ -123,7 +123,9 @@ var Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     _props$TransitionProp2 = _props$TransitionProp === void 0 ? {} : _props$TransitionProp,
     onEntering = _props$TransitionProp2.onEntering,
     TransitionProps = _objectWithoutProperties(_props$TransitionProp2, ["onEntering"]),
-    other = _objectWithoutProperties(props, ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "slots", "slotProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"]);
+    _props$disableScrollL = props.disableScrollLock,
+    disableScrollLock = _props$disableScrollL === void 0 ? false : _props$disableScrollL,
+    other = _objectWithoutProperties(props, ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "slots", "slotProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps", "disableScrollLock"]);
   var externalPaperSlotProps = (_slotProps$paper = slotProps == null ? void 0 : slotProps.paper) != null ? _slotProps$paper : PaperPropsProp;
   var paperRef = React.useRef();
   var handlePaperRef = useForkRef(paperRef, externalPaperSlotProps.ref);
@@ -208,11 +210,11 @@ var Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     var widthThreshold = containerWindow.innerWidth - marginThreshold;
 
     // Check if the vertical axis needs shifting
-    if (top < marginThreshold) {
+    if (marginThreshold !== null && top < marginThreshold) {
       var diff = top - marginThreshold;
       top -= diff;
       elemTransformOrigin.vertical += diff;
-    } else if (bottom > heightThreshold) {
+    } else if (marginThreshold !== null && bottom > heightThreshold) {
       var _diff = bottom - heightThreshold;
       top -= _diff;
       elemTransformOrigin.vertical += _diff;
@@ -224,7 +226,7 @@ var Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     }
 
     // Check if the horizontal axis needs shifting
-    if (left < marginThreshold) {
+    if (marginThreshold !== null && left < marginThreshold) {
       var _diff2 = left - marginThreshold;
       left -= _diff2;
       elemTransformOrigin.horizontal += _diff2;
@@ -257,6 +259,14 @@ var Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     element.style.transformOrigin = positioning.transformOrigin;
     setIsPositioned(true);
   }, [getPositioningStyle]);
+  React.useEffect(function () {
+    if (disableScrollLock) {
+      window.addEventListener('scroll', setPositioningStyles);
+    }
+    return function () {
+      return window.removeEventListener('scroll', setPositioningStyles);
+    };
+  }, [anchorEl, disableScrollLock, setPositioningStyles]);
   var handleEntering = function handleEntering(element, isAppearing) {
     if (onEntering) {
       onEntering(element, isAppearing);
@@ -337,7 +347,8 @@ var Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     rootSlotPropsProp = _useSlotProps.slotProps,
     rootProps = _objectWithoutProperties(_useSlotProps, ["slotProps"]);
   return /*#__PURE__*/_jsx(RootSlot, _extends({}, rootProps, !isHostComponent(RootSlot) && {
-    slotProps: rootSlotPropsProp
+    slotProps: rootSlotPropsProp,
+    disableScrollLock: disableScrollLock
   }, {
     children: /*#__PURE__*/_jsx(TransitionComponent, _extends({
       appear: true,
@@ -432,6 +443,11 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
    * so it's simply `document.body` most of the time.
    */
   container: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([HTMLElementType, PropTypes.func]),
+  /**
+   * Disable the scroll lock behavior.
+   * @default false
+   */
+  disableScrollLock: PropTypes.bool,
   /**
    * The elevation of the popover.
    * @default 8
@@ -439,6 +455,7 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
   elevation: integerPropType,
   /**
    * Specifies how close to the edge of the window the popover can appear.
+   * If null, the popover will not be constrained by the window.
    * @default 16
    */
   marginThreshold: PropTypes.number,

package/legacy/Select/Select.js

@@ -83,6 +83,8 @@ var Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
     classes: classesProp
   });
   var classes = useUtilityClasses(ownerState);
+  var root = classes.root,
+    restOfClasses = _objectWithoutProperties(classes, ["root"]);
   var InputComponent = input || {
     standard: /*#__PURE__*/_jsx(StyledInput, {
       ownerState: ownerState
@@ -125,13 +127,13 @@ var Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
           id: id
         }, SelectDisplayProps)
       }, inputProps, {
-        classes: inputProps ? deepmerge(classes, inputProps.classes) : classes
+        classes: inputProps ? deepmerge(restOfClasses, inputProps.classes) : restOfClasses
       }, input ? input.props.inputProps : {})
     }, multiple && native && variant === 'outlined' ? {
       notched: true
     } : {}, {
       ref: inputComponentRef,
-      className: clsx(InputComponent.props.className, className)
+      className: clsx(InputComponent.props.className, className, classes.root)
     }, !input && {
       variant: variant
     }, other))

package/legacy/Select/selectClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '../generateUtilityClass';
 export function getSelectUtilityClasses(slot) {
   return generateUtilityClass('MuiSelect', slot);
 }
-var selectClasses = generateUtilityClasses('MuiSelect', ['select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'focused', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput', 'error']);
+var selectClasses = generateUtilityClasses('MuiSelect', ['root', 'select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'focused', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput', 'error']);
 export default selectClasses;

package/legacy/Skeleton/Skeleton.js

@@ -70,11 +70,11 @@ var SkeletonRoot = styled('span', {
   });
 }, function (_ref2) {
   var ownerState = _ref2.ownerState;
-  return ownerState.animation === 'pulse' && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      animation: ", " 1.5s ease-in-out 0.5s infinite;\n    "])), pulseKeyframe);
+  return ownerState.animation === 'pulse' && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      animation: ", " 2s ease-in-out 0.5s infinite;\n    "])), pulseKeyframe);
 }, function (_ref3) {
   var ownerState = _ref3.ownerState,
     theme = _ref3.theme;
-  return ownerState.animation === 'wave' && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      position: relative;\n      overflow: hidden;\n\n      /* Fix bug in Safari https://bugs.webkit.org/show_bug.cgi?id=68196 */\n      -webkit-mask-image: -webkit-radial-gradient(white, black);\n\n      &::after {\n        animation: ", " 1.6s linear 0.5s infinite;\n        background: linear-gradient(\n          90deg,\n          transparent,\n          ", ",\n          transparent\n        );\n        content: '';\n        position: absolute;\n        transform: translateX(-100%); /* Avoid flash during server-side hydration */\n        bottom: 0;\n        left: 0;\n        right: 0;\n        top: 0;\n      }\n    "])), waveKeyframe, (theme.vars || theme).palette.action.hover);
+  return ownerState.animation === 'wave' && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      position: relative;\n      overflow: hidden;\n\n      /* Fix bug in Safari https://bugs.webkit.org/show_bug.cgi?id=68196 */\n      -webkit-mask-image: -webkit-radial-gradient(white, black);\n\n      &::after {\n        animation: ", " 2s linear 0.5s infinite;\n        background: linear-gradient(\n          90deg,\n          transparent,\n          ", ",\n          transparent\n        );\n        content: '';\n        position: absolute;\n        transform: translateX(-100%); /* Avoid flash during server-side hydration */\n        bottom: 0;\n        left: 0;\n        right: 0;\n        top: 0;\n      }\n    "])), waveKeyframe, (theme.vars || theme).palette.action.hover);
 });
 var Skeleton = /*#__PURE__*/React.forwardRef(function Skeleton(inProps, ref) {
   var props = useThemeProps({