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

package/node/CalendarPickerSkeleton/CalendarPickerSkeleton.js

@@ -171,7 +171,7 @@ process.env.NODE_ENV !== "production" ? CalendarPickerSkeleton.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = CalendarPickerSkeleton;
 exports.default = _default;

package/node/DatePicker/DatePicker.js

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

package/node/DateRangePicker/DateRangePicker.js

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

package/node/DateRangePickerDay/DateRangePickerDay.js

@@ -253,7 +253,7 @@ process.env.NODE_ENV !== "production" ? DateRangePickerDay.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
 /**
  *

package/node/DateTimePicker/DateTimePicker.js

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

package/node/DesktopDatePicker/DesktopDatePicker.js

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

package/node/DesktopDateRangePicker/DesktopDateRangePicker.js

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

package/node/DesktopDateTimePicker/DesktopDateTimePicker.js

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

package/node/LoadingButton/LoadingButton.js

@@ -232,7 +232,7 @@ process.env.NODE_ENV !== "production" ? LoadingButton.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = LoadingButton;
 exports.default = _default;

package/node/Masonry/Masonry.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getStyle = exports.default = void 0;
+exports.parseToNumber = exports.getStyle = exports.default = void 0;
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
@@ -35,6 +35,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 parseToNumber = val => {
+  return Number(val.replace('px', ''));
+};
+
+exports.parseToNumber = parseToNumber;
+
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -43,44 +49,6 @@ const useUtilityClasses = ownerState => {
     root: ['root']
   };
   return (0, _core.unstable_composeClasses)(slots, _masonryClasses.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}
-
-
-const computeBreakpointsBase = (breakpoints, prop) => {
-  const base = {};
-
-  if (Array.isArray(prop)) {
-    Object.keys(breakpoints.values).forEach((breakpoint, i, arr) => {
-      if (i < arr.length) {
-        base[breakpoint] = true;
-      }
-    });
-  } else {
-    Object.keys(breakpoints.values).forEach(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}
-
-
-const validatePropValues = (base, prop) => {
-  const values = {};
-
-  if (Array.isArray(prop)) {
-    Object.keys(base).forEach((breakpoint, i) => {
-      values[breakpoint] = prop[i];
-    });
-    return values;
-  }
-
-  return prop;
 };
 
 const getStyle = ({
@@ -118,10 +86,9 @@ const getStyle = ({
     return (0, _extends2.default)({}, styles, stylesSSR);
   }
 
-  const spacingBreakpointsBase = computeBreakpointsBase(theme.breakpoints, ownerState.spacing);
   const spacingValues = (0, _system.unstable_resolveBreakpointValues)({
-    values: validatePropValues(spacingBreakpointsBase, ownerState.spacing),
-    base: spacingBreakpointsBase
+    values: ownerState.spacing,
+    breakpoints: theme.breakpoints.values
   });
   const transformer = (0, _system.createUnarySpacing)(theme);
 
@@ -141,10 +108,9 @@ const getStyle = ({
   styles = (0, _utils.deepmerge)(styles, (0, _system.handleBreakpoints)({
     theme
   }, spacingValues, spacingStyleFromPropValue));
-  const columnBreakpointsBase = computeBreakpointsBase(theme.breakpoints, ownerState.columns);
   const columnValues = (0, _system.unstable_resolveBreakpointValues)({
-    values: validatePropValues(columnBreakpointsBase, ownerState.columns),
-    base: columnBreakpointsBase
+    values: ownerState.columns,
+    breakpoints: theme.breakpoints.values
   });
 
   const columnStyleFromPropValue = propValue => {
@@ -229,8 +195,8 @@ const Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
       const parentWidth = masonryRef.current.clientWidth;
       const childWidth = masonryRef.current.firstChild.clientWidth;
       const firstChildComputedStyle = window.getComputedStyle(masonryRef.current.firstChild);
-      const firstChildMarginLeft = Number(firstChildComputedStyle.marginLeft.replace('px', ''));
-      const firstChildMarginRight = Number(firstChildComputedStyle.marginRight.replace('px', ''));
+      const firstChildMarginLeft = parseToNumber(firstChildComputedStyle.marginLeft);
+      const firstChildMarginRight = parseToNumber(firstChildComputedStyle.marginRight);
 
       if (parentWidth === 0 || childWidth === 0) {
         return;
@@ -245,10 +211,10 @@ const Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
         }
 
         const childComputedStyle = window.getComputedStyle(child);
-        const childMarginTop = Number(childComputedStyle.marginTop.replace('px', ''));
-        const childMarginBottom = Number(childComputedStyle.marginBottom.replace('px', '')); // if any one of children isn't rendered yet, masonry's height shouldn't be computed yet
+        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
 
-        const childHeight = child.clientHeight ? Math.ceil(child.clientHeight) + childMarginTop + childMarginBottom : 0;
+        const childHeight = parseToNumber(childComputedStyle.height) ? Math.ceil(parseToNumber(childComputedStyle.height)) + childMarginTop + childMarginBottom : 0;
 
         if (childHeight === 0) {
           skip = true;
@@ -283,7 +249,7 @@ const Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
 
 
     if (typeof ResizeObserver === 'undefined') {
-      return null;
+      return undefined;
     }
 
     const resizeObserver = new ResizeObserver(handleResize);
@@ -302,7 +268,7 @@ const Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
     return () => {
       resizeObserver.disconnect();
     };
-  }, [columns, spacing]);
+  }, [columns, spacing, children]);
   const handleRef = (0, _utils.unstable_useForkRef)(ref, masonryRef);
   const lineBreakStyle = {
     flexBasis: '100%',
@@ -388,7 +354,7 @@ process.env.NODE_ENV !== "production" ? Masonry.propTypes
   /**
    * Allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = Masonry;
 exports.default = _default;

package/node/MobileDatePicker/MobileDatePicker.js

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

package/node/MobileDateRangePicker/MobileDateRangePicker.js

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

package/node/MobileDateTimePicker/MobileDateTimePicker.js

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

package/node/MonthPicker/MonthPicker.js

@@ -29,7 +29,7 @@ var _useUtils = require("../internal/pickers/hooks/useUtils");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["className", "date", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "onMonthChange"];
+const _excluded = ["className", "date", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "onMonthChange", "readOnly"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -70,12 +70,14 @@ const MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(inProps,
   const {
     className,
     date,
+    disabled,
     disableFuture,
     disablePast,
     maxDate,
     minDate,
     onChange,
-    onMonthChange
+    onMonthChange,
+    readOnly
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ownerState = props;
@@ -93,6 +95,10 @@ const MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(inProps,
   };
 
   const onMonthSelect = month => {
+    if (readOnly) {
+      return;
+    }
+
     const newDate = utils.setMonth(date || now, month);
     onChange(newDate, 'finish');
 
@@ -113,7 +119,7 @@ const MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(inProps,
         value: monthNumber,
         selected: monthNumber === currentMonth,
         onSelect: onMonthSelect,
-        disabled: shouldDisableMonth(month),
+        disabled: disabled || shouldDisableMonth(month),
         children: monthText
       }, monthText);
     })
@@ -142,6 +148,11 @@ process.env.NODE_ENV !== "production" ? MonthPicker.propTypes
    */
   date: _propTypes.default.any,
 
+  /**
+   * If `true` picker is disabled
+   */
+  disabled: _propTypes.default.bool,
+
   /**
    * If `true` future days are disabled.
    */
@@ -172,10 +183,15 @@ process.env.NODE_ENV !== "production" ? MonthPicker.propTypes
    */
   onMonthChange: _propTypes.default.func,
 
+  /**
+   * If `true` picker is readonly
+   */
+  readOnly: _propTypes.default.bool,
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
 /**
  *

package/node/PickersDay/PickersDay.js

@@ -405,7 +405,7 @@ process.env.NODE_ENV !== "production" ? PickersDay.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object]),
 
   /**
    * If `true`, renders as today date.

package/node/StaticDatePicker/StaticDatePicker.js

@@ -145,6 +145,7 @@ process.env.NODE_ENV !== "production" ? StaticDatePicker.propTypes
 
   /**
    * If `true`, the picker and text field are disabled.
+   * @default false
    */
   disabled: _propTypes.default.bool,
 
@@ -326,6 +327,7 @@ process.env.NODE_ENV !== "production" ? StaticDatePicker.propTypes
 
   /**
    * Make picker read only.
+   * @default false
    */
   readOnly: _propTypes.default.bool,
 

package/node/StaticDateRangePicker/StaticDateRangePicker.js

@@ -189,6 +189,7 @@ process.env.NODE_ENV !== "production" ? StaticDateRangePicker.propTypes
 
   /**
    * If `true`, the picker and text field are disabled.
+   * @default false
    */
   disabled: _propTypes.default.bool,
 
@@ -367,6 +368,7 @@ process.env.NODE_ENV !== "production" ? StaticDateRangePicker.propTypes
 
   /**
    * Make picker read only.
+   * @default false
    */
   readOnly: _propTypes.default.bool,
 

package/node/StaticDateTimePicker/StaticDateTimePicker.js

@@ -162,6 +162,7 @@ process.env.NODE_ENV !== "production" ? StaticDateTimePicker.propTypes
 
   /**
    * If `true`, the picker and text field are disabled.
+   * @default false
    */
   disabled: _propTypes.default.bool,
 
@@ -395,6 +396,7 @@ process.env.NODE_ENV !== "production" ? StaticDateTimePicker.propTypes
 
   /**
    * Make picker read only.
+   * @default false
    */
   readOnly: _propTypes.default.bool,
 

package/node/TabPanel/TabPanel.js

@@ -111,7 +111,7 @@ process.env.NODE_ENV !== "production" ? TabPanel.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object]),
 
   /**
    * The `value` of the corresponding `Tab`. Must use the index of the `Tab` when

package/node/Timeline/Timeline.js

@@ -130,7 +130,7 @@ process.env.NODE_ENV !== "production" ? Timeline.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
 /**
  *

package/node/TimelineConnector/TimelineConnector.js

@@ -97,7 +97,7 @@ process.env.NODE_ENV !== "production" ? TimelineConnector.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = TimelineConnector;
 exports.default = _default;

package/node/TimelineContent/TimelineContent.js

@@ -115,7 +115,7 @@ process.env.NODE_ENV !== "production" ? TimelineContent.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = TimelineContent;
 exports.default = _default;

package/node/TimelineDot/TimelineDot.js

@@ -136,7 +136,7 @@ process.env.NODE_ENV !== "production" ? TimelineDot.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object]),
 
   /**
    * The dot can appear filled or outlined.

package/node/TimelineItem/TimelineItem.js

@@ -152,7 +152,7 @@ process.env.NODE_ENV !== "production" ? TimelineItem.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = TimelineItem;
 exports.default = _default;

package/node/TimelineOppositeContent/TimelineOppositeContent.js

@@ -116,7 +116,7 @@ process.env.NODE_ENV !== "production" ? TimelineOppositeContent.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
 TimelineOppositeContent.muiName = 'TimelineOppositeContent';
 var _default = TimelineOppositeContent;

package/node/TimelineSeparator/TimelineSeparator.js

@@ -94,7 +94,7 @@ process.env.NODE_ENV !== "production" ? TimelineSeparator.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = TimelineSeparator;
 exports.default = _default;

package/node/TreeItem/TreeItem.js

@@ -428,7 +428,7 @@ process.env.NODE_ENV !== "production" ? TreeItem.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object]),
 
   /**
    * The component used for the transition.

package/node/TreeView/TreeView.js

@@ -992,7 +992,7 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = TreeView;
 exports.default = _default;

package/node/YearPicker/YearPicker.js

@@ -64,6 +64,7 @@ const YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inProps, re
     autoFocus,
     className,
     date,
+    disabled,
     disableFuture,
     disablePast,
     isDateDisabled,
@@ -72,6 +73,7 @@ const YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inProps, re
     onChange,
     onFocusedDayChange,
     onYearChange,
+    readOnly,
     shouldDisableYear
   } = props;
   const ownerState = props;
@@ -86,6 +88,10 @@ const YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inProps, re
   const [focusedYear, setFocusedYear] = React.useState(currentYear);
 
   const handleYearSelection = (event, year, isFinish = 'finish') => {
+    if (readOnly) {
+      return;
+    }
+
     const submitDate = newDate => {
       onChange(newDate, isFinish);
 
@@ -164,7 +170,7 @@ const YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inProps, re
         onKeyDown: handleKeyDown,
         autoFocus: autoFocus && yearNumber === focusedYear,
         ref: selected ? selectedYearRef : undefined,
-        disabled: disablePast && utils.isBeforeYear(year, now) || disableFuture && utils.isAfterYear(year, now) || shouldDisableYear && shouldDisableYear(year),
+        disabled: disabled || disablePast && utils.isBeforeYear(year, now) || disableFuture && utils.isAfterYear(year, now) || shouldDisableYear && shouldDisableYear(year),
         children: utils.format(year, 'year')
       }, utils.format(year, 'year'));
     })
@@ -198,6 +204,11 @@ process.env.NODE_ENV !== "production" ? YearPicker.propTypes
    */
   date: _propTypes.default.any,
 
+  /**
+   * @ignore
+   */
+  disabled: _propTypes.default.bool,
+
   /**
    * @ignore
    */
@@ -238,6 +249,11 @@ process.env.NODE_ENV !== "production" ? YearPicker.propTypes
    */
   onYearChange: _propTypes.default.func,
 
+  /**
+   * @ignore
+   */
+  readOnly: _propTypes.default.bool,
+
   /**
    * Disable specific years dynamically.
    * Works like `shouldDisableDate` but for year selection view @DateIOType.

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.0-alpha.53
+/** @license MUI v5.0.0-alpha.54
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

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

@@ -90,7 +90,9 @@ function createPickerRender(_ref = {}) {
     locale
   } = _ref,
       renderOptions = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
-  const clientRender = (0, _utils.createClientRender)(renderOptions);
+  const {
+    render: clientRender
+  } = (0, _utils.createRenderer)(renderOptions);
 
   function Wrapper({
     children