@mui/x-date-pickers 8.0.0-alpha.0 → 8.0.0-alpha.1

package/modern/PickersTextField/PickersInputBase/PickersInputBase.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["elements", "areAllSectionsEmpty", "defaultValue", "label", "value", "onChange", "id", "autoFocus", "endAdornment", "startAdornment", "renderSuffix", "slots", "slotProps", "contentEditable", "tabIndex", "onInput", "onPaste", "onKeyDown", "fullWidth", "name", "readOnly", "inputProps", "inputRef", "sectionListRef"];
+const _excluded = ["elements", "areAllSectionsEmpty", "defaultValue", "label", "value", "onChange", "id", "autoFocus", "endAdornment", "startAdornment", "renderSuffix", "slots", "slotProps", "contentEditable", "tabIndex", "onInput", "onPaste", "onKeyDown", "fullWidth", "name", "readOnly", "inputProps", "inputRef", "sectionListRef", "onFocus", "onBlur"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useFormControl } from '@mui/material/FormControl';
@@ -194,7 +194,9 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
       readOnly,
       inputProps,
       inputRef,
-      sectionListRef
+      sectionListRef,
+      onFocus,
+      onBlur
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootRef = React.useRef(null);
@@ -206,13 +208,12 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
     throw new Error('MUI X: PickersInputBase should always be used inside a PickersTextField component');
   }
   const handleInputFocus = event => {
-    // Fix a bug with IE11 where the focus/blur events are triggered
-    // while the component is disabled.
-    if (muiFormControl.disabled) {
-      event.stopPropagation();
-      return;
-    }
     muiFormControl.onFocus?.(event);
+    onFocus?.(event);
+  };
+  const handleInputBlur = event => {
+    muiFormControl.onBlur?.(event);
+    onBlur?.(event);
   };
   React.useEffect(() => {
     if (muiFormControl) {
@@ -254,7 +255,7 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
       tabIndex: tabIndex,
       className: classes.sectionsContainer,
       onFocus: handleInputFocus,
-      onBlur: muiFormControl.onBlur,
+      onBlur: handleInputBlur,
       onInput: onInput,
       onPaste: onPaste,
       onKeyDown: onKeyDown,

package/modern/PickersTextField/PickersTextField.js

@@ -105,8 +105,6 @@ const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField
     className: clsx(classes.root, className),
     ref: handleRootRef,
     focused: focused,
-    onFocus: onFocus,
-    onBlur: onBlur,
     disabled: disabled,
     variant: variant,
     error: error,
@@ -128,6 +126,8 @@ const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField
       onKeyUp: onKeyUp,
       onInput: onInput,
       onPaste: onPaste,
+      onFocus: onFocus,
+      onBlur: onBlur,
       endAdornment: endAdornment,
       startAdornment: startAdornment,
       tabIndex: tabIndex,

package/modern/TimeClock/Clock.js

@@ -222,6 +222,7 @@ export function Clock(inProps) {
       setTime(event, 'finish');
       isMoving.current = false;
     }
+    event.preventDefault();
   };
   const handleMouseMove = event => {
     // event.buttons & PRIMARY_MOUSE_BUTTON

package/modern/TimeClock/TimeClock.js

@@ -107,6 +107,7 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager: singleItemValueManager
   });

package/modern/TimePicker/TimePickerToolbar.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["ampm", "ampmInClock", "value", "isLandscape", "onChange", "view", "onViewChange", "views", "disabled", "readOnly", "className"];
+const _excluded = ["ampm", "ampmInClock", "value", "isLandscape", "onChange", "view", "onViewChange", "views", "className"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -18,6 +18,7 @@ import { useUtils } from "../internals/hooks/useUtils.js";
 import { useMeridiemMode } from "../internals/hooks/date-helpers-hooks.js";
 import { getTimePickerToolbarUtilityClass, timePickerToolbarClasses } from "./timePickerToolbarClasses.js";
 import { formatMeridiem } from "../internals/utils/date-utils.js";
+import { usePickerContext } from "../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -128,14 +129,16 @@ function TimePickerToolbar(inProps) {
       view,
       onViewChange,
       views,
-      disabled,
-      readOnly,
       className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const utils = useUtils();
   const translations = usePickerTranslations();
   const isRtl = useRtl();
+  const {
+    disabled,
+    readOnly
+  } = usePickerContext();
   const showAmPmControl = Boolean(ampm && !ampmInClock && views.includes('hours'));
   const {
     meridiemMode,
@@ -216,12 +219,6 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
    */
   classes: PropTypes.object,
   className: PropTypes.string,
-  /**
-   * If `true`, the component is disabled.
-   * When disabled, the value cannot be changed and no interaction is possible.
-   * @default false
-   */
-  disabled: PropTypes.bool,
   /**
    * If `true`, show the toolbar even in desktop mode.
    * @default `true` for Desktop, `false` for Mobile.
@@ -235,12 +232,6 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
    * @param {TView} view The view to open
    */
   onViewChange: PropTypes.func.isRequired,
-  /**
-   * If `true`, the component is read-only.
-   * When read-only, the value cannot be changed but the user can interact with the interface.
-   * @default false
-   */
-  readOnly: PropTypes.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/YearCalendar/YearCalendar.js

@@ -104,6 +104,7 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager: singleItemValueManager
   });

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v8.0.0-alpha.0
+ * @mui/x-date-pickers v8.0.0-alpha.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/components/PickerProvider.js

@@ -7,7 +7,9 @@ export const PickerPrivateContext = /*#__PURE__*/React.createContext({
     isPickerDisabled: false,
     isPickerReadOnly: false,
     isPickerValueEmpty: false,
-    isPickerOpen: false
+    isPickerOpen: false,
+    pickerVariant: 'desktop',
+    pickerOrientation: 'portrait'
   }
 });
 

package/modern/internals/components/PickersToolbar.js

@@ -10,13 +10,11 @@ import { getPickersToolbarUtilityClass } from "./pickersToolbarClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
-    classes,
-    isLandscape
+    classes
   } = ownerState;
   const slots = {
     root: ['root'],
-    content: ['content'],
-    penIconButton: ['penIconButton', isLandscape && 'penIconButtonLandscape']
+    content: ['content']
   };
   return composeClasses(slots, getPickersToolbarUtilityClass, classes);
 };

package/modern/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -67,7 +67,7 @@ export const useDesktopPicker = _ref => {
     localeText,
     autoFocusView: true,
     additionalViewProps: {},
-    wrapperVariant: 'desktop'
+    variant: 'desktop'
   }));
   const InputAdornment = slots.inputAdornment ?? MuiInputAdornment;
   const _useSlotProps = useSlotProps({

package/modern/internals/hooks/useField/useFieldState.js

@@ -41,6 +41,7 @@ export const useFieldState = params => {
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager
   });

package/modern/internals/hooks/useField/useFieldV7TextField.js

@@ -198,8 +198,9 @@ export const useFieldV7TextField = params => {
     if (focused || !sectionListRef.current) {
       return;
     }
+    const activeElement = getActiveElement(document);
     setFocused(true);
-    const isFocusInsideASection = sectionListRef.current.getSectionIndexFromDOMElement(getActiveElement(document)) != null;
+    const isFocusInsideASection = sectionListRef.current.getSectionIndexFromDOMElement(activeElement) != null;
     if (!isFocusInsideASection) {
       setSelectedSections(sectionOrder.startIndex);
     }

package/modern/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -59,7 +59,7 @@ export const useMobilePicker = _ref => {
     localeText,
     autoFocusView: true,
     additionalViewProps: {},
-    wrapperVariant: 'mobile'
+    variant: 'mobile'
   }));
   const Field = slots.field;
   const fieldProps = useSlotProps({

package/modern/internals/hooks/usePicker/usePicker.js

@@ -2,13 +2,12 @@ import { warnOnce } from '@mui/x-internals/warning';
 import { usePickerValue } from "./usePickerValue.js";
 import { usePickerViews } from "./usePickerViews.js";
 import { usePickerLayoutProps } from "./usePickerLayoutProps.js";
-import { usePickerOwnerState } from "./usePickerOwnerState.js";
 import { usePickerProvider } from "./usePickerProvider.js";
 export const usePicker = ({
   props,
   valueManager,
   valueType,
-  wrapperVariant,
+  variant,
   additionalViewProps,
   validator,
   autoFocusView,
@@ -25,7 +24,7 @@ export const usePicker = ({
     props,
     valueManager,
     valueType,
-    wrapperVariant,
+    variant,
     validator
   });
   const pickerViewsResponse = usePickerViews({
@@ -38,19 +37,17 @@ export const usePicker = ({
   });
   const pickerLayoutResponse = usePickerLayoutProps({
     props,
-    wrapperVariant,
+    variant,
     propsFromPickerValue: pickerValueResponse.layoutProps,
     propsFromPickerViews: pickerViewsResponse.layoutProps
   });
-  const pickerOwnerState = usePickerOwnerState({
-    props,
-    pickerValueResponse,
-    valueManager
-  });
   const providerProps = usePickerProvider({
+    props,
     pickerValueResponse,
-    ownerState: pickerOwnerState,
-    localeText
+    localeText,
+    valueManager,
+    variant,
+    views: pickerViewsResponse.views
   });
   return {
     // Picker value
@@ -66,6 +63,6 @@ export const usePicker = ({
     // Picker provider
     providerProps,
     // Picker owner state
-    ownerState: pickerOwnerState
+    ownerState: providerProps.privateContextValue.ownerState
   };
 };

package/modern/internals/hooks/usePicker/usePickerLayoutProps.js

@@ -4,7 +4,6 @@ import { useIsLandscape } from "../useIsLandscape.js";
 
 /**
  * Props used to create the layout of the views.
- * Those props are exposed on all the pickers.
  */
 
 /**
@@ -14,7 +13,7 @@ export const usePickerLayoutProps = ({
   props,
   propsFromPickerValue,
   propsFromPickerViews,
-  wrapperVariant
+  variant
 }) => {
   const {
     orientation
@@ -24,9 +23,7 @@ export const usePickerLayoutProps = ({
   const layoutProps = _extends({}, propsFromPickerViews, propsFromPickerValue, {
     isLandscape,
     isRtl,
-    wrapperVariant,
-    disabled: props.disabled,
-    readOnly: props.readOnly
+    wrapperVariant: variant
   });
   return {
     layoutProps

package/modern/internals/hooks/usePicker/usePickerProvider.js

@@ -1,15 +1,66 @@
 import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { useUtils } from "../useUtils.js";
+import { arrayIncludes } from "../../utils/utils.js";
+function getOrientation() {
+  if (typeof window === 'undefined') {
+    return 'portrait';
+  }
+  if (window.screen && window.screen.orientation && window.screen.orientation.angle) {
+    return Math.abs(window.screen.orientation.angle) === 90 ? 'landscape' : 'portrait';
+  }
+
+  // Support IOS safari
+  if (window.orientation) {
+    return Math.abs(Number(window.orientation)) === 90 ? 'landscape' : 'portrait';
+  }
+  return 'portrait';
+}
+export const usePickerOrientation = (views, customOrientation) => {
+  const [orientation, setOrientation] = React.useState(getOrientation);
+  useEnhancedEffect(() => {
+    const eventHandler = () => {
+      setOrientation(getOrientation());
+    };
+    window.addEventListener('orientationchange', eventHandler);
+    return () => {
+      window.removeEventListener('orientationchange', eventHandler);
+    };
+  }, []);
+  if (arrayIncludes(views, ['hours', 'minutes', 'seconds'])) {
+    // could not display 13:34:44 in landscape mode
+    return 'portrait';
+  }
+  return customOrientation ?? orientation;
+};
 export function usePickerProvider(parameters) {
   const {
+    props,
     pickerValueResponse,
-    ownerState,
-    localeText
+    valueManager,
+    localeText,
+    variant,
+    views
   } = parameters;
+  const utils = useUtils();
+  const orientation = usePickerOrientation(views, props.orientation);
+  const ownerState = React.useMemo(() => ({
+    isPickerValueEmpty: valueManager.areValuesEqual(utils, pickerValueResponse.viewProps.value, valueManager.emptyValue),
+    isPickerOpen: pickerValueResponse.open,
+    isPickerDisabled: props.disabled ?? false,
+    isPickerReadOnly: props.readOnly ?? false,
+    pickerOrientation: orientation,
+    pickerVariant: variant
+  }), [utils, valueManager, pickerValueResponse.viewProps.value, pickerValueResponse.open, orientation, variant, props.disabled, props.readOnly]);
   const contextValue = React.useMemo(() => ({
     onOpen: pickerValueResponse.actions.onOpen,
     onClose: pickerValueResponse.actions.onClose,
-    open: pickerValueResponse.open
-  }), [pickerValueResponse.actions.onOpen, pickerValueResponse.actions.onClose, pickerValueResponse.open]);
+    open: pickerValueResponse.open,
+    disabled: props.disabled ?? false,
+    readOnly: props.readOnly ?? false,
+    variant,
+    orientation
+  }), [pickerValueResponse.actions.onOpen, pickerValueResponse.actions.onClose, pickerValueResponse.open, variant, orientation, props.disabled, props.readOnly]);
   const privateContextValue = React.useMemo(() => ({
     ownerState
   }), [ownerState]);
@@ -18,4 +69,9 @@ export function usePickerProvider(parameters) {
     contextValue,
     privateContextValue
   };
-}
+}
+
+/**
+ * Props used to create the private context.
+ * Those props are exposed on all the pickers.
+ */

package/modern/internals/hooks/usePicker/usePickerValue.js

@@ -113,7 +113,7 @@ export const usePickerValue = ({
   props,
   valueManager,
   valueType,
-  wrapperVariant,
+  variant,
   validator
 }) => {
   const {
@@ -121,8 +121,9 @@ export const usePickerValue = ({
     onChange,
     value: inValueWithoutRenderTimezone,
     defaultValue: inDefaultValue,
-    closeOnSelect = wrapperVariant === 'desktop',
-    timezone: timezoneProp
+    closeOnSelect = variant === 'desktop',
+    timezone: timezoneProp,
+    referenceDate
   } = props;
   const {
     current: defaultValue
@@ -130,6 +131,7 @@ export const usePickerValue = ({
   const {
     current: isControlled
   } = React.useRef(inValueWithoutRenderTimezone !== undefined);
+  const [previousTimezoneProp, setPreviousTimezoneProp] = React.useState(timezoneProp);
 
   /* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
   if (process.env.NODE_ENV !== 'production') {
@@ -160,6 +162,7 @@ export const usePickerValue = ({
     timezone: timezoneProp,
     value: inValueWithoutRenderTimezone,
     defaultValue,
+    referenceDate,
     onChange,
     valueManager
   });
@@ -176,10 +179,19 @@ export const usePickerValue = ({
       draft: initialValue,
       lastPublishedValue: initialValue,
       lastCommittedValue: initialValue,
-      lastControlledValue: inValueWithTimezoneToRender,
+      lastControlledValue: inValueWithoutRenderTimezone,
       hasBeenModifiedSinceMount: false
     };
   });
+  const timezoneFromDraftValue = valueManager.getTimezone(utils, dateState.draft);
+  if (previousTimezoneProp !== timezoneProp) {
+    setPreviousTimezoneProp(timezoneProp);
+    if (timezoneProp && timezoneFromDraftValue && timezoneProp !== timezoneFromDraftValue) {
+      setDateState(prev => _extends({}, prev, {
+        draft: valueManager.setTimezone(utils, timezoneProp, prev.draft)
+      }));
+    }
+  }
   const {
     getValidationErrorForNewValue
   } = useValidation({
@@ -229,10 +241,10 @@ export const usePickerValue = ({
       setIsOpen(false);
     }
   });
-  if (inValueWithTimezoneToRender !== undefined && (dateState.lastControlledValue === undefined || !valueManager.areValuesEqual(utils, dateState.lastControlledValue, inValueWithTimezoneToRender))) {
+  if (dateState.lastControlledValue !== inValueWithoutRenderTimezone) {
     const isUpdateComingFromPicker = valueManager.areValuesEqual(utils, dateState.draft, inValueWithTimezoneToRender);
     setDateState(prev => _extends({}, prev, {
-      lastControlledValue: inValueWithTimezoneToRender
+      lastControlledValue: inValueWithoutRenderTimezone
     }, isUpdateComingFromPicker ? {} : {
       lastCommittedValue: inValueWithTimezoneToRender,
       lastPublishedValue: inValueWithTimezoneToRender,

package/modern/internals/hooks/usePicker/usePickerViews.js

@@ -134,6 +134,7 @@ export const usePickerViews = ({
   };
   return {
     hasUIView,
+    views,
     shouldRestoreFocus,
     layoutProps,
     renderCurrentView: () => {

package/modern/internals/hooks/useStaticPicker/useStaticPicker.js

@@ -48,7 +48,7 @@ export const useStaticPicker = _ref => {
     fieldRef: undefined,
     localeText,
     additionalViewProps: {},
-    wrapperVariant: displayStaticWrapperAs
+    variant: displayStaticWrapperAs
   }));
   const Layout = slots?.layout ?? PickerStaticLayout;
   const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {

package/modern/internals/hooks/useValueWithTimezone.js

@@ -11,6 +11,7 @@ export const useValueWithTimezone = ({
   timezone: timezoneProp,
   value: valueProp,
   defaultValue,
+  referenceDate,
   onChange,
   valueManager
 }) => {
@@ -24,7 +25,16 @@ export const useValueWithTimezone = ({
     }
     return valueManager.setTimezone(utils, inputTimezone, newValue);
   });
-  const timezoneToRender = timezoneProp ?? inputTimezone ?? 'default';
+  let timezoneToRender;
+  if (timezoneProp) {
+    timezoneToRender = timezoneProp;
+  } else if (inputTimezone) {
+    timezoneToRender = inputTimezone;
+  } else if (referenceDate) {
+    timezoneToRender = utils.getTimezone(referenceDate);
+  } else {
+    timezoneToRender = 'default';
+  }
   const valueWithTimezoneToRender = React.useMemo(() => valueManager.setTimezone(utils, timezoneToRender, inputValue), [valueManager, utils, timezoneToRender, inputValue]);
   const handleValueChange = useEventCallback((newValue, ...otherParams) => {
     const newValueWithInputTimezone = setInputTimezone(newValue);
@@ -45,6 +55,7 @@ export const useControlledValueWithTimezone = ({
   timezone: timezoneProp,
   value: valueProp,
   defaultValue,
+  referenceDate,
   onChange: onChangeProp,
   valueManager
 }) => {
@@ -62,6 +73,7 @@ export const useControlledValueWithTimezone = ({
     timezone: timezoneProp,
     value: valueWithInputTimezone,
     defaultValue: undefined,
+    referenceDate,
     onChange,
     valueManager
   });

package/node/DateCalendar/DateCalendar.js

@@ -144,6 +144,7 @@ const DateCalendar = exports.DateCalendar = /*#__PURE__*/React.forwardRef(functi
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager: _valueManagers.singleItemValueManager
   });

package/node/DatePicker/DatePickerToolbar.js

@@ -114,12 +114,6 @@ process.env.NODE_ENV !== "production" ? DatePickerToolbar.propTypes = {
    */
   classes: _propTypes.default.object,
   className: _propTypes.default.string,
-  /**
-   * If `true`, the component is disabled.
-   * When disabled, the value cannot be changed and no interaction is possible.
-   * @default false
-   */
-  disabled: _propTypes.default.bool,
   /**
    * If `true`, show the toolbar even in desktop mode.
    * @default `true` for Desktop, `false` for Mobile.
@@ -133,12 +127,6 @@ process.env.NODE_ENV !== "production" ? DatePickerToolbar.propTypes = {
    * @param {TView} view The view to open
    */
   onViewChange: _propTypes.default.func.isRequired,
-  /**
-   * If `true`, the component is read-only.
-   * When read-only, the value cannot be changed but the user can interact with the interface.
-   * @default false
-   */
-  readOnly: _propTypes.default.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/node/DateTimePicker/DateTimePickerToolbar.js

@@ -26,8 +26,9 @@ var _dimensions = require("../internals/constants/dimensions");
 var _dateUtils = require("../internals/utils/date-utils");
 var _pickersToolbarTextClasses = require("../internals/components/pickersToolbarTextClasses");
 var _pickersToolbarClasses = require("../internals/components/pickersToolbarClasses");
+var _usePickerContext = require("../hooks/usePickerContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["ampm", "ampmInClock", "value", "onChange", "view", "isLandscape", "onViewChange", "toolbarFormat", "toolbarPlaceholder", "views", "disabled", "readOnly", "toolbarVariant", "toolbarTitle", "className"];
+const _excluded = ["ampm", "ampmInClock", "value", "onChange", "view", "isLandscape", "onViewChange", "toolbarFormat", "toolbarPlaceholder", "views", "toolbarVariant", "toolbarTitle", "className"];
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -233,14 +234,16 @@ function DateTimePickerToolbar(inProps) {
       toolbarFormat,
       toolbarPlaceholder = '––',
       views,
-      disabled,
-      readOnly,
       toolbarVariant = 'mobile',
       toolbarTitle: inToolbarTitle,
       className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const isRtl = (0, _RtlProvider.useRtl)();
+  const {
+    disabled,
+    readOnly
+  } = (0, _usePickerContext.usePickerContext)();
   const ownerState = (0, _extends2.default)({}, props, {
     isRtl
   });
@@ -366,12 +369,6 @@ process.env.NODE_ENV !== "production" ? DateTimePickerToolbar.propTypes = {
    */
   classes: _propTypes.default.object,
   className: _propTypes.default.string,
-  /**
-   * If `true`, the component is disabled.
-   * When disabled, the value cannot be changed and no interaction is possible.
-   * @default false
-   */
-  disabled: _propTypes.default.bool,
   /**
    * If `true`, show the toolbar even in desktop mode.
    * @default `true` for Desktop, `false` for Mobile.
@@ -385,12 +382,6 @@ process.env.NODE_ENV !== "production" ? DateTimePickerToolbar.propTypes = {
    * @param {TView} view The view to open
    */
   onViewChange: _propTypes.default.func.isRequired,
-  /**
-   * If `true`, the component is read-only.
-   * When read-only, the value cannot be changed but the user can interact with the interface.
-   * @default false
-   */
-  readOnly: _propTypes.default.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/node/DesktopDateTimePicker/DesktopDateTimePickerLayout.js

@@ -74,12 +74,6 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePickerLayout.propTypes =
    */
   classes: _propTypes.default.object,
   className: _propTypes.default.string,
-  /**
-   * If `true`, the component is disabled.
-   * When disabled, the value cannot be changed and no interaction is possible.
-   * @default false
-   */
-  disabled: _propTypes.default.bool,
   isLandscape: _propTypes.default.bool.isRequired,
   /**
    * `true` if the application is in right-to-left direction.
@@ -100,12 +94,6 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePickerLayout.propTypes =
    * Force rendering in particular orientation.
    */
   orientation: _propTypes.default.oneOf(['landscape', 'portrait']),
-  /**
-   * If `true`, the component is read-only.
-   * When read-only, the value cannot be changed but the user can interact with the interface.
-   * @default false
-   */
-  readOnly: _propTypes.default.bool,
   /**
    * The props used for each component slot.
    * @default {}

package/node/DigitalClock/DigitalClock.js

@@ -156,6 +156,7 @@ const DigitalClock = exports.DigitalClock = /*#__PURE__*/React.forwardRef(functi
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager: _valueManagers.singleItemValueManager
   });

package/node/MonthCalendar/MonthCalendar.js

@@ -106,6 +106,7 @@ const MonthCalendar = exports.MonthCalendar = /*#__PURE__*/React.forwardRef(func
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager: _valueManagers.singleItemValueManager
   });