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

package/DatePicker/DatePicker.js

@@ -65,9 +65,9 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
   closeOnSelect: PropTypes.bool,
   /**
    * Formats the day of week displayed in the calendar header.
-   * @param {TDate} date The date of the day of week provided by the adapter.
+   * @param {PickerValidDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
-   * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
    */
   dayOfWeekFormatter: PropTypes.func,
   /**
@@ -82,7 +82,8 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    */
   desktopModeMediaQuery: PropTypes.string,
   /**
-   * If `true`, the picker and text field are disabled.
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
    * @default false
    */
   disabled: PropTypes.bool,
@@ -111,7 +112,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    */
   displayWeekNumber: PropTypes.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: PropTypes.any,
   /**
@@ -201,8 +202,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
   onError: PropTypes.func,
   /**
    * Callback fired on month change.
-   * @template TDate
-   * @param {TDate} month The new month.
+   * @param {PickerValidDate} month The new month.
    */
   onMonthChange: PropTypes.func,
   /**
@@ -223,8 +223,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
   onViewChange: PropTypes.func,
   /**
    * Callback fired on year change.
-   * @template TDate
-   * @param {TDate} year The new year.
+   * @param {PickerValidDate} year The new year.
    */
   onYearChange: PropTypes.func,
   /**
@@ -242,6 +241,11 @@ process.env.NODE_ENV !== "production" ? DatePicker.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,
   /**
    * If `true`, disable heavy animations.
@@ -274,22 +278,19 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    *
    * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
    *
-   * @template TDate
-   * @param {TDate} day The date to test.
+   * @param {PickerValidDate} day The date to test.
    * @returns {boolean} If `true` the date will be disabled.
    */
   shouldDisableDate: PropTypes.func,
   /**
    * Disable specific month.
-   * @template TDate
-   * @param {TDate} month The month to test.
+   * @param {PickerValidDate} month The month to test.
    * @returns {boolean} If `true`, the month will be disabled.
    */
   shouldDisableMonth: PropTypes.func,
   /**
    * Disable specific year.
-   * @template TDate
-   * @param {TDate} year The year to test.
+   * @param {PickerValidDate} year The year to test.
    * @returns {boolean} If `true`, the year will be disabled.
    */
   shouldDisableYear: PropTypes.func,

package/DatePicker/DatePicker.types.d.ts

@@ -1,14 +1,13 @@
-import { UseDateFieldProps } from '../DateField';
 import { DesktopDatePickerProps, DesktopDatePickerSlots, DesktopDatePickerSlotProps } from '../DesktopDatePicker';
-import { DefaultizedProps } from '../internals/models/helpers';
-import { BaseDateValidationProps } from '../internals/models/validation';
+import { BaseSingleInputFieldProps } from '../internals/models';
 import { MobileDatePickerProps, MobileDatePickerSlots, MobileDatePickerSlotProps } from '../MobileDatePicker';
-import { BaseSingleInputFieldProps, DateValidationError, FieldSection, PickerValidDate } from '../models';
-export interface DatePickerSlots<TDate extends PickerValidDate> extends DesktopDatePickerSlots<TDate>, MobileDatePickerSlots<TDate> {
+import { DateValidationError, FieldSection, PickerValidDate } from '../models';
+import { ValidateDateProps } from '../validation/validateDate';
+export interface DatePickerSlots extends DesktopDatePickerSlots, MobileDatePickerSlots {
 }
-export interface DatePickerSlotProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends DesktopDatePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure>, MobileDatePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure> {
+export interface DatePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends DesktopDatePickerSlotProps<TEnableAccessibleFieldDOMStructure>, MobileDatePickerSlotProps<TEnableAccessibleFieldDOMStructure> {
 }
-export interface DatePickerProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> extends DesktopDatePickerProps<TDate, TEnableAccessibleFieldDOMStructure>, MobileDatePickerProps<TDate, TEnableAccessibleFieldDOMStructure> {
+export interface DatePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends DesktopDatePickerProps<TEnableAccessibleFieldDOMStructure>, MobileDatePickerProps<TEnableAccessibleFieldDOMStructure> {
     /**
      * CSS media query when `Mobile` mode will be changed to `Desktop`.
      * @default '@media (pointer: fine)'
@@ -19,12 +18,12 @@ export interface DatePickerProps<TDate extends PickerValidDate, TEnableAccessibl
      * Overridable component slots.
      * @default {}
      */
-    slots?: DatePickerSlots<TDate>;
+    slots?: DatePickerSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: DatePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure>;
+    slotProps?: DatePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
     /**
      * Years rendered per row.
      * @default 4 on desktop, 3 on mobile
@@ -32,6 +31,6 @@ export interface DatePickerProps<TDate extends PickerValidDate, TEnableAccessibl
     yearsPerRow?: 3 | 4;
 }
 /**
- * Props the field can receive when used inside a `DatePicker`, `DesktopDatePicker` or `MobileDatePicker` component.
+ * Props the field can receive when used inside a date picker (<DatePicker />, <DesktopDatePicker /> or <MobileDatePicker /> component).
  */
-export type DatePickerFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> = DefaultizedProps<UseDateFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, 'format' | 'timezone' | keyof BaseDateValidationProps<TDate>> & BaseSingleInputFieldProps<TDate | null, TDate, FieldSection, false, DateValidationError>;
+export type DatePickerFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = ValidateDateProps & BaseSingleInputFieldProps<PickerValidDate | null, FieldSection, TEnableAccessibleFieldDOMStructure, DateValidationError>;

package/DatePicker/DatePickerToolbar.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/props/toolbar';
 import { DateView, PickerValidDate } from '../models';
 import { DatePickerToolbarClasses } from './datePickerToolbarClasses';
-export interface DatePickerToolbarProps<TDate extends PickerValidDate> extends BaseToolbarProps<TDate | null, DateView>, ExportedDatePickerToolbarProps {
+export interface DatePickerToolbarProps extends BaseToolbarProps<PickerValidDate | null, DateView>, ExportedDatePickerToolbarProps {
 }
 export interface ExportedDatePickerToolbarProps extends ExportedBaseToolbarProps {
     /**
@@ -10,7 +10,7 @@ export interface ExportedDatePickerToolbarProps extends ExportedBaseToolbarProps
      */
     classes?: Partial<DatePickerToolbarClasses>;
 }
-type DatePickerToolbarComponent = (<TDate extends PickerValidDate>(props: DatePickerToolbarProps<TDate> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+type DatePickerToolbarComponent = ((props: DatePickerToolbarProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
 /**

package/DatePicker/DatePickerToolbar.js

@@ -10,7 +10,7 @@ import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { PickersToolbar } from "../internals/components/PickersToolbar.js";
-import { usePickersTranslations } from "../hooks/usePickersTranslations.js";
+import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
 import { useUtils } from "../internals/hooks/useUtils.js";
 import { getDatePickerToolbarUtilityClass } from "./datePickerToolbarClasses.js";
 import { resolveDateFormat } from "../internals/utils/date-utils.js";
@@ -69,7 +69,7 @@ export const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const utils = useUtils();
-  const translations = usePickersTranslations();
+  const translations = usePickerTranslations();
   const classes = useUtilityClasses(props);
   const dateText = React.useMemo(() => {
     if (!value) {
@@ -107,6 +107,11 @@ 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.
@@ -121,6 +126,11 @@ 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,5 +1,5 @@
 import * as React from 'react';
-import { DefaultizedProps } from '../internals/models/helpers';
+import { DefaultizedProps } from '@mui/x-internals/types';
 import { DateCalendarSlots, DateCalendarSlotProps, ExportedDateCalendarProps } from '../DateCalendar/DateCalendar.types';
 import { DateValidationError, DateView, PickerValidDate } from '../models';
 import { BasePickerInputProps } from '../internals/models/props/basePickerProps';
@@ -8,35 +8,35 @@ import { LocalizedComponent } from '../locales/utils/pickersLocaleTextApi';
 import { DatePickerToolbarProps, ExportedDatePickerToolbarProps } from './DatePickerToolbar';
 import { PickerViewRendererLookup } from '../internals/hooks/usePicker/usePickerViews';
 import { DateViewRendererProps } from '../dateViewRenderers';
-export interface BaseDatePickerSlots<TDate extends PickerValidDate> extends DateCalendarSlots<TDate> {
+export interface BaseDatePickerSlots extends DateCalendarSlots {
     /**
      * Custom component for the toolbar rendered above the views.
      * @default DatePickerToolbar
      */
-    toolbar?: React.JSXElementConstructor<DatePickerToolbarProps<TDate>>;
+    toolbar?: React.JSXElementConstructor<DatePickerToolbarProps>;
 }
-export interface BaseDatePickerSlotProps<TDate extends PickerValidDate> extends DateCalendarSlotProps<TDate> {
+export interface BaseDatePickerSlotProps extends DateCalendarSlotProps {
     toolbar?: ExportedDatePickerToolbarProps;
 }
-export type DatePickerViewRenderers<TDate extends PickerValidDate, TView extends DateView, TAdditionalProps extends {} = {}> = PickerViewRendererLookup<TDate | null, TView, DateViewRendererProps<TDate, TView>, TAdditionalProps>;
-export interface BaseDatePickerProps<TDate extends PickerValidDate> extends BasePickerInputProps<TDate | null, TDate, DateView, DateValidationError>, ExportedDateCalendarProps<TDate> {
+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 {
     /**
      * Overridable component slots.
      * @default {}
      */
-    slots?: BaseDatePickerSlots<TDate>;
+    slots?: BaseDatePickerSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: BaseDatePickerSlotProps<TDate>;
+    slotProps?: BaseDatePickerSlotProps;
     /**
      * Define custom view renderers for each section.
      * If `null`, the section will only have field editing.
      * If `undefined`, internally defined view will be used.
      */
-    viewRenderers?: Partial<DatePickerViewRenderers<TDate, DateView>>;
+    viewRenderers?: Partial<DatePickerViewRenderers<DateView>>;
 }
-type UseDatePickerDefaultizedProps<TDate extends PickerValidDate, Props extends BaseDatePickerProps<TDate>> = LocalizedComponent<TDate, DefaultizedProps<Props, 'views' | 'openTo' | keyof BaseDateValidationProps<TDate>>>;
-export declare function useDatePickerDefaultizedProps<TDate extends PickerValidDate, Props extends BaseDatePickerProps<TDate>>(props: Props, name: string): UseDatePickerDefaultizedProps<TDate, Props>;
+type UseDatePickerDefaultizedProps<Props extends BaseDatePickerProps> = LocalizedComponent<DefaultizedProps<Props, 'views' | 'openTo' | keyof BaseDateValidationProps>>;
+export declare function useDatePickerDefaultizedProps<Props extends BaseDatePickerProps>(props: Props, name: string): UseDatePickerDefaultizedProps<Props>;
 export {};

package/DateTimeField/DateTimeField.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { DateTimeFieldProps } from './DateTimeField.types';
-import { PickerValidDate } from '../models';
-type DateTimeFieldComponent = (<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false>(props: DateTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+type DateTimeFieldComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(props: DateTimeFieldProps<TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
 /**

package/DateTimeField/DateTimeField.js

@@ -37,7 +37,7 @@ const DateTimeField = /*#__PURE__*/React.forwardRef(function DateTimeField(inPro
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const ownerState = themeProps;
-  const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure ? PickersTextField : MuiTextField);
+  const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField);
   const textFieldProps = useSlotProps({
     elementType: TextField,
     externalSlotProps: slotProps?.textField,
@@ -94,6 +94,7 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
   defaultValue: PropTypes.object,
   /**
    * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
    * @default false
    */
   disabled: PropTypes.bool,
@@ -113,7 +114,7 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    */
   disablePast: PropTypes.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: PropTypes.bool,
   /**
@@ -251,8 +252,8 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    */
   onSelectedSectionsChange: PropTypes.func,
   /**
-   * It prevents the user from changing the value of the field
-   * (not from interacting with the field).
+   * 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,
@@ -282,30 +283,26 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    *
    * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
    *
-   * @template TDate
-   * @param {TDate} day The date to test.
+   * @param {PickerValidDate} day The date to test.
    * @returns {boolean} If `true` the date will be disabled.
    */
   shouldDisableDate: PropTypes.func,
   /**
    * Disable specific month.
-   * @template TDate
-   * @param {TDate} month The month to test.
+   * @param {PickerValidDate} month The month to test.
    * @returns {boolean} If `true`, the month will be disabled.
    */
   shouldDisableMonth: PropTypes.func,
   /**
    * Disable specific time.
-   * @template TDate
-   * @param {TDate} value The value to check.
+   * @param {PickerValidDate} value The value to check.
    * @param {TimeView} view The clock type of the timeValue.
    * @returns {boolean} If `true` the time will be disabled.
    */
   shouldDisableTime: PropTypes.func,
   /**
    * Disable specific year.
-   * @template TDate
-   * @param {TDate} year The year to test.
+   * @param {PickerValidDate} year The year to test.
    * @returns {boolean} If `true`, the year will be disabled.
    */
   shouldDisableYear: PropTypes.func,

package/DateTimeField/DateTimeField.types.d.ts

@@ -1,20 +1,15 @@
 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 { UseFieldInternalProps } from '../internals/hooks/useField';
-import { MakeOptional } from '../internals/models/helpers';
-import { BaseDateValidationProps, BaseTimeValidationProps, DateTimeValidationProps, DayValidationProps, MonthValidationProps, TimeValidationProps, YearValidationProps } from '../internals/models/validation';
 import { ExportedUseClearableFieldProps, UseClearableFieldSlots, UseClearableFieldSlotProps } from '../hooks/useClearableField';
-export interface UseDateTimeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<TDate | null, TDate, FieldSection, TEnableAccessibleFieldDOMStructure, DateTimeValidationError>, 'format'>, DayValidationProps<TDate>, MonthValidationProps<TDate>, YearValidationProps<TDate>, BaseDateValidationProps<TDate>, TimeValidationProps<TDate>, BaseTimeValidationProps, DateTimeValidationProps<TDate>, ExportedUseClearableFieldProps {
-    /**
-     * 12h/24h view for hour selection clock.
-     * @default utils.is12HourCycleInCurrentLocale()
-     */
-    ampm?: boolean;
+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 {
 }
-export type UseDateTimeFieldComponentProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TChildProps extends {}> = Omit<TChildProps, keyof UseDateTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>> & UseDateTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>;
-export type DateTimeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> = UseDateTimeFieldComponentProps<TDate, TEnableAccessibleFieldDOMStructure, BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure>> & {
+export type DateTimeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = UseDateTimeFieldProps<TEnableAccessibleFieldDOMStructure> & Omit<BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure>, keyof UseDateTimeFieldProps<TEnableAccessibleFieldDOMStructure>> & {
     /**
      * Overridable component slots.
      * @default {}
@@ -24,9 +19,9 @@ export type DateTimeFieldProps<TDate extends PickerValidDate, TEnableAccessibleF
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: DateTimeFieldSlotProps<TDate, TEnableAccessibleFieldDOMStructure>;
+    slotProps?: DateTimeFieldSlotProps<TEnableAccessibleFieldDOMStructure>;
 };
-export type DateTimeFieldOwnerState<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> = DateTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>;
+export type DateTimeFieldOwnerState<TEnableAccessibleFieldDOMStructure extends boolean> = DateTimeFieldProps<TEnableAccessibleFieldDOMStructure>;
 export interface DateTimeFieldSlots extends UseClearableFieldSlots {
     /**
      * Form control with an input to render the value.
@@ -34,6 +29,6 @@ export interface DateTimeFieldSlots extends UseClearableFieldSlots {
      */
     textField?: React.ElementType;
 }
-export interface DateTimeFieldSlotProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends UseClearableFieldSlotProps {
-    textField?: SlotComponentProps<typeof TextField, {}, DateTimeFieldOwnerState<TDate, TEnableAccessibleFieldDOMStructure>>;
+export interface DateTimeFieldSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends UseClearableFieldSlotProps {
+    textField?: SlotComponentProps<typeof TextField, {}, DateTimeFieldOwnerState<TEnableAccessibleFieldDOMStructure>>;
 }

package/DateTimeField/index.d.ts

@@ -1,3 +1,3 @@
 export { DateTimeField } from './DateTimeField';
 export { useDateTimeField as unstable_useDateTimeField } from './useDateTimeField';
-export type { UseDateTimeFieldProps, UseDateTimeFieldComponentProps, DateTimeFieldProps, } from './DateTimeField.types';
+export type { UseDateTimeFieldProps, DateTimeFieldProps } from './DateTimeField.types';

package/DateTimeField/useDateTimeField.d.ts

@@ -1,3 +1,2 @@
 import { UseDateTimeFieldProps } from './DateTimeField.types';
-import { PickerValidDate } from '../models';
-export declare const useDateTimeField: <TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseDateTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>>(inProps: TAllProps) => import("../internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps & Omit<UseDateTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedDateTimeFieldBaseProps<any>> & Required<Pick<UseDateTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedDateTimeFieldBaseProps<any>>>, "disabled" | "format" | "onChange" | "onError" | "defaultValue" | "value" | "readOnly" | "minDate" | "maxDate" | "ampm" | "disableFuture" | "disablePast" | "timezone" | "referenceDate" | "formatDensity" | "shouldRespectLeadingZeros" | "selectedSections" | "onSelectedSectionsChange" | "unstableFieldRef" | "enableAccessibleFieldDOMStructure" | "minutesStep" | "shouldDisableDate" | "shouldDisableMonth" | "shouldDisableYear" | "minTime" | "maxTime" | "shouldDisableTime" | "disableIgnoringDatePartForTimeValidation" | "minDateTime" | "maxDateTime" | "dateSeparator">>;
+export declare const useDateTimeField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseDateTimeFieldProps<TEnableAccessibleFieldDOMStructure>>(inProps: TAllProps) => import("../internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps & Omit<UseDateTimeFieldProps<TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedDateTimeFieldBaseProps> & Required<Pick<UseDateTimeFieldProps<TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedDateTimeFieldBaseProps>>, "disabled" | "format" | "onChange" | "onError" | "defaultValue" | "value" | "readOnly" | "formatDensity" | "enableAccessibleFieldDOMStructure" | "selectedSections" | "onSelectedSectionsChange" | "timezone" | "unstableFieldRef" | "referenceDate" | "shouldRespectLeadingZeros" | "ampm" | "disableFuture" | "disablePast" | "maxDate" | "minDate" | "minutesStep" | "shouldDisableDate" | "shouldDisableMonth" | "shouldDisableYear" | "minTime" | "maxTime" | "shouldDisableTime" | "disableIgnoringDatePartForTimeValidation" | "minDateTime" | "maxDateTime" | "dateSeparator">>;

package/DateTimePicker/DateTimePicker.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { DateTimePickerProps } from './DateTimePicker.types';
-import { PickerValidDate } from '../models';
-type DateTimePickerComponent = (<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false>(props: DateTimePickerProps<TDate, TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+type DateTimePickerComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(props: DateTimePickerProps<TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
 /**

package/DateTimePicker/DateTimePicker.js

@@ -75,9 +75,9 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
   closeOnSelect: PropTypes.bool,
   /**
    * Formats the day of week displayed in the calendar header.
-   * @param {TDate} date The date of the day of week provided by the adapter.
+   * @param {PickerValidDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
-   * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
    */
   dayOfWeekFormatter: PropTypes.func,
   /**
@@ -92,7 +92,8 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
    */
   desktopModeMediaQuery: PropTypes.string,
   /**
-   * If `true`, the picker and text field are disabled.
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
    * @default false
    */
   disabled: PropTypes.bool,
@@ -126,7 +127,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
    */
   displayWeekNumber: PropTypes.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: PropTypes.any,
   /**
@@ -239,8 +240,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
   onError: PropTypes.func,
   /**
    * Callback fired on month change.
-   * @template TDate
-   * @param {TDate} month The new month.
+   * @param {PickerValidDate} month The new month.
    */
   onMonthChange: PropTypes.func,
   /**
@@ -261,8 +261,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
   onViewChange: PropTypes.func,
   /**
    * Callback fired on year change.
-   * @template TDate
-   * @param {TDate} year The new year.
+   * @param {PickerValidDate} year The new year.
    */
   onYearChange: PropTypes.func,
   /**
@@ -280,6 +279,11 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.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,
   /**
    * If `true`, disable heavy animations.
@@ -312,30 +316,26 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
    *
    * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
    *
-   * @template TDate
-   * @param {TDate} day The date to test.
+   * @param {PickerValidDate} day The date to test.
    * @returns {boolean} If `true` the date will be disabled.
    */
   shouldDisableDate: PropTypes.func,
   /**
    * Disable specific month.
-   * @template TDate
-   * @param {TDate} month The month to test.
+   * @param {PickerValidDate} month The month to test.
    * @returns {boolean} If `true`, the month will be disabled.
    */
   shouldDisableMonth: PropTypes.func,
   /**
    * Disable specific time.
-   * @template TDate
-   * @param {TDate} value The value to check.
+   * @param {PickerValidDate} value The value to check.
    * @param {TimeView} view The clock type of the timeValue.
    * @returns {boolean} If `true` the time will be disabled.
    */
   shouldDisableTime: PropTypes.func,
   /**
    * Disable specific year.
-   * @template TDate
-   * @param {TDate} year The year to test.
+   * @param {PickerValidDate} year The year to test.
    * @returns {boolean} If `true`, the year will be disabled.
    */
   shouldDisableYear: PropTypes.func,

package/DateTimePicker/DateTimePicker.types.d.ts

@@ -1,16 +1,14 @@
-import { UseDateTimeFieldProps } from '../DateTimeField';
 import { DesktopDateTimePickerProps, DesktopDateTimePickerSlots, DesktopDateTimePickerSlotProps } from '../DesktopDateTimePicker';
-import { DateOrTimeViewWithMeridiem } from '../internals/models';
-import { DefaultizedProps } from '../internals/models/helpers';
-import { BaseDateValidationProps, BaseTimeValidationProps } from '../internals/models/validation';
+import { BaseSingleInputFieldProps, DateOrTimeViewWithMeridiem } from '../internals/models';
 import { MobileDateTimePickerProps, MobileDateTimePickerSlots, MobileDateTimePickerSlotProps } from '../MobileDateTimePicker';
-import { BaseSingleInputFieldProps, DateTimeValidationError, FieldSection, PickerValidDate } from '../models';
+import { DateTimeValidationError, FieldSection, PickerValidDate } from '../models';
+import { ValidateDateTimeProps } from '../validation';
 import { ExportedYearCalendarProps } from '../YearCalendar/YearCalendar.types';
-export interface DateTimePickerSlots<TDate extends PickerValidDate> extends DesktopDateTimePickerSlots<TDate>, MobileDateTimePickerSlots<TDate, DateOrTimeViewWithMeridiem> {
+export interface DateTimePickerSlots extends DesktopDateTimePickerSlots, MobileDateTimePickerSlots<DateOrTimeViewWithMeridiem> {
 }
-export interface DateTimePickerSlotProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends DesktopDateTimePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure>, MobileDateTimePickerSlotProps<TDate, DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure> {
+export interface DateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends DesktopDateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure>, MobileDateTimePickerSlotProps<DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure> {
 }
-export interface DateTimePickerProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> extends DesktopDateTimePickerProps<TDate, TEnableAccessibleFieldDOMStructure>, ExportedYearCalendarProps, Omit<MobileDateTimePickerProps<TDate, DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure>, 'views'> {
+export interface DateTimePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends DesktopDateTimePickerProps<TEnableAccessibleFieldDOMStructure>, ExportedYearCalendarProps, Omit<MobileDateTimePickerProps<DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure>, 'views'> {
     /**
      * CSS media query when `Mobile` mode will be changed to `Desktop`.
      * @default '@media (pointer: fine)'
@@ -21,12 +19,12 @@ export interface DateTimePickerProps<TDate extends PickerValidDate, TEnableAcces
      * Overridable component slots.
      * @default {}
      */
-    slots?: DateTimePickerSlots<TDate>;
+    slots?: DateTimePickerSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: DateTimePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure>;
+    slotProps?: DateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
     /**
      * Years rendered per row.
      * @default 4 on desktop, 3 on mobile
@@ -34,7 +32,6 @@ export interface DateTimePickerProps<TDate extends PickerValidDate, TEnableAcces
     yearsPerRow?: 3 | 4;
 }
 /**
- * Props the field can receive when used inside a date time picker.
- * (`DateTimePicker`, `DesktopDateTimePicker` or `MobileDateTimePicker` component).
+ * Props the field can receive when used inside a date time picker (<DateTimePicker />, <DesktopDateTimePicker /> or <MobileDateTimePicker /> component).
  */
-export type DateTimePickerFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> = DefaultizedProps<UseDateTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, 'format' | 'timezone' | 'ampm' | keyof BaseDateValidationProps<TDate> | keyof BaseTimeValidationProps> & BaseSingleInputFieldProps<TDate | null, TDate, FieldSection, false, DateTimeValidationError>;
+export type DateTimePickerFieldProps = ValidateDateTimeProps & BaseSingleInputFieldProps<PickerValidDate | null, FieldSection, false, DateTimeValidationError>;

package/DateTimePicker/DateTimePickerTabs.d.ts

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { DateOrTimeViewWithMeridiem } from '../internals/models';
 import { DateTimePickerTabsClasses } from './dateTimePickerTabsClasses';
 import { BaseTabsProps, ExportedBaseTabsProps } from '../internals/models/props/tabs';
-import { PickerValidDate } from '../models';
 export interface ExportedDateTimePickerTabsProps extends ExportedBaseTabsProps {
     /**
      * Toggles visibility of the tabs allowing view switching.
@@ -37,7 +36,7 @@ export interface DateTimePickerTabsProps extends ExportedDateTimePickerTabsProps
  * - [DateTimePickerTabs API](https://mui.com/x/api/date-pickers/date-time-picker-tabs/)
  */
 declare const DateTimePickerTabs: {
-    <TDate extends PickerValidDate>(inProps: DateTimePickerTabsProps): React.JSX.Element | null;
+    (inProps: DateTimePickerTabsProps): React.JSX.Element | null;
     propTypes: any;
 };
 export { DateTimePickerTabs };

package/DateTimePicker/DateTimePickerTabs.js

@@ -8,7 +8,7 @@ import Tabs, { tabsClasses } from '@mui/material/Tabs';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { TimeIcon, DateRangeIcon } from "../icons/index.js";
-import { usePickersTranslations } from "../hooks/usePickersTranslations.js";
+import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
 import { getDateTimePickerTabsUtilityClass } from "./dateTimePickerTabsClasses.js";
 import { isDatePickerView } from "../internals/utils/date-utils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -74,7 +74,7 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps) {
     className,
     sx
   } = props;
-  const translations = usePickersTranslations();
+  const translations = usePickerTranslations();
   const classes = useUtilityClasses(props);
   const handleChange = (event, value) => {
     onViewChange(tabToView(value));

package/DateTimePicker/DateTimePickerToolbar.d.ts

@@ -1,8 +1,8 @@
 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 { MakeOptional } from '../internals/models/helpers';
 import { PickerValidDate } from '../models';
 export interface ExportedDateTimePickerToolbarProps extends ExportedBaseToolbarProps {
     /**
@@ -10,7 +10,7 @@ export interface ExportedDateTimePickerToolbarProps extends ExportedBaseToolbarP
      */
     classes?: Partial<DateTimePickerToolbarClasses>;
 }
-export interface DateTimePickerToolbarProps<TDate extends PickerValidDate> extends ExportedDateTimePickerToolbarProps, MakeOptional<BaseToolbarProps<TDate | null, DateOrTimeViewWithMeridiem>, 'view'> {
+export interface DateTimePickerToolbarProps extends ExportedDateTimePickerToolbarProps, MakeOptional<BaseToolbarProps<PickerValidDate | null, DateOrTimeViewWithMeridiem>, 'view'> {
     toolbarVariant?: WrapperVariant;
     /**
      * If provided, it will be used instead of `dateTimePickerToolbarTitle` from localization.
@@ -29,7 +29,7 @@ export interface DateTimePickerToolbarProps<TDate extends PickerValidDate> exten
  *
  * - [DateTimePickerToolbar API](https://mui.com/x/api/date-pickers/date-time-picker-toolbar/)
  */
-declare function DateTimePickerToolbar<TDate extends PickerValidDate>(inProps: DateTimePickerToolbarProps<TDate>): React.JSX.Element;
+declare function DateTimePickerToolbar(inProps: DateTimePickerToolbarProps): React.JSX.Element;
 declare namespace DateTimePickerToolbar {
     var propTypes: any;
 }