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

package/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/DateCalendar/DateCalendar.types.d.ts

@@ -13,6 +13,7 @@ import { ExportedYearCalendarProps, YearCalendarSlots, YearCalendarSlotProps } f
 import { ExportedMonthCalendarProps, MonthCalendarSlots, MonthCalendarSlotProps } from '../MonthCalendar/MonthCalendar.types';
 import { ExportedValidateDateProps } from '../validation/validateDate';
 import { FormProps } from '../internals/models/formProps';
+import { PickerValue } from '../internals/models';
 export interface DateCalendarSlots extends PickersCalendarHeaderSlots, DayCalendarSlots, MonthCalendarSlots, YearCalendarSlots {
     /**
      * Custom component for calendar header.
@@ -47,7 +48,7 @@ export interface ExportedDateCalendarProps extends ExportedDayCalendarProps, Exp
      */
     onMonthChange?: (month: PickerValidDate) => void;
 }
-export interface DateCalendarProps extends ExportedDateCalendarProps, ExportedUseViewsOptions<PickerValidDate | null, DateView> {
+export interface DateCalendarProps extends ExportedDateCalendarProps, ExportedUseViewsOptions<PickerValue, DateView> {
     /**
      * The selected value.
      * Used when the component is controlled.

package/DateCalendar/PickersFadeTransitionGroup.js

@@ -6,10 +6,7 @@ import { styled, useTheme, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { getPickersFadeTransitionGroupUtilityClass } from "./pickersFadeTransitionGroupClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root']
   };
@@ -36,9 +33,10 @@ export function PickersFadeTransitionGroup(inProps) {
     children,
     className,
     reduceAnimations,
-    transKey
+    transKey,
+    classes: classesProp
   } = props;
-  const classes = useUtilityClasses(props);
+  const classes = useUtilityClasses(classesProp);
   const theme = useTheme();
   if (reduceAnimations) {
     return children;

package/DateCalendar/PickersSlideTransition.js

@@ -7,10 +7,10 @@ import { styled, useTheme, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import { getPickersSlideTransitionUtilityClass, pickersSlideTransitionClasses } from "./pickersSlideTransitionClasses.js";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
+const useUtilityClasses = (classes, ownerState) => {
   const {
-    classes,
     slideDirection
   } = ownerState;
   const slots = {
@@ -99,11 +99,18 @@ export function PickersSlideTransition(inProps) {
       children,
       className,
       reduceAnimations,
-      transKey
-      // extracting `classes` from `other`
+      slideDirection,
+      transKey,
+      classes: classesProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const classes = useUtilityClasses(props);
+  const {
+    ownerState: pickerOwnerState
+  } = usePickerPrivateContext();
+  const ownerState = _extends({}, pickerOwnerState, {
+    slideDirection
+  });
+  const classes = useUtilityClasses(classesProp, ownerState);
   const theme = useTheme();
   if (reduceAnimations) {
     return /*#__PURE__*/_jsx("div", {

package/DateCalendar/useCalendarState.d.ts

@@ -25,17 +25,19 @@ interface ChangeFocusedDayPayload {
 export declare const createCalendarStateReducer: (reduceAnimations: boolean, disableSwitchToMonthOnDayFocus: boolean, utils: MuiPickersAdapter) => (state: CalendarState, action: ReducerAction<"finishMonthSwitchingAnimation"> | ReducerAction<"changeMonth", ChangeMonthPayload> | ReducerAction<"changeMonthTimezone", {
     newTimezone: string;
 }> | ReducerAction<"changeFocusedDay", ChangeFocusedDayPayload>) => CalendarState;
-interface UseCalendarStateParams extends Pick<DateCalendarDefaultizedProps, 'value' | 'referenceDate' | 'disableFuture' | 'disablePast' | 'minDate' | 'maxDate' | 'onMonthChange' | 'reduceAnimations' | 'shouldDisableDate'> {
+interface UseCalendarStateParameters extends Pick<DateCalendarDefaultizedProps, 'referenceDate' | 'disableFuture' | 'disablePast' | 'minDate' | 'maxDate' | 'onMonthChange' | 'reduceAnimations' | 'shouldDisableDate'> {
+    value: PickerValidDate | null;
     disableSwitchToMonthOnDayFocus?: boolean;
     timezone: PickersTimezone;
 }
-export declare const useCalendarState: (params: UseCalendarStateParams) => {
-    referenceDate: any;
+interface UseCalendarStateReturnValue {
+    referenceDate: PickerValidDate;
     calendarState: CalendarState;
     changeMonth: (newDate: PickerValidDate) => void;
     changeFocusedDay: (newFocusedDate: PickerValidDate | null, withoutMonthSwitchingAnimation?: boolean) => void;
     isDateDisabled: (day: PickerValidDate | null) => boolean;
     onMonthSwitchingAnimationEnd: () => void;
     handleChangeMonth: (payload: ChangeMonthPayload) => void;
-};
+}
+export declare const useCalendarState: (params: UseCalendarStateParameters) => UseCalendarStateReturnValue;
 export {};

package/DateField/DateField.js

@@ -13,6 +13,7 @@ import { useDateField } from "./useDateField.js";
 import { useClearableField } from "../hooks/index.js";
 import { PickersTextField } from "../PickersTextField/index.js";
 import { convertFieldResponseIntoMuiTextFieldProps } from "../internals/utils/convertFieldResponseIntoMuiTextFieldProps.js";
+import { useFieldOwnerState } from "../internals/hooks/useFieldOwnerState.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -36,7 +37,7 @@ const DateField = /*#__PURE__*/React.forwardRef(function DateField(inProps, inRe
       inputProps
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
-  const ownerState = themeProps;
+  const ownerState = useFieldOwnerState(themeProps);
   const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField);
   const textFieldProps = useSlotProps({
     elementType: TextField,
@@ -267,10 +268,10 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    */
   shouldDisableYear: PropTypes.func,
   /**
-   * If `true`, the format will respect the leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
-   * If `false`, the format will always add leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+   * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
    *
-   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (e.g: "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
    *
    * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
    * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.

package/DateField/DateField.types.d.ts

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import { SlotComponentProps } from '@mui/utils';
-import { MakeOptional } from '@mui/x-internals/types';
-import TextField from '@mui/material/TextField';
+import type { TextFieldProps } from '@mui/material/TextField';
+import { MakeOptional, SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { ExportedUseClearableFieldProps, UseClearableFieldSlots, UseClearableFieldSlotProps } from '../hooks/useClearableField';
-import { DateValidationError, FieldSection, PickerValidDate, BuiltInFieldTextFieldProps } from '../models';
+import { DateValidationError, BuiltInFieldTextFieldProps, FieldOwnerState } from '../models';
 import { UseFieldInternalProps } from '../internals/hooks/useField';
 import { ExportedValidateDateProps } from '../validation/validateDate';
-export interface UseDateFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerValidDate | null, FieldSection, TEnableAccessibleFieldDOMStructure, DateValidationError>, 'format'>, ExportedValidateDateProps, ExportedUseClearableFieldProps {
+import { PickersTextFieldProps } from '../PickersTextField';
+import { PickerValue } from '../internals/models';
+export interface UseDateFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerValue, TEnableAccessibleFieldDOMStructure, DateValidationError>, 'format'>, ExportedValidateDateProps, ExportedUseClearableFieldProps {
 }
 export type DateFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = UseDateFieldProps<TEnableAccessibleFieldDOMStructure> & Omit<BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure>, keyof UseDateFieldProps<TEnableAccessibleFieldDOMStructure>> & {
     /**
@@ -18,16 +19,16 @@ export type DateFieldProps<TEnableAccessibleFieldDOMStructure extends boolean =
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: DateFieldSlotProps<TEnableAccessibleFieldDOMStructure>;
+    slotProps?: DateFieldSlotProps;
 };
 export type DateFieldOwnerState<TEnableAccessibleFieldDOMStructure extends boolean> = DateFieldProps<TEnableAccessibleFieldDOMStructure>;
 export interface DateFieldSlots extends UseClearableFieldSlots {
     /**
      * Form control with an input to render the value.
-     * @default TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.
+     * @default <PickersTextField />, or <TextField /> from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.
      */
     textField?: React.ElementType;
 }
-export interface DateFieldSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends UseClearableFieldSlotProps {
-    textField?: SlotComponentProps<typeof TextField, {}, DateFieldOwnerState<TEnableAccessibleFieldDOMStructure>>;
+export interface DateFieldSlotProps extends UseClearableFieldSlotProps {
+    textField?: SlotComponentPropsFromProps<PickersTextFieldProps | TextFieldProps, {}, FieldOwnerState>;
 }

package/DatePicker/DatePicker.types.d.ts

@@ -1,7 +1,7 @@
 import { DesktopDatePickerProps, DesktopDatePickerSlots, DesktopDatePickerSlotProps } from '../DesktopDatePicker';
-import { BaseSingleInputFieldProps } from '../internals/models';
+import { BaseSingleInputFieldProps, PickerValue } from '../internals/models';
 import { MobileDatePickerProps, MobileDatePickerSlots, MobileDatePickerSlotProps } from '../MobileDatePicker';
-import { DateValidationError, FieldSection, PickerValidDate } from '../models';
+import { DateValidationError } from '../models';
 import { ValidateDateProps } from '../validation/validateDate';
 export interface DatePickerSlots extends DesktopDatePickerSlots, MobileDatePickerSlots {
 }
@@ -33,4 +33,4 @@ export interface DatePickerProps<TEnableAccessibleFieldDOMStructure extends bool
 /**
  * Props the field can receive when used inside a date picker (<DatePicker />, <DesktopDatePicker /> or <MobileDatePicker /> component).
  */
-export type DatePickerFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = ValidateDateProps & BaseSingleInputFieldProps<PickerValidDate | null, FieldSection, TEnableAccessibleFieldDOMStructure, DateValidationError>;
+export type DatePickerFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = ValidateDateProps & BaseSingleInputFieldProps<PickerValue, TEnableAccessibleFieldDOMStructure, DateValidationError>;

package/DatePicker/DatePickerToolbar.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/props/toolbar';
-import { DateView, PickerValidDate } from '../models';
+import { DateView } from '../models';
 import { DatePickerToolbarClasses } from './datePickerToolbarClasses';
-export interface DatePickerToolbarProps extends BaseToolbarProps<PickerValidDate | null, DateView>, ExportedDatePickerToolbarProps {
+import { PickerValue } from '../internals/models';
+export interface DatePickerToolbarProps extends BaseToolbarProps<PickerValue, DateView>, ExportedDatePickerToolbarProps {
 }
 export interface ExportedDatePickerToolbarProps extends ExportedBaseToolbarProps {
     /**

package/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/DatePicker/shared.d.ts

@@ -1,13 +1,14 @@
 import * as React from 'react';
 import { DefaultizedProps } from '@mui/x-internals/types';
 import { DateCalendarSlots, DateCalendarSlotProps, ExportedDateCalendarProps } from '../DateCalendar/DateCalendar.types';
-import { DateValidationError, DateView, PickerValidDate } from '../models';
+import { DateValidationError, DateView } from '../models';
 import { BasePickerInputProps } from '../internals/models/props/basePickerProps';
-import { BaseDateValidationProps } from '../internals/models/validation';
 import { LocalizedComponent } from '../locales/utils/pickersLocaleTextApi';
 import { DatePickerToolbarProps, ExportedDatePickerToolbarProps } from './DatePickerToolbar';
 import { PickerViewRendererLookup } from '../internals/hooks/usePicker/usePickerViews';
 import { DateViewRendererProps } from '../dateViewRenderers';
+import { PickerValue } from '../internals/models';
+import { ValidateDatePropsToDefault } from '../validation/validateDate';
 export interface BaseDatePickerSlots extends DateCalendarSlots {
     /**
      * Custom component for the toolbar rendered above the views.
@@ -18,8 +19,8 @@ export interface BaseDatePickerSlots extends DateCalendarSlots {
 export interface BaseDatePickerSlotProps extends DateCalendarSlotProps {
     toolbar?: ExportedDatePickerToolbarProps;
 }
-export type DatePickerViewRenderers<TView extends DateView, TAdditionalProps extends {} = {}> = PickerViewRendererLookup<PickerValidDate | null, TView, DateViewRendererProps<TView>, TAdditionalProps>;
-export interface BaseDatePickerProps extends BasePickerInputProps<PickerValidDate | null, DateView, DateValidationError>, ExportedDateCalendarProps {
+export type DatePickerViewRenderers<TView extends DateView, TAdditionalProps extends {} = {}> = PickerViewRendererLookup<PickerValue, TView, DateViewRendererProps<TView>, TAdditionalProps>;
+export interface BaseDatePickerProps extends BasePickerInputProps<PickerValue, DateView, DateValidationError>, ExportedDateCalendarProps {
     /**
      * Overridable component slots.
      * @default {}
@@ -37,6 +38,6 @@ export interface BaseDatePickerProps extends BasePickerInputProps<PickerValidDat
      */
     viewRenderers?: Partial<DatePickerViewRenderers<DateView>>;
 }
-type UseDatePickerDefaultizedProps<Props extends BaseDatePickerProps> = LocalizedComponent<DefaultizedProps<Props, 'views' | 'openTo' | keyof BaseDateValidationProps>>;
+type UseDatePickerDefaultizedProps<Props extends BaseDatePickerProps> = LocalizedComponent<DefaultizedProps<Props, 'views' | 'openTo' | ValidateDatePropsToDefault>>;
 export declare function useDatePickerDefaultizedProps<Props extends BaseDatePickerProps>(props: Props, name: string): UseDatePickerDefaultizedProps<Props>;
 export {};

package/DateTimeField/DateTimeField.js

@@ -13,6 +13,7 @@ import { useDateTimeField } from "./useDateTimeField.js";
 import { useClearableField } from "../hooks/index.js";
 import { PickersTextField } from "../PickersTextField/index.js";
 import { convertFieldResponseIntoMuiTextFieldProps } from "../internals/utils/convertFieldResponseIntoMuiTextFieldProps.js";
+import { useFieldOwnerState } from "../internals/hooks/useFieldOwnerState.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -36,7 +37,7 @@ const DateTimeField = /*#__PURE__*/React.forwardRef(function DateTimeField(inPro
       inputProps
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
-  const ownerState = themeProps;
+  const ownerState = useFieldOwnerState(themeProps);
   const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField);
   const textFieldProps = useSlotProps({
     elementType: TextField,
@@ -307,10 +308,10 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    */
   shouldDisableYear: PropTypes.func,
   /**
-   * If `true`, the format will respect the leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
-   * If `false`, the format will always add leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+   * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
    *
-   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (e.g: "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
    *
    * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
    * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.

package/DateTimeField/DateTimeField.types.d.ts

@@ -1,13 +1,14 @@
 import * as React from 'react';
-import { SlotComponentProps } from '@mui/utils';
-import { MakeOptional } from '@mui/x-internals/types';
-import TextField from '@mui/material/TextField';
-import { DateTimeValidationError, FieldSection, PickerValidDate, BuiltInFieldTextFieldProps } from '../models';
+import { MakeOptional, SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { TextFieldProps } from '@mui/material/TextField';
+import { DateTimeValidationError, BuiltInFieldTextFieldProps, FieldOwnerState } from '../models';
 import { UseFieldInternalProps } from '../internals/hooks/useField';
 import { ExportedUseClearableFieldProps, UseClearableFieldSlots, UseClearableFieldSlotProps } from '../hooks/useClearableField';
 import { ExportedValidateDateTimeProps } from '../validation/validateDateTime';
 import { AmPmProps } from '../internals/models/props/time';
-export interface UseDateTimeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerValidDate | null, FieldSection, TEnableAccessibleFieldDOMStructure, DateTimeValidationError>, 'format'>, ExportedValidateDateTimeProps, ExportedUseClearableFieldProps, AmPmProps {
+import { PickerValue } from '../internals/models';
+import { PickersTextFieldProps } from '../PickersTextField';
+export interface UseDateTimeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerValue, TEnableAccessibleFieldDOMStructure, DateTimeValidationError>, 'format'>, ExportedValidateDateTimeProps, ExportedUseClearableFieldProps, AmPmProps {
 }
 export type DateTimeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = UseDateTimeFieldProps<TEnableAccessibleFieldDOMStructure> & Omit<BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure>, keyof UseDateTimeFieldProps<TEnableAccessibleFieldDOMStructure>> & {
     /**
@@ -19,16 +20,15 @@ export type DateTimeFieldProps<TEnableAccessibleFieldDOMStructure extends boolea
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: DateTimeFieldSlotProps<TEnableAccessibleFieldDOMStructure>;
+    slotProps?: DateTimeFieldSlotProps;
 };
-export type DateTimeFieldOwnerState<TEnableAccessibleFieldDOMStructure extends boolean> = DateTimeFieldProps<TEnableAccessibleFieldDOMStructure>;
 export interface DateTimeFieldSlots extends UseClearableFieldSlots {
     /**
      * Form control with an input to render the value.
-     * @default TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.
+     * @default <PickersTextField />, or <TextField /> from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.
      */
     textField?: React.ElementType;
 }
-export interface DateTimeFieldSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends UseClearableFieldSlotProps {
-    textField?: SlotComponentProps<typeof TextField, {}, DateTimeFieldOwnerState<TEnableAccessibleFieldDOMStructure>>;
+export interface DateTimeFieldSlotProps extends UseClearableFieldSlotProps {
+    textField?: SlotComponentPropsFromProps<PickersTextFieldProps | TextFieldProps, {}, FieldOwnerState>;
 }

package/DateTimePicker/DateTimePicker.types.d.ts

@@ -1,7 +1,7 @@
 import { DesktopDateTimePickerProps, DesktopDateTimePickerSlots, DesktopDateTimePickerSlotProps } from '../DesktopDateTimePicker';
-import { BaseSingleInputFieldProps, DateOrTimeViewWithMeridiem } from '../internals/models';
+import { BaseSingleInputFieldProps, DateOrTimeViewWithMeridiem, PickerValue } from '../internals/models';
 import { MobileDateTimePickerProps, MobileDateTimePickerSlots, MobileDateTimePickerSlotProps } from '../MobileDateTimePicker';
-import { DateTimeValidationError, FieldSection, PickerValidDate } from '../models';
+import { DateTimeValidationError } from '../models';
 import { ValidateDateTimeProps } from '../validation';
 import { ExportedYearCalendarProps } from '../YearCalendar/YearCalendar.types';
 export interface DateTimePickerSlots extends DesktopDateTimePickerSlots, MobileDateTimePickerSlots<DateOrTimeViewWithMeridiem> {
@@ -34,4 +34,4 @@ export interface DateTimePickerProps<TEnableAccessibleFieldDOMStructure extends
 /**
  * Props the field can receive when used inside a date time picker (<DateTimePicker />, <DesktopDateTimePicker /> or <MobileDateTimePicker /> component).
  */
-export type DateTimePickerFieldProps = ValidateDateTimeProps & BaseSingleInputFieldProps<PickerValidDate | null, FieldSection, false, DateTimeValidationError>;
+export type DateTimePickerFieldProps = ValidateDateTimeProps & BaseSingleInputFieldProps<PickerValue, false, DateTimeValidationError>;

package/DateTimePicker/DateTimePickerTabs.js

@@ -11,6 +11,7 @@ import { TimeIcon, DateRangeIcon } from "../icons/index.js";
 import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
 import { getDateTimePickerTabsUtilityClass } from "./dateTimePickerTabsClasses.js";
 import { isDatePickerView } from "../internals/utils/date-utils.js";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const viewToTab = view => {
   if (isDatePickerView(view)) {
@@ -24,10 +25,7 @@ const tabToView = tab => {
   }
   return 'hours';
 };
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root']
   };
@@ -72,10 +70,14 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps) {
     view,
     hidden = typeof window === 'undefined' || window.innerHeight < 667,
     className,
+    classes: classesProp,
     sx
   } = props;
   const translations = usePickerTranslations();
-  const classes = useUtilityClasses(props);
+  const {
+    ownerState
+  } = usePickerPrivateContext();
+  const classes = useUtilityClasses(classesProp);
   const handleChange = (event, value) => {
     onViewChange(tabToView(value));
   };
@@ -83,7 +85,7 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps) {
     return null;
   }
   return /*#__PURE__*/_jsxs(DateTimePickerTabsRoot, {
-    ownerState: props,
+    ownerState: ownerState,
     variant: "fullWidth",
     value: viewToTab(view),
     onChange: handleChange,

package/DateTimePicker/DateTimePickerToolbar.d.ts

@@ -2,16 +2,15 @@ import * as React from 'react';
 import { MakeOptional } from '@mui/x-internals/types';
 import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/props/toolbar';
 import { DateTimePickerToolbarClasses } from './dateTimePickerToolbarClasses';
-import { DateOrTimeViewWithMeridiem, WrapperVariant } from '../internals/models';
-import { PickerValidDate } from '../models';
+import { DateOrTimeViewWithMeridiem, PickerValue, PickerVariant } from '../internals/models';
 export interface ExportedDateTimePickerToolbarProps extends ExportedBaseToolbarProps {
     /**
      * Override or extend the styles applied to the component.
      */
     classes?: Partial<DateTimePickerToolbarClasses>;
 }
-export interface DateTimePickerToolbarProps extends ExportedDateTimePickerToolbarProps, MakeOptional<BaseToolbarProps<PickerValidDate | null, DateOrTimeViewWithMeridiem>, 'view'> {
-    toolbarVariant?: WrapperVariant;
+export interface DateTimePickerToolbarProps extends ExportedDateTimePickerToolbarProps, MakeOptional<BaseToolbarProps<PickerValue, DateOrTimeViewWithMeridiem>, 'view'> {
+    toolbarVariant?: PickerVariant;
     /**
      * If provided, it will be used instead of `dateTimePickerToolbarTitle` from localization.
      */

package/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/DateTimePicker/shared.d.ts

@@ -1,18 +1,18 @@
 import * as React from 'react';
 import { DefaultizedProps } from '@mui/x-internals/types';
-import { DateTimeValidationError, PickerValidDate } from '../models';
+import { DateTimeValidationError } from '../models';
 import { DateCalendarSlots, DateCalendarSlotProps, ExportedDateCalendarProps } from '../DateCalendar/DateCalendar.types';
 import { TimeClockSlots, TimeClockSlotProps } from '../TimeClock/TimeClock.types';
 import { BasePickerInputProps } from '../internals/models/props/basePickerProps';
 import { DateTimePickerTabsProps, ExportedDateTimePickerTabsProps } from './DateTimePickerTabs';
-import { BaseDateValidationProps, BaseTimeValidationProps, DateTimeValidationProps } from '../internals/models/validation';
 import { LocalizedComponent } from '../locales/utils/pickersLocaleTextApi';
 import { DateTimePickerToolbarProps, ExportedDateTimePickerToolbarProps } from './DateTimePickerToolbar';
 import { PickerViewRendererLookup } from '../internals/hooks/usePicker/usePickerViews';
 import { DateViewRendererProps } from '../dateViewRenderers';
 import { TimeViewRendererProps } from '../timeViewRenderers';
 import { BaseClockProps, ExportedBaseClockProps } from '../internals/models/props/time';
-import { DateOrTimeViewWithMeridiem, TimeViewWithMeridiem } from '../internals/models';
+import { DateOrTimeViewWithMeridiem, PickerValue, TimeViewWithMeridiem } from '../internals/models';
+import { ExportedValidateDateTimeProps, ValidateDateTimePropsToDefault } from '../validation/validateDateTime';
 export interface BaseDateTimePickerSlots extends DateCalendarSlots, TimeClockSlots {
     /**
      * Tabs enabling toggling between date and time pickers.
@@ -35,8 +35,8 @@ export interface BaseDateTimePickerSlotProps extends DateCalendarSlotProps, Time
      */
     toolbar?: ExportedDateTimePickerToolbarProps;
 }
-export type DateTimePickerViewRenderers<TView extends DateOrTimeViewWithMeridiem, TAdditionalProps extends {} = {}> = PickerViewRendererLookup<PickerValidDate | null, TView, Omit<DateViewRendererProps<TView>, 'slots' | 'slotProps'> & Omit<TimeViewRendererProps<TimeViewWithMeridiem, BaseClockProps<TimeViewWithMeridiem>>, 'slots' | 'slotProps'>, TAdditionalProps>;
-export interface BaseDateTimePickerProps<TView extends DateOrTimeViewWithMeridiem> extends BasePickerInputProps<PickerValidDate | null, TView, DateTimeValidationError>, Omit<ExportedDateCalendarProps, 'onViewChange'>, ExportedBaseClockProps, DateTimeValidationProps {
+export type DateTimePickerViewRenderers<TView extends DateOrTimeViewWithMeridiem, TAdditionalProps extends {} = {}> = PickerViewRendererLookup<PickerValue, TView, Omit<DateViewRendererProps<TView>, 'slots' | 'slotProps'> & Omit<TimeViewRendererProps<TimeViewWithMeridiem, BaseClockProps<TimeViewWithMeridiem>>, 'slots' | 'slotProps'>, TAdditionalProps>;
+export interface BaseDateTimePickerProps<TView extends DateOrTimeViewWithMeridiem> extends BasePickerInputProps<PickerValue, TView, DateTimeValidationError>, Omit<ExportedDateCalendarProps, 'onViewChange'>, ExportedBaseClockProps, ExportedValidateDateTimeProps {
     /**
      * Display ampm controls under the clock (instead of in the toolbar).
      * @default true on desktop, false on mobile
@@ -59,6 +59,6 @@ export interface BaseDateTimePickerProps<TView extends DateOrTimeViewWithMeridie
      */
     viewRenderers?: Partial<DateTimePickerViewRenderers<TView>>;
 }
-type UseDateTimePickerDefaultizedProps<TView extends DateOrTimeViewWithMeridiem, Props extends BaseDateTimePickerProps<TView>> = LocalizedComponent<DefaultizedProps<Props, 'views' | 'openTo' | 'orientation' | 'ampm' | keyof BaseDateValidationProps | keyof BaseTimeValidationProps>>;
+type UseDateTimePickerDefaultizedProps<TView extends DateOrTimeViewWithMeridiem, Props extends BaseDateTimePickerProps<TView>> = LocalizedComponent<DefaultizedProps<Props, 'views' | 'openTo' | 'orientation' | 'ampm' | ValidateDateTimePropsToDefault>>;
 export declare function useDateTimePickerDefaultizedProps<TView extends DateOrTimeViewWithMeridiem, Props extends BaseDateTimePickerProps<TView>>(props: Props, name: string): UseDateTimePickerDefaultizedProps<TView, Props>;
 export {};

package/DayCalendarSkeleton/DayCalendarSkeleton.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className"];
+const _excluded = ["className", "classes"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -12,10 +12,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import { DAY_SIZE, DAY_MARGIN } from "../internals/constants/dimensions.js";
 import { getDayCalendarSkeletonUtilityClass } from "./dayCalendarSkeletonClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     week: ['week'],
@@ -45,14 +42,9 @@ const DayCalendarSkeletonDay = styled(Skeleton, {
   overridesResolver: (props, styles) => styles.daySkeleton
 })({
   margin: `0 ${DAY_MARGIN}px`,
-  variants: [{
-    props: {
-      day: 0
-    },
-    style: {
-      visibility: 'hidden'
-    }
-  }]
+  '&[data-day-in-month="0"]': {
+    visibility: 'hidden'
+  }
 });
 const monthMap = [[0, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 0, 0, 0]];
 
@@ -71,23 +63,22 @@ function DayCalendarSkeleton(inProps) {
     name: 'MuiDayCalendarSkeleton'
   });
   const {
-      className
+      className,
+      classes: classesProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const classes = useUtilityClasses(other);
+  const classes = useUtilityClasses(classesProp);
   return /*#__PURE__*/_jsx(DayCalendarSkeletonRoot, _extends({
     className: clsx(classes.root, className)
   }, other, {
     children: monthMap.map((week, index) => /*#__PURE__*/_jsx(DayCalendarSkeletonWeek, {
       className: classes.week,
-      children: week.map((day, index2) => /*#__PURE__*/_jsx(DayCalendarSkeletonDay, {
+      children: week.map((dayInMonth, index2) => /*#__PURE__*/_jsx(DayCalendarSkeletonDay, {
         variant: "circular",
         width: DAY_SIZE,
         height: DAY_SIZE,
         className: classes.daySkeleton,
-        ownerState: {
-          day
-        }
+        "data-day-in-month": dayInMonth
       }, index2))
     }, index))
   }));

package/DesktopDateTimePicker/DesktopDateTimePickerLayout.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { PickersLayoutProps } from '../PickersLayout';
 import { DateOrTimeViewWithMeridiem } from '../internals/models/common';
-type DesktopDateTimePickerLayoutComponent = (<TValue, TView extends DateOrTimeViewWithMeridiem>(props: PickersLayoutProps<TValue, TView> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+import { PickerValidValue } from '../internals/models';
+type DesktopDateTimePickerLayoutComponent = (<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem>(props: PickersLayoutProps<TValue, TView> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
 /**