@mui/lab 5.0.0-alpha.52 → 5.0.0-alpha.56

package/legacy/CalendarPicker/PickersCalendarHeader.js

@@ -77,6 +77,7 @@ function PickersCalendarHeader(props) {
       _props$componentsProp = props.componentsProps,
       componentsProps = _props$componentsProp === void 0 ? {} : _props$componentsProp,
       month = props.currentMonth,
+      disabled = props.disabled,
       disableFuture = props.disableFuture,
       disablePast = props.disablePast,
       _props$getViewSwitchi = props.getViewSwitchingButtonText,
@@ -104,16 +105,16 @@ function PickersCalendarHeader(props) {
   };
 
   var isNextMonthDisabled = useNextMonthDisabled(month, {
-    disableFuture: disableFuture,
+    disableFuture: disableFuture || disabled,
     maxDate: maxDate
   });
   var isPreviousMonthDisabled = usePreviousMonthDisabled(month, {
-    disablePast: disablePast,
+    disablePast: disablePast || disabled,
     minDate: minDate
   });
 
   var handleToggleView = function handleToggleView() {
-    if (views.length === 1 || !onViewChange) {
+    if (views.length === 1 || !onViewChange || disabled) {
       return;
     }
 
@@ -156,7 +157,7 @@ function PickersCalendarHeader(props) {
           ownerState: ownerState,
           children: utils.format(month, 'year')
         })
-      }), views.length > 1 && /*#__PURE__*/_jsx(PickersCalendarHeaderSwitchViewButton, _extends({
+      }), views.length > 1 && !disabled && /*#__PURE__*/_jsx(PickersCalendarHeaderSwitchViewButton, _extends({
         size: "small",
         as: components.SwitchViewButton,
         "aria-label": getViewSwitchingButtonText(currentView)

package/legacy/CalendarPicker/PickersFadeTransitionGroup.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import clsx from 'clsx';
 import Fade from '@mui/material/Fade';
 import { styled } from '@mui/material/styles';
-import { generateUtilityClasses } from '@mui/core';
+import { generateUtilityClasses } from '@mui/base';
 import { TransitionGroup } from 'react-transition-group';
 import { jsx as _jsx } from "react/jsx-runtime";
 var classes = generateUtilityClasses('PrivatePickersFadeTransitionGroup', ['root']);

package/legacy/CalendarPicker/PickersSlideTransition.js

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
-import { generateUtilityClasses } from '@mui/core';
+import { generateUtilityClasses } from '@mui/base';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import { jsx as _jsx } from "react/jsx-runtime";
 var classes = generateUtilityClasses('PrivatePickersSlideTransition', ['root', 'slideEnter-left', 'slideEnter-right', 'slideEnterActive', 'slideEnterActive', 'slideExit', 'slideExitActiveLeft-left', 'slideExitActiveLeft-right']);

package/legacy/CalendarPickerSkeleton/CalendarPickerSkeleton.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import Skeleton from '@mui/material/Skeleton';
 import { styled, useThemeProps } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses, generateUtilityClass, generateUtilityClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses, generateUtilityClass, generateUtilityClasses } from '@mui/base';
 import { DAY_SIZE, DAY_MARGIN } from '../internal/pickers/constants/dimensions';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getCalendarPickerSkeletonUtilityClass(slot) {
@@ -150,6 +150,6 @@ process.env.NODE_ENV !== "production" ? CalendarPickerSkeleton.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default CalendarPickerSkeleton;

package/legacy/ClockPicker/ClockNumber.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
-import { generateUtilityClasses } from '@mui/core';
+import { generateUtilityClasses } from '@mui/base';
 import { CLOCK_WIDTH, CLOCK_HOUR_WIDTH } from './shared';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var classes = generateUtilityClasses('PrivateClockNumber', ['selected', 'disabled']);

package/legacy/ClockPicker/ClockPicker.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
 import { styled, useThemeProps } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses, generateUtilityClass, generateUtilityClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses, generateUtilityClass, generateUtilityClasses } from '@mui/base';
 import Clock from './Clock';
 import { pipe } from '../internal/pickers/utils';
 import { useUtils, useNow } from '../internal/pickers/hooks/useUtils';

package/legacy/DatePicker/DatePicker.js

@@ -153,6 +153,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes
 
   /**
    * If `true`, the picker and text field are disabled.
+   * @default false
    */
   disabled: PropTypes.bool,
 
@@ -344,6 +345,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes
 
   /**
    * Make picker read only.
+   * @default false
    */
   readOnly: PropTypes.bool,
 

package/legacy/DatePicker/DatePickerToolbar.js

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import * as React from 'react';
 import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
-import { generateUtilityClasses } from '@mui/core';
+import { generateUtilityClasses } from '@mui/base';
 import PickersToolbar from '../internal/pickers/PickersToolbar';
 import { useUtils } from '../internal/pickers/hooks/useUtils';
 import { isYearAndMonthViews, isYearOnlyView } from './shared';

package/legacy/DateRangePicker/DateRangePicker.js

@@ -215,6 +215,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes
 
   /**
    * If `true`, the picker and text field are disabled.
+   * @default false
    */
   disabled: PropTypes.bool,
 
@@ -405,6 +406,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes
 
   /**
    * Make picker read only.
+   * @default false
    */
   readOnly: PropTypes.bool,
 

package/legacy/DateRangePicker/DateRangePickerToolbar.js

@@ -6,7 +6,7 @@ var _Typography;
 import * as React from 'react';
 import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
-import { generateUtilityClasses } from '@mui/core';
+import { generateUtilityClasses } from '@mui/base';
 import PickersToolbar from '../internal/pickers/PickersToolbar';
 import { useUtils } from '../internal/pickers/hooks/useUtils';
 import PickersToolbarButton from '../internal/pickers/PickersToolbarButton';

package/legacy/DateRangePickerDay/DateRangePickerDay.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { alpha, styled } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses, generateUtilityClass, generateUtilityClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses, generateUtilityClass, generateUtilityClasses } from '@mui/base';
 import { DAY_MARGIN } from '../internal/pickers/constants/dimensions';
 import { useUtils } from '../internal/pickers/hooks/useUtils';
 import PickersDay, { areDayPropsEqual } from '../PickersDay/PickersDay';
@@ -233,7 +233,7 @@ process.env.NODE_ENV !== "production" ? DateRangePickerDay.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 /**
  *

package/legacy/DateTimePicker/DateTimePicker.js

@@ -170,6 +170,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes
 
   /**
    * If `true`, the picker and text field are disabled.
+   * @default false
    */
   disabled: PropTypes.bool,
 
@@ -413,6 +414,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes
 
   /**
    * Make picker read only.
+   * @default false
    */
   readOnly: PropTypes.bool,
 

package/legacy/DateTimePicker/DateTimePickerToolbar.js

@@ -6,7 +6,7 @@ var _DateTimePickerToolba, _DateTimePickerToolba2;
 
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
-import { generateUtilityClasses } from '@mui/core';
+import { generateUtilityClasses } from '@mui/base';
 import PickersToolbarText from '../internal/pickers/PickersToolbarText';
 import PickersToolbar from '../internal/pickers/PickersToolbar';
 import PickersToolbarButton from '../internal/pickers/PickersToolbarButton';

package/legacy/DesktopDatePicker/DesktopDatePicker.js

@@ -136,6 +136,7 @@ process.env.NODE_ENV !== "production" ? DesktopDatePicker.propTypes
 
   /**
    * If `true`, the picker and text field are disabled.
+   * @default false
    */
   disabled: PropTypes.bool,
 
@@ -321,6 +322,7 @@ process.env.NODE_ENV !== "production" ? DesktopDatePicker.propTypes
 
   /**
    * Make picker read only.
+   * @default false
    */
   readOnly: PropTypes.bool,
 

package/legacy/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -187,6 +187,7 @@ process.env.NODE_ENV !== "production" ? DesktopDateRangePicker.propTypes
 
   /**
    * If `true`, the picker and text field are disabled.
+   * @default false
    */
   disabled: PropTypes.bool,
 
@@ -371,6 +372,7 @@ process.env.NODE_ENV !== "production" ? DesktopDateRangePicker.propTypes
 
   /**
    * Make picker read only.
+   * @default false
    */
   readOnly: PropTypes.bool,
 

package/legacy/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -151,6 +151,7 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePicker.propTypes
 
   /**
    * If `true`, the picker and text field are disabled.
+   * @default false
    */
   disabled: PropTypes.bool,
 
@@ -388,6 +389,7 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePicker.propTypes
 
   /**
    * Make picker read only.
+   * @default false
    */
   readOnly: PropTypes.bool,
 

package/legacy/LoadingButton/LoadingButton.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { chainPropTypes } from '@mui/utils';
 import { capitalize } from '@mui/material/utils';
-import { unstable_composeClasses as composeClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { styled, useThemeProps } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
@@ -83,14 +83,18 @@ var LoadingButtonLoadingIndicator = styled('div', {
     position: 'absolute',
     visibility: 'visible',
     display: 'flex'
-  }, ownerState.loadingPosition === 'start' && {
+  }, ownerState.loadingPosition === 'start' && (ownerState.variant === 'outlined' || ownerState.variant === 'contained') && {
     left: 14
+  }, ownerState.loadingPosition === 'start' && ownerState.variant === 'text' && {
+    left: 6
   }, ownerState.loadingPosition === 'center' && {
     left: '50%',
     transform: 'translate(-50%)',
     color: theme.palette.action.disabled
-  }, ownerState.loadingPosition === 'end' && {
+  }, ownerState.loadingPosition === 'end' && (ownerState.variant === 'outlined' || ownerState.variant === 'contained') && {
     right: 14
+  }, ownerState.loadingPosition === 'end' && ownerState.variant === 'text' && {
+    right: 6
   }, ownerState.loadingPosition === 'start' && ownerState.fullWidth && {
     position: 'relative',
     left: -10
@@ -120,13 +124,16 @@ var LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton(inProps
       loadingIndicator = _props$loadingIndicat === void 0 ? LoadingIndicator : _props$loadingIndicat,
       _props$loadingPositio = props.loadingPosition,
       loadingPosition = _props$loadingPositio === void 0 ? 'center' : _props$loadingPositio,
-      other = _objectWithoutProperties(props, ["children", "disabled", "loading", "loadingIndicator", "loadingPosition"]);
+      _props$variant = props.variant,
+      variant = _props$variant === void 0 ? 'text' : _props$variant,
+      other = _objectWithoutProperties(props, ["children", "disabled", "loading", "loadingIndicator", "loadingPosition", "variant"]);
 
   var ownerState = _extends({}, props, {
     disabled: disabled,
     loading: loading,
     loadingIndicator: loadingIndicator,
-    loadingPosition: loadingPosition
+    loadingPosition: loadingPosition,
+    variant: variant
   });
 
   var classes = useUtilityClasses(ownerState);
@@ -134,6 +141,7 @@ var LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton(inProps
     disabled: disabled || loading,
     ref: ref
   }, other, {
+    variant: variant,
     classes: classes,
     ownerState: ownerState,
     children: ownerState.loadingPosition === 'end' ? /*#__PURE__*/_jsxs(React.Fragment, {
@@ -206,6 +214,12 @@ process.env.NODE_ENV !== "production" ? LoadingButton.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
+
+  /**
+   * The variant to use.
+   * @default 'text'
+   */
+  variant: PropTypes.oneOf(['contained', 'outlined', 'text'])
 } : void 0;
 export default LoadingButton;

package/legacy/LoadingButton/loadingButtonClasses.js

@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/core';
+import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
 export function getLoadingButtonUtilityClass(slot) {
   return generateUtilityClass('MuiLoadingButton', slot);
 }

package/legacy/Masonry/Masonry.js

@@ -2,7 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { unstable_composeClasses as composeClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { createUnarySpacing, getValue, handleBreakpoints, unstable_resolveBreakpointValues as resolveBreakpointValues } from '@mui/system';
 import { deepmerge, unstable_useForkRef as useForkRef } from '@mui/utils';
@@ -12,6 +12,9 @@ import * as React from 'react';
 import { getMasonryUtilityClass } from './masonryClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+export var parseToNumber = function parseToNumber(val) {
+  return Number(val.replace('px', ''));
+};
 
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
@@ -19,44 +22,6 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
     root: ['root']
   };
   return composeClasses(slots, getMasonryUtilityClass, classes);
-}; // compute base for responsive values; e.g.,
-// [1,2,3] => {xs: true, sm: true, md: true}
-// {xs: 1, sm: 2, md: 3} => {xs: true, sm: true, md: true}
-
-
-var computeBreakpointsBase = function computeBreakpointsBase(breakpoints, prop) {
-  var base = {};
-
-  if (Array.isArray(prop)) {
-    Object.keys(breakpoints.values).forEach(function (breakpoint, i, arr) {
-      if (i < arr.length) {
-        base[breakpoint] = true;
-      }
-    });
-  } else {
-    Object.keys(breakpoints.values).forEach(function (breakpoint) {
-      if (prop[breakpoint] != null) {
-        base[breakpoint] = true;
-      }
-    });
-  }
-
-  return base;
-}; // if prop is an array, convert to object; e.g.,
-// (base: {xs: true, sm: true, md: true}, prop: [1,2,3]) => {xs: 1, sm: 2, md: 3}
-
-
-var validatePropValues = function validatePropValues(base, prop) {
-  var values = {};
-
-  if (Array.isArray(prop)) {
-    Object.keys(base).forEach(function (breakpoint, i) {
-      values[breakpoint] = prop[i];
-    });
-    return values;
-  }
-
-  return prop;
 };
 
 export var getStyle = function getStyle(_ref) {
@@ -93,10 +58,9 @@ export var getStyle = function getStyle(_ref) {
     return _extends({}, styles, stylesSSR);
   }
 
-  var spacingBreakpointsBase = computeBreakpointsBase(theme.breakpoints, ownerState.spacing);
   var spacingValues = resolveBreakpointValues({
-    values: validatePropValues(spacingBreakpointsBase, ownerState.spacing),
-    base: spacingBreakpointsBase
+    values: ownerState.spacing,
+    breakpoints: theme.breakpoints.values
   });
   var transformer = createUnarySpacing(theme);
 
@@ -116,10 +80,9 @@ export var getStyle = function getStyle(_ref) {
   styles = deepmerge(styles, handleBreakpoints({
     theme: theme
   }, spacingValues, spacingStyleFromPropValue));
-  var columnBreakpointsBase = computeBreakpointsBase(theme.breakpoints, ownerState.columns);
   var columnValues = resolveBreakpointValues({
-    values: validatePropValues(columnBreakpointsBase, ownerState.columns),
-    base: columnBreakpointsBase
+    values: ownerState.columns,
+    breakpoints: theme.breakpoints.values
   });
 
   var columnStyleFromPropValue = function columnStyleFromPropValue(propValue) {
@@ -209,72 +172,96 @@ var Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
   });
 
   var classes = useUtilityClasses(ownerState);
-  React.useEffect(function () {
-    var handleResize = function handleResize() {
-      var parentWidth = masonryRef.current.clientWidth;
-      var childWidth = masonryRef.current.firstChild.clientWidth;
-      var firstChildComputedStyle = window.getComputedStyle(masonryRef.current.firstChild);
-      var firstChildMarginLeft = Number(firstChildComputedStyle.marginLeft.replace('px', ''));
-      var firstChildMarginRight = Number(firstChildComputedStyle.marginRight.replace('px', ''));
-
-      if (parentWidth === 0 || childWidth === 0) {
-        return;
-      }
 
-      var currentNumberOfColumns = Math.round(parentWidth / (childWidth + firstChildMarginLeft + firstChildMarginRight));
-      var columnHeights = new Array(currentNumberOfColumns).fill(0);
-      var skip = false;
-      masonryRef.current.childNodes.forEach(function (child) {
-        if (child.nodeType !== Node.ELEMENT_NODE || child.dataset.class === 'line-break' || skip) {
-          return;
-        }
+  var handleResize = function handleResize(elements) {
+    if (!elements) {
+      return;
+    }
 
-        var childComputedStyle = window.getComputedStyle(child);
-        var childMarginTop = Number(childComputedStyle.marginTop.replace('px', ''));
-        var childMarginBottom = Number(childComputedStyle.marginBottom.replace('px', '')); // if any one of children isn't rendered yet, masonry's height shouldn't be computed yet
+    var masonry;
+    var masonryFirstChild;
+    var parentWidth;
+    var childWidth;
+
+    if (elements[0].target.className.includes(classes.root)) {
+      var _elements$, _masonryFirstChild, _masonryFirstChild$co, _masonryFirstChild2;
+
+      masonry = elements[0].target;
+      parentWidth = elements[0].contentRect.width;
+      masonryFirstChild = ((_elements$ = elements[1]) == null ? void 0 : _elements$.target) || masonry.firstChild;
+      childWidth = ((_masonryFirstChild = masonryFirstChild) == null ? void 0 : (_masonryFirstChild$co = _masonryFirstChild.contentRect) == null ? void 0 : _masonryFirstChild$co.width) || ((_masonryFirstChild2 = masonryFirstChild) == null ? void 0 : _masonryFirstChild2.clientWidth) || 0;
+    } else {
+      var _elements$2, _masonry$contentRect;
+
+      masonryFirstChild = elements[0].target;
+      childWidth = elements[0].contentRect.width;
+      masonry = ((_elements$2 = elements[1]) == null ? void 0 : _elements$2.target) || masonryFirstChild.parentElement;
+      parentWidth = ((_masonry$contentRect = masonry.contentRect) == null ? void 0 : _masonry$contentRect.width) || masonry.clientWidth;
+    }
 
-        var childHeight = child.clientHeight ? Math.ceil(child.clientHeight) + childMarginTop + childMarginBottom : 0;
+    if (parentWidth === 0 || childWidth === 0 || !masonry || !masonryFirstChild) {
+      return;
+    }
 
-        if (childHeight === 0) {
-          skip = true;
-          return;
-        } // if there is a nested image that isn't rendered yet, masonry's height shouldn't be computed yet
+    var firstChildComputedStyle = window.getComputedStyle(masonryFirstChild);
+    var firstChildMarginLeft = parseToNumber(firstChildComputedStyle.marginLeft);
+    var firstChildMarginRight = parseToNumber(firstChildComputedStyle.marginRight);
+    var currentNumberOfColumns = Math.round(parentWidth / (childWidth + firstChildMarginLeft + firstChildMarginRight));
+    var columnHeights = new Array(currentNumberOfColumns).fill(0);
+    var skip = false;
+    masonry.childNodes.forEach(function (child) {
+      if (child.nodeType !== Node.ELEMENT_NODE || child.dataset.class === 'line-break' || skip) {
+        return;
+      }
 
+      var childComputedStyle = window.getComputedStyle(child);
+      var childMarginTop = parseToNumber(childComputedStyle.marginTop);
+      var childMarginBottom = parseToNumber(childComputedStyle.marginBottom); // if any one of children isn't rendered yet, masonry's height shouldn't be computed yet
 
-        for (var i = 0; i < child.childNodes.length; i += 1) {
-          var nestedChild = child.childNodes[i];
+      var childHeight = parseToNumber(childComputedStyle.height) ? Math.ceil(parseToNumber(childComputedStyle.height)) + childMarginTop + childMarginBottom : 0;
+
+      if (childHeight === 0) {
+        skip = true;
+        return;
+      } // if there is a nested image that isn't rendered yet, masonry's height shouldn't be computed yet
 
-          if (nestedChild.tagName === 'IMG' && nestedChild.clientHeight === 0) {
-            skip = true;
-            break;
-          }
-        }
 
-        if (!skip) {
-          // find the current shortest column (where the current item will be placed)
-          var currentMinColumnIndex = columnHeights.indexOf(Math.min.apply(Math, _toConsumableArray(columnHeights)));
-          columnHeights[currentMinColumnIndex] += childHeight;
-          var order = currentMinColumnIndex + 1;
-          child.style.order = order;
+      for (var i = 0; i < child.childNodes.length; i += 1) {
+        var nestedChild = child.childNodes[i];
+
+        if (nestedChild.tagName === 'IMG' && nestedChild.clientHeight === 0) {
+          skip = true;
+          break;
         }
-      });
+      }
 
       if (!skip) {
-        setMaxColumnHeight(Math.max.apply(Math, _toConsumableArray(columnHeights)));
-        var numOfLineBreaks = currentNumberOfColumns > 0 ? currentNumberOfColumns - 1 : 0;
-        setNumberOfLineBreaks(numOfLineBreaks);
+        // find the current shortest column (where the current item will be placed)
+        var currentMinColumnIndex = columnHeights.indexOf(Math.min.apply(Math, _toConsumableArray(columnHeights)));
+        columnHeights[currentMinColumnIndex] += childHeight;
+        var order = currentMinColumnIndex + 1;
+        child.style.order = order;
       }
-    }; // IE and old browsers are not supported
+    });
 
+    if (!skip) {
+      setMaxColumnHeight(Math.max.apply(Math, _toConsumableArray(columnHeights)));
+      var numOfLineBreaks = currentNumberOfColumns > 0 ? currentNumberOfColumns - 1 : 0;
+      setNumberOfLineBreaks(numOfLineBreaks);
+    }
+  };
 
-    if (typeof ResizeObserver === 'undefined') {
-      return null;
+  var observer = React.useRef(typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(handleResize));
+  React.useEffect(function () {
+    var resizeObserver = observer.current; // IE and old browsers are not supported
+
+    if (resizeObserver === undefined) {
+      return undefined;
     }
 
-    var resizeObserver = new ResizeObserver(handleResize);
     var container = masonryRef.current;
 
-    if (container) {
+    if (container && resizeObserver) {
       // only the masonry container and its first child are observed for resizing;
       // this might cause unforeseen problems in some use cases;
       resizeObserver.observe(container);
@@ -285,9 +272,9 @@ var Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
     }
 
     return function () {
-      resizeObserver.disconnect();
+      return resizeObserver ? resizeObserver.disconnect() : {};
     };
-  }, [columns, spacing]);
+  }, [columns, spacing, children]);
   var handleRef = useForkRef(ref, masonryRef);
   var lineBreakStyle = {
     flexBasis: '100%',
@@ -375,6 +362,6 @@ process.env.NODE_ENV !== "production" ? Masonry.propTypes
   /**
    * Allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default Masonry;

package/legacy/Masonry/masonryClasses.js

@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/core';
+import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
 export function getMasonryUtilityClass(slot) {
   return generateUtilityClass('MuiMasonry', slot);
 }

package/legacy/MobileDatePicker/MobileDatePicker.js

@@ -155,6 +155,7 @@ process.env.NODE_ENV !== "production" ? MobileDatePicker.propTypes
 
   /**
    * If `true`, the picker and text field are disabled.
+   * @default false
    */
   disabled: PropTypes.bool,
 
@@ -336,6 +337,7 @@ process.env.NODE_ENV !== "production" ? MobileDatePicker.propTypes
 
   /**
    * Make picker read only.
+   * @default false
    */
   readOnly: PropTypes.bool,
 

package/legacy/MobileDateRangePicker/MobileDateRangePicker.js

@@ -206,6 +206,7 @@ process.env.NODE_ENV !== "production" ? MobileDateRangePicker.propTypes
 
   /**
    * If `true`, the picker and text field are disabled.
+   * @default false
    */
   disabled: PropTypes.bool,
 
@@ -386,6 +387,7 @@ process.env.NODE_ENV !== "production" ? MobileDateRangePicker.propTypes
 
   /**
    * Make picker read only.
+   * @default false
    */
   readOnly: PropTypes.bool,
 

package/legacy/MobileDateTimePicker/MobileDateTimePicker.js

@@ -172,6 +172,7 @@ process.env.NODE_ENV !== "production" ? MobileDateTimePicker.propTypes
 
   /**
    * If `true`, the picker and text field are disabled.
+   * @default false
    */
   disabled: PropTypes.bool,
 
@@ -405,6 +406,7 @@ process.env.NODE_ENV !== "production" ? MobileDateTimePicker.propTypes
 
   /**
    * Make picker read only.
+   * @default false
    */
   readOnly: PropTypes.bool,