@mui/lab 5.0.0-alpha.64 → 5.0.0-alpha.68

package/legacy/internal/pickers/PickersModalDialog.js

@@ -12,28 +12,22 @@ import { styled } from '@mui/material/styles';
 import { DIALOG_WIDTH } from './constants/dimensions';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var PickersModalDialogRoot = styled(Dialog, {
-  skipSx: true
-})((_styled = {}, _defineProperty(_styled, "& .".concat(dialogClasses.container), {
+var PickersModalDialogRoot = styled(Dialog)((_styled = {}, _defineProperty(_styled, "& .".concat(dialogClasses.container), {
   outline: 0
 }), _defineProperty(_styled, "& .".concat(dialogClasses.paper), {
   outline: 0,
   minWidth: DIALOG_WIDTH
 }), _styled));
-var PickersModalDialogContent = styled(DialogContent, {
-  skipSx: true
-})({
+var PickersModalDialogContent = styled(DialogContent)({
   '&:first-of-type': {
     padding: 0
   }
 });
-var PickersModalDialogActions = styled(DialogActions, {
-  skipSx: true
-})(function (_ref) {
+var PickersModalDialogActions = styled(DialogActions)(function (_ref) {
   var ownerState = _ref.ownerState;
   return _extends({}, (ownerState.clearable || ownerState.showTodayButton) && {
     // set justifyContent to default value to fix IE11 layout bug
-    // see https://github.com/mui-org/material-ui-pickers/pull/267
+    // see https://github.com/mui/material-ui-pickers/pull/267
     justifyContent: 'flex-start',
     '& > *:first-of-type': {
       marginRight: 'auto'

package/legacy/internal/pickers/PickersPopper.js

@@ -9,17 +9,13 @@ import TrapFocus from '@mui/material/Unstable_TrapFocus';
 import { useForkRef, useEventCallback, ownerDocument } from '@mui/material/utils';
 import { styled } from '@mui/material/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-var PickersPopperRoot = styled(Popper, {
-  skipSx: true
-})(function (_ref) {
+var PickersPopperRoot = styled(Popper)(function (_ref) {
   var theme = _ref.theme;
   return {
     zIndex: theme.zIndex.modal
   };
 });
-var PickersPopperPaper = styled(Paper, {
-  skipSx: true
-})(function (_ref2) {
+var PickersPopperPaper = styled(Paper)(function (_ref2) {
   var ownerState = _ref2.ownerState;
   return _extends({
     transformOrigin: 'top center',

package/legacy/internal/pickers/PickersToolbar.js

@@ -15,9 +15,7 @@ import ClockIcon from '../svg-icons/Clock';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var classes = generateUtilityClasses('PrivatePickersToolbar', ['root', 'dateTitleContainer']);
-var PickersToolbarRoot = styled('div', {
-  skipSx: true
-})(function (_ref) {
+var PickersToolbarRoot = styled('div')(function (_ref) {
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
   return _extends({
@@ -34,9 +32,7 @@ var PickersToolbarRoot = styled('div', {
     flexWrap: 'wrap'
   });
 });
-var PickersToolbarGrid = styled(Grid, {
-  skipSx: true
-})({
+var PickersToolbarGrid = styled(Grid)({
   flex: 1
 });
 

package/legacy/internal/pickers/PickersToolbarButton.js

@@ -5,9 +5,7 @@ import Button from '@mui/material/Button';
 import { styled } from '@mui/material/styles';
 import PickersToolbarText from './PickersToolbarText';
 import { jsx as _jsx } from "react/jsx-runtime";
-var PickersToolbarButtonRoot = styled(Button, {
-  skipSx: true
-})({
+var PickersToolbarButtonRoot = styled(Button)({
   padding: 0,
   minWidth: 16,
   textTransform: 'none'

package/legacy/internal/pickers/PickersToolbarText.js

@@ -8,9 +8,7 @@ import { styled } from '@mui/material/styles';
 import { generateUtilityClasses } from '@mui/base';
 import { jsx as _jsx } from "react/jsx-runtime";
 var classes = generateUtilityClasses('PrivatePickersToolbarText', ['selected']);
-var PickersToolbarTextRoot = styled(Typography, {
-  skipSx: true
-})(function (_ref) {
+var PickersToolbarTextRoot = styled(Typography)(function (_ref) {
   var theme = _ref.theme;
   return _defineProperty({
     transition: theme.transitions.create('color'),

package/legacy/internal/pickers/PureDateInput.js

@@ -34,15 +34,17 @@ export var PureDateInput = /*#__PURE__*/React.forwardRef(function PureDateInput(
     inputRef: inputRef,
     error: validationError,
     InputProps: PureDateInputProps,
-    inputProps: {
+    inputProps: _extends({
       disabled: disabled,
       readOnly: true,
       'aria-readonly': true,
       'aria-label': getOpenDialogAriaText(rawValue, utils),
-      value: inputValue,
-      onClick: onOpen,
+      value: inputValue
+    }, !props.readOnly && {
+      onClick: onOpen
+    }, {
       onKeyDown: onSpaceOrEnter(onOpen)
-    }
+    })
   }, TextFieldProps));
 });
 PureDateInput.propTypes = {

package/legacy/internal/pickers/hooks/usePickerState.js

@@ -44,19 +44,24 @@ export function usePickerState(props, valueManager) {
       type: 'reset',
       payload: parsedDateValue
     });
-  } // Mobile keyboard view is a special case.
+  }
+
+  var _React$useState = React.useState(draftState.committed),
+      initialDate = _React$useState[0],
+      setInitialDate = _React$useState[1]; // Mobile keyboard view is a special case.
   // When it's open picker should work like closed, cause we are just showing text field
 
 
-  var _React$useState = React.useState(false),
-      isMobileKeyboardViewOpen = _React$useState[0],
-      setMobileKeyboardViewOpen = _React$useState[1];
+  var _React$useState2 = React.useState(false),
+      isMobileKeyboardViewOpen = _React$useState2[0],
+      setMobileKeyboardViewOpen = _React$useState2[1];
 
   var acceptDate = React.useCallback(function (acceptedDate, needClosePicker) {
     onChange(acceptedDate);
 
     if (needClosePicker) {
       setIsOpen(false);
+      setInitialDate(acceptedDate);
 
       if (onAccept) {
         onAccept(acceptedDate);
@@ -73,7 +78,7 @@ export function usePickerState(props, valueManager) {
         return acceptDate(draftState.draft, true);
       },
       onDismiss: function onDismiss() {
-        return setIsOpen(false);
+        return acceptDate(initialDate, true);
       },
       onSetToday: function onSetToday() {
         var now = utils.date();
@@ -84,7 +89,7 @@ export function usePickerState(props, valueManager) {
         acceptDate(now, !disableCloseOnSelect);
       }
     };
-  }, [acceptDate, disableCloseOnSelect, isOpen, utils, draftState.draft, setIsOpen, valueManager.emptyValue]);
+  }, [acceptDate, disableCloseOnSelect, isOpen, utils, draftState.draft, valueManager.emptyValue, initialDate]);
   var pickerProps = React.useMemo(function () {
     return {
       date: draftState.draft,

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
@@ -58,7 +59,7 @@ export var AdapterClassToUse = /*#__PURE__*/function (_AdapterDateFns) {
     return _this;
   }
 
-  return AdapterClassToUse;
+  return _createClass(AdapterClassToUse);
 }(AdapterDateFns);
 export var adapterToUse = new AdapterClassToUse();
 export var FakeTransitionComponent = /*#__PURE__*/React.forwardRef(function FakeTransitionComponent(_ref, ref) {

package/legacy/internal/pickers/wrappers/PickerStaticWrapper.js

@@ -24,8 +24,7 @@ var PickerStaticWrapperRoot = styled('div', {
   slot: 'Root',
   overridesResolver: function overridesResolver(props, styles) {
     return styles.root;
-  },
-  skipSx: true
+  }
 })(function (_ref) {
   var theme = _ref.theme;
   return {

package/modern/CalendarPicker/PickersCalendar.js

@@ -12,16 +12,12 @@ import SlideTransition from './PickersSlideTransition';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const weeksContainerHeight = (DAY_SIZE + DAY_MARGIN * 4) * 6;
-const PickersCalendarDayHeader = styled('div', {
-  skipSx: true
-})({
+const PickersCalendarDayHeader = styled('div')({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center'
 });
-const PickersCalendarWeekDayLabel = styled(Typography, {
-  skipSx: true
-})(({
+const PickersCalendarWeekDayLabel = styled(Typography)(({
   theme
 }) => ({
   width: 36,
@@ -33,27 +29,19 @@ const PickersCalendarWeekDayLabel = styled(Typography, {
   alignItems: 'center',
   color: theme.palette.text.secondary
 }));
-const PickersCalendarLoadingContainer = styled('div', {
-  skipSx: true
-})({
+const PickersCalendarLoadingContainer = styled('div')({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
   minHeight: weeksContainerHeight
 });
-const PickersCalendarSlideTransition = styled(SlideTransition, {
-  skipSx: true
-})({
+const PickersCalendarSlideTransition = styled(SlideTransition)({
   minHeight: weeksContainerHeight
 });
-const PickersCalendarWeekContainer = styled('div', {
-  skipSx: true
-})({
+const PickersCalendarWeekContainer = styled('div')({
   overflow: 'hidden'
 });
-const PickersCalendarWeek = styled('div', {
-  skipSx: true
-})({
+const PickersCalendarWeek = styled('div')({
   margin: `${DAY_MARGIN}px 0`,
   display: 'flex',
   justifyContent: 'center'

package/modern/CalendarPicker/PickersCalendarHeader.js

@@ -11,9 +11,7 @@ import PickersArrowSwitcher from '../internal/pickers/PickersArrowSwitcher';
 import { usePreviousMonthDisabled, useNextMonthDisabled } from '../internal/pickers/hooks/date-helpers-hooks';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const PickersCalendarHeaderRoot = styled('div', {
-  skipSx: true
-})({
+const PickersCalendarHeaderRoot = styled('div')({
   display: 'flex',
   alignItems: 'center',
   marginTop: 16,
@@ -24,9 +22,7 @@ const PickersCalendarHeaderRoot = styled('div', {
   maxHeight: 30,
   minHeight: 30
 });
-const PickersCalendarHeaderLabel = styled('div', {
-  skipSx: true
-})(({
+const PickersCalendarHeaderLabel = styled('div')(({
   theme
 }) => _extends({
   display: 'flex',
@@ -38,19 +34,13 @@ const PickersCalendarHeaderLabel = styled('div', {
 }, theme.typography.body1, {
   fontWeight: theme.typography.fontWeightMedium
 }));
-const PickersCalendarHeaderLabelItem = styled('div', {
-  skipSx: true
-})({
+const PickersCalendarHeaderLabelItem = styled('div')({
   marginRight: 6
 });
-const PickersCalendarHeaderSwitchViewButton = styled(IconButton, {
-  skipSx: true
-})({
+const PickersCalendarHeaderSwitchViewButton = styled(IconButton)({
   marginRight: 'auto'
 });
-const PickersCalendarHeaderSwitchView = styled(ArrowDropDownIcon, {
-  skipSx: true
-})(({
+const PickersCalendarHeaderSwitchView = styled(ArrowDropDownIcon)(({
   theme,
   ownerState
 }) => _extends({

package/modern/CalendarPicker/PickersFadeTransitionGroup.js

@@ -7,9 +7,7 @@ import { TransitionGroup } from 'react-transition-group';
 import { jsx as _jsx } from "react/jsx-runtime";
 const classes = generateUtilityClasses('PrivatePickersFadeTransitionGroup', ['root']);
 const animationDuration = 500;
-const PickersFadeTransitionGroupRoot = styled(TransitionGroup, {
-  skipSx: true
-})({
+const PickersFadeTransitionGroupRoot = styled(TransitionGroup)({
   display: 'block',
   position: 'relative'
 });

package/modern/CalendarPicker/PickersSlideTransition.js

@@ -9,9 +9,7 @@ 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']);
 export const slideAnimationDuration = 350;
-const PickersSlideTransitionRoot = styled(TransitionGroup, {
-  skipSx: true
-})(({
+const PickersSlideTransitionRoot = styled(TransitionGroup)(({
   theme
 }) => {
   const slideTransition = theme.transitions.create('transform', {

package/modern/ClockPicker/Clock.js

@@ -13,9 +13,7 @@ import { WrapperVariantContext } from '../internal/pickers/wrappers/WrapperVaria
 import { getHours, getMinutes } from './shared';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const ClockRoot = styled('div', {
-  skipSx: true
-})(({
+const ClockRoot = styled('div')(({
   theme
 }) => ({
   display: 'flex',
@@ -23,9 +21,7 @@ const ClockRoot = styled('div', {
   alignItems: 'center',
   margin: theme.spacing(2)
 }));
-const ClockClock = styled('div', {
-  skipSx: true
-})({
+const ClockClock = styled('div')({
   backgroundColor: 'rgba(0,0,0,.07)',
   borderRadius: '50%',
   height: 220,
@@ -34,9 +30,7 @@ const ClockClock = styled('div', {
   position: 'relative',
   pointerEvents: 'none'
 });
-const ClockSquareMask = styled('div', {
-  skipSx: true
-})({
+const ClockSquareMask = styled('div')({
   width: '100%',
   height: '100%',
   position: 'absolute',
@@ -53,9 +47,7 @@ const ClockSquareMask = styled('div', {
     cursor: 'move'
   }
 });
-const ClockPin = styled('div', {
-  skipSx: true
-})(({
+const ClockPin = styled('div')(({
   theme
 }) => ({
   width: 6,
@@ -67,9 +59,7 @@ const ClockPin = styled('div', {
   left: '50%',
   transform: 'translate(-50%, -50%)'
 }));
-const ClockAmButton = styled(IconButton, {
-  skipSx: true
-})(({
+const ClockAmButton = styled(IconButton)(({
   theme,
   ownerState
 }) => _extends({
@@ -84,9 +74,7 @@ const ClockAmButton = styled(IconButton, {
     backgroundColor: theme.palette.primary.light
   }
 }));
-const ClockPmButton = styled(IconButton, {
-  skipSx: true
-})(({
+const ClockPmButton = styled(IconButton)(({
   theme,
   ownerState
 }) => _extends({

package/modern/ClockPicker/ClockNumber.js

@@ -8,9 +8,7 @@ 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']);
-const ClockNumberRoot = styled('span', {
-  skipSx: true
-})(({
+const ClockNumberRoot = styled('span')(({
   theme,
   ownerState
 }) => _extends({
@@ -23,6 +21,7 @@ const ClockNumberRoot = styled('span', {
   alignItems: 'center',
   borderRadius: '50%',
   color: theme.palette.text.primary,
+  fontFamily: theme.typography.fontFamily,
   '&:focused': {
     backgroundColor: theme.palette.background.paper
   },

package/modern/ClockPicker/ClockPointer.js

@@ -5,9 +5,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import { CLOCK_WIDTH, CLOCK_HOUR_WIDTH } from './shared';
 import { jsx as _jsx } from "react/jsx-runtime";
-const ClockPointerRoot = styled('div', {
-  skipSx: true
-})(({
+const ClockPointerRoot = styled('div')(({
   theme,
   ownerState
 }) => _extends({
@@ -20,9 +18,7 @@ const ClockPointerRoot = styled('div', {
 }, ownerState.toAnimateTransform && {
   transition: theme.transitions.create(['transform', 'height'])
 }));
-const ClockPointerThumb = styled('div', {
-  skipSx: true
-})(({
+const ClockPointerThumb = styled('div')(({
   theme,
   ownerState
 }) => _extends({

package/modern/DatePicker/DatePickerToolbar.js

@@ -10,17 +10,13 @@ import { useUtils } from '../internal/pickers/hooks/useUtils';
 import { isYearAndMonthViews, isYearOnlyView } from './shared';
 import { jsx as _jsx } from "react/jsx-runtime";
 const classes = generateUtilityClasses('PrivateDatePickerToolbar', ['penIcon']);
-const DatePickerToolbarRoot = styled(PickersToolbar, {
-  skipSx: true
-})({
+const DatePickerToolbarRoot = styled(PickersToolbar)({
   [`& .${classes.penIcon}`]: {
     position: 'relative',
     top: 4
   }
 });
-const DatePickerToolbarTitle = styled(Typography, {
-  skipSx: true
-})(({
+const DatePickerToolbarTitle = styled(Typography)(({
   ownerState
 }) => _extends({}, ownerState.isLandscape && {
   margin: 'auto 16px auto auto'

package/modern/DateRangePicker/DateRangePickerInput.js

@@ -8,9 +8,7 @@ import { useMaskedInput } from '../internal/pickers/hooks/useMaskedInput';
 import { WrapperVariantContext } from '../internal/pickers/wrappers/WrapperVariantContext';
 import { executeInTheNextEventLoopTick } from '../internal/pickers/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const DateRangePickerInputRoot = styled('div', {
-  skipSx: true
-})(({
+const DateRangePickerInputRoot = styled('div')(({
   theme
 }) => ({
   display: 'flex',

package/modern/DateRangePicker/DateRangePickerToolbar.js

@@ -10,17 +10,13 @@ import PickersToolbarButton from '../internal/pickers/PickersToolbarButton';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const classes = generateUtilityClasses('PrivateDateRangePickerToolbar', ['penIcon']);
-const DateRangePickerToolbarRoot = styled(PickersToolbar, {
-  skipSx: true
-})({
+const DateRangePickerToolbarRoot = styled(PickersToolbar)({
   [`& .${classes.penIcon}`]: {
     position: 'relative',
     top: 4
   }
 });
-const DateRangePickerToolbarContainer = styled('div', {
-  skipSx: true
-})({
+const DateRangePickerToolbarContainer = styled('div')({
   display: 'flex'
 });
 /**

package/modern/DateRangePicker/DateRangePickerViewDesktop.js

@@ -14,30 +14,22 @@ import { doNothing } from '../internal/pickers/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const DateRangePickerViewDesktopRoot = styled('div', {
-  skipSx: true
-})({
+const DateRangePickerViewDesktopRoot = styled('div')({
   display: 'flex',
   flexDirection: 'row'
 });
-const DateRangePickerViewDesktopContainer = styled('div', {
-  skipSx: true
-})(({
+const DateRangePickerViewDesktopContainer = styled('div')(({
   theme
 }) => ({
   '&:not(:last-of-type)': {
     borderRight: `2px solid ${theme.palette.divider}`
   }
 }));
-const DateRangePickerViewDesktopCalendar = styled(PickersCalendar, {
-  skipSx: true
-})({
+const DateRangePickerViewDesktopCalendar = styled(PickersCalendar)({
   minWidth: 312,
   minHeight: 288
 });
-const DateRangePickerViewDesktopArrowSwitcher = styled(PickersArrowSwitcher, {
-  skipSx: true
-})({
+const DateRangePickerViewDesktopArrowSwitcher = styled(PickersArrowSwitcher)({
   padding: '16px 16px 8px 16px',
   display: 'flex',
   alignItems: 'center',

package/modern/DateTimePicker/DateTimePickerTabs.js

@@ -14,7 +14,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 
 const viewToTab = openView => {
   // TODO: what happens if `openView` is `month`?
-  if (openView === 'day' || openView === 'year') {
+  if (['day', 'month', 'year'].includes(openView)) {
     return 'date';
   }
 
@@ -29,9 +29,7 @@ const tabToView = tab => {
   return 'hours';
 };
 
-const DateTimePickerTabsRoot = styled(Tabs, {
-  skipSx: true
-})(({
+const DateTimePickerTabsRoot = styled(Tabs)(({
   ownerState,
   theme
 }) => _extends({

package/modern/DateTimePicker/DateTimePickerToolbar.js

@@ -16,9 +16,7 @@ import { WrapperVariantContext } from '../internal/pickers/wrappers/WrapperVaria
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const classes = generateUtilityClasses('PrivateDateTimePickerToolbar', ['penIcon']);
-const DateTimePickerToolbarRoot = styled(PickersToolbar, {
-  skipSx: true
-})({
+const DateTimePickerToolbarRoot = styled(PickersToolbar)({
   paddingLeft: 16,
   paddingRight: 16,
   justifyContent: 'space-around',
@@ -28,21 +26,15 @@ const DateTimePickerToolbarRoot = styled(PickersToolbar, {
     right: 8
   }
 });
-const DateTimePickerToolbarDateContainer = styled('div', {
-  skipSx: true
-})({
+const DateTimePickerToolbarDateContainer = styled('div')({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'flex-start'
 });
-const DateTimePickerToolbarTimeContainer = styled('div', {
-  skipSx: true
-})({
+const DateTimePickerToolbarTimeContainer = styled('div')({
   display: 'flex'
 });
-const DateTimePickerToolbarSeparator = styled(PickersToolbarText, {
-  skipSx: true
-})({
+const DateTimePickerToolbarSeparator = styled(PickersToolbarText)({
   margin: '0 4px 0 2px',
   cursor: 'default'
 });

package/modern/LoadingButton/LoadingButton.js

@@ -237,6 +237,8 @@ process.env.NODE_ENV !== "production" ? LoadingButton.propTypes
    * The variant to use.
    * @default 'text'
    */
-  variant: PropTypes.oneOf(['contained', 'outlined', 'text'])
+  variant: PropTypes
+  /* @typescript-to-proptypes-ignore */
+  .oneOfType([PropTypes.oneOf(['contained', 'outlined', 'text']), PropTypes.string])
 } : void 0;
 export default LoadingButton;

package/modern/Masonry/Masonry.js

@@ -167,36 +167,24 @@ const Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
 
   const classes = useUtilityClasses(ownerState);
 
-  const handleResize = elements => {
-    if (!elements) {
+  const handleResize = masonryChildren => {
+    if (!masonryRef.current || !masonryChildren || masonryChildren.length === 0) {
       return;
     }
 
-    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 masonry = masonryRef.current;
+    const masonryFirstChild = masonryRef.current.firstChild;
+    const parentWidth = masonry.clientWidth;
+    const firstChildWidth = masonryFirstChild.clientWidth;
 
-    if (parentWidth === 0 || childWidth === 0 || !masonry || !masonryFirstChild) {
+    if (parentWidth === 0 || firstChildWidth === 0) {
       return;
     }
 
     const firstChildComputedStyle = window.getComputedStyle(masonryFirstChild);
     const firstChildMarginLeft = parseToNumber(firstChildComputedStyle.marginLeft);
     const firstChildMarginRight = parseToNumber(firstChildComputedStyle.marginRight);
-    const currentNumberOfColumns = Math.round(parentWidth / (childWidth + firstChildMarginLeft + firstChildMarginRight));
+    const currentNumberOfColumns = Math.round(parentWidth / (firstChildWidth + firstChildMarginLeft + firstChildMarginRight));
     const columnHeights = new Array(currentNumberOfColumns).fill(0);
     let skip = false;
     masonry.childNodes.forEach(child => {
@@ -249,16 +237,10 @@ const Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
       return undefined;
     }
 
-    const container = masonryRef.current;
-
-    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);
-
-      if (container.firstChild) {
-        resizeObserver.observe(container.firstChild);
-      }
+    if (masonryRef.current) {
+      masonryRef.current.childNodes.forEach(childNode => {
+        resizeObserver.observe(childNode);
+      });
     }
 
     return () => resizeObserver ? resizeObserver.disconnect() : {};

package/modern/MonthPicker/PickersMonth.js

@@ -9,9 +9,7 @@ import { generateUtilityClasses } from '@mui/base';
 import { onSpaceOrEnter } from '../internal/pickers/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const classes = generateUtilityClasses('PrivatePickersMonth', ['root', 'selected']);
-const PickersMonthRoot = styled(Typography, {
-  skipSx: true
-})(({
+const PickersMonthRoot = styled(Typography)(({
   theme
 }) => _extends({
   flex: '1 0 33.33%',