@mui/material 5.12.1 → 5.12.3

package/Popper/Popper.d.ts

@@ -1,8 +1,13 @@
-import { PopperUnstyledProps } from '@mui/base/PopperUnstyled';
+import { PopperProps as BasePopperProps } from '@mui/base/Popper';
 import { SxProps } from '@mui/system';
 import * as React from 'react';
 import { Theme } from '../styles';
-export type PopperProps = Omit<PopperUnstyledProps, 'direction'> & {
+export type PopperProps = Omit<BasePopperProps, 'direction'> & {
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component?: React.ElementType;
     /**
      * The components used for each slot inside the Popper.
      * Either a string to use a HTML element or a component.
@@ -15,7 +20,7 @@ export type PopperProps = Omit<PopperUnstyledProps, 'direction'> & {
      * The props used for each slot inside the Popper.
      * @default {}
      */
-    componentsProps?: PopperUnstyledProps['slotProps'];
+    componentsProps?: BasePopperProps['slotProps'];
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
@@ -33,7 +38,12 @@ export type PopperProps = Omit<PopperUnstyledProps, 'direction'> & {
  *
  * - [Popper API](https://mui.com/material-ui/api/popper/)
  */
-declare const Popper: React.ForwardRefExoticComponent<Omit<PopperUnstyledProps<"div", {}>, "direction"> & {
+declare const Popper: React.ForwardRefExoticComponent<Omit<BasePopperProps<"div">, "direction"> & {
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component?: React.ElementType<any> | undefined;
     /**
      * The components used for each slot inside the Popper.
      * Either a string to use a HTML element or a component.
@@ -46,7 +56,7 @@ declare const Popper: React.ForwardRefExoticComponent<Omit<PopperUnstyledProps<"
      * The props used for each slot inside the Popper.
      * @default {}
      */
-    componentsProps?: PopperUnstyledProps['slotProps'];
+    componentsProps?: BasePopperProps['slotProps'];
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */

package/Popper/Popper.js

@@ -1,14 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["components", "componentsProps", "slots", "slotProps"];
-import PopperUnstyled from '@mui/base/PopperUnstyled';
+const _excluded = ["anchorEl", "component", "components", "componentsProps", "container", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "transition", "slots", "slotProps"];
+import BasePopper from '@mui/base/Popper';
 import { useThemeWithoutDefault as useTheme } from '@mui/system';
 import { HTMLElementType, refType } from '@mui/utils';
 import PropTypes from 'prop-types';
 import * as React from 'react';
 import { styled, useThemeProps } from '../styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-const PopperRoot = styled(PopperUnstyled, {
+const PopperRoot = styled(BasePopper, {
   name: 'MuiPopper',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
@@ -34,20 +34,44 @@ const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
     name: 'MuiPopper'
   });
   const {
+      anchorEl,
+      component,
       components,
       componentsProps,
+      container,
+      disablePortal,
+      keepMounted,
+      modifiers,
+      open,
+      placement,
+      popperOptions,
+      popperRef,
+      transition,
       slots,
       slotProps
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const RootComponent = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components == null ? void 0 : components.Root;
+  const otherProps = _extends({
+    anchorEl,
+    container,
+    disablePortal,
+    keepMounted,
+    modifiers,
+    open,
+    placement,
+    popperOptions,
+    popperRef,
+    transition
+  }, other);
   return /*#__PURE__*/_jsx(PopperRoot, _extends({
+    as: component,
     direction: theme == null ? void 0 : theme.direction,
     slots: {
       root: RootComponent
     },
     slotProps: slotProps != null ? slotProps : componentsProps
-  }, other, {
+  }, otherProps, {
     ref: ref
   }));
 });
@@ -68,9 +92,10 @@ process.env.NODE_ENV !== "production" ? Popper.propTypes /* remove-proptypes */
    */
   children: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.node, PropTypes.func]),
   /**
-   * @ignore
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
    */
-  component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
+  component: PropTypes.elementType,
   /**
    * The components used for each slot inside the Popper.
    * Either a string to use a HTML element or a component.

package/Popper/index.d.ts

@@ -1,3 +1,3 @@
 export { default } from './Popper';
 export * from './Popper';
-export { PopperPlacementType } from '@mui/base/PopperUnstyled';
+export { PopperPlacementType } from '@mui/base/Popper';

package/Select/SelectInput.js

@@ -134,7 +134,10 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       readOnly,
       renderValue,
       SelectDisplayProps = {},
-      tabIndex: tabIndexProp,
+      tabIndex: tabIndexProp
+      // catching `type` from Input which makes no sense for SelectInput
+      ,
+
       value: valueProp,
       variant = 'standard'
     } = props,

package/Slider/Slider.js

@@ -509,7 +509,7 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     trackOffset,
     trackLeap
   } = useSlider(_extends({}, ownerState, {
-    ref
+    rootRef: ref
   }));
   ownerState.marked = marks.length > 0 && marks.some(mark => mark.label);
   ownerState.dragging = dragging;

package/Snackbar/Snackbar.js

@@ -123,15 +123,16 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
   const {
     getRootProps,
     onClickAway
-  } = useSnackbar(_extends({}, ownerState, {
-    ref
-  }));
+  } = useSnackbar(_extends({}, ownerState));
   const [exited, setExited] = React.useState(true);
   const rootProps = useSlotProps({
     elementType: SnackbarRoot,
     getSlotProps: getRootProps,
     externalForwardedProps: other,
     ownerState,
+    additionalProps: {
+      ref
+    },
     className: [classes.root, className]
   });
   const handleExited = node => {

package/SwipeableDrawer/SwipeableDrawer.js

@@ -145,7 +145,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
       SwipeAreaProps,
       swipeAreaWidth = 20,
       transitionDuration = transitionDurationDefault,
-      variant = 'temporary'
+      variant = 'temporary' // Mobile first.
     } = props,
     ModalPropsProp = _objectWithoutPropertiesLoose(props.ModalProps, _excluded),
     other = _objectWithoutPropertiesLoose(props, _excluded2);

package/TextField/TextField.d.ts

@@ -111,6 +111,10 @@ 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.
    */
@@ -226,7 +230,14 @@ export interface OutlinedTextFieldProps extends BaseTextFieldProps {
   InputProps?: Partial<OutlinedInputProps>;
 }
 
-export type TextFieldProps = StandardTextFieldProps | FilledTextFieldProps | OutlinedTextFieldProps;
+export type TextFieldVariants = 'outlined' | 'standard' | 'filled';
+
+export type TextFieldProps<Variant extends TextFieldVariants = TextFieldVariants> =
+  Variant extends 'filled'
+    ? FilledTextFieldProps
+    : Variant extends 'standard'
+    ? StandardTextFieldProps
+    : OutlinedTextFieldProps;
 
 /**
  * The `TextField` is a convenience wrapper for the most common cases (80%).
@@ -270,4 +281,12 @@ export type TextFieldProps = StandardTextFieldProps | FilledTextFieldProps | Out
  * - [TextField API](https://mui.com/material-ui/api/text-field/)
  * - inherits [FormControl API](https://mui.com/material-ui/api/form-control/)
  */
-export default function TextField(props: TextFieldProps): JSX.Element;
+export default function TextField<Variant extends TextFieldVariants>(
+  props: {
+    /**
+     * The variant to use.
+     * @default 'outlined'
+     */
+    variant?: Variant;
+  } & Omit<TextFieldProps, 'variant'>,
+): JSX.Element;

package/TextField/TextField.js

@@ -1,6 +1,6 @@
 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", "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", "onClick", "onFocus", "placeholder", "required", "rows", "select", "SelectProps", "type", "value", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -99,6 +99,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
       name,
       onBlur,
       onChange,
+      onClick,
       onFocus,
       placeholder,
       required = false,
@@ -163,6 +164,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
     onBlur: onBlur,
     onChange: onChange,
     onFocus: onFocus,
+    onClick: onClick,
     placeholder: placeholder,
     inputProps: inputProps
   }, InputMore, InputProps));
@@ -321,6 +323,10 @@ 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.12.1
+ * @mui/material v5.12.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/ButtonGroup/ButtonGroup.js

@@ -67,11 +67,15 @@ var ButtonGroupRoot = styled('div', {
     }, ownerState.orientation === 'vertical' && {
       borderBottomRightRadius: 0,
       borderBottomLeftRadius: 0
-    }, ownerState.variant === 'text' && ownerState.orientation === 'horizontal' && {
+    }, ownerState.variant === 'text' && ownerState.orientation === 'horizontal' && _defineProperty({
       borderRight: theme.vars ? "1px solid rgba(".concat(theme.vars.palette.common.onBackgroundChannel, " / 0.23)") : "1px solid ".concat(theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)')
-    }, ownerState.variant === 'text' && ownerState.orientation === 'vertical' && {
+    }, "&.".concat(buttonGroupClasses.disabled), {
+      borderRight: "1px solid ".concat((theme.vars || theme).palette.action.disabled)
+    }), ownerState.variant === 'text' && ownerState.orientation === 'vertical' && _defineProperty({
       borderBottom: theme.vars ? "1px solid rgba(".concat(theme.vars.palette.common.onBackgroundChannel, " / 0.23)") : "1px solid ".concat(theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)')
-    }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
+    }, "&.".concat(buttonGroupClasses.disabled), {
+      borderBottom: "1px solid ".concat((theme.vars || theme).palette.action.disabled)
+    }), ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
       borderColor: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / 0.5)") : alpha(theme.palette[ownerState.color].main, 0.5)
     }, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
       borderRightColor: 'transparent'

package/legacy/Divider/Divider.js

@@ -66,38 +66,38 @@ var DividerRoot = styled('div', {
     height: 'auto'
   });
 }, function (_ref2) {
-  var theme = _ref2.theme,
-    ownerState = _ref2.ownerState;
+  var ownerState = _ref2.ownerState;
   return _extends({}, ownerState.children && {
     display: 'flex',
     whiteSpace: 'nowrap',
     textAlign: 'center',
     border: 0,
     '&::before, &::after': {
-      position: 'relative',
-      width: '100%',
-      borderTop: "thin solid ".concat((theme.vars || theme).palette.divider),
-      top: '50%',
       content: '""',
-      transform: 'translateY(50%)'
+      alignSelf: 'center'
     }
   });
 }, function (_ref3) {
   var theme = _ref3.theme,
     ownerState = _ref3.ownerState;
+  return _extends({}, ownerState.children && ownerState.orientation !== 'vertical' && {
+    '&::before, &::after': {
+      width: '100%',
+      borderTop: "thin solid ".concat((theme.vars || theme).palette.divider)
+    }
+  });
+}, function (_ref4) {
+  var theme = _ref4.theme,
+    ownerState = _ref4.ownerState;
   return _extends({}, ownerState.children && ownerState.orientation === 'vertical' && {
     flexDirection: 'column',
     '&::before, &::after': {
       height: '100%',
-      top: '0%',
-      left: '50%',
-      borderTop: 0,
-      borderLeft: "thin solid ".concat((theme.vars || theme).palette.divider),
-      transform: 'translateX(0%)'
+      borderLeft: "thin solid ".concat((theme.vars || theme).palette.divider)
     }
   });
-}, function (_ref4) {
-  var ownerState = _ref4.ownerState;
+}, function (_ref5) {
+  var ownerState = _ref5.ownerState;
   return _extends({}, ownerState.textAlign === 'right' && ownerState.orientation !== 'vertical' && {
     '&::before': {
       width: '90%'
@@ -121,9 +121,9 @@ var DividerWrapper = styled('span', {
     var ownerState = props.ownerState;
     return [styles.wrapper, ownerState.orientation === 'vertical' && styles.wrapperVertical];
   }
-})(function (_ref5) {
-  var theme = _ref5.theme,
-    ownerState = _ref5.ownerState;
+})(function (_ref6) {
+  var theme = _ref6.theme,
+    ownerState = _ref6.ownerState;
   return _extends({
     display: 'inline-block',
     paddingLeft: "calc(".concat(theme.spacing(1), " * 1.2)"),

package/legacy/Drawer/Drawer.js

@@ -138,10 +138,10 @@ var Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
     elevation = _props$elevation === void 0 ? 16 : _props$elevation,
     _props$hideBackdrop = props.hideBackdrop,
     hideBackdrop = _props$hideBackdrop === void 0 ? false : _props$hideBackdrop,
-    _props$ModalProps = props.ModalProps;
-  _props$ModalProps = _props$ModalProps === void 0 ? {} : _props$ModalProps;
-  var BackdropPropsProp = _props$ModalProps.BackdropProps,
-    ModalProps = _objectWithoutProperties(_props$ModalProps, ["BackdropProps"]),
+    _props$ModalProps = props.ModalProps,
+    _props$ModalProps2 = _props$ModalProps === void 0 ? {} : _props$ModalProps,
+    BackdropPropsProp = _props$ModalProps2.BackdropProps,
+    ModalProps = _objectWithoutProperties(_props$ModalProps2, ["BackdropProps"]),
     onClose = props.onClose,
     _props$open = props.open,
     open = _props$open === void 0 ? false : _props$open,

package/legacy/FormControl/FormControl.js

@@ -145,7 +145,7 @@ var FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps, re
           if (!isMuiElement(child, ['Input', 'Select'])) {
             return;
           }
-          if (isFilled(child.props, true)) {
+          if (isFilled(child.props, true) || isFilled(child.props.inputProps, true)) {
             initialFilled = true;
           }
         });

package/legacy/InputBase/InputBase.js

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

package/legacy/ListItem/ListItem.js

@@ -142,10 +142,10 @@ var ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
     componentsProps = _props$componentsProp === void 0 ? {} : _props$componentsProp,
     _props$ContainerCompo = props.ContainerComponent,
     ContainerComponent = _props$ContainerCompo === void 0 ? 'li' : _props$ContainerCompo,
-    _props$ContainerProps = props.ContainerProps;
-  _props$ContainerProps = _props$ContainerProps === void 0 ? {} : _props$ContainerProps;
-  var ContainerClassName = _props$ContainerProps.className,
-    ContainerProps = _objectWithoutProperties(_props$ContainerProps, ["className"]),
+    _props$ContainerProps = props.ContainerProps,
+    _props$ContainerProps2 = _props$ContainerProps === void 0 ? {} : _props$ContainerProps,
+    ContainerClassName = _props$ContainerProps2.className,
+    ContainerProps = _objectWithoutProperties(_props$ContainerProps2, ["className"]),
     _props$dense = props.dense,
     dense = _props$dense === void 0 ? false : _props$dense,
     _props$disabled = props.disabled,

package/legacy/Menu/Menu.js

@@ -84,10 +84,10 @@ var Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
     PopoverClasses = props.PopoverClasses,
     _props$transitionDura = props.transitionDuration,
     transitionDuration = _props$transitionDura === void 0 ? 'auto' : _props$transitionDura,
-    _props$TransitionProp = props.TransitionProps;
-  _props$TransitionProp = _props$TransitionProp === void 0 ? {} : _props$TransitionProp;
-  var onEntering = _props$TransitionProp.onEntering,
-    TransitionProps = _objectWithoutProperties(_props$TransitionProp, ["onEntering"]),
+    _props$TransitionProp = props.TransitionProps,
+    _props$TransitionProp2 = _props$TransitionProp === void 0 ? {} : _props$TransitionProp,
+    onEntering = _props$TransitionProp2.onEntering,
+    TransitionProps = _objectWithoutProperties(_props$TransitionProp2, ["onEntering"]),
     _props$variant = props.variant,
     variant = _props$variant === void 0 ? 'selectedMenu' : _props$variant,
     other = _objectWithoutProperties(props, ["autoFocus", "children", "disableAutoFocusItem", "MenuListProps", "onClose", "open", "PaperProps", "PopoverClasses", "transitionDuration", "TransitionProps", "variant"]);

package/legacy/Modal/Modal.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import ModalUnstyled, { modalUnstyledClasses } from '@mui/base/ModalUnstyled';
+import ModalUnstyled, { modalClasses as modalUnstyledClasses } from '@mui/base/Modal';
 import { isHostComponent, resolveComponentProps } from '@mui/base/utils';
 import { elementAcceptingRef, HTMLElementType } from '@mui/utils';
 import styled from '../styles/styled';
@@ -69,6 +69,7 @@ var Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     _props$closeAfterTran = props.closeAfterTransition,
     closeAfterTransition = _props$closeAfterTran === void 0 ? false : _props$closeAfterTran,
     children = props.children,
+    container = props.container,
     component = props.component,
     _props$components = props.components,
     components = _props$components === void 0 ? {} : _props$components,
@@ -90,14 +91,18 @@ var Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     hideBackdrop = _props$hideBackdrop === void 0 ? false : _props$hideBackdrop,
     _props$keepMounted = props.keepMounted,
     keepMounted = _props$keepMounted === void 0 ? false : _props$keepMounted,
+    onBackdropClick = props.onBackdropClick,
+    onClose = props.onClose,
+    open = props.open,
     slotProps = props.slotProps,
     slots = props.slots,
     theme = props.theme,
-    other = _objectWithoutProperties(props, ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "slotProps", "slots", "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,
     closeAfterTransition: closeAfterTransition,
     disableAutoFocus: disableAutoFocus,
     disableEnforceFocus: disableEnforceFocus,
@@ -106,7 +111,10 @@ var Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     disableRestoreFocus: disableRestoreFocus,
     disableScrollLock: disableScrollLock,
     hideBackdrop: hideBackdrop,
-    keepMounted: keepMounted
+    keepMounted: keepMounted,
+    onBackdropClick: onBackdropClick,
+    onClose: onClose,
+    open: open
   };
   var ownerState = _extends({}, props, commonProps, {
     exited: exited

package/legacy/Modal/index.js

@@ -1,3 +1,3 @@
-export * from '@mui/base/ModalUnstyled';
+export { ModalManager } from '@mui/base/Modal';
 export { default } from './Modal';
 export * from './Modal';

package/legacy/Popover/Popover.js

@@ -114,10 +114,10 @@ var Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     TransitionComponent = _props$TransitionComp === void 0 ? Grow : _props$TransitionComp,
     _props$transitionDura = props.transitionDuration,
     transitionDurationProp = _props$transitionDura === void 0 ? 'auto' : _props$transitionDura,
-    _props$TransitionProp = props.TransitionProps;
-  _props$TransitionProp = _props$TransitionProp === void 0 ? {} : _props$TransitionProp;
-  var onEntering = _props$TransitionProp.onEntering,
-    TransitionProps = _objectWithoutProperties(_props$TransitionProp, ["onEntering"]),
+    _props$TransitionProp = props.TransitionProps,
+    _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", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"]);
   var paperRef = React.useRef();
   var handlePaperRef = useForkRef(paperRef, PaperProps.ref);

package/legacy/Popper/Popper.js

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import PopperUnstyled from '@mui/base/PopperUnstyled';
+import BasePopper from '@mui/base/Popper';
 import { useThemeWithoutDefault as useTheme } from '@mui/system';
 import { HTMLElementType, refType } from '@mui/utils';
 import PropTypes from 'prop-types';
 import * as React from 'react';
 import { styled, useThemeProps } from '../styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-var PopperRoot = styled(PopperUnstyled, {
+var PopperRoot = styled(BasePopper, {
   name: 'MuiPopper',
   slot: 'Root',
   overridesResolver: function overridesResolver(props, styles) {
@@ -34,19 +34,43 @@ var Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
     props: inProps,
     name: 'MuiPopper'
   });
-  var components = props.components,
+  var anchorEl = props.anchorEl,
+    component = props.component,
+    components = props.components,
     componentsProps = props.componentsProps,
+    container = props.container,
+    disablePortal = props.disablePortal,
+    keepMounted = props.keepMounted,
+    modifiers = props.modifiers,
+    open = props.open,
+    placement = props.placement,
+    popperOptions = props.popperOptions,
+    popperRef = props.popperRef,
+    transition = props.transition,
     slots = props.slots,
     slotProps = props.slotProps,
-    other = _objectWithoutProperties(props, ["components", "componentsProps", "slots", "slotProps"]);
+    other = _objectWithoutProperties(props, ["anchorEl", "component", "components", "componentsProps", "container", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "transition", "slots", "slotProps"]);
   var RootComponent = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components == null ? void 0 : components.Root;
+  var otherProps = _extends({
+    anchorEl: anchorEl,
+    container: container,
+    disablePortal: disablePortal,
+    keepMounted: keepMounted,
+    modifiers: modifiers,
+    open: open,
+    placement: placement,
+    popperOptions: popperOptions,
+    popperRef: popperRef,
+    transition: transition
+  }, other);
   return /*#__PURE__*/_jsx(PopperRoot, _extends({
+    as: component,
     direction: theme == null ? void 0 : theme.direction,
     slots: {
       root: RootComponent
     },
     slotProps: slotProps != null ? slotProps : componentsProps
-  }, other, {
+  }, otherProps, {
     ref: ref
   }));
 });
@@ -67,9 +91,10 @@ process.env.NODE_ENV !== "production" ? Popper.propTypes /* remove-proptypes */
    */
   children: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.node, PropTypes.func]),
   /**
-   * @ignore
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
    */
-  component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
+  component: PropTypes.elementType,
   /**
    * The components used for each slot inside the Popper.
    * Either a string to use a HTML element or a component.

package/legacy/Slider/Slider.js

@@ -514,7 +514,7 @@ var Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     valueLabelFormat: valueLabelFormat
   });
   var _useSlider = useSlider(_extends({}, ownerState, {
-      ref: ref
+      rootRef: ref
     })),
     axisProps = _useSlider.axisProps,
     getRootProps = _useSlider.getRootProps,

package/legacy/Snackbar/Snackbar.js

@@ -76,13 +76,13 @@ var Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
     exit: theme.transitions.duration.leavingScreen
   };
   var action = props.action,
-    _props$anchorOrigin = props.anchorOrigin;
-  _props$anchorOrigin = _props$anchorOrigin === void 0 ? {
-    vertical: 'bottom',
-    horizontal: 'left'
-  } : _props$anchorOrigin;
-  var vertical = _props$anchorOrigin.vertical,
-    horizontal = _props$anchorOrigin.horizontal,
+    _props$anchorOrigin = props.anchorOrigin,
+    _props$anchorOrigin2 = _props$anchorOrigin === void 0 ? {
+      vertical: 'bottom',
+      horizontal: 'left'
+    } : _props$anchorOrigin,
+    vertical = _props$anchorOrigin2.vertical,
+    horizontal = _props$anchorOrigin2.horizontal,
     _props$autoHideDurati = props.autoHideDuration,
     autoHideDuration = _props$autoHideDurati === void 0 ? null : _props$autoHideDurati,
     children = props.children,
@@ -103,11 +103,11 @@ var Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
     TransitionComponent = _props$TransitionComp === void 0 ? Grow : _props$TransitionComp,
     _props$transitionDura = props.transitionDuration,
     transitionDuration = _props$transitionDura === void 0 ? defaultTransitionDuration : _props$transitionDura,
-    _props$TransitionProp = props.TransitionProps;
-  _props$TransitionProp = _props$TransitionProp === void 0 ? {} : _props$TransitionProp;
-  var onEnter = _props$TransitionProp.onEnter,
-    onExited = _props$TransitionProp.onExited,
-    TransitionProps = _objectWithoutProperties(_props$TransitionProp, ["onEnter", "onExited"]),
+    _props$TransitionProp = props.TransitionProps,
+    _props$TransitionProp2 = _props$TransitionProp === void 0 ? {} : _props$TransitionProp,
+    onEnter = _props$TransitionProp2.onEnter,
+    onExited = _props$TransitionProp2.onExited,
+    TransitionProps = _objectWithoutProperties(_props$TransitionProp2, ["onEnter", "onExited"]),
     other = _objectWithoutProperties(props, ["action", "anchorOrigin", "autoHideDuration", "children", "className", "ClickAwayListenerProps", "ContentProps", "disableWindowBlurListener", "message", "onBlur", "onClose", "onFocus", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "TransitionComponent", "transitionDuration", "TransitionProps"]);
   var ownerState = _extends({}, props, {
     anchorOrigin: {
@@ -120,9 +120,7 @@ var Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
     transitionDuration: transitionDuration
   });
   var classes = useUtilityClasses(ownerState);
-  var _useSnackbar = useSnackbar(_extends({}, ownerState, {
-      ref: ref
-    })),
+  var _useSnackbar = useSnackbar(_extends({}, ownerState)),
     getRootProps = _useSnackbar.getRootProps,
     onClickAway = _useSnackbar.onClickAway;
   var _React$useState = React.useState(true),
@@ -133,6 +131,9 @@ var Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
     getSlotProps: getRootProps,
     externalForwardedProps: other,
     ownerState: ownerState,
+    additionalProps: {
+      ref: ref
+    },
     className: [classes.root, className]
   });
   var handleExited = function handleExited(node) {