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

package/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/internals/hooks/usePicker/usePickerValue.d.ts

@@ -3,4 +3,4 @@ import { UsePickerValueProps, UsePickerValueParams, UsePickerValueResponse } fro
 /**
  * Manage the value lifecycle of all the pickers.
  */
-export declare const usePickerValue: <TValue, TSection extends FieldSection, TExternalProps extends UsePickerValueProps<TValue, any>>({ props, valueManager, valueType, wrapperVariant, validator, }: UsePickerValueParams<TValue, TExternalProps>) => UsePickerValueResponse<TValue, TSection, InferError<TExternalProps>>;
+export declare const usePickerValue: <TValue, TSection extends FieldSection, TExternalProps extends UsePickerValueProps<TValue, any>>({ props, valueManager, valueType, variant, validator, }: UsePickerValueParams<TValue, TExternalProps>) => UsePickerValueResponse<TValue, TSection, InferError<TExternalProps>>;

package/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/internals/hooks/usePicker/usePickerValue.types.d.ts

@@ -1,7 +1,7 @@
 import { FieldChangeHandlerContext, UseFieldInternalProps } from '../useField';
 import { Validator } from '../../../validation';
-import { WrapperVariant } from '../../models/common';
-import { FieldSection, FieldValueType, TimezoneProps, MuiPickersAdapter, PickersTimezone, PickerChangeHandlerContext, PickerValidDate, OnErrorProps, InferError } from '../../../models';
+import { PickerVariant } from '../../models/common';
+import { FieldSection, TimezoneProps, MuiPickersAdapter, PickersTimezone, PickerChangeHandlerContext, PickerValidDate, OnErrorProps, InferError, PickerValueType } from '../../../models';
 import { GetDefaultReferenceDateProps } from '../../utils/getDefaultReferenceDate';
 import { PickerShortcutChangeImportance, PickersShortcutsItemContext } from '../../../PickersShortcuts';
 export interface PickerValueManager<TValue, TError> {
@@ -23,10 +23,10 @@ export interface PickerValueManager<TValue, TError> {
      * @template TValue
      * @param {MuiPickersAdapter} utils The adapter.
      * @param {PickersTimezone} timezone The current timezone.
-     * @param {FieldValueType} valueType The type of the value being edited.
+     * @param {PickerValueType} valueType The type of the value being edited.
      * @returns {TValue} The value to set when clicking the "Today" button.
      */
-    getTodayValue: (utils: MuiPickersAdapter, timezone: PickersTimezone, valueType: FieldValueType) => TValue;
+    getTodayValue: (utils: MuiPickersAdapter, timezone: PickersTimezone, valueType: PickerValueType) => TValue;
     /**
      * @template TValue
      * Method returning the reference value to use when mounting the component.
@@ -122,7 +122,7 @@ export interface UsePickerValueState<TValue> {
      */
     lastCommittedValue: TValue;
     /**
-     * Last value passed with `props.value`.
+     * Last value passed to `props.value`.
      * Used to update the `draft` value whenever the `value` prop changes.
      */
     lastControlledValue: TValue | undefined;
@@ -226,12 +226,13 @@ export interface UsePickerValueNonStaticProps {
  * Props used to handle the value of the pickers.
  */
 export interface UsePickerValueProps<TValue, TError> extends UsePickerValueBaseProps<TValue, TError>, UsePickerValueNonStaticProps, TimezoneProps {
+    referenceDate?: PickerValidDate;
 }
 export interface UsePickerValueParams<TValue, TExternalProps extends UsePickerValueProps<TValue, any>> {
     props: TExternalProps;
     valueManager: PickerValueManager<TValue, InferError<TExternalProps>>;
-    valueType: FieldValueType;
-    wrapperVariant: WrapperVariant;
+    valueType: PickerValueType;
+    variant: PickerVariant;
     validator: Validator<TValue, InferError<TExternalProps>, TExternalProps>;
 }
 export interface UsePickerValueActions {

package/internals/hooks/usePicker/usePickerViews.d.ts

@@ -77,6 +77,7 @@ export interface UsePickerViewsResponse<TView extends DateOrTimeViewWithMeridiem
      * Indicates if the the picker has at least one view that should be rendered in UI.
      */
     hasUIView: boolean;
+    views: readonly TView[];
     renderCurrentView: () => React.ReactNode;
     shouldRestoreFocus: () => boolean;
     layoutProps: UsePickerViewsLayoutResponse<TView>;

package/internals/hooks/usePicker/usePickerViews.js

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

package/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/internals/hooks/useValueWithTimezone.d.ts

@@ -1,17 +1,11 @@
 import type { PickerValueManager } from './usePicker';
-import { PickersTimezone } from '../../models';
+import { PickersTimezone, PickerValidDate } from '../../models';
 /**
  * Hooks making sure that:
  * - The value returned by `onChange` always have the timezone of `props.value` or `props.defaultValue` if defined
  * - The value rendered is always the one from `props.timezone` if defined
  */
-export declare const useValueWithTimezone: <TValue, TChange extends (...params: any[]) => void>({ timezone: timezoneProp, value: valueProp, defaultValue, onChange, valueManager, }: {
-    timezone: PickersTimezone | undefined;
-    value: TValue | undefined;
-    defaultValue: TValue | undefined;
-    onChange: TChange | undefined;
-    valueManager: PickerValueManager<TValue, any>;
-}) => {
+export declare const useValueWithTimezone: <TValue, TChange extends (...params: any[]) => void>({ timezone: timezoneProp, value: valueProp, defaultValue, referenceDate, onChange, valueManager, }: UseValueWithTimezoneParameters<TValue, TChange>) => {
     value: TValue;
     handleValueChange: TChange;
     timezone: string;
@@ -19,15 +13,25 @@ export declare const useValueWithTimezone: <TValue, TChange extends (...params:
 /**
  * Wrapper around `useControlled` and `useValueWithTimezone`
  */
-export declare const useControlledValueWithTimezone: <TValue, TChange extends (...params: any[]) => void>({ name, timezone: timezoneProp, value: valueProp, defaultValue, onChange: onChangeProp, valueManager, }: {
-    name: string;
+export declare const useControlledValueWithTimezone: <TValue, TChange extends (...params: any[]) => void>({ name, timezone: timezoneProp, value: valueProp, defaultValue, referenceDate, onChange: onChangeProp, valueManager, }: UseControlledValueWithTimezoneParameters<TValue, TChange>) => {
+    value: TValue;
+    handleValueChange: TChange;
+    timezone: string;
+};
+interface UseValueWithTimezoneParameters<TValue, TChange extends (...params: any[]) => void> {
     timezone: PickersTimezone | undefined;
     value: TValue | undefined;
     defaultValue: TValue | undefined;
+    /**
+     * The reference date as passed to `props.referenceDate`.
+     * It does not need to have its default value.
+     * This is only used to determine the timezone to use when `props.value` and `props.defaultValue` are not defined.
+     */
+    referenceDate: PickerValidDate | undefined;
     onChange: TChange | undefined;
     valueManager: PickerValueManager<TValue, any>;
-}) => {
-    value: TValue;
-    handleValueChange: TChange;
-    timezone: string;
-};
+}
+interface UseControlledValueWithTimezoneParameters<TValue, TChange extends (...params: any[]) => void> extends UseValueWithTimezoneParameters<TValue, TChange> {
+    name: string;
+}
+export {};

package/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/internals/index.d.ts

@@ -44,7 +44,7 @@ export type { BaseClockProps, DesktopOnlyTimePickerProps, AmPmProps } from './mo
 export type { BaseTabsProps, ExportedBaseTabsProps } from './models/props/tabs';
 export type { BaseToolbarProps, ExportedBaseToolbarProps } from './models/props/toolbar';
 export type { FormProps } from './models/formProps';
-export type { WrapperVariant, TimeViewWithMeridiem, DateOrTimeViewWithMeridiem, } from './models/common';
+export type { PickerVariant, TimeViewWithMeridiem, DateOrTimeViewWithMeridiem, } from './models/common';
 export type { BaseDateValidationProps, BaseTimeValidationProps, TimeValidationProps, MonthValidationProps, YearValidationProps, DayValidationProps, DateTimeValidationProps, } from './models/validation';
 export type { PickerRangeValue } from './models/value';
 export { convertFieldResponseIntoMuiTextFieldProps } from './utils/convertFieldResponseIntoMuiTextFieldProps';

package/internals/models/common.d.ts

@@ -1,4 +1,5 @@
 import { DateView, TimeView } from '../../models/views';
-export type WrapperVariant = 'mobile' | 'desktop' | null;
+export type PickerOrientation = 'portrait' | 'landscape';
+export type PickerVariant = 'mobile' | 'desktop' | null;
 export type TimeViewWithMeridiem = TimeView | 'meridiem';
 export type DateOrTimeViewWithMeridiem = DateView | TimeViewWithMeridiem;

package/internals/models/props/toolbar.d.ts

@@ -2,8 +2,7 @@ import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material/styles';
 import { DateOrTimeViewWithMeridiem } from '../common';
-import { FormProps } from '../formProps';
-export interface BaseToolbarProps<TValue, TView extends DateOrTimeViewWithMeridiem> extends ExportedBaseToolbarProps, FormProps {
+export interface BaseToolbarProps<TValue, TView extends DateOrTimeViewWithMeridiem> extends ExportedBaseToolbarProps {
     isLandscape: boolean;
     onChange: (newValue: TValue) => void;
     value: TValue;

package/internals/utils/date-utils.d.ts

@@ -1,4 +1,4 @@
-import { DateView, FieldValueType, MuiPickersAdapter, PickersTimezone, PickerValidDate } from '../../models';
+import { DateView, MuiPickersAdapter, PickersTimezone, PickerValidDate, PickerValueType } from '../../models';
 import { DateOrTimeViewWithMeridiem } from '../models';
 export declare const mergeDateAndTime: (utils: MuiPickersAdapter, dateParam: PickerValidDate, timeParam: PickerValidDate) => PickerValidDate;
 interface FindClosestDateParams {
@@ -16,7 +16,7 @@ export declare const replaceInvalidDateByNull: (utils: MuiPickersAdapter, value:
 export declare const applyDefaultDate: (utils: MuiPickersAdapter, value: PickerValidDate | null | undefined, defaultValue: PickerValidDate) => PickerValidDate;
 export declare const areDatesEqual: (utils: MuiPickersAdapter, a: PickerValidDate, b: PickerValidDate) => boolean;
 export declare const getMonthsInYear: (utils: MuiPickersAdapter, year: PickerValidDate) => PickerValidDate[];
-export declare const getTodayDate: (utils: MuiPickersAdapter, timezone: PickersTimezone, valueType?: FieldValueType) => PickerValidDate;
+export declare const getTodayDate: (utils: MuiPickersAdapter, timezone: PickersTimezone, valueType?: PickerValueType) => PickerValidDate;
 export declare const formatMeridiem: (utils: MuiPickersAdapter, meridiem: "am" | "pm") => string;
 export declare const isDatePickerView: (view: DateOrTimeViewWithMeridiem) => view is DateView;
 export declare const resolveDateFormat: (utils: MuiPickersAdapter, { format, views }: {

package/models/common.d.ts

@@ -3,3 +3,4 @@ export interface TimeStepOptions {
     minutes?: number;
     seconds?: number;
 }
+export type PickerValueType = 'date' | 'time' | 'date-time';

package/models/fields.d.ts

@@ -7,7 +7,6 @@ import type { PickersTextFieldProps } from '../PickersTextField';
 import { BaseForwardedSingleInputFieldProps } from '../internals/models';
 export type FieldSectionType = 'year' | 'month' | 'day' | 'weekDay' | 'hours' | 'minutes' | 'seconds' | 'meridiem' | 'empty';
 export type FieldSectionContentType = 'digit' | 'digit-with-letter' | 'letter';
-export type FieldValueType = 'date' | 'time' | 'date-time';
 export interface FieldSection {
     /**
      * Value of the section, as rendered inside the input.

package/models/pickers.d.ts

@@ -1,3 +1,4 @@
+import { PickerOrientation, PickerVariant } from '../internals/models/common';
 import type { PickersShortcutsItemContext } from '../PickersShortcuts';
 export interface PickerChangeHandlerContext<TError> {
     validationError: TError;
@@ -31,4 +32,21 @@ export interface PickerOwnerState {
      * Is always `false` if the component you are accessing the ownerState from is not wrapped by a picker.
      */
     isPickerReadOnly: boolean;
+    /**
+     * The responsive variant of the picker.
+     * Is equal to "desktop" when using a desktop picker (like <DesktopDatePicker />).
+     * Is equal to "mobile" when using a mobile picker (like <MobileDatePicker />).
+     * Is equal to "mobile" or "desktop" when using a responsive picker (like <DatePicker />) depending on the `desktopModeMediaQuery` prop.
+     * Is equal to "mobile" or "desktop" when using a static picker (like <StaticDatePicker />) depending on the `displayStaticWrapperAs` prop.
+     * Is always equal to "desktop" if the component you are accessing the ownerState from is not wrapped by a picker.
+     */
+    pickerVariant: PickerVariant;
+    /**
+     * The orientation of the picker.
+     * Is equal to "landscape" when the picker is in landscape orientation.
+     * Is equal to "portrait" when the picker is in portrait orientation.
+     * You can use the "orientation" on any picker component to force the orientation.
+     * Is always equal to "portrait" if the component you are accessing the ownerState from is not wrapped by a picker.
+     */
+    pickerOrientation: PickerOrientation;
 }

package/modern/DateCalendar/DateCalendar.js

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

package/modern/DatePicker/DatePickerToolbar.js

@@ -107,12 +107,6 @@ process.env.NODE_ENV !== "production" ? DatePickerToolbar.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.
@@ -126,12 +120,6 @@ process.env.NODE_ENV !== "production" ? DatePickerToolbar.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/DateTimePicker/DateTimePickerToolbar.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", "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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useRtl } from '@mui/system/RtlProvider';
@@ -20,6 +20,7 @@ import { MULTI_SECTION_CLOCK_SECTION_WIDTH } from "../internals/constants/dimens
 import { formatMeridiem } from "../internals/utils/date-utils.js";
 import { pickersToolbarTextClasses } from "../internals/components/pickersToolbarTextClasses.js";
 import { pickersToolbarClasses } from "../internals/components/pickersToolbarClasses.js";
+import { usePickerContext } from "../hooks/usePickerContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -226,14 +227,16 @@ function DateTimePickerToolbar(inProps) {
       toolbarFormat,
       toolbarPlaceholder = '––',
       views,
-      disabled,
-      readOnly,
       toolbarVariant = 'mobile',
       toolbarTitle: inToolbarTitle,
       className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const isRtl = useRtl();
+  const {
+    disabled,
+    readOnly
+  } = usePickerContext();
   const ownerState = _extends({}, props, {
     isRtl
   });
@@ -359,12 +362,6 @@ process.env.NODE_ENV !== "production" ? DateTimePickerToolbar.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.
@@ -378,12 +375,6 @@ process.env.NODE_ENV !== "production" ? DateTimePickerToolbar.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/DesktopDateTimePicker/DesktopDateTimePickerLayout.js

@@ -66,12 +66,6 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePickerLayout.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,
   isLandscape: PropTypes.bool.isRequired,
   /**
    * `true` if the application is in right-to-left direction.
@@ -92,12 +86,6 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePickerLayout.propTypes =
    * Force rendering in particular orientation.
    */
   orientation: PropTypes.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.bool,
   /**
    * The props used for each component slot.
    * @default {}

package/modern/DigitalClock/DigitalClock.js

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

package/modern/MonthCalendar/MonthCalendar.js

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

package/modern/MultiSectionDigitalClock/MultiSectionDigitalClock.js

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

package/modern/PickersLayout/PickersLayout.js

@@ -145,12 +145,6 @@ process.env.NODE_ENV !== "production" ? PickersLayout.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,
   isLandscape: PropTypes.bool.isRequired,
   /**
    * `true` if the application is in right-to-left direction.
@@ -171,12 +165,6 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
    * Force rendering in particular orientation.
    */
   orientation: PropTypes.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.bool,
   /**
    * The props used for each component slot.
    * @default {}

package/modern/PickersLayout/usePickerLayout.js

@@ -45,8 +45,6 @@ const usePickerLayout = props => {
     onSelectShortcut,
     isValid,
     isLandscape,
-    disabled,
-    readOnly,
     children,
     slots,
     slotProps,
@@ -90,9 +88,7 @@ const usePickerLayout = props => {
       value,
       view,
       onViewChange,
-      views,
-      disabled,
-      readOnly
+      views
     },
     className: classes.toolbar,
     ownerState