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

package/DateRangeCalendar/DateRangeCalendar.types.d.ts

@@ -2,52 +2,41 @@ import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { SlotComponentProps } from '@mui/utils';
 import { Theme } from '@mui/material/styles';
-import { PickerValidDate, TimezoneProps } from '@mui/x-date-pickers/models';
+import { DefaultizedProps } from '@mui/x-internals/types';
+import { PickerOwnerState, PickerValidDate, TimezoneProps } from '@mui/x-date-pickers/models';
 import { PickersCalendarHeader, PickersCalendarHeaderSlots, PickersCalendarHeaderSlotProps } from '@mui/x-date-pickers/PickersCalendarHeader';
-import { BaseDateValidationProps, DefaultizedProps, ExportedDayCalendarProps, DayCalendarSlots, DayCalendarSlotProps, PickersArrowSwitcherSlots, PickersArrowSwitcherSlotProps, DayCalendarProps, ExportedUseViewsOptions } from '@mui/x-date-pickers/internals';
-import { DayRangeValidationProps } from '../internals/models/dateRange';
-import { DateRange, RangePosition } from '../models';
+import { PickerDayOwnerState } from '@mui/x-date-pickers/DateCalendar';
+import { BaseDateValidationProps, ExportedDayCalendarProps, DayCalendarSlots, DayCalendarSlotProps, PickersArrowSwitcherSlots, PickersArrowSwitcherSlotProps, ExportedUseViewsOptions, PickerRangeValue, FormProps } from '@mui/x-date-pickers/internals';
+import { RangePosition } from '../models';
 import { DateRangeCalendarClasses } from './dateRangeCalendarClasses';
 import { DateRangePickerDay, DateRangePickerDayProps } from '../DateRangePickerDay';
 import { UseRangePositionProps } from '../internals/hooks/useRangePosition';
 import { PickersRangeCalendarHeaderProps } from '../PickersRangeCalendarHeader';
-export interface DateRangeCalendarSlots<TDate extends PickerValidDate> extends PickersArrowSwitcherSlots, Omit<DayCalendarSlots<TDate>, 'day'>, PickersCalendarHeaderSlots {
+import { ExportedValidateDateRangeProps } from '../validation/validateDateRange';
+export interface DateRangeCalendarSlots extends PickersArrowSwitcherSlots, Omit<DayCalendarSlots, 'day'>, PickersCalendarHeaderSlots {
     /**
      * Custom component for calendar header.
      * Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component.
      * @default PickersCalendarHeader
      */
-    calendarHeader?: React.ElementType<PickersRangeCalendarHeaderProps<TDate>>;
+    calendarHeader?: React.ElementType<PickersRangeCalendarHeaderProps>;
     /**
      * Custom component for day in range pickers.
      * Check the [DateRangePickersDay](https://mui.com/x/api/date-pickers/date-range-picker-day/) component.
      * @default DateRangePickersDay
      */
-    day?: React.ElementType<DateRangePickerDayProps<TDate>>;
+    day?: React.ElementType<DateRangePickerDayProps>;
 }
-export interface DateRangeCalendarSlotProps<TDate extends PickerValidDate> extends PickersArrowSwitcherSlotProps, Omit<DayCalendarSlotProps<TDate>, 'day'>, PickersCalendarHeaderSlotProps<TDate> {
-    calendarHeader?: SlotComponentProps<typeof PickersCalendarHeader, {}, DateRangeCalendarProps<TDate>>;
-    day?: SlotComponentProps<typeof DateRangePickerDay, {}, DayCalendarProps<TDate> & {
-        day: TDate;
-        selected: boolean;
-    }>;
+export interface DateRangeCalendarSlotProps extends PickersArrowSwitcherSlotProps, Omit<DayCalendarSlotProps, 'day'>, PickersCalendarHeaderSlotProps {
+    calendarHeader?: SlotComponentProps<typeof PickersCalendarHeader, {}, DateRangeCalendarOwnerState>;
+    day?: SlotComponentProps<typeof DateRangePickerDay, {}, PickerDayOwnerState>;
 }
-export interface ExportedDateRangeCalendarProps<TDate extends PickerValidDate> extends ExportedDayCalendarProps<TDate>, BaseDateValidationProps<TDate>, DayRangeValidationProps<TDate>, TimezoneProps {
+export interface ExportedDateRangeCalendarProps extends ExportedDayCalendarProps, ExportedValidateDateRangeProps, TimezoneProps, FormProps {
     /**
      * If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.
      * @default false
      */
     disableAutoMonthSwitching?: boolean;
-    /**
-     * If `true`, the picker and text field are disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Make picker read only.
-     * @default false
-     */
-    readOnly?: boolean;
     /**
      * If `true`, disable heavy animations.
      * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
@@ -55,10 +44,9 @@ export interface ExportedDateRangeCalendarProps<TDate extends PickerValidDate> e
     reduceAnimations?: boolean;
     /**
      * Callback fired on month change.
-     * @template TDate
-     * @param {TDate} month The new month.
+     * @param {PickerValidDate} month The new month.
      */
-    onMonthChange?: (month: TDate) => void;
+    onMonthChange?: (month: PickerValidDate) => void;
     /**
      * Position the current month is rendered in.
      * @default 1
@@ -70,22 +58,22 @@ export interface ExportedDateRangeCalendarProps<TDate extends PickerValidDate> e
      */
     disableDragEditing?: boolean;
 }
-export interface DateRangeCalendarProps<TDate extends PickerValidDate> extends ExportedDateRangeCalendarProps<TDate>, UseRangePositionProps, ExportedUseViewsOptions<'day'> {
+export interface DateRangeCalendarProps extends ExportedDateRangeCalendarProps, UseRangePositionProps, ExportedUseViewsOptions<PickerRangeValue, 'day'> {
     /**
      * The selected value.
      * Used when the component is controlled.
      */
-    value?: DateRange<TDate>;
+    value?: PickerRangeValue;
     /**
      * The default selected value.
      * Used when the component is not controlled.
      */
-    defaultValue?: DateRange<TDate>;
+    defaultValue?: PickerRangeValue;
     /**
      * The date used to generate the new value when both `value` and `defaultValue` are empty.
      * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`.
      */
-    referenceDate?: TDate;
+    referenceDate?: PickerValidDate;
     /**
      * The number of calendars to render.
      * @default 2
@@ -104,12 +92,12 @@ export interface DateRangeCalendarProps<TDate extends PickerValidDate> extends E
      * Overridable component slots.
      * @default {}
      */
-    slots?: DateRangeCalendarSlots<TDate>;
+    slots?: DateRangeCalendarSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: DateRangeCalendarSlotProps<TDate>;
+    slotProps?: DateRangeCalendarSlotProps;
     /**
      * Range positions available for selection.
      * This list is checked against when checking if a next range position can be selected.
@@ -119,7 +107,7 @@ export interface DateRangeCalendarProps<TDate extends PickerValidDate> extends E
      */
     availableRangePositions?: RangePosition[];
 }
-export interface DateRangeCalendarOwnerState<TDate extends PickerValidDate> extends DateRangeCalendarProps<TDate> {
-    isDragging: boolean;
+export interface DateRangeCalendarOwnerState extends PickerOwnerState {
+    isDraggingDay: boolean;
 }
-export type DateRangeCalendarDefaultizedProps<TDate extends PickerValidDate> = DefaultizedProps<DateRangeCalendarProps<TDate>, 'views' | 'openTo' | 'reduceAnimations' | 'calendars' | 'disableDragEditing' | 'availableRangePositions' | keyof BaseDateValidationProps<TDate>>;
+export type DateRangeCalendarDefaultizedProps = DefaultizedProps<DateRangeCalendarProps, 'views' | 'openTo' | 'reduceAnimations' | 'calendars' | 'disableDragEditing' | 'availableRangePositions' | keyof BaseDateValidationProps>;

package/DateRangeCalendar/useDragRange.d.ts

@@ -1,15 +1,16 @@
 import * as React from 'react';
 import { MuiPickersAdapter, PickersTimezone, PickerValidDate } from '@mui/x-date-pickers/models';
-import { DateRange, RangePosition } from '../models';
-interface UseDragRangeParams<TDate extends PickerValidDate> {
+import { PickerRangeValue } from '@mui/x-date-pickers/internals';
+import { RangePosition } from '../models';
+interface UseDragRangeParams {
     disableDragEditing?: boolean;
-    utils: MuiPickersAdapter<TDate>;
-    setRangeDragDay: (value: TDate | null) => void;
+    utils: MuiPickersAdapter;
+    setRangeDragDay: (value: PickerValidDate | null) => void;
     setIsDragging: (value: boolean) => void;
     isDragging: boolean;
     onDatePositionChange: (position: RangePosition) => void;
-    onDrop: (newDate: TDate) => void;
-    dateRange: DateRange<TDate>;
+    onDrop: (newDate: PickerValidDate) => void;
+    dateRange: PickerRangeValue;
     timezone: PickersTimezone;
 }
 interface UseDragRangeEvents {
@@ -23,10 +24,10 @@ interface UseDragRangeEvents {
     onTouchMove?: React.TouchEventHandler<HTMLButtonElement>;
     onTouchEnd?: React.TouchEventHandler<HTMLButtonElement>;
 }
-interface UseDragRangeResponse<TDate extends PickerValidDate> extends UseDragRangeEvents {
+interface UseDragRangeResponse extends UseDragRangeEvents {
     isDragging: boolean;
-    rangeDragDay: TDate | null;
+    rangeDragDay: PickerValidDate | null;
     draggingDatePosition: RangePosition | null;
 }
-export declare const useDragRange: <TDate extends PickerValidDate>({ disableDragEditing, utils, onDatePositionChange, onDrop, dateRange, timezone, }: Omit<UseDragRangeParams<TDate>, "setRangeDragDay" | "setIsDragging" | "isDragging">) => UseDragRangeResponse<TDate>;
+export declare const useDragRange: ({ disableDragEditing, utils, onDatePositionChange, onDrop, dateRange, timezone, }: Omit<UseDragRangeParams, "setRangeDragDay" | "setIsDragging" | "isDragging">) => UseDragRangeResponse;
 export {};

package/DateRangeCalendar/useDragRange.js

@@ -214,9 +214,9 @@ export const useDragRange = ({
 }) => {
   const [isDragging, setIsDragging] = React.useState(false);
   const [rangeDragDay, setRangeDragDay] = React.useState(null);
-  const handleRangeDragDayChange = useEventCallback(val => {
-    if (!utils.isEqual(val, rangeDragDay)) {
-      setRangeDragDay(val);
+  const handleRangeDragDayChange = useEventCallback(newValue => {
+    if (!utils.isEqual(newValue, rangeDragDay)) {
+      setRangeDragDay(newValue);
     }
   });
   const draggingDatePosition = React.useMemo(() => {

package/DateRangePicker/DateRangePicker.d.ts

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

package/DateRangePicker/DateRangePicker.js

@@ -74,9 +74,9 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
   currentMonthCalendarPosition: PropTypes.oneOf([1, 2, 3]),
   /**
    * 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,
   /**
@@ -102,7 +102,8 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    */
   disableAutoMonthSwitching: PropTypes.bool,
   /**
-   * 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,
@@ -136,7 +137,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    */
   displayWeekNumber: PropTypes.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: PropTypes.any,
   /**
@@ -224,8 +225,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.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,
   /**
@@ -253,6 +253,11 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * Used when the component position is controlled.
    */
   rangePosition: PropTypes.oneOf(['end', 'start']),
+  /**
+   * 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.
@@ -285,8 +290,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.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.
    * @param {string} position The date to test, 'start' or 'end'.
    * @returns {boolean} Returns `true` if the date should be disabled.
    */

package/DateRangePicker/DateRangePicker.types.d.ts

@@ -1,11 +1,13 @@
-import { PickerValidDate } from '@mui/x-date-pickers/models';
+import { BaseSingleInputFieldProps, PickerRangeValue } from '@mui/x-date-pickers/internals';
 import { DesktopDateRangePickerProps, DesktopDateRangePickerSlots, DesktopDateRangePickerSlotProps } from '../DesktopDateRangePicker';
 import { MobileDateRangePickerProps, MobileDateRangePickerSlots, MobileDateRangePickerSlotProps } from '../MobileDateRangePicker';
-export interface DateRangePickerSlots<TDate extends PickerValidDate> extends DesktopDateRangePickerSlots<TDate>, MobileDateRangePickerSlots<TDate> {
+import { DateRangeValidationError, RangeFieldSection } from '../models';
+import { ValidateDateRangeProps } from '../validation';
+export interface DateRangePickerSlots extends DesktopDateRangePickerSlots, MobileDateRangePickerSlots {
 }
-export interface DateRangePickerSlotProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends DesktopDateRangePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure>, MobileDateRangePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure> {
+export interface DateRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends DesktopDateRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>, MobileDateRangePickerSlotProps<TEnableAccessibleFieldDOMStructure> {
 }
-export interface DateRangePickerProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> extends DesktopDateRangePickerProps<TDate, TEnableAccessibleFieldDOMStructure>, MobileDateRangePickerProps<TDate, TEnableAccessibleFieldDOMStructure> {
+export interface DateRangePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends DesktopDateRangePickerProps<TEnableAccessibleFieldDOMStructure>, MobileDateRangePickerProps<TEnableAccessibleFieldDOMStructure> {
     /**
      * CSS media query when `Mobile` mode will be changed to `Desktop`.
      * @default '@media (pointer: fine)'
@@ -16,10 +18,14 @@ export interface DateRangePickerProps<TDate extends PickerValidDate, TEnableAcce
      * Overridable component slots.
      * @default {}
      */
-    slots?: DateRangePickerSlots<TDate>;
+    slots?: DateRangePickerSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: DateRangePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure>;
+    slotProps?: DateRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
 }
+/**
+ * Props the field can receive when used inside a date range picker (<DateRangePicker />, <DesktopDateRangePicker /> or <MobileDateRangePicker /> component).
+ */
+export type DateRangePickerFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = ValidateDateRangeProps & BaseSingleInputFieldProps<PickerRangeValue, RangeFieldSection, TEnableAccessibleFieldDOMStructure, DateRangeValidationError>;

package/DateRangePicker/DateRangePickerToolbar.d.ts

@@ -1,10 +1,8 @@
 import * as React from 'react';
-import { BaseToolbarProps, ExportedBaseToolbarProps } from '@mui/x-date-pickers/internals';
-import { PickerValidDate } from '@mui/x-date-pickers/models';
-import { DateRange } from '../models';
+import { BaseToolbarProps, ExportedBaseToolbarProps, PickerRangeValue } from '@mui/x-date-pickers/internals';
 import { UseRangePositionResponse } from '../internals/hooks/useRangePosition';
 import { DateRangePickerToolbarClasses } from './dateRangePickerToolbarClasses';
-export interface DateRangePickerToolbarProps<TDate extends PickerValidDate> extends ExportedDateRangePickerToolbarProps, Omit<BaseToolbarProps<DateRange<TDate>, 'day'>, 'onChange' | 'isLandscape'>, Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'> {
+export interface DateRangePickerToolbarProps extends ExportedDateRangePickerToolbarProps, Omit<BaseToolbarProps<PickerRangeValue, 'day'>, 'onChange' | 'isLandscape'>, Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'> {
 }
 export interface ExportedDateRangePickerToolbarProps extends ExportedBaseToolbarProps {
     /**
@@ -12,7 +10,7 @@ export interface ExportedDateRangePickerToolbarProps extends ExportedBaseToolbar
      */
     classes?: Partial<DateRangePickerToolbarClasses>;
 }
-type DateRangePickerToolbarComponent = (<TDate extends PickerValidDate>(props: DateRangePickerToolbarProps<TDate> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+type DateRangePickerToolbarComponent = ((props: DateRangePickerToolbarProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
 /**

package/DateRangePicker/DateRangePickerToolbar.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, PickersToolbarButton, useUtils } from '@mui/x-date-pickers/internals';
-import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
+import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import { getDateRangePickerToolbarUtilityClass } from "./dateRangePickerToolbarClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -59,7 +59,7 @@ const DateRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateRangeP
       className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const translations = usePickersTranslations();
+  const translations = usePickerTranslations();
   const startDateValue = start ? utils.formatByString(start, toolbarFormat || utils.formats.shortDate) : translations.start;
   const endDateValue = end ? utils.formatByString(end, toolbarFormat || utils.formats.shortDate) : translations.end;
   const ownerState = props;
@@ -99,6 +99,11 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.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.
@@ -113,6 +118,11 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.propTypes = {
    */
   onViewChange: PropTypes.func.isRequired,
   rangePosition: PropTypes.oneOf(['end', 'start']).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/DateRangePicker/index.d.ts

@@ -1,5 +1,5 @@
 export { DateRangePicker } from './DateRangePicker';
-export type { DateRangePickerProps, DateRangePickerSlots, DateRangePickerSlotProps, } from './DateRangePicker.types';
+export type { DateRangePickerProps, DateRangePickerSlots, DateRangePickerSlotProps, DateRangePickerFieldProps, } from './DateRangePicker.types';
 export { DateRangePickerToolbar } from './DateRangePickerToolbar';
 export type { DateRangePickerToolbarProps } from './DateRangePickerToolbar';
 export { getDateRangePickerToolbarUtilityClass, dateRangePickerToolbarClasses, } from './dateRangePickerToolbarClasses';

package/DateRangePicker/shared.d.ts

@@ -1,39 +1,39 @@
 import * as React from 'react';
+import { DefaultizedProps } from '@mui/x-internals/types';
 import { LocalizedComponent } from '@mui/x-date-pickers/locales';
-import { DefaultizedProps, BaseDateValidationProps, BasePickerInputProps, PickerViewRendererLookup } from '@mui/x-date-pickers/internals';
-import { PickerValidDate } from '@mui/x-date-pickers/models';
-import { DateRangeValidationError, DateRange } from '../models';
+import { BaseDateValidationProps, BasePickerInputProps, PickerViewRendererLookup, PickerRangeValue } from '@mui/x-date-pickers/internals';
+import { DateRangeValidationError } from '../models';
 import { DateRangeCalendarSlots, DateRangeCalendarSlotProps, ExportedDateRangeCalendarProps } from '../DateRangeCalendar';
 import { DateRangePickerToolbarProps, ExportedDateRangePickerToolbarProps } from './DateRangePickerToolbar';
 import { DateRangeViewRendererProps } from '../dateRangeViewRenderers';
-export interface BaseDateRangePickerSlots<TDate extends PickerValidDate> extends DateRangeCalendarSlots<TDate> {
+export interface BaseDateRangePickerSlots extends DateRangeCalendarSlots {
     /**
      * Custom component for the toolbar rendered above the views.
      * @default DateTimePickerToolbar
      */
-    toolbar?: React.JSXElementConstructor<DateRangePickerToolbarProps<TDate>>;
+    toolbar?: React.JSXElementConstructor<DateRangePickerToolbarProps>;
 }
-export interface BaseDateRangePickerSlotProps<TDate extends PickerValidDate> extends DateRangeCalendarSlotProps<TDate> {
+export interface BaseDateRangePickerSlotProps extends DateRangeCalendarSlotProps {
     toolbar?: ExportedDateRangePickerToolbarProps;
 }
-export interface BaseDateRangePickerProps<TDate extends PickerValidDate> extends Omit<BasePickerInputProps<DateRange<TDate>, TDate, 'day', DateRangeValidationError>, 'view' | 'views' | 'openTo' | 'onViewChange' | 'orientation'>, ExportedDateRangeCalendarProps<TDate>, BaseDateValidationProps<TDate> {
+export interface BaseDateRangePickerProps extends Omit<BasePickerInputProps<PickerRangeValue, 'day', DateRangeValidationError>, 'view' | 'views' | 'openTo' | 'onViewChange' | 'orientation'>, ExportedDateRangeCalendarProps {
     /**
      * Overridable component slots.
      * @default {}
      */
-    slots?: BaseDateRangePickerSlots<TDate>;
+    slots?: BaseDateRangePickerSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: BaseDateRangePickerSlotProps<TDate>;
+    slotProps?: BaseDateRangePickerSlotProps;
     /**
      * 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<PickerViewRendererLookup<DateRange<TDate>, 'day', DateRangeViewRendererProps<TDate, 'day'>, {}>>;
+    viewRenderers?: Partial<PickerViewRendererLookup<PickerRangeValue, 'day', DateRangeViewRendererProps<'day'>, {}>>;
 }
-type UseDateRangePickerDefaultizedProps<TDate extends PickerValidDate, Props extends BaseDateRangePickerProps<TDate>> = LocalizedComponent<TDate, DefaultizedProps<Props, keyof BaseDateValidationProps<TDate>>>;
-export declare function useDateRangePickerDefaultizedProps<TDate extends PickerValidDate, Props extends BaseDateRangePickerProps<TDate>>(props: Props, name: string): UseDateRangePickerDefaultizedProps<TDate, Props>;
+type UseDateRangePickerDefaultizedProps<Props extends BaseDateRangePickerProps> = LocalizedComponent<DefaultizedProps<Props, keyof BaseDateValidationProps>>;
+export declare function useDateRangePickerDefaultizedProps<Props extends BaseDateRangePickerProps>(props: Props, name: string): UseDateRangePickerDefaultizedProps<Props>;
 export {};

package/DateRangePickerDay/DateRangePickerDay.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { PickerValidDate } from '@mui/x-date-pickers/models';
 import { PickersDayProps } from '@mui/x-date-pickers/PickersDay';
 import { DateRangePickerDayClasses } from './dateRangePickerDayClasses';
-export interface DateRangePickerDayProps<TDate extends PickerValidDate> extends Omit<PickersDayProps<TDate>, 'classes' | 'onBlur' | 'onFocus' | 'onKeyDown'> {
+export interface DateRangePickerDayProps extends Omit<PickersDayProps, 'classes' | 'onBlur' | 'onFocus' | 'onKeyDown'> {
     /**
      * Set to `true` if the `day` is in a highlighted date range.
      */
@@ -41,7 +40,7 @@ export interface DateRangePickerDayProps<TDate extends PickerValidDate> extends
      */
     draggable?: boolean;
 }
-type DateRangePickerDayComponent = <TDate extends PickerValidDate>(props: DateRangePickerDayProps<TDate> & React.RefAttributes<HTMLButtonElement>) => React.JSX.Element;
+type DateRangePickerDayComponent = (props: DateRangePickerDayProps & React.RefAttributes<HTMLButtonElement>) => React.JSX.Element;
 /**
  * Demos:
  *

package/DateTimeRangePicker/DateTimeRangePicker.d.ts

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

package/DateTimeRangePicker/DateTimeRangePicker.js

@@ -79,9 +79,9 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
   currentMonthCalendarPosition: PropTypes.oneOf([1, 2, 3]),
   /**
    * 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,
   /**
@@ -107,7 +107,8 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
    */
   disableAutoMonthSwitching: PropTypes.bool,
   /**
-   * 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,
@@ -146,7 +147,7 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
    */
   displayWeekNumber: PropTypes.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: PropTypes.any,
   /**
@@ -257,8 +258,7 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.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,
   /**
@@ -298,6 +298,11 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
    * Used when the component position is controlled.
    */
   rangePosition: PropTypes.oneOf(['end', 'start']),
+  /**
+   * 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.
@@ -330,16 +335,14 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.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.
    * @param {string} position The date to test, 'start' or 'end'.
    * @returns {boolean} Returns `true` if the date should be disabled.
    */
   shouldDisableDate: 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.
    */

package/DateTimeRangePicker/DateTimeRangePicker.types.d.ts

@@ -1,11 +1,13 @@
-import { PickerValidDate } from '@mui/x-date-pickers/models';
+import { BaseSingleInputFieldProps, PickerRangeValue } from '@mui/x-date-pickers/internals';
 import { DesktopDateTimeRangePickerProps, DesktopDateTimeRangePickerSlots, DesktopDateTimeRangePickerSlotProps } from '../DesktopDateTimeRangePicker';
 import { MobileDateTimeRangePickerProps, MobileDateTimeRangePickerSlots, MobileDateTimeRangePickerSlotProps } from '../MobileDateTimeRangePicker';
-export interface DateTimeRangePickerSlots<TDate extends PickerValidDate> extends DesktopDateTimeRangePickerSlots<TDate>, MobileDateTimeRangePickerSlots<TDate> {
+import { DateTimeRangeValidationError, RangeFieldSection } from '../models';
+import type { ValidateDateTimeRangeProps } from '../validation';
+export interface DateTimeRangePickerSlots extends DesktopDateTimeRangePickerSlots, MobileDateTimeRangePickerSlots {
 }
-export interface DateTimeRangePickerSlotProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends DesktopDateTimeRangePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure>, MobileDateTimeRangePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure> {
+export interface DateTimeRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends DesktopDateTimeRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>, MobileDateTimeRangePickerSlotProps<TEnableAccessibleFieldDOMStructure> {
 }
-export interface DateTimeRangePickerProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> extends DesktopDateTimeRangePickerProps<TDate, TEnableAccessibleFieldDOMStructure>, MobileDateTimeRangePickerProps<TDate, TEnableAccessibleFieldDOMStructure> {
+export interface DateTimeRangePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends DesktopDateTimeRangePickerProps<TEnableAccessibleFieldDOMStructure>, MobileDateTimeRangePickerProps<TEnableAccessibleFieldDOMStructure> {
     /**
      * CSS media query when `Mobile` mode will be changed to `Desktop`.
      * @default '@media (pointer: fine)'
@@ -16,10 +18,14 @@ export interface DateTimeRangePickerProps<TDate extends PickerValidDate, TEnable
      * Overridable component slots.
      * @default {}
      */
-    slots?: DateTimeRangePickerSlots<TDate>;
+    slots?: DateTimeRangePickerSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: DateTimeRangePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure>;
+    slotProps?: DateTimeRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
 }
+/**
+ * Props the field can receive when used inside a date time range picker (<DateTimeRangePicker />, <DesktopDateTimeRangePicker /> or <MobileDateTimeRangePicker /> component).
+ */
+export type DateTimeRangePickerFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = ValidateDateTimeRangeProps & BaseSingleInputFieldProps<PickerRangeValue, RangeFieldSection, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError>;

package/DateTimeRangePicker/DateTimeRangePickerTabs.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { PickerValidDate } from '@mui/x-date-pickers/models';
 import { DateOrTimeViewWithMeridiem, BaseTabsProps, ExportedBaseTabsProps } from '@mui/x-date-pickers/internals';
 import { DateTimeRangePickerTabsClasses } from './dateTimeRangePickerTabsClasses';
 import { UseRangePositionResponse } from '../internals/hooks/useRangePosition';
@@ -27,7 +26,7 @@ export interface ExportedDateTimeRangePickerTabsProps extends ExportedBaseTabsPr
 export interface DateTimeRangePickerTabsProps extends ExportedDateTimeRangePickerTabsProps, BaseTabsProps<DateOrTimeViewWithMeridiem>, Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'> {
 }
 declare const DateTimeRangePickerTabs: {
-    <TDate extends PickerValidDate>(inProps: DateTimeRangePickerTabsProps): React.JSX.Element | null;
+    (inProps: DateTimeRangePickerTabsProps): React.JSX.Element | null;
     propTypes: any;
 };
 export { DateTimeRangePickerTabs };

package/DateTimeRangePicker/DateTimeRangePickerTabs.js

@@ -8,7 +8,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { TimeIcon, DateRangeIcon, ArrowLeftIcon, ArrowRightIcon } from '@mui/x-date-pickers/icons';
 import { isDatePickerView } from '@mui/x-date-pickers/internals';
-import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
+import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import IconButton from '@mui/material/IconButton';
 import Button from '@mui/material/Button';
 import { getDateTimeRangePickerTabsUtilityClass } from "./dateTimeRangePickerTabsClasses.js";
@@ -81,7 +81,7 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(inProps) {
     className,
     sx
   } = props;
-  const translations = usePickersTranslations();
+  const translations = usePickerTranslations();
   const classes = useUtilityClasses(props);
   const value = React.useMemo(() => viewToTab(view, rangePosition), [view, rangePosition]);
   const isPreviousHidden = value === 'start-date';

package/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.d.ts

@@ -1,20 +1,19 @@
 import * as React from 'react';
-import { PickerSelectionState, PickerViewRenderer, TimeViewWithMeridiem, BaseClockProps, DefaultizedProps } from '@mui/x-date-pickers/internals';
-import { PickerValidDate } from '@mui/x-date-pickers/models';
-import { DateRange } from '../models';
+import { DefaultizedProps } from '@mui/x-internals/types';
+import { PickerSelectionState, PickerViewRenderer, TimeViewWithMeridiem, BaseClockProps, PickerRangeValue } from '@mui/x-date-pickers/internals';
 import { UseRangePositionResponse } from '../internals/hooks/useRangePosition';
-export type DateTimeRangePickerTimeWrapperProps<TDate extends PickerValidDate, TView extends TimeViewWithMeridiem, TComponentProps extends DefaultizedProps<Omit<BaseClockProps<TDate, TView>, 'value' | 'defaultValue' | 'onChange'>, 'views'>> = Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'> & Omit<TComponentProps, 'views' | 'view' | 'onViewChange' | 'value' | 'defaultValue' | 'onChange'> & {
+export type DateTimeRangePickerTimeWrapperProps<TView extends TimeViewWithMeridiem, TComponentProps extends DefaultizedProps<Omit<BaseClockProps<TView>, 'value' | 'defaultValue' | 'onChange'>, 'views'>> = Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'> & Omit<TComponentProps, 'views' | 'view' | 'onViewChange' | 'value' | 'defaultValue' | 'onChange'> & {
     view: TView;
     onViewChange?: (view: TView) => void;
     views: readonly TView[];
-    value?: DateRange<TDate>;
-    defaultValue?: DateRange<TDate>;
-    onChange?: (value: DateRange<TDate>, selectionState: PickerSelectionState, selectedView: TView) => void;
-    viewRenderer?: PickerViewRenderer<DateRange<TDate>, TView, TComponentProps, any> | null;
+    value?: PickerRangeValue;
+    defaultValue?: PickerRangeValue;
+    onChange?: (value: PickerRangeValue, selectionState: PickerSelectionState, selectedView: TView) => void;
+    viewRenderer?: PickerViewRenderer<PickerRangeValue, TView, TComponentProps, any> | null;
     openTo?: TView;
 };
 /**
  * @ignore - internal component.
  */
-declare function DateTimeRangePickerTimeWrapper<TDate extends PickerValidDate, TView extends TimeViewWithMeridiem, TComponentProps extends DefaultizedProps<Omit<BaseClockProps<TDate, TView>, 'value' | 'defaultValue' | 'onChange'>, 'views'>>(props: DateTimeRangePickerTimeWrapperProps<TDate, TView, TComponentProps>, ref: React.Ref<HTMLDivElement>): React.ReactNode;
+declare function DateTimeRangePickerTimeWrapper<TView extends TimeViewWithMeridiem, TComponentProps extends DefaultizedProps<Omit<BaseClockProps<TView>, 'value' | 'defaultValue' | 'onChange'>, 'views'>>(props: DateTimeRangePickerTimeWrapperProps<TView, TComponentProps>, ref: React.Ref<HTMLDivElement>): React.ReactNode;
 export { DateTimeRangePickerTimeWrapper };