@mui/lab 5.0.0-alpha.63 → 5.0.0-alpha.67

package/node/CalendarPicker/PickersCalendar.js

@@ -32,16 +32,12 @@ 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; }
 
 const weeksContainerHeight = (_dimensions.DAY_SIZE + _dimensions.DAY_MARGIN * 4) * 6;
-const PickersCalendarDayHeader = (0, _styles.styled)('div', {
-  skipSx: true
-})({
+const PickersCalendarDayHeader = (0, _styles.styled)('div')({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center'
 });
-const PickersCalendarWeekDayLabel = (0, _styles.styled)(_Typography.default, {
-  skipSx: true
-})(({
+const PickersCalendarWeekDayLabel = (0, _styles.styled)(_Typography.default)(({
   theme
 }) => ({
   width: 36,
@@ -53,27 +49,19 @@ const PickersCalendarWeekDayLabel = (0, _styles.styled)(_Typography.default, {
   alignItems: 'center',
   color: theme.palette.text.secondary
 }));
-const PickersCalendarLoadingContainer = (0, _styles.styled)('div', {
-  skipSx: true
-})({
+const PickersCalendarLoadingContainer = (0, _styles.styled)('div')({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
   minHeight: weeksContainerHeight
 });
-const PickersCalendarSlideTransition = (0, _styles.styled)(_PickersSlideTransition.default, {
-  skipSx: true
-})({
+const PickersCalendarSlideTransition = (0, _styles.styled)(_PickersSlideTransition.default)({
   minHeight: weeksContainerHeight
 });
-const PickersCalendarWeekContainer = (0, _styles.styled)('div', {
-  skipSx: true
-})({
+const PickersCalendarWeekContainer = (0, _styles.styled)('div')({
   overflow: 'hidden'
 });
-const PickersCalendarWeek = (0, _styles.styled)('div', {
-  skipSx: true
-})({
+const PickersCalendarWeek = (0, _styles.styled)('div')({
   margin: `${_dimensions.DAY_MARGIN}px 0`,
   display: 'flex',
   justifyContent: 'center'

package/node/CalendarPicker/PickersCalendarHeader.js

@@ -34,9 +34,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; }
 
 // tslint:disable-next-line no-relative-import-in-test
-const PickersCalendarHeaderRoot = (0, _styles.styled)('div', {
-  skipSx: true
-})({
+const PickersCalendarHeaderRoot = (0, _styles.styled)('div')({
   display: 'flex',
   alignItems: 'center',
   marginTop: 16,
@@ -47,9 +45,7 @@ const PickersCalendarHeaderRoot = (0, _styles.styled)('div', {
   maxHeight: 30,
   minHeight: 30
 });
-const PickersCalendarHeaderLabel = (0, _styles.styled)('div', {
-  skipSx: true
-})(({
+const PickersCalendarHeaderLabel = (0, _styles.styled)('div')(({
   theme
 }) => (0, _extends2.default)({
   display: 'flex',
@@ -61,19 +57,13 @@ const PickersCalendarHeaderLabel = (0, _styles.styled)('div', {
 }, theme.typography.body1, {
   fontWeight: theme.typography.fontWeightMedium
 }));
-const PickersCalendarHeaderLabelItem = (0, _styles.styled)('div', {
-  skipSx: true
-})({
+const PickersCalendarHeaderLabelItem = (0, _styles.styled)('div')({
   marginRight: 6
 });
-const PickersCalendarHeaderSwitchViewButton = (0, _styles.styled)(_IconButton.default, {
-  skipSx: true
-})({
+const PickersCalendarHeaderSwitchViewButton = (0, _styles.styled)(_IconButton.default)({
   marginRight: 'auto'
 });
-const PickersCalendarHeaderSwitchView = (0, _styles.styled)(_ArrowDropDown.default, {
-  skipSx: true
-})(({
+const PickersCalendarHeaderSwitchView = (0, _styles.styled)(_ArrowDropDown.default)(({
   theme,
   ownerState
 }) => (0, _extends2.default)({

package/node/CalendarPicker/PickersFadeTransitionGroup.js

@@ -27,9 +27,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const classes = (0, _base.generateUtilityClasses)('PrivatePickersFadeTransitionGroup', ['root']);
 const animationDuration = 500;
-const PickersFadeTransitionGroupRoot = (0, _styles.styled)(_reactTransitionGroup.TransitionGroup, {
-  skipSx: true
-})({
+const PickersFadeTransitionGroupRoot = (0, _styles.styled)(_reactTransitionGroup.TransitionGroup)({
   display: 'block',
   position: 'relative'
 });

package/node/CalendarPicker/PickersSlideTransition.js

@@ -32,9 +32,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const classes = (0, _base.generateUtilityClasses)('PrivatePickersSlideTransition', ['root', 'slideEnter-left', 'slideEnter-right', 'slideEnterActive', 'slideEnterActive', 'slideExit', 'slideExitActiveLeft-left', 'slideExitActiveLeft-right']);
 const slideAnimationDuration = 350;
 exports.slideAnimationDuration = slideAnimationDuration;
-const PickersSlideTransitionRoot = (0, _styles.styled)(_reactTransitionGroup.TransitionGroup, {
-  skipSx: true
-})(({
+const PickersSlideTransitionRoot = (0, _styles.styled)(_reactTransitionGroup.TransitionGroup)(({
   theme
 }) => {
   const slideTransition = theme.transitions.create('transform', {

package/node/ClockPicker/Clock.js

@@ -35,9 +35,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; }
 
-const ClockRoot = (0, _styles.styled)('div', {
-  skipSx: true
-})(({
+const ClockRoot = (0, _styles.styled)('div')(({
   theme
 }) => ({
   display: 'flex',
@@ -45,9 +43,7 @@ const ClockRoot = (0, _styles.styled)('div', {
   alignItems: 'center',
   margin: theme.spacing(2)
 }));
-const ClockClock = (0, _styles.styled)('div', {
-  skipSx: true
-})({
+const ClockClock = (0, _styles.styled)('div')({
   backgroundColor: 'rgba(0,0,0,.07)',
   borderRadius: '50%',
   height: 220,
@@ -56,9 +52,7 @@ const ClockClock = (0, _styles.styled)('div', {
   position: 'relative',
   pointerEvents: 'none'
 });
-const ClockSquareMask = (0, _styles.styled)('div', {
-  skipSx: true
-})({
+const ClockSquareMask = (0, _styles.styled)('div')({
   width: '100%',
   height: '100%',
   position: 'absolute',
@@ -75,9 +69,7 @@ const ClockSquareMask = (0, _styles.styled)('div', {
     cursor: 'move'
   }
 });
-const ClockPin = (0, _styles.styled)('div', {
-  skipSx: true
-})(({
+const ClockPin = (0, _styles.styled)('div')(({
   theme
 }) => ({
   width: 6,
@@ -89,9 +81,7 @@ const ClockPin = (0, _styles.styled)('div', {
   left: '50%',
   transform: 'translate(-50%, -50%)'
 }));
-const ClockAmButton = (0, _styles.styled)(_IconButton.default, {
-  skipSx: true
-})(({
+const ClockAmButton = (0, _styles.styled)(_IconButton.default)(({
   theme,
   ownerState
 }) => (0, _extends2.default)({
@@ -106,9 +96,7 @@ const ClockAmButton = (0, _styles.styled)(_IconButton.default, {
     backgroundColor: theme.palette.primary.light
   }
 }));
-const ClockPmButton = (0, _styles.styled)(_IconButton.default, {
-  skipSx: true
-})(({
+const ClockPmButton = (0, _styles.styled)(_IconButton.default)(({
   theme,
   ownerState
 }) => (0, _extends2.default)({

package/node/ClockPicker/ClockNumber.js

@@ -31,9 +31,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const classes = (0, _base.generateUtilityClasses)('PrivateClockNumber', ['selected', 'disabled']);
 exports.classes = classes;
-const ClockNumberRoot = (0, _styles.styled)('span', {
-  skipSx: true
-})(({
+const ClockNumberRoot = (0, _styles.styled)('span')(({
   theme,
   ownerState
 }) => (0, _extends2.default)({

package/node/ClockPicker/ClockPicker.js

@@ -295,7 +295,10 @@ process.env.NODE_ENV !== "production" ? ClockPicker.propTypes
   /**
    * The props used for each slot inside.
    */
-  componentsProps: _propTypes.default.object,
+  componentsProps: _propTypes.default.shape({
+    leftArrowButton: _propTypes.default.object,
+    rightArrowButton: _propTypes.default.object
+  }),
 
   /**
    * Selected date @DateIOType.

package/node/ClockPicker/ClockPointer.js

@@ -25,9 +25,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; }
 
-const ClockPointerRoot = (0, _styles.styled)('div', {
-  skipSx: true
-})(({
+const ClockPointerRoot = (0, _styles.styled)('div')(({
   theme,
   ownerState
 }) => (0, _extends2.default)({
@@ -40,9 +38,7 @@ const ClockPointerRoot = (0, _styles.styled)('div', {
 }, ownerState.toAnimateTransform && {
   transition: theme.transitions.create(['transform', 'height'])
 }));
-const ClockPointerThumb = (0, _styles.styled)('div', {
-  skipSx: true
-})(({
+const ClockPointerThumb = (0, _styles.styled)('div')(({
   theme,
   ownerState
 }) => (0, _extends2.default)({

package/node/DatePicker/DatePicker.js

@@ -148,7 +148,11 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: _propTypes.default.object,
+  componentsProps: _propTypes.default.shape({
+    leftArrowButton: _propTypes.default.object,
+    rightArrowButton: _propTypes.default.object,
+    switchViewButton: _propTypes.default.object
+  }),
 
   /**
    * Default calendar month displayed when `value={null}`.

package/node/DatePicker/DatePickerToolbar.js

@@ -34,17 +34,13 @@ 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; }
 
 const classes = (0, _base.generateUtilityClasses)('PrivateDatePickerToolbar', ['penIcon']);
-const DatePickerToolbarRoot = (0, _styles.styled)(_PickersToolbar.default, {
-  skipSx: true
-})({
+const DatePickerToolbarRoot = (0, _styles.styled)(_PickersToolbar.default)({
   [`& .${classes.penIcon}`]: {
     position: 'relative',
     top: 4
   }
 });
-const DatePickerToolbarTitle = (0, _styles.styled)(_Typography.default, {
-  skipSx: true
-})(({
+const DatePickerToolbarTitle = (0, _styles.styled)(_Typography.default)(({
   ownerState
 }) => (0, _extends2.default)({}, ownerState.isLandscape && {
   margin: 'auto 16px auto auto'

package/node/DateRangePicker/DateRangePicker.js

@@ -196,7 +196,11 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: _propTypes.default.object,
+  componentsProps: _propTypes.default.shape({
+    leftArrowButton: _propTypes.default.object,
+    rightArrowButton: _propTypes.default.object,
+    switchViewButton: _propTypes.default.object
+  }),
 
   /**
    * Default calendar month displayed when `value={null}`.

package/node/DateRangePicker/DateRangePickerInput.js

@@ -31,9 +31,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; }
 
-const DateRangePickerInputRoot = (0, _styles.styled)('div', {
-  skipSx: true
-})(({
+const DateRangePickerInputRoot = (0, _styles.styled)('div')(({
   theme
 }) => ({
   display: 'flex',

package/node/DateRangePicker/DateRangePickerToolbar.js

@@ -30,17 +30,13 @@ 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; }
 
 const classes = (0, _base.generateUtilityClasses)('PrivateDateRangePickerToolbar', ['penIcon']);
-const DateRangePickerToolbarRoot = (0, _styles.styled)(_PickersToolbar.default, {
-  skipSx: true
-})({
+const DateRangePickerToolbarRoot = (0, _styles.styled)(_PickersToolbar.default)({
   [`& .${classes.penIcon}`]: {
     position: 'relative',
     top: 4
   }
 });
-const DateRangePickerToolbarContainer = (0, _styles.styled)('div', {
-  skipSx: true
-})({
+const DateRangePickerToolbarContainer = (0, _styles.styled)('div')({
   display: 'flex'
 });
 /**

package/node/DateRangePicker/DateRangePickerViewDesktop.js

@@ -39,30 +39,22 @@ 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; }
 
-const DateRangePickerViewDesktopRoot = (0, _styles.styled)('div', {
-  skipSx: true
-})({
+const DateRangePickerViewDesktopRoot = (0, _styles.styled)('div')({
   display: 'flex',
   flexDirection: 'row'
 });
-const DateRangePickerViewDesktopContainer = (0, _styles.styled)('div', {
-  skipSx: true
-})(({
+const DateRangePickerViewDesktopContainer = (0, _styles.styled)('div')(({
   theme
 }) => ({
   '&:not(:last-of-type)': {
     borderRight: `2px solid ${theme.palette.divider}`
   }
 }));
-const DateRangePickerViewDesktopCalendar = (0, _styles.styled)(_PickersCalendar.default, {
-  skipSx: true
-})({
+const DateRangePickerViewDesktopCalendar = (0, _styles.styled)(_PickersCalendar.default)({
   minWidth: 312,
   minHeight: 288
 });
-const DateRangePickerViewDesktopArrowSwitcher = (0, _styles.styled)(_PickersArrowSwitcher.default, {
-  skipSx: true
-})({
+const DateRangePickerViewDesktopArrowSwitcher = (0, _styles.styled)(_PickersArrowSwitcher.default)({
   padding: '16px 16px 8px 16px',
   display: 'flex',
   alignItems: 'center',

package/node/DateTimePicker/DateTimePicker.js

@@ -160,7 +160,11 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: _propTypes.default.object,
+  componentsProps: _propTypes.default.shape({
+    leftArrowButton: _propTypes.default.object,
+    rightArrowButton: _propTypes.default.object,
+    switchViewButton: _propTypes.default.object
+  }),
 
   /**
    * Date tab icon.

package/node/DateTimePicker/DateTimePickerTabs.js

@@ -33,7 +33,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const viewToTab = openView => {
   // TODO: what happens if `openView` is `month`?
-  if (openView === 'day' || openView === 'year') {
+  if (['day', 'month', 'year'].includes(openView)) {
     return 'date';
   }
 
@@ -48,9 +48,7 @@ const tabToView = tab => {
   return 'hours';
 };
 
-const DateTimePickerTabsRoot = (0, _styles.styled)(_Tabs.default, {
-  skipSx: true
-})(({
+const DateTimePickerTabsRoot = (0, _styles.styled)(_Tabs.default)(({
   ownerState,
   theme
 }) => (0, _extends2.default)({

package/node/DateTimePicker/DateTimePickerToolbar.js

@@ -40,9 +40,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; }
 
 const classes = (0, _base.generateUtilityClasses)('PrivateDateTimePickerToolbar', ['penIcon']);
-const DateTimePickerToolbarRoot = (0, _styles.styled)(_PickersToolbar.default, {
-  skipSx: true
-})({
+const DateTimePickerToolbarRoot = (0, _styles.styled)(_PickersToolbar.default)({
   paddingLeft: 16,
   paddingRight: 16,
   justifyContent: 'space-around',
@@ -52,21 +50,15 @@ const DateTimePickerToolbarRoot = (0, _styles.styled)(_PickersToolbar.default, {
     right: 8
   }
 });
-const DateTimePickerToolbarDateContainer = (0, _styles.styled)('div', {
-  skipSx: true
-})({
+const DateTimePickerToolbarDateContainer = (0, _styles.styled)('div')({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'flex-start'
 });
-const DateTimePickerToolbarTimeContainer = (0, _styles.styled)('div', {
-  skipSx: true
-})({
+const DateTimePickerToolbarTimeContainer = (0, _styles.styled)('div')({
   display: 'flex'
 });
-const DateTimePickerToolbarSeparator = (0, _styles.styled)(_PickersToolbarText.default, {
-  skipSx: true
-})({
+const DateTimePickerToolbarSeparator = (0, _styles.styled)(_PickersToolbarText.default)({
   margin: '0 4px 0 2px',
   cursor: 'default'
 });

package/node/DesktopDatePicker/DesktopDatePicker.js

@@ -143,7 +143,11 @@ process.env.NODE_ENV !== "production" ? DesktopDatePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: _propTypes.default.object,
+  componentsProps: _propTypes.default.shape({
+    leftArrowButton: _propTypes.default.object,
+    rightArrowButton: _propTypes.default.object,
+    switchViewButton: _propTypes.default.object
+  }),
 
   /**
    * Default calendar month displayed when `value={null}`.

package/node/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -180,7 +180,11 @@ process.env.NODE_ENV !== "production" ? DesktopDateRangePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: _propTypes.default.object,
+  componentsProps: _propTypes.default.shape({
+    leftArrowButton: _propTypes.default.object,
+    rightArrowButton: _propTypes.default.object,
+    switchViewButton: _propTypes.default.object
+  }),
 
   /**
    * Default calendar month displayed when `value={null}`.

package/node/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -153,7 +153,11 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: _propTypes.default.object,
+  componentsProps: _propTypes.default.shape({
+    leftArrowButton: _propTypes.default.object,
+    rightArrowButton: _propTypes.default.object,
+    switchViewButton: _propTypes.default.object
+  }),
 
   /**
    * Date tab icon.

package/node/Masonry/Masonry.js

@@ -191,40 +191,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)) {
-      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;
-    }
+    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 => {
@@ -277,16 +261,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/node/MobileDatePicker/MobileDatePicker.js

@@ -157,7 +157,11 @@ process.env.NODE_ENV !== "production" ? MobileDatePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: _propTypes.default.object,
+  componentsProps: _propTypes.default.shape({
+    leftArrowButton: _propTypes.default.object,
+    rightArrowButton: _propTypes.default.object,
+    switchViewButton: _propTypes.default.object
+  }),
 
   /**
    * Default calendar month displayed when `value={null}`.

package/node/MobileDateRangePicker/MobileDateRangePicker.js

@@ -194,7 +194,11 @@ process.env.NODE_ENV !== "production" ? MobileDateRangePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: _propTypes.default.object,
+  componentsProps: _propTypes.default.shape({
+    leftArrowButton: _propTypes.default.object,
+    rightArrowButton: _propTypes.default.object,
+    switchViewButton: _propTypes.default.object
+  }),
 
   /**
    * Default calendar month displayed when `value={null}`.

package/node/MobileDateTimePicker/MobileDateTimePicker.js

@@ -169,7 +169,11 @@ process.env.NODE_ENV !== "production" ? MobileDateTimePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: _propTypes.default.object,
+  componentsProps: _propTypes.default.shape({
+    leftArrowButton: _propTypes.default.object,
+    rightArrowButton: _propTypes.default.object,
+    switchViewButton: _propTypes.default.object
+  }),
 
   /**
    * Date tab icon.

package/node/MonthPicker/PickersMonth.js

@@ -32,9 +32,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; }
 
 const classes = (0, _base.generateUtilityClasses)('PrivatePickersMonth', ['root', 'selected']);
-const PickersMonthRoot = (0, _styles.styled)(_Typography.default, {
-  skipSx: true
-})(({
+const PickersMonthRoot = (0, _styles.styled)(_Typography.default)(({
   theme
 }) => (0, _extends2.default)({
   flex: '1 0 33.33%',

package/node/StaticDatePicker/StaticDatePicker.js

@@ -130,7 +130,11 @@ process.env.NODE_ENV !== "production" ? StaticDatePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: _propTypes.default.object,
+  componentsProps: _propTypes.default.shape({
+    leftArrowButton: _propTypes.default.object,
+    rightArrowButton: _propTypes.default.object,
+    switchViewButton: _propTypes.default.object
+  }),
 
   /**
    * Default calendar month displayed when `value={null}`.

package/node/StaticDateRangePicker/StaticDateRangePicker.js

@@ -168,7 +168,11 @@ process.env.NODE_ENV !== "production" ? StaticDateRangePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: _propTypes.default.object,
+  componentsProps: _propTypes.default.shape({
+    leftArrowButton: _propTypes.default.object,
+    rightArrowButton: _propTypes.default.object,
+    switchViewButton: _propTypes.default.object
+  }),
 
   /**
    * Default calendar month displayed when `value={null}`.

package/node/StaticDateTimePicker/StaticDateTimePicker.js

@@ -142,7 +142,11 @@ process.env.NODE_ENV !== "production" ? StaticDateTimePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: _propTypes.default.object,
+  componentsProps: _propTypes.default.shape({
+    leftArrowButton: _propTypes.default.object,
+    rightArrowButton: _propTypes.default.object,
+    switchViewButton: _propTypes.default.object
+  }),
 
   /**
    * Date tab icon.