@mui/material 5.12.1 → 5.12.3

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.1
+ * @mui/material v5.12.3
  *
  * @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/FormControl/FormControl.js

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

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/Modal/Modal.js

@@ -1,10 +1,10 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "slotProps", "slots", "theme"];
+const _excluded = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "open", "slotProps", "slots", "theme"];
 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 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
       className,
       closeAfterTransition = false,
       children,
+      container,
       component,
       components = {},
       componentsProps = {},
@@ -80,6 +81,9 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
       disableScrollLock = false,
       hideBackdrop = false,
       keepMounted = false,
+      onBackdropClick,
+      onClose,
+      open,
       slotProps,
       slots,
       // eslint-disable-next-line react/prop-types
@@ -88,6 +92,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const [exited, setExited] = React.useState(true);
   const commonProps = {
+    container,
     closeAfterTransition,
     disableAutoFocus,
     disableEnforceFocus,
@@ -96,7 +101,10 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     disableRestoreFocus,
     disableScrollLock,
     hideBackdrop,
-    keepMounted
+    keepMounted,
+    onBackdropClick,
+    onClose,
+    open
   };
   const ownerState = _extends({}, props, commonProps, {
     exited

package/modern/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/modern/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
@@ -33,20 +33,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 ?? 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?.direction,
     slots: {
       root: RootComponent
     },
     slotProps: 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/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,

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;

package/modern/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/modern/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/modern/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/modern/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/modern/useMediaQuery/useMediaQuery.js

@@ -6,6 +6,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) {
   const [match, setMatch] = React.useState(() => {
     if (noSsr && matchMedia) {

package/node/BottomNavigationAction/BottomNavigationAction.js

@@ -94,7 +94,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 = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);

package/node/ButtonBase/Ripple.js

@@ -13,8 +13,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
  * @ignore - internal component.
- */
-function Ripple(props) {
+ */function Ripple(props) {
   const {
     className,
     classes,

package/node/ButtonGroup/ButtonGroup.js

@@ -92,9 +92,15 @@ const ButtonGroupRoot = (0, _styled.default)('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.default.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.default.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)` : (0, _system.alpha)(theme.palette[ownerState.color].main, 0.5)
     }, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {

package/node/Chip/Chip.js

@@ -301,7 +301,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 = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const chipRef = React.useRef(null);

package/node/Divider/Divider.js

@@ -79,7 +79,6 @@ const DividerRoot = (0, _styled.default)('div', {
   alignSelf: 'stretch',
   height: 'auto'
 }), ({
-  theme,
   ownerState
 }) => (0, _extends2.default)({}, ownerState.children && {
   display: 'flex',
@@ -87,12 +86,16 @@ const DividerRoot = (0, _styled.default)('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
+}) => (0, _extends2.default)({}, ownerState.children && ownerState.orientation !== 'vertical' && {
+  '&::before, &::after': {
+    width: '100%',
+    borderTop: `thin solid ${(theme.vars || theme).palette.divider}`
   }
 }), ({
   theme,
@@ -101,11 +104,7 @@ const DividerRoot = (0, _styled.default)('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/node/FormControl/FormControl.js

@@ -147,7 +147,7 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
         if (!(0, _isMuiElement.default)(child, ['Input', 'Select'])) {
           return;
         }
-        if ((0, _utils.isFilled)(child.props, true)) {
+        if ((0, _utils.isFilled)(child.props, true) || (0, _utils.isFilled)(child.props.inputProps, true)) {
           initialFilled = true;
         }
       });

package/node/Grid/Grid.js

@@ -25,7 +25,16 @@ var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _GridContext = _interopRequireDefault(require("./GridContext"));
 var _gridClasses = _interopRequireWildcard(require("./gridClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "columns", "columnSpacing", "component", "container", "direction", "item", "rowSpacing", "spacing", "wrap", "zeroMinWidth"];
+const _excluded = ["className", "columns", "columnSpacing", "component", "container", "direction", "item", "rowSpacing", "spacing", "wrap", "zeroMinWidth"]; // A grid component using the following libs as inspiration.
+//
+// For the implementation:
+// - https://getbootstrap.com/docs/4.3/layout/grid/
+// - https://github.com/kristoferjoseph/flexboxgrid/blob/master/src/css/flexboxgrid.css
+// - https://github.com/roylee0704/react-flexbox-grid
+// - https://material.angularjs.org/latest/layout/introduction
+//
+// Follow this flexbox Guide to better understand the underlying model:
+// - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function getOffset(val) {

package/node/Hidden/Hidden.js

@@ -13,11 +13,11 @@ var _HiddenJs = _interopRequireDefault(require("./HiddenJs"));
 var _HiddenCss = _interopRequireDefault(require("./HiddenCss"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["implementation", "lgDown", "lgUp", "mdDown", "mdUp", "smDown", "smUp", "xlDown", "xlUp", "xsDown", "xsUp"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
  * Responsively hides children based on the selected implementation.
  */
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function Hidden(props) {
   const {
       implementation = 'js',

package/node/Hidden/HiddenJs.js

@@ -15,8 +15,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
  * @ignore - internal component.
- */
-function HiddenJs(props) {
+ */function HiddenJs(props) {
   const {
     children,
     only,

package/node/InputBase/InputBase.js

@@ -383,7 +383,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);
     }
   };