@mui/lab 5.0.0-alpha.54 → 5.0.0-alpha.58

package/legacy/TimelineDot/TimelineDot.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { capitalize } from '@mui/material/utils';
-import { unstable_composeClasses as composeClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { getTimelineDotUtilityClass } from './timelineDotClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 

package/legacy/TimelineDot/timelineDotClasses.js

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

package/legacy/TimelineItem/TimelineItem.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { capitalize, isMuiElement } from '@mui/material/utils';
 import { styled, useThemeProps } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { timelineContentClasses } from '../TimelineContent';
 import { timelineOppositeContentClasses } from '../TimelineOppositeContent';
 import TimelineContext from '../Timeline/TimelineContext';

package/legacy/TimelineItem/timelineItemClasses.js

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

package/legacy/TimelineOppositeContent/TimelineOppositeContent.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { capitalize } from '@mui/material/utils';
-import { unstable_composeClasses as composeClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
 import Typography from '@mui/material/Typography';
 import TimelineContext from '../Timeline/TimelineContext';
 import { getTimelineOppositeContentUtilityClass } from './timelineOppositeContentClasses';

package/legacy/TimelineOppositeContent/timelineOppositeContentClasses.js

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

package/legacy/TimelineSeparator/TimelineSeparator.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { getTimelineSeparatorUtilityClass } from './timelineSeparatorClasses';
 import { jsx as _jsx } from "react/jsx-runtime";

package/legacy/TimelineSeparator/timelineSeparatorClasses.js

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

package/legacy/TreeItem/TreeItem.js

@@ -8,7 +8,7 @@ import { elementTypeAcceptingRef } from '@mui/utils';
 import Collapse from '@mui/material/Collapse';
 import { alpha, styled, useThemeProps } from '@mui/material/styles';
 import { ownerDocument, useForkRef, unsupportedProp } from '@mui/material/utils';
-import { unstable_composeClasses as composeClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
 import TreeViewContext from '../TreeView/TreeViewContext';
 import { DescendantProvider, useDescendant } from '../TreeView/descendants';
 import TreeItemContent from './TreeItemContent';

package/legacy/TreeItem/treeItemClasses.js

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

package/legacy/TreeView/TreeView.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { styled, useTheme, useThemeProps } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { useControlled, useForkRef, ownerDocument, unstable_useId as useId } from '@mui/material/utils';
 import TreeViewContext from './TreeViewContext';
 import { DescendantProvider } from './descendants';

package/legacy/TreeView/treeViewClasses.js

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

package/legacy/YearPicker/PickersYear.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { useForkRef, capitalize } from '@mui/material/utils';
 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 { WrapperVariantContext } from '../internal/pickers/wrappers/WrapperVariantContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getPickersYearUtilityClass(slot) {
@@ -52,7 +52,7 @@ var PickersYearButton = styled('button', {
     margin: '8px 0',
     height: 36,
     width: 72,
-    borderRadius: 16,
+    borderRadius: 18,
     cursor: 'pointer',
     '&:focus, &:hover': {
       backgroundColor: alpha(theme.palette.action.active, theme.palette.action.hoverOpacity)

package/legacy/YearPicker/YearPicker.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTheme, styled, useThemeProps as useThemProps } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
 import clsx from 'clsx';
 import PickersYear from './PickersYear';
 import { useUtils, useNow } from '../internal/pickers/hooks/useUtils';

package/legacy/YearPicker/yearPickerClasses.js

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

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.0-alpha.54
+/** @license MUI v5.0.0-alpha.58
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -105,4 +105,6 @@ export * from './TreeView';
 export { default as YearPicker } from './YearPicker';
 export * from './YearPicker'; // createFilterOptions is exported from Autocomplete
 
-export { default as useAutocomplete } from './useAutocomplete';
+export { default as useAutocomplete } from './useAutocomplete';
+export { default as Masonry } from './Masonry';
+export * from './Masonry';

package/legacy/internal/pickers/PickersToolbar.js

@@ -8,7 +8,7 @@ import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 import IconButton from '@mui/material/IconButton';
 import { styled } from '@mui/material/styles';
-import { generateUtilityClasses } from '@mui/core';
+import { generateUtilityClasses } from '@mui/base';
 import PenIcon from '../svg-icons/Pen';
 import CalendarIcon from '../svg-icons/Calendar';
 import ClockIcon from '../svg-icons/Clock';

package/legacy/internal/pickers/PickersToolbarText.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
-import { generateUtilityClasses } from '@mui/core';
+import { generateUtilityClasses } from '@mui/base';
 import { jsx as _jsx } from "react/jsx-runtime";
 var classes = generateUtilityClasses('PrivatePickersToolbarText', ['selected']);
 var PickersToolbarTextRoot = styled(Typography, {

package/legacy/internal/pickers/test-utils.js

@@ -78,13 +78,14 @@ export function wrapPickerMount(mount) {
     }));
   };
 }
-export function createPickerRender() {
+export function createPickerRenderer() {
   var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
   var locale = _ref2.locale,
-      renderOptions = _objectWithoutProperties(_ref2, ["locale"]);
+      createRendererOptions = _objectWithoutProperties(_ref2, ["locale"]);
 
-  var _createRenderer = createRenderer(renderOptions),
+  var _createRenderer = createRenderer(createRendererOptions),
+      clock = _createRenderer.clock,
       clientRender = _createRenderer.render;
 
   function Wrapper(_ref3) {
@@ -96,10 +97,13 @@ export function createPickerRender() {
     });
   }
 
-  return function (node, options) {
-    return clientRender(node, _extends({}, options, {
-      wrapper: Wrapper
-    }));
+  return {
+    clock: clock,
+    render: function render(node, options) {
+      return clientRender(node, _extends({}, options, {
+        wrapper: Wrapper
+      }));
+    }
   };
 }
 export function openMobilePicker() {

package/legacy/useAutocomplete/index.js

@@ -1 +1 @@
-export { useAutocomplete as default, createFilterOptions } from '@mui/core';
+export { useAutocomplete as default, createFilterOptions } from '@mui/base';

package/modern/CalendarPicker/CalendarPicker.js

@@ -8,7 +8,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 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 MonthPicker from '../MonthPicker/MonthPicker';
 import { useCalendarState } from './useCalendarState';
 import { useDefaultDates, useUtils } from '../internal/pickers/hooks/useUtils';

package/modern/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";
 const classes = generateUtilityClasses('PrivatePickersFadeTransitionGroup', ['root']);

package/modern/CalendarPicker/PickersSlideTransition.js

@@ -4,7 +4,7 @@ const _excluded = ["children", "className", "reduceAnimations", "slideDirection"
 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";
 const classes = generateUtilityClasses('PrivatePickersSlideTransition', ['root', 'slideEnter-left', 'slideEnter-right', 'slideEnterActive', 'slideEnterActive', 'slideExit', 'slideExitActiveLeft-left', 'slideExitActiveLeft-right']);

package/modern/CalendarPickerSkeleton/CalendarPickerSkeleton.js

@@ -6,7 +6,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) {

package/modern/ClockPicker/ClockNumber.js

@@ -4,7 +4,7 @@ const _excluded = ["className", "disabled", "index", "inner", "label", "selected
 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 const classes = generateUtilityClasses('PrivateClockNumber', ['selected', 'disabled']);

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

@@ -4,7 +4,7 @@ const _excluded = ["date", "isLandscape", "isMobileKeyboardViewOpen", "onChange"
 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/modern/DateRangePicker/DateRangePickerToolbar.js

@@ -3,7 +3,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/modern/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';

package/modern/DateTimePicker/DateTimePickerToolbar.js

@@ -6,7 +6,7 @@ var _DateTimePickerToolba, _DateTimePickerToolba2;
 const _excluded = ["ampm", "date", "dateRangeIcon", "hideTabs", "isMobileKeyboardViewOpen", "onChange", "openView", "setOpenView", "timeIcon", "toggleMobileKeyboardView", "toolbarFormat", "toolbarPlaceholder", "toolbarTitle", "views"];
 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/modern/LoadingButton/LoadingButton.js

@@ -1,11 +1,11 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "disabled", "loading", "loadingIndicator", "loadingPosition"];
+const _excluded = ["children", "disabled", "loading", "loadingIndicator", "loadingPosition", "variant"];
 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';
@@ -93,14 +93,18 @@ const 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
@@ -125,7 +129,8 @@ const LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton(inPro
     disabled = false,
     loading = false,
     loadingIndicator = LoadingIndicator,
-    loadingPosition = 'center'
+    loadingPosition = 'center',
+    variant = 'text'
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -133,7 +138,8 @@ const LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton(inPro
     disabled,
     loading,
     loadingIndicator,
-    loadingPosition
+    loadingPosition,
+    variant
   });
 
   const classes = useUtilityClasses(ownerState);
@@ -141,6 +147,7 @@ const LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton(inPro
     disabled: disabled || loading,
     ref: ref
   }, other, {
+    variant: variant,
     classes: classes,
     ownerState: ownerState,
     children: ownerState.loadingPosition === 'end' ? /*#__PURE__*/_jsxs(React.Fragment, {
@@ -213,6 +220,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.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), 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/modern/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/modern/Masonry/Masonry.js

@@ -1,7 +1,7 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["children", "className", "component", "columns", "spacing", "defaultColumns", "defaultHeight", "defaultSpacing"];
-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';
@@ -166,72 +166,92 @@ const Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
   });
 
   const classes = useUtilityClasses(ownerState);
-  React.useEffect(() => {
-    const handleResize = () => {
-      const parentWidth = masonryRef.current.clientWidth;
-      const childWidth = masonryRef.current.firstChild.clientWidth;
-      const firstChildComputedStyle = window.getComputedStyle(masonryRef.current.firstChild);
-      const firstChildMarginLeft = parseToNumber(firstChildComputedStyle.marginLeft);
-      const firstChildMarginRight = parseToNumber(firstChildComputedStyle.marginRight);
-
-      if (parentWidth === 0 || childWidth === 0) {
-        return;
-      }
 
-      const currentNumberOfColumns = Math.round(parentWidth / (childWidth + firstChildMarginLeft + firstChildMarginRight));
-      const columnHeights = new Array(currentNumberOfColumns).fill(0);
-      let skip = false;
-      masonryRef.current.childNodes.forEach(child => {
-        if (child.nodeType !== Node.ELEMENT_NODE || child.dataset.class === 'line-break' || skip) {
-          return;
-        }
+  const handleResize = elements => {
+    if (!elements) {
+      return;
+    }
 
-        const childComputedStyle = window.getComputedStyle(child);
-        const childMarginTop = parseToNumber(childComputedStyle.marginTop);
-        const childMarginBottom = parseToNumber(childComputedStyle.marginBottom); // if any one of children isn't rendered yet, masonry's height shouldn't be computed yet
+    let masonry;
+    let masonryFirstChild;
+    let parentWidth;
+    let childWidth;
+
+    if (elements[0].target.className.includes(classes.root)) {
+      masonry = elements[0].target;
+      parentWidth = elements[0].contentRect.width;
+      masonryFirstChild = elements[1]?.target || masonry.firstChild;
+      childWidth = masonryFirstChild?.contentRect?.width || masonryFirstChild?.clientWidth || 0;
+    } else {
+      masonryFirstChild = elements[0].target;
+      childWidth = elements[0].contentRect.width;
+      masonry = elements[1]?.target || masonryFirstChild.parentElement;
+      parentWidth = masonry.contentRect?.width || masonry.clientWidth;
+    }
 
-        const childHeight = parseToNumber(childComputedStyle.height) ? Math.ceil(parseToNumber(childComputedStyle.height)) + 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
+    const firstChildComputedStyle = window.getComputedStyle(masonryFirstChild);
+    const firstChildMarginLeft = parseToNumber(firstChildComputedStyle.marginLeft);
+    const firstChildMarginRight = parseToNumber(firstChildComputedStyle.marginRight);
+    const currentNumberOfColumns = Math.round(parentWidth / (childWidth + firstChildMarginLeft + firstChildMarginRight));
+    const columnHeights = new Array(currentNumberOfColumns).fill(0);
+    let skip = false;
+    masonry.childNodes.forEach(child => {
+      if (child.nodeType !== Node.ELEMENT_NODE || child.dataset.class === 'line-break' || skip) {
+        return;
+      }
 
+      const childComputedStyle = window.getComputedStyle(child);
+      const childMarginTop = parseToNumber(childComputedStyle.marginTop);
+      const childMarginBottom = parseToNumber(childComputedStyle.marginBottom); // if any one of children isn't rendered yet, masonry's height shouldn't be computed yet
 
-        for (let i = 0; i < child.childNodes.length; i += 1) {
-          const nestedChild = child.childNodes[i];
+      const childHeight = parseToNumber(childComputedStyle.height) ? Math.ceil(parseToNumber(childComputedStyle.height)) + childMarginTop + childMarginBottom : 0;
 
-          if (nestedChild.tagName === 'IMG' && nestedChild.clientHeight === 0) {
-            skip = true;
-            break;
-          }
-        }
+      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
+
+
+      for (let i = 0; i < child.childNodes.length; i += 1) {
+        const nestedChild = child.childNodes[i];
 
-        if (!skip) {
-          // find the current shortest column (where the current item will be placed)
-          const currentMinColumnIndex = columnHeights.indexOf(Math.min(...columnHeights));
-          columnHeights[currentMinColumnIndex] += childHeight;
-          const order = currentMinColumnIndex + 1;
-          child.style.order = order;
+        if (nestedChild.tagName === 'IMG' && nestedChild.clientHeight === 0) {
+          skip = true;
+          break;
         }
-      });
+      }
 
       if (!skip) {
-        setMaxColumnHeight(Math.max(...columnHeights));
-        const numOfLineBreaks = currentNumberOfColumns > 0 ? currentNumberOfColumns - 1 : 0;
-        setNumberOfLineBreaks(numOfLineBreaks);
+        // find the current shortest column (where the current item will be placed)
+        const currentMinColumnIndex = columnHeights.indexOf(Math.min(...columnHeights));
+        columnHeights[currentMinColumnIndex] += childHeight;
+        const order = currentMinColumnIndex + 1;
+        child.style.order = order;
       }
-    }; // IE and old browsers are not supported
+    });
 
+    if (!skip) {
+      setMaxColumnHeight(Math.max(...columnHeights));
+      const numOfLineBreaks = currentNumberOfColumns > 0 ? currentNumberOfColumns - 1 : 0;
+      setNumberOfLineBreaks(numOfLineBreaks);
+    }
+  };
 
-    if (typeof ResizeObserver === 'undefined') {
+  const observer = React.useRef(typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(handleResize));
+  React.useEffect(() => {
+    const resizeObserver = observer.current; // IE and old browsers are not supported
+
+    if (resizeObserver === undefined) {
       return undefined;
     }
 
-    const resizeObserver = new ResizeObserver(handleResize);
     const 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);
@@ -241,9 +261,7 @@ const Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
       }
     }
 
-    return () => {
-      resizeObserver.disconnect();
-    };
+    return () => resizeObserver ? resizeObserver.disconnect() : {};
   }, [columns, spacing, children]);
   const handleRef = useForkRef(ref, masonryRef);
   const lineBreakStyle = {

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

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 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 PickersMonth from './PickersMonth';
 import { useUtils, useNow } from '../internal/pickers/hooks/useUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -32,7 +32,8 @@ const MonthPickerRoot = styled('div', {
   width: 310,
   display: 'flex',
   flexWrap: 'wrap',
-  alignContent: 'stretch'
+  alignContent: 'stretch',
+  margin: '0 4px'
 });
 const MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(inProps, ref) {
   const props = useThemeProps({