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

package/legacy/Masonry/Masonry.js

@@ -12,6 +12,9 @@ import * as React from 'react';
 import { getMasonryUtilityClass } from './masonryClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+export var parseToNumber = function parseToNumber(val) {
+  return Number(val.replace('px', ''));
+};
 
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
@@ -19,44 +22,6 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
     root: ['root']
   };
   return composeClasses(slots, getMasonryUtilityClass, classes);
-}; // compute base for responsive values; e.g.,
-// [1,2,3] => {xs: true, sm: true, md: true}
-// {xs: 1, sm: 2, md: 3} => {xs: true, sm: true, md: true}
-
-
-var computeBreakpointsBase = function computeBreakpointsBase(breakpoints, prop) {
-  var base = {};
-
-  if (Array.isArray(prop)) {
-    Object.keys(breakpoints.values).forEach(function (breakpoint, i, arr) {
-      if (i < arr.length) {
-        base[breakpoint] = true;
-      }
-    });
-  } else {
-    Object.keys(breakpoints.values).forEach(function (breakpoint) {
-      if (prop[breakpoint] != null) {
-        base[breakpoint] = true;
-      }
-    });
-  }
-
-  return base;
-}; // if prop is an array, convert to object; e.g.,
-// (base: {xs: true, sm: true, md: true}, prop: [1,2,3]) => {xs: 1, sm: 2, md: 3}
-
-
-var validatePropValues = function validatePropValues(base, prop) {
-  var values = {};
-
-  if (Array.isArray(prop)) {
-    Object.keys(base).forEach(function (breakpoint, i) {
-      values[breakpoint] = prop[i];
-    });
-    return values;
-  }
-
-  return prop;
 };
 
 export var getStyle = function getStyle(_ref) {
@@ -93,10 +58,9 @@ export var getStyle = function getStyle(_ref) {
     return _extends({}, styles, stylesSSR);
   }
 
-  var spacingBreakpointsBase = computeBreakpointsBase(theme.breakpoints, ownerState.spacing);
   var spacingValues = resolveBreakpointValues({
-    values: validatePropValues(spacingBreakpointsBase, ownerState.spacing),
-    base: spacingBreakpointsBase
+    values: ownerState.spacing,
+    breakpoints: theme.breakpoints.values
   });
   var transformer = createUnarySpacing(theme);
 
@@ -116,10 +80,9 @@ export var getStyle = function getStyle(_ref) {
   styles = deepmerge(styles, handleBreakpoints({
     theme: theme
   }, spacingValues, spacingStyleFromPropValue));
-  var columnBreakpointsBase = computeBreakpointsBase(theme.breakpoints, ownerState.columns);
   var columnValues = resolveBreakpointValues({
-    values: validatePropValues(columnBreakpointsBase, ownerState.columns),
-    base: columnBreakpointsBase
+    values: ownerState.columns,
+    breakpoints: theme.breakpoints.values
   });
 
   var columnStyleFromPropValue = function columnStyleFromPropValue(propValue) {
@@ -214,8 +177,8 @@ var Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
       var parentWidth = masonryRef.current.clientWidth;
       var childWidth = masonryRef.current.firstChild.clientWidth;
       var firstChildComputedStyle = window.getComputedStyle(masonryRef.current.firstChild);
-      var firstChildMarginLeft = Number(firstChildComputedStyle.marginLeft.replace('px', ''));
-      var firstChildMarginRight = Number(firstChildComputedStyle.marginRight.replace('px', ''));
+      var firstChildMarginLeft = parseToNumber(firstChildComputedStyle.marginLeft);
+      var firstChildMarginRight = parseToNumber(firstChildComputedStyle.marginRight);
 
       if (parentWidth === 0 || childWidth === 0) {
         return;
@@ -230,10 +193,10 @@ var Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
         }
 
         var childComputedStyle = window.getComputedStyle(child);
-        var childMarginTop = Number(childComputedStyle.marginTop.replace('px', ''));
-        var childMarginBottom = Number(childComputedStyle.marginBottom.replace('px', '')); // if any one of children isn't rendered yet, masonry's height shouldn't be computed yet
+        var childMarginTop = parseToNumber(childComputedStyle.marginTop);
+        var childMarginBottom = parseToNumber(childComputedStyle.marginBottom); // if any one of children isn't rendered yet, masonry's height shouldn't be computed yet
 
-        var childHeight = child.clientHeight ? Math.ceil(child.clientHeight) + childMarginTop + childMarginBottom : 0;
+        var childHeight = parseToNumber(childComputedStyle.height) ? Math.ceil(parseToNumber(childComputedStyle.height)) + childMarginTop + childMarginBottom : 0;
 
         if (childHeight === 0) {
           skip = true;
@@ -268,7 +231,7 @@ var Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
 
 
     if (typeof ResizeObserver === 'undefined') {
-      return null;
+      return undefined;
     }
 
     var resizeObserver = new ResizeObserver(handleResize);
@@ -287,7 +250,7 @@ var Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
     return function () {
       resizeObserver.disconnect();
     };
-  }, [columns, spacing]);
+  }, [columns, spacing, children]);
   var handleRef = useForkRef(ref, masonryRef);
   var lineBreakStyle = {
     flexBasis: '100%',
@@ -375,6 +338,6 @@ process.env.NODE_ENV !== "production" ? Masonry.propTypes
   /**
    * Allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default Masonry;

package/legacy/MobileDatePicker/MobileDatePicker.js

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

package/legacy/MobileDateRangePicker/MobileDateRangePicker.js

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

package/legacy/MobileDateTimePicker/MobileDateTimePicker.js

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

package/legacy/MonthPicker/MonthPicker.js

@@ -41,13 +41,15 @@ var MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(inProps, re
 
   var className = props.className,
       date = props.date,
+      disabled = props.disabled,
       disableFuture = props.disableFuture,
       disablePast = props.disablePast,
       maxDate = props.maxDate,
       minDate = props.minDate,
       onChange = props.onChange,
       onMonthChange = props.onMonthChange,
-      other = _objectWithoutProperties(props, ["className", "date", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "onMonthChange"]);
+      readOnly = props.readOnly,
+      other = _objectWithoutProperties(props, ["className", "date", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "onMonthChange", "readOnly"]);
 
   var ownerState = props;
   var classes = useUtilityClasses(ownerState);
@@ -64,6 +66,10 @@ var MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(inProps, re
   };
 
   var onMonthSelect = function onMonthSelect(month) {
+    if (readOnly) {
+      return;
+    }
+
     var newDate = utils.setMonth(date || now, month);
     onChange(newDate, 'finish');
 
@@ -84,7 +90,7 @@ var MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(inProps, re
         value: monthNumber,
         selected: monthNumber === currentMonth,
         onSelect: onMonthSelect,
-        disabled: shouldDisableMonth(month),
+        disabled: disabled || shouldDisableMonth(month),
         children: monthText
       }, monthText);
     })
@@ -113,6 +119,11 @@ process.env.NODE_ENV !== "production" ? MonthPicker.propTypes
    */
   date: PropTypes.any,
 
+  /**
+   * If `true` picker is disabled
+   */
+  disabled: PropTypes.bool,
+
   /**
    * If `true` future days are disabled.
    */
@@ -143,10 +154,15 @@ process.env.NODE_ENV !== "production" ? MonthPicker.propTypes
    */
   onMonthChange: PropTypes.func,
 
+  /**
+   * If `true` picker is readonly
+   */
+  readOnly: PropTypes.bool,
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 /**
  *

package/legacy/PickersDay/PickersDay.js

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

package/legacy/StaticDatePicker/StaticDatePicker.js

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

package/legacy/StaticDateRangePicker/StaticDateRangePicker.js

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

package/legacy/StaticDateTimePicker/StaticDateTimePicker.js

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

package/legacy/TabPanel/TabPanel.js

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

package/legacy/Timeline/Timeline.js

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

package/legacy/TimelineConnector/TimelineConnector.js

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

package/legacy/TimelineContent/TimelineContent.js

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

package/legacy/TimelineDot/TimelineDot.js

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

package/legacy/TimelineItem/TimelineItem.js

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

package/legacy/TimelineOppositeContent/TimelineOppositeContent.js

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

package/legacy/TimelineSeparator/TimelineSeparator.js

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

package/legacy/TreeItem/TreeItem.js

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

package/legacy/TreeView/TreeView.js

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

package/legacy/YearPicker/YearPicker.js

@@ -40,6 +40,7 @@ var YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inProps, ref)
   var autoFocus = props.autoFocus,
       className = props.className,
       date = props.date,
+      disabled = props.disabled,
       disableFuture = props.disableFuture,
       disablePast = props.disablePast,
       isDateDisabled = props.isDateDisabled,
@@ -48,6 +49,7 @@ var YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inProps, ref)
       onChange = props.onChange,
       onFocusedDayChange = props.onFocusedDayChange,
       onYearChange = props.onYearChange,
+      readOnly = props.readOnly,
       shouldDisableYear = props.shouldDisableYear;
   var ownerState = props;
   var classes = useUtilityClasses(ownerState);
@@ -66,6 +68,10 @@ var YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inProps, ref)
   var handleYearSelection = function handleYearSelection(event, year) {
     var isFinish = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'finish';
 
+    if (readOnly) {
+      return;
+    }
+
     var submitDate = function submitDate(newDate) {
       onChange(newDate, isFinish);
 
@@ -144,7 +150,7 @@ var YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inProps, ref)
         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'));
     })
@@ -178,6 +184,11 @@ process.env.NODE_ENV !== "production" ? YearPicker.propTypes
    */
   date: PropTypes.any,
 
+  /**
+   * @ignore
+   */
+  disabled: PropTypes.bool,
+
   /**
    * @ignore
    */
@@ -218,6 +229,11 @@ process.env.NODE_ENV !== "production" ? YearPicker.propTypes
    */
   onYearChange: PropTypes.func,
 
+  /**
+   * @ignore
+   */
+  readOnly: PropTypes.bool,
+
   /**
    * Disable specific years dynamically.
    * Works like `shouldDisableDate` but for year selection view @DateIOType.

package/legacy/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/legacy/internal/pickers/test-utils.js

@@ -11,7 +11,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import * as React from 'react';
 import { parseISO } from 'date-fns';
-import { createClientRender, fireEvent, screen } from 'test/utils';
+import { createRenderer, fireEvent, screen } from 'test/utils';
 import AdapterDateFns from '@mui/lab/AdapterDateFns';
 import LocalizationProvider from '@mui/lab/LocalizationProvider'; // TODO make possible to pass here any utils using cli
 
@@ -84,7 +84,8 @@ export function createPickerRender() {
   var locale = _ref2.locale,
       renderOptions = _objectWithoutProperties(_ref2, ["locale"]);
 
-  var clientRender = createClientRender(renderOptions);
+  var _createRenderer = createRenderer(renderOptions),
+      clientRender = _createRenderer.render;
 
   function Wrapper(_ref3) {
     var children = _ref3.children;

package/modern/CalendarPicker/CalendarPicker.js

@@ -230,6 +230,12 @@ process.env.NODE_ENV !== "production" ? CalendarPicker.propTypes
    */
   defaultCalendarMonth: PropTypes.any,
 
+  /**
+   * If `true`, the picker and text field are disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
+
   /**
    * @default false
    */
@@ -278,6 +284,12 @@ process.env.NODE_ENV !== "production" ? CalendarPicker.propTypes
    */
   openTo: PropTypes.oneOf(['day', 'month', 'year']),
 
+  /**
+   * Make picker read only.
+   * @default false
+   */
+  readOnly: PropTypes.bool,
+
   /**
    * Disable heavy animations.
    * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)

package/modern/CalendarPicker/PickersCalendar.js

@@ -70,6 +70,7 @@ function PickersCalendar(props) {
     className,
     currentMonth,
     date,
+    disabled,
     disableHighlightToday,
     focusedDay,
     isDateDisabled,
@@ -77,6 +78,7 @@ function PickersCalendar(props) {
     loading,
     onChange,
     onMonthSwitchingAnimationEnd,
+    readOnly,
     reduceAnimations,
     renderDay,
     renderLoading = () => _span || (_span = /*#__PURE__*/_jsx("span", {
@@ -89,10 +91,14 @@ function PickersCalendar(props) {
   const now = useNow();
   const utils = useUtils();
   const handleDaySelect = React.useCallback((day, isFinish = 'finish') => {
-    // TODO possibly buggy line figure out and add tests
+    if (readOnly) {
+      return;
+    } // TODO possibly buggy line figure out and add tests
+
+
     const finalDate = Array.isArray(date) ? day : utils.mergeDateAndTime(day, date || now);
     onChange(finalDate, isFinish);
-  }, [date, now, onChange, utils]);
+  }, [date, now, onChange, readOnly, utils]);
   const currentMonthNumber = utils.getMonth(currentMonth);
   const selectedDates = (Array.isArray(date) ? date : [date]).filter(Boolean).map(selectedDateItem => selectedDateItem && utils.startOfDay(selectedDateItem)); // need a new ref whenever the `key` of the transition changes: https://reactcommunity.org/react-transition-group/transition#Transition-prop-nodeRef.
 
@@ -126,7 +132,7 @@ function PickersCalendar(props) {
               key: day?.toString(),
               day,
               isAnimating: isMonthSwitchingAnimating,
-              disabled: isDateDisabled(day),
+              disabled: disabled || isDateDisabled(day),
               allowSameDateSelection,
               autoFocus: autoFocus && focusedDay !== null && utils.isSameDay(day, focusedDay),
               today: utils.isSameDay(day, now),

package/modern/CalendarPicker/PickersCalendarHeader.js

@@ -74,6 +74,7 @@ function PickersCalendarHeader(props) {
     components = {},
     componentsProps = {},
     currentMonth: month,
+    disabled,
     disableFuture,
     disablePast,
     getViewSwitchingButtonText = getSwitchingViewAriaText,
@@ -95,16 +96,16 @@ function PickersCalendarHeader(props) {
   const selectPreviousMonth = () => onMonthChange(utils.getPreviousMonth(month), 'right');
 
   const isNextMonthDisabled = useNextMonthDisabled(month, {
-    disableFuture,
+    disableFuture: disableFuture || disabled,
     maxDate
   });
   const isPreviousMonthDisabled = usePreviousMonthDisabled(month, {
-    disablePast,
+    disablePast: disablePast || disabled,
     minDate
   });
 
   const handleToggleView = () => {
-    if (views.length === 1 || !onViewChange) {
+    if (views.length === 1 || !onViewChange || disabled) {
       return;
     }
 
@@ -145,7 +146,7 @@ function PickersCalendarHeader(props) {
           ownerState: ownerState,
           children: utils.format(month, 'year')
         })
-      }), views.length > 1 && /*#__PURE__*/_jsx(PickersCalendarHeaderSwitchViewButton, _extends({
+      }), views.length > 1 && !disabled && /*#__PURE__*/_jsx(PickersCalendarHeaderSwitchViewButton, _extends({
         size: "small",
         as: components.SwitchViewButton,
         "aria-label": getViewSwitchingButtonText(currentView)

package/modern/CalendarPickerSkeleton/CalendarPickerSkeleton.js

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

package/modern/DatePicker/DatePicker.js

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

package/modern/DateRangePicker/DateRangePicker.js

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

package/modern/DateRangePickerDay/DateRangePickerDay.js

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

package/modern/DateTimePicker/DateTimePicker.js

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