@mui/material 5.12.2 → 5.13.0

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.2
+ * @mui/material v5.13.0
  *
  * @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/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/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

@@ -53,7 +53,6 @@ var Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
   var RootComponent = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components == null ? void 0 : components.Root;
   var otherProps = _extends({
     anchorEl: anchorEl,
-    component: component,
     container: container,
     disablePortal: disablePortal,
     keepMounted: keepMounted,
@@ -65,6 +64,7 @@ var Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
     transition: transition
   }, other);
   return /*#__PURE__*/_jsx(PopperRoot, _extends({
+    as: component,
     direction: theme == null ? void 0 : theme.direction,
     slots: {
       root: RootComponent
@@ -91,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/Select/SelectInput.js

@@ -237,13 +237,12 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
 
   // Support autofill.
   var handleChange = function handleChange(event) {
-    var index = childrenArray.map(function (child) {
-      return child.props.value;
-    }).indexOf(event.target.value);
-    if (index === -1) {
+    var child = childrenArray.find(function (childItem) {
+      return childItem.props.value === event.target.value;
+    });
+    if (child === undefined) {
       return;
     }
-    var child = childrenArray[index];
     setValueState(child.props.value);
     if (onChange) {
       onChange(event, child);

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) {

package/legacy/SpeedDial/SpeedDial.js

@@ -130,10 +130,10 @@ var SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref) {
     exit: theme.transitions.duration.leavingScreen
   };
   var ariaLabel = props.ariaLabel,
-    _props$FabProps = props.FabProps;
-  _props$FabProps = _props$FabProps === void 0 ? {} : _props$FabProps;
-  var origDialButtonRef = _props$FabProps.ref,
-    FabProps = _objectWithoutProperties(_props$FabProps, ["ref"]),
+    _props$FabProps = props.FabProps,
+    _props$FabProps2 = _props$FabProps === void 0 ? {} : _props$FabProps,
+    origDialButtonRef = _props$FabProps2.ref,
+    FabProps = _objectWithoutProperties(_props$FabProps2, ["ref"]),
     childrenProp = props.children,
     className = props.className,
     _props$direction = props.direction,
@@ -329,10 +329,10 @@ var SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref) {
   });
   var children = allItems.map(function (child, index) {
     var _child$props = child.props,
-      _child$props$FabProps = _child$props.FabProps;
-    _child$props$FabProps = _child$props$FabProps === void 0 ? {} : _child$props$FabProps;
-    var origButtonRef = _child$props$FabProps.ref,
-      ChildFabProps = _objectWithoutProperties(_child$props$FabProps, ["ref"]),
+      _child$props$FabProps = _child$props.FabProps,
+      _child$props$FabProps2 = _child$props$FabProps === void 0 ? {} : _child$props$FabProps,
+      origButtonRef = _child$props$FabProps2.ref,
+      ChildFabProps = _objectWithoutProperties(_child$props$FabProps2, ["ref"]),
       tooltipPlacementProp = _child$props.tooltipPlacement;
     var tooltipPlacement = tooltipPlacementProp || (getOrientation(direction) === 'vertical' ? 'left' : 'top');
     return /*#__PURE__*/React.cloneElement(child, {

package/legacy/SwipeableDrawer/SwipeableDrawer.js

@@ -138,10 +138,10 @@ var SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(inP
     allowSwipeInChildren = _props$allowSwipeInCh === void 0 ? false : _props$allowSwipeInCh,
     _props$minFlingVeloci = props.minFlingVelocity,
     minFlingVelocity = _props$minFlingVeloci === void 0 ? 450 : _props$minFlingVeloci,
-    _props$ModalProps = props.ModalProps;
-  _props$ModalProps = _props$ModalProps === void 0 ? {} : _props$ModalProps;
-  var BackdropProps = _props$ModalProps.BackdropProps,
-    ModalPropsProp = _objectWithoutProperties(_props$ModalProps, ["BackdropProps"]),
+    _props$ModalProps = props.ModalProps,
+    _props$ModalProps2 = _props$ModalProps === void 0 ? {} : _props$ModalProps,
+    BackdropProps = _props$ModalProps2.BackdropProps,
+    ModalPropsProp = _objectWithoutProperties(_props$ModalProps2, ["BackdropProps"]),
     onClose = props.onClose,
     onOpen = props.onOpen,
     _props$open = props.open,

package/legacy/TextField/TextField.js

@@ -103,6 +103,7 @@ var TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref) {
     name = props.name,
     onBlur = props.onBlur,
     onChange = props.onChange,
+    onClick = props.onClick,
     onFocus = props.onFocus,
     placeholder = props.placeholder,
     _props$required = props.required,
@@ -115,7 +116,7 @@ var TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref) {
     value = props.value,
     _props$variant = props.variant,
     variant = _props$variant === void 0 ? 'outlined' : _props$variant,
-    other = _objectWithoutProperties(props, ["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"]);
+    other = _objectWithoutProperties(props, ["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"]);
   var ownerState = _extends({}, props, {
     autoFocus: autoFocus,
     color: color,
@@ -169,6 +170,7 @@ var TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref) {
     onBlur: onBlur,
     onChange: onChange,
     onFocus: onFocus,
+    onClick: onClick,
     placeholder: placeholder,
     inputProps: inputProps
   }, InputMore, InputProps));
@@ -327,6 +329,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/legacy/index.js

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

package/legacy/useMediaQuery/useMediaQuery.js

@@ -7,6 +7,14 @@ import useEnhancedEffect from '../utils/useEnhancedEffect';
  * @deprecated Not used internally. Use `MediaQueryListEvent` from lib.dom.d.ts instead.
  */
 
+/**
+ * @deprecated Not used internally. Use `MediaQueryList` from lib.dom.d.ts instead.
+ */
+
+/**
+ * @deprecated Not used internally. Use `(event: MediaQueryListEvent) => void` instead.
+ */
+
 function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
   var _React$useState = React.useState(function () {
       if (noSsr && matchMedia) {

package/modern/BottomNavigationAction/BottomNavigationAction.js

@@ -86,7 +86,10 @@ const BottomNavigationAction = /*#__PURE__*/React.forwardRef(function BottomNavi
       icon,
       label,
       onChange,
-      onClick,
+      onClick
+      // eslint-disable-next-line react/prop-types -- private, always overridden by BottomNavigation
+      ,
+
       value
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);

package/modern/ButtonGroup/ButtonGroup.js

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

package/modern/Chip/Chip.js

@@ -293,7 +293,7 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
       size = 'medium',
       variant = 'filled',
       tabIndex,
-      skipFocusWhenDisabled = false
+      skipFocusWhenDisabled = false // TODO v6: Rename to `focusableWhenDisabled`.
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const chipRef = React.useRef(null);

package/modern/Divider/Divider.js

@@ -70,7 +70,6 @@ const DividerRoot = styled('div', {
   alignSelf: 'stretch',
   height: 'auto'
 }), ({
-  theme,
   ownerState
 }) => _extends({}, ownerState.children && {
   display: 'flex',
@@ -78,12 +77,16 @@ const DividerRoot = styled('div', {
   textAlign: 'center',
   border: 0,
   '&::before, &::after': {
-    position: 'relative',
-    width: '100%',
-    borderTop: `thin solid ${(theme.vars || theme).palette.divider}`,
-    top: '50%',
     content: '""',
-    transform: 'translateY(50%)'
+    alignSelf: 'center'
+  }
+}), ({
+  theme,
+  ownerState
+}) => _extends({}, ownerState.children && ownerState.orientation !== 'vertical' && {
+  '&::before, &::after': {
+    width: '100%',
+    borderTop: `thin solid ${(theme.vars || theme).palette.divider}`
   }
 }), ({
   theme,
@@ -92,11 +95,7 @@ const DividerRoot = styled('div', {
   flexDirection: 'column',
   '&::before, &::after': {
     height: '100%',
-    top: '0%',
-    left: '50%',
-    borderTop: 0,
-    borderLeft: `thin solid ${(theme.vars || theme).palette.divider}`,
-    transform: 'translateX(0%)'
+    borderLeft: `thin solid ${(theme.vars || theme).palette.divider}`
   }
 }), ({
   ownerState

package/modern/InputBase/InputBase.js

@@ -371,7 +371,7 @@ const 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/modern/Popper/Popper.js

@@ -53,7 +53,6 @@ const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
   const RootComponent = slots?.root ?? components?.Root;
   const otherProps = _extends({
     anchorEl,
-    component,
     container,
     disablePortal,
     keepMounted,
@@ -65,6 +64,7 @@ const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
     transition
   }, other);
   return /*#__PURE__*/_jsx(PopperRoot, _extends({
+    as: component,
     direction: theme?.direction,
     slots: {
       root: RootComponent
@@ -91,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/modern/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,
@@ -235,11 +238,10 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
 
   // Support autofill.
   const handleChange = event => {
-    const index = childrenArray.map(child => child.props.value).indexOf(event.target.value);
-    if (index === -1) {
+    const child = childrenArray.find(childItem => childItem.props.value === event.target.value);
+    if (child === undefined) {
       return;
     }
-    const child = childrenArray[index];
     setValueState(child.props.value);
     if (onChange) {
       onChange(event, child);

package/modern/Slider/Slider.js

@@ -508,7 +508,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;