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

package/MonthPicker/MonthPicker.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "date", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "onMonthChange"];
+const _excluded = ["className", "date", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "onMonthChange", "readOnly"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -43,12 +43,14 @@ const MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(inProps,
   const {
     className,
     date,
+    disabled,
     disableFuture,
     disablePast,
     maxDate,
     minDate,
     onChange,
-    onMonthChange
+    onMonthChange,
+    readOnly
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -67,6 +69,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');
 
@@ -87,7 +93,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);
     })
@@ -116,6 +122,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.
    */
@@ -146,10 +157,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/PickersDay/PickersDay.js

@@ -374,7 +374,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/StaticDatePicker/StaticDatePicker.js

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

package/StaticDateRangePicker/StaticDateRangePicker.js

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

package/StaticDateTimePicker/StaticDateTimePicker.js

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

package/TabPanel/TabPanel.js

@@ -91,7 +91,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/Timeline/Timeline.js

@@ -109,7 +109,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/TimelineConnector/TimelineConnector.js

@@ -77,6 +77,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/TimelineContent/TimelineContent.js

@@ -94,6 +94,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/TimelineDot/TimelineDot.js

@@ -116,7 +116,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/TimelineItem/TimelineItem.js

@@ -130,6 +130,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/TimelineOppositeContent/TimelineOppositeContent.js

@@ -95,7 +95,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/TimelineSeparator/TimelineSeparator.js

@@ -74,6 +74,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/TreeItem/TreeItem.js

@@ -405,7 +405,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/TreeView/TreeView.js

@@ -973,6 +973,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/YearPicker/YearPicker.d.ts

@@ -20,6 +20,7 @@ export interface YearPickerProps<TDate> extends ExportedYearPickerProps<TDate> {
         root?: string;
     };
     date: TDate | null;
+    disabled?: boolean;
     disableFuture?: boolean | null;
     disablePast?: boolean | null;
     isDateDisabled: (day: TDate) => boolean;
@@ -27,6 +28,7 @@ export interface YearPickerProps<TDate> extends ExportedYearPickerProps<TDate> {
     maxDate: TDate;
     onChange: PickerOnChangeFn<TDate>;
     onFocusedDayChange?: (day: TDate) => void;
+    readOnly?: boolean;
 }
 declare const _default: <TDate>(props: YearPickerProps<TDate>) => JSX.Element;
 /**

package/YearPicker/YearPicker.js

@@ -41,6 +41,7 @@ const YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inProps, re
     autoFocus,
     className,
     date,
+    disabled,
     disableFuture,
     disablePast,
     isDateDisabled,
@@ -49,6 +50,7 @@ const YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inProps, re
     onChange,
     onFocusedDayChange,
     onYearChange,
+    readOnly,
     shouldDisableYear
   } = props;
   const ownerState = props;
@@ -63,6 +65,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);
 
@@ -141,7 +147,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'));
     })
@@ -175,6 +181,11 @@ process.env.NODE_ENV !== "production" ? YearPicker.propTypes
    */
   date: PropTypes.any,
 
+  /**
+   * @ignore
+   */
+  disabled: PropTypes.bool,
+
   /**
    * @ignore
    */
@@ -215,6 +226,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/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/internal/pickers/test-utils.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["locale"];
 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
 
@@ -60,7 +60,9 @@ export function createPickerRender(_ref = {}) {
   } = _ref,
       renderOptions = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  const clientRender = createClientRender(renderOptions);
+  const {
+    render: clientRender
+  } = createRenderer(renderOptions);
 
   function Wrapper({
     children

package/legacy/CalendarPicker/CalendarPicker.js

@@ -241,6 +241,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
    */
@@ -289,6 +295,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/legacy/CalendarPicker/PickersCalendar.js

@@ -70,6 +70,7 @@ function PickersCalendar(props) {
       className = props.className,
       currentMonth = props.currentMonth,
       date = props.date,
+      disabled = props.disabled,
       disableHighlightToday = props.disableHighlightToday,
       focusedDay = props.focusedDay,
       isDateDisabled = props.isDateDisabled,
@@ -77,6 +78,7 @@ function PickersCalendar(props) {
       loading = props.loading,
       onChange = props.onChange,
       onMonthSwitchingAnimationEnd = props.onMonthSwitchingAnimationEnd,
+      readOnly = props.readOnly,
       reduceAnimations = props.reduceAnimations,
       renderDay = props.renderDay,
       _props$renderLoading = props.renderLoading,
@@ -92,10 +94,15 @@ function PickersCalendar(props) {
   var utils = useUtils();
   var handleDaySelect = React.useCallback(function (day) {
     var isFinish = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'finish';
-    // TODO possibly buggy line figure out and add tests
+
+    if (readOnly) {
+      return;
+    } // TODO possibly buggy line figure out and add tests
+
+
     var finalDate = Array.isArray(date) ? day : utils.mergeDateAndTime(day, date || now);
     onChange(finalDate, isFinish);
-  }, [date, now, onChange, utils]);
+  }, [date, now, onChange, readOnly, utils]);
   var currentMonthNumber = utils.getMonth(currentMonth);
   var selectedDates = (Array.isArray(date) ? date : [date]).filter(Boolean).map(function (selectedDateItem) {
     return selectedDateItem && utils.startOfDay(selectedDateItem);
@@ -136,7 +143,7 @@ function PickersCalendar(props) {
                 key: day == null ? void 0 : day.toString(),
                 day: day,
                 isAnimating: isMonthSwitchingAnimating,
-                disabled: isDateDisabled(day),
+                disabled: disabled || isDateDisabled(day),
                 allowSameDateSelection: allowSameDateSelection,
                 autoFocus: autoFocus && focusedDay !== null && utils.isSameDay(day, focusedDay),
                 today: utils.isSameDay(day, now),

package/legacy/CalendarPicker/PickersCalendarHeader.js

@@ -77,6 +77,7 @@ function PickersCalendarHeader(props) {
       _props$componentsProp = props.componentsProps,
       componentsProps = _props$componentsProp === void 0 ? {} : _props$componentsProp,
       month = props.currentMonth,
+      disabled = props.disabled,
       disableFuture = props.disableFuture,
       disablePast = props.disablePast,
       _props$getViewSwitchi = props.getViewSwitchingButtonText,
@@ -104,16 +105,16 @@ function PickersCalendarHeader(props) {
   };
 
   var isNextMonthDisabled = useNextMonthDisabled(month, {
-    disableFuture: disableFuture,
+    disableFuture: disableFuture || disabled,
     maxDate: maxDate
   });
   var isPreviousMonthDisabled = usePreviousMonthDisabled(month, {
-    disablePast: disablePast,
+    disablePast: disablePast || disabled,
     minDate: minDate
   });
 
   var handleToggleView = function handleToggleView() {
-    if (views.length === 1 || !onViewChange) {
+    if (views.length === 1 || !onViewChange || disabled) {
       return;
     }
 
@@ -156,7 +157,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/legacy/CalendarPickerSkeleton/CalendarPickerSkeleton.js

@@ -150,6 +150,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/legacy/DatePicker/DatePicker.js

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

package/legacy/DateRangePicker/DateRangePicker.js

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

package/legacy/DateRangePickerDay/DateRangePickerDay.js

@@ -233,7 +233,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/legacy/DateTimePicker/DateTimePicker.js

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

package/legacy/DesktopDatePicker/DesktopDatePicker.js

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

package/legacy/DesktopDateRangePicker/DesktopDateRangePicker.js

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

package/legacy/DesktopDateTimePicker/DesktopDateTimePicker.js

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

package/legacy/LoadingButton/LoadingButton.js

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