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

package/DateTimeRangePicker/DateTimeRangePickerToolbar.d.ts

@@ -1,11 +1,9 @@
 import * as React from 'react';
-import { BaseToolbarProps, ExportedBaseToolbarProps, DateOrTimeViewWithMeridiem, WrapperVariant } from '@mui/x-date-pickers/internals';
-import { PickerValidDate } from '@mui/x-date-pickers/models';
-import { DateRange } from '../models';
+import { BaseToolbarProps, ExportedBaseToolbarProps, DateOrTimeViewWithMeridiem, WrapperVariant, PickerRangeValue } from '@mui/x-date-pickers/internals';
 import { UseRangePositionResponse } from '../internals/hooks/useRangePosition';
 import { DateTimeRangePickerToolbarClasses } from './dateTimeRangePickerToolbarClasses';
 type DateTimeRangeViews = Exclude<DateOrTimeViewWithMeridiem, 'year' | 'month'>;
-export interface DateTimeRangePickerToolbarProps<TDate extends PickerValidDate> extends BaseToolbarProps<DateRange<TDate>, DateTimeRangeViews>, Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'>, ExportedDateTimeRangePickerToolbarProps {
+export interface DateTimeRangePickerToolbarProps extends BaseToolbarProps<PickerRangeValue, DateTimeRangeViews>, Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'>, ExportedDateTimeRangePickerToolbarProps {
     ampm?: boolean;
     toolbarVariant?: WrapperVariant;
 }
@@ -15,7 +13,7 @@ export interface ExportedDateTimeRangePickerToolbarProps extends ExportedBaseToo
      */
     classes?: Partial<DateTimeRangePickerToolbarClasses>;
 }
-type DateTimeRangePickerToolbarComponent = (<TDate extends PickerValidDate>(props: DateTimeRangePickerToolbarProps<TDate> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+type DateTimeRangePickerToolbarComponent = ((props: DateTimeRangePickerToolbarProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
 declare const DateTimeRangePickerToolbar: DateTimeRangePickerToolbarComponent;

package/DateTimeRangePicker/DateTimeRangePickerToolbar.js

@@ -9,7 +9,7 @@ import clsx from 'clsx';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { useUtils } from '@mui/x-date-pickers/internals';
-import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
+import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import { DateTimePickerToolbar } from '@mui/x-date-pickers/DateTimePicker';
 import { getDateTimeRangePickerToolbarUtilityClass } from "./dateTimeRangePickerToolbarClasses.js";
 import { calculateRangeChange } from "../internals/utils/date-range-manager.js";
@@ -105,7 +105,7 @@ const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTi
     toolbarFormat,
     toolbarPlaceholder
   };
-  const translations = usePickersTranslations();
+  const translations = usePickerTranslations();
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
   const handleStartRangeViewChange = React.useCallback(newView => {
@@ -183,6 +183,11 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerToolbar.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.
@@ -199,6 +204,11 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerToolbar.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/DateTimeRangePicker/index.d.ts

@@ -1,5 +1,5 @@
 export { DateTimeRangePicker } from './DateTimeRangePicker';
-export type { DateTimeRangePickerProps, DateTimeRangePickerSlots, DateTimeRangePickerSlotProps, } from './DateTimeRangePicker.types';
+export type { DateTimeRangePickerProps, DateTimeRangePickerSlots, DateTimeRangePickerSlotProps, DateTimeRangePickerFieldProps, } from './DateTimeRangePicker.types';
 export { DateTimeRangePickerTabs } from './DateTimeRangePickerTabs';
 export type { ExportedDateTimeRangePickerTabsProps } from './DateTimeRangePickerTabs';
 export { getDateTimeRangePickerTabsUtilityClass, dateTimeRangePickerTabsClasses, } from './dateTimeRangePickerTabsClasses';

package/DateTimeRangePicker/shared.d.ts

@@ -1,17 +1,17 @@
 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, BaseClockProps, DesktopOnlyTimePickerProps, TimeViewWithMeridiem, UseViewsOptions, DateTimeValidationProps, DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
-import { PickerValidDate } from '@mui/x-date-pickers/models';
+import { BaseDateValidationProps, BasePickerInputProps, PickerViewRendererLookup, BaseClockProps, DesktopOnlyTimePickerProps, TimeViewWithMeridiem, UseViewsOptions, DateTimeValidationProps, DateOrTimeViewWithMeridiem, PickerRangeValue } from '@mui/x-date-pickers/internals';
 import { TimeViewRendererProps } from '@mui/x-date-pickers/timeViewRenderers';
 import { DigitalClockSlots, DigitalClockSlotProps } from '@mui/x-date-pickers/DigitalClock';
 import { MultiSectionDigitalClockSlots, MultiSectionDigitalClockSlotProps } from '@mui/x-date-pickers/MultiSectionDigitalClock';
-import { DateRange, DateTimeRangeValidationError } from '../models';
+import { DateTimeRangeValidationError } from '../models';
 import { DateTimeRangePickerView, DateTimeRangePickerViewExternal } from '../internals/models';
 import { DateRangeCalendarSlots, DateRangeCalendarSlotProps, ExportedDateRangeCalendarProps } from '../DateRangeCalendar';
 import { DateTimeRangePickerToolbarProps, ExportedDateTimeRangePickerToolbarProps } from './DateTimeRangePickerToolbar';
 import { DateRangeViewRendererProps } from '../dateRangeViewRenderers';
 import { DateTimeRangePickerTabsProps, ExportedDateTimeRangePickerTabsProps } from './DateTimeRangePickerTabs';
-export interface BaseDateTimeRangePickerSlots<TDate extends PickerValidDate> extends DateRangeCalendarSlots<TDate>, DigitalClockSlots, MultiSectionDigitalClockSlots {
+export interface BaseDateTimeRangePickerSlots extends DateRangeCalendarSlots, DigitalClockSlots, MultiSectionDigitalClockSlots {
     /**
      * Tabs enabling toggling between date and time pickers.
      * @default DateTimeRangePickerTabs
@@ -21,9 +21,9 @@ export interface BaseDateTimeRangePickerSlots<TDate extends PickerValidDate> ext
      * Custom component for the toolbar rendered above the views.
      * @default DateTimeRangePickerToolbar
      */
-    toolbar?: React.JSXElementConstructor<DateTimeRangePickerToolbarProps<TDate>>;
+    toolbar?: React.JSXElementConstructor<DateTimeRangePickerToolbarProps>;
 }
-export interface BaseDateTimeRangePickerSlotProps<TDate extends PickerValidDate> extends DateRangeCalendarSlotProps<TDate>, DigitalClockSlotProps, MultiSectionDigitalClockSlotProps {
+export interface BaseDateTimeRangePickerSlotProps extends DateRangeCalendarSlotProps, DigitalClockSlotProps, MultiSectionDigitalClockSlotProps {
     /**
      * Props passed down to the tabs component.
      */
@@ -33,30 +33,30 @@ export interface BaseDateTimeRangePickerSlotProps<TDate extends PickerValidDate>
      */
     toolbar?: ExportedDateTimeRangePickerToolbarProps;
 }
-export type DateTimeRangePickerRenderers<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TAdditionalProps extends {} = {}> = PickerViewRendererLookup<DateRange<TDate>, TView, Omit<DateRangeViewRendererProps<TDate, 'day'>, 'view' | 'slots' | 'slotProps'> & Omit<TimeViewRendererProps<TimeViewWithMeridiem, BaseClockProps<TDate, TimeViewWithMeridiem>>, 'view' | 'slots' | 'slotProps'> & {
+export type DateTimeRangePickerRenderers<TView extends DateOrTimeViewWithMeridiem, TAdditionalProps extends {} = {}> = PickerViewRendererLookup<PickerRangeValue, TView, Omit<DateRangeViewRendererProps<'day'>, 'view' | 'slots' | 'slotProps'> & Omit<TimeViewRendererProps<TimeViewWithMeridiem, BaseClockProps<TimeViewWithMeridiem>>, 'view' | 'slots' | 'slotProps'> & {
     view: TView;
 }, TAdditionalProps>;
-export interface BaseDateTimeRangePickerProps<TDate extends PickerValidDate> extends Omit<BasePickerInputProps<DateRange<TDate>, TDate, DateTimeRangePickerView, DateTimeRangeValidationError>, 'orientation' | 'views' | 'openTo'>, ExportedDateRangeCalendarProps<TDate>, BaseDateValidationProps<TDate>, DesktopOnlyTimePickerProps<TDate>, Partial<Pick<UseViewsOptions<DateRange<TDate>, DateTimeRangePickerViewExternal>, 'openTo' | 'views'>>, DateTimeValidationProps<TDate> {
+export interface BaseDateTimeRangePickerProps extends Omit<BasePickerInputProps<PickerRangeValue, DateTimeRangePickerView, DateTimeRangeValidationError>, 'orientation' | 'views' | 'openTo'>, ExportedDateRangeCalendarProps, BaseDateValidationProps, DesktopOnlyTimePickerProps, Partial<Pick<UseViewsOptions<PickerRangeValue, DateTimeRangePickerViewExternal>, 'openTo' | 'views'>>, DateTimeValidationProps {
     /**
      * Overridable component slots.
      * @default {}
      */
-    slots?: BaseDateTimeRangePickerSlots<TDate>;
+    slots?: BaseDateTimeRangePickerSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: BaseDateTimeRangePickerSlotProps<TDate>;
+    slotProps?: BaseDateTimeRangePickerSlotProps;
     /**
      * 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<DateTimeRangePickerRenderers<TDate, DateTimeRangePickerView>>;
+    viewRenderers?: Partial<DateTimeRangePickerRenderers<DateTimeRangePickerView>>;
 }
-type UseDateTimeRangePickerDefaultizedProps<TDate extends PickerValidDate, Props extends BaseDateTimeRangePickerProps<TDate>> = LocalizedComponent<TDate, Omit<DefaultizedProps<Props, 'openTo' | 'ampm' | keyof BaseDateValidationProps<TDate>>, 'views'>> & {
+type UseDateTimeRangePickerDefaultizedProps<Props extends BaseDateTimeRangePickerProps> = LocalizedComponent<Omit<DefaultizedProps<Props, 'openTo' | 'ampm' | keyof BaseDateValidationProps>, 'views'>> & {
     shouldRenderTimeInASingleColumn: boolean;
     views: readonly DateTimeRangePickerView[];
 };
-export declare function useDateTimeRangePickerDefaultizedProps<TDate extends PickerValidDate, Props extends BaseDateTimeRangePickerProps<TDate>>(props: Props, name: string): UseDateTimeRangePickerDefaultizedProps<TDate, Props>;
+export declare function useDateTimeRangePickerDefaultizedProps<Props extends BaseDateTimeRangePickerProps>(props: Props, name: string): UseDateTimeRangePickerDefaultizedProps<Props>;
 export {};

package/DesktopDateRangePicker/DesktopDateRangePicker.d.ts

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

package/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -3,6 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useUtils } from '@mui/x-date-pickers/internals';
 import { extractValidationProps } from '@mui/x-date-pickers/validation';
 import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import { refType } from '@mui/utils';
@@ -23,6 +24,8 @@ import { validateDateRange } from "../validation/index.js";
  * - [DesktopDateRangePicker API](https://mui.com/x/api/date-pickers/desktop-date-range-picker/)
  */
 const DesktopDateRangePicker = /*#__PURE__*/React.forwardRef(function DesktopDateRangePicker(inProps, ref) {
+  const utils = useUtils();
+
   // Props with the default values common to all date time pickers
   const defaultizedProps = useDateRangePickerDefaultizedProps(inProps, 'MuiDesktopDateRangePicker');
   const viewRenderers = _extends({
@@ -30,6 +33,7 @@ const DesktopDateRangePicker = /*#__PURE__*/React.forwardRef(function DesktopDat
   }, defaultizedProps.viewRenderers);
   const props = _extends({}, defaultizedProps, {
     viewRenderers,
+    format: utils.formats.keyboardDate,
     calendars: defaultizedProps.calendars ?? 2,
     views: ['day'],
     openTo: 'day',
@@ -85,9 +89,9 @@ DesktopDateRangePicker.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 +111,8 @@ DesktopDateRangePicker.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,
@@ -141,7 +146,7 @@ DesktopDateRangePicker.propTypes = {
    */
   displayWeekNumber: PropTypes.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: PropTypes.any,
   /**
@@ -229,8 +234,7 @@ DesktopDateRangePicker.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,
   /**
@@ -258,6 +262,11 @@ DesktopDateRangePicker.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.
@@ -290,8 +299,7 @@ DesktopDateRangePicker.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/DesktopDateRangePicker/DesktopDateRangePicker.types.d.ts

@@ -1,12 +1,11 @@
-import { MakeOptional } from '@mui/x-date-pickers/internals';
-import { PickerValidDate } from '@mui/x-date-pickers/models';
+import { MakeOptional } from '@mui/x-internals/types';
 import { UseDesktopRangePickerSlots, UseDesktopRangePickerSlotProps, DesktopRangeOnlyPickerProps } from '../internals/hooks/useDesktopRangePicker';
 import { BaseDateRangePickerProps, BaseDateRangePickerSlots, BaseDateRangePickerSlotProps } from '../DateRangePicker/shared';
-export interface DesktopDateRangePickerSlots<TDate extends PickerValidDate> extends BaseDateRangePickerSlots<TDate>, MakeOptional<UseDesktopRangePickerSlots<TDate, 'day'>, 'field'> {
+export interface DesktopDateRangePickerSlots extends BaseDateRangePickerSlots, MakeOptional<UseDesktopRangePickerSlots<'day'>, 'field'> {
 }
-export interface DesktopDateRangePickerSlotProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateRangePickerSlotProps<TDate>, Omit<UseDesktopRangePickerSlotProps<TDate, 'day', TEnableAccessibleFieldDOMStructure>, 'tabs' | 'toolbar'> {
+export interface DesktopDateRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateRangePickerSlotProps, Omit<UseDesktopRangePickerSlotProps<'day', TEnableAccessibleFieldDOMStructure>, 'tabs' | 'toolbar'> {
 }
-export interface DesktopDateRangePickerProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> extends BaseDateRangePickerProps<TDate>, DesktopRangeOnlyPickerProps {
+export interface DesktopDateRangePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseDateRangePickerProps, DesktopRangeOnlyPickerProps {
     /**
      * The number of calendars to render on **desktop**.
      * @default 2
@@ -16,10 +15,10 @@ export interface DesktopDateRangePickerProps<TDate extends PickerValidDate, TEna
      * Overridable component slots.
      * @default {}
      */
-    slots?: DesktopDateRangePickerSlots<TDate>;
+    slots?: DesktopDateRangePickerSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: DesktopDateRangePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure>;
+    slotProps?: DesktopDateRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
 }

package/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.d.ts

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

package/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js

@@ -166,9 +166,9 @@ DesktopDateTimeRangePicker.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,
   /**
@@ -188,7 +188,8 @@ DesktopDateTimeRangePicker.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,
@@ -227,7 +228,7 @@ DesktopDateTimeRangePicker.propTypes = {
    */
   displayWeekNumber: PropTypes.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: PropTypes.any,
   /**
@@ -338,8 +339,7 @@ DesktopDateTimeRangePicker.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,
   /**
@@ -379,6 +379,11 @@ DesktopDateTimeRangePicker.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.
@@ -411,16 +416,14 @@ DesktopDateTimeRangePicker.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/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.types.d.ts

@@ -1,13 +1,12 @@
-import { MakeOptional } from '@mui/x-date-pickers/internals';
-import { PickerValidDate } from '@mui/x-date-pickers/models';
+import { MakeOptional } from '@mui/x-internals/types';
 import { UseDesktopRangePickerSlots, UseDesktopRangePickerSlotProps, DesktopRangeOnlyPickerProps } from '../internals/hooks/useDesktopRangePicker';
 import { BaseDateTimeRangePickerProps, BaseDateTimeRangePickerSlots, BaseDateTimeRangePickerSlotProps } from '../DateTimeRangePicker/shared';
 import { DateTimeRangePickerView } from '../internals/models';
-export interface DesktopDateTimeRangePickerSlots<TDate extends PickerValidDate> extends BaseDateTimeRangePickerSlots<TDate>, MakeOptional<UseDesktopRangePickerSlots<TDate, DateTimeRangePickerView>, 'field'> {
+export interface DesktopDateTimeRangePickerSlots extends BaseDateTimeRangePickerSlots, MakeOptional<UseDesktopRangePickerSlots<DateTimeRangePickerView>, 'field'> {
 }
-export interface DesktopDateTimeRangePickerSlotProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateTimeRangePickerSlotProps<TDate>, Omit<UseDesktopRangePickerSlotProps<TDate, DateTimeRangePickerView, TEnableAccessibleFieldDOMStructure>, 'tabs' | 'toolbar'> {
+export interface DesktopDateTimeRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateTimeRangePickerSlotProps, Omit<UseDesktopRangePickerSlotProps<DateTimeRangePickerView, TEnableAccessibleFieldDOMStructure>, 'tabs' | 'toolbar'> {
 }
-export interface DesktopDateTimeRangePickerProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> extends BaseDateTimeRangePickerProps<TDate>, DesktopRangeOnlyPickerProps {
+export interface DesktopDateTimeRangePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseDateTimeRangePickerProps, DesktopRangeOnlyPickerProps {
     /**
      * The number of calendars to render on **desktop**.
      * @default 1
@@ -17,10 +16,10 @@ export interface DesktopDateTimeRangePickerProps<TDate extends PickerValidDate,
      * Overridable component slots.
      * @default {}
      */
-    slots?: DesktopDateTimeRangePickerSlots<TDate>;
+    slots?: DesktopDateTimeRangePickerSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: DesktopDateTimeRangePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure>;
+    slotProps?: DesktopDateTimeRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
 }

package/MobileDateRangePicker/MobileDateRangePicker.d.ts

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

package/MobileDateRangePicker/MobileDateRangePicker.js

@@ -3,6 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useUtils } from '@mui/x-date-pickers/internals';
 import { extractValidationProps } from '@mui/x-date-pickers/validation';
 import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import { refType } from '@mui/utils';
@@ -23,6 +24,8 @@ import { validateDateRange } from "../validation/index.js";
  * - [MobileDateRangePicker API](https://mui.com/x/api/date-pickers/mobile-date-range-picker/)
  */
 const MobileDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileDateRangePicker(inProps, ref) {
+  const utils = useUtils();
+
   // Props with the default values common to all date time pickers
   const defaultizedProps = useDateRangePickerDefaultizedProps(inProps, 'MuiMobileDateRangePicker');
   const viewRenderers = _extends({
@@ -30,6 +33,7 @@ const MobileDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileDateR
   }, defaultizedProps.viewRenderers);
   const props = _extends({}, defaultizedProps, {
     viewRenderers,
+    format: utils.formats.keyboardDate,
     // Force one calendar on mobile to avoid layout issues
     calendars: 1,
     views: ['day'],
@@ -81,9 +85,9 @@ MobileDateRangePicker.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,
   /**
@@ -103,7 +107,8 @@ MobileDateRangePicker.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,
@@ -137,7 +142,7 @@ MobileDateRangePicker.propTypes = {
    */
   displayWeekNumber: PropTypes.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: PropTypes.any,
   /**
@@ -225,8 +230,7 @@ MobileDateRangePicker.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,
   /**
@@ -254,6 +258,11 @@ MobileDateRangePicker.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.
@@ -286,8 +295,7 @@ MobileDateRangePicker.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/MobileDateRangePicker/MobileDateRangePicker.types.d.ts

@@ -1,20 +1,19 @@
-import { MakeOptional } from '@mui/x-date-pickers/internals';
-import { PickerValidDate } from '@mui/x-date-pickers/models';
+import { MakeOptional } from '@mui/x-internals/types';
 import { UseMobileRangePickerSlots, UseMobileRangePickerSlotProps, MobileRangeOnlyPickerProps } from '../internals/hooks/useMobileRangePicker';
 import { BaseDateRangePickerProps, BaseDateRangePickerSlots, BaseDateRangePickerSlotProps } from '../DateRangePicker/shared';
-export interface MobileDateRangePickerSlots<TDate extends PickerValidDate> extends BaseDateRangePickerSlots<TDate>, MakeOptional<UseMobileRangePickerSlots<TDate, 'day'>, 'field'> {
+export interface MobileDateRangePickerSlots extends BaseDateRangePickerSlots, MakeOptional<UseMobileRangePickerSlots<'day'>, 'field'> {
 }
-export interface MobileDateRangePickerSlotProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateRangePickerSlotProps<TDate>, Omit<UseMobileRangePickerSlotProps<TDate, 'day', TEnableAccessibleFieldDOMStructure>, 'tabs' | 'toolbar'> {
+export interface MobileDateRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateRangePickerSlotProps, Omit<UseMobileRangePickerSlotProps<'day', TEnableAccessibleFieldDOMStructure>, 'tabs' | 'toolbar'> {
 }
-export interface MobileDateRangePickerProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> extends BaseDateRangePickerProps<TDate>, MobileRangeOnlyPickerProps {
+export interface MobileDateRangePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseDateRangePickerProps, MobileRangeOnlyPickerProps {
     /**
      * Overridable component slots.
      * @default {}
      */
-    slots?: MobileDateRangePickerSlots<TDate>;
+    slots?: MobileDateRangePickerSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: MobileDateRangePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure>;
+    slotProps?: MobileDateRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
 }

package/MobileDateTimeRangePicker/MobileDateTimeRangePicker.d.ts

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

package/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js

@@ -160,9 +160,9 @@ MobileDateTimeRangePicker.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,
   /**
@@ -182,7 +182,8 @@ MobileDateTimeRangePicker.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,
@@ -221,7 +222,7 @@ MobileDateTimeRangePicker.propTypes = {
    */
   displayWeekNumber: PropTypes.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: PropTypes.any,
   /**
@@ -332,8 +333,7 @@ MobileDateTimeRangePicker.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,
   /**
@@ -373,6 +373,11 @@ MobileDateTimeRangePicker.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.
@@ -405,16 +410,14 @@ MobileDateTimeRangePicker.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/MobileDateTimeRangePicker/MobileDateTimeRangePicker.types.d.ts

@@ -1,21 +1,20 @@
-import { MakeOptional } from '@mui/x-date-pickers/internals';
-import { PickerValidDate } from '@mui/x-date-pickers/models';
+import { MakeOptional } from '@mui/x-internals/types';
 import { UseMobileRangePickerSlots, UseMobileRangePickerSlotProps, MobileRangeOnlyPickerProps } from '../internals/hooks/useMobileRangePicker';
 import { BaseDateTimeRangePickerProps, BaseDateTimeRangePickerSlots, BaseDateTimeRangePickerSlotProps } from '../DateTimeRangePicker/shared';
 import { DateTimeRangePickerView } from '../internals/models';
-export interface MobileDateTimeRangePickerSlots<TDate extends PickerValidDate> extends BaseDateTimeRangePickerSlots<TDate>, MakeOptional<UseMobileRangePickerSlots<TDate, DateTimeRangePickerView>, 'field'> {
+export interface MobileDateTimeRangePickerSlots extends BaseDateTimeRangePickerSlots, MakeOptional<UseMobileRangePickerSlots<DateTimeRangePickerView>, 'field'> {
 }
-export interface MobileDateTimeRangePickerSlotProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateTimeRangePickerSlotProps<TDate>, Omit<UseMobileRangePickerSlotProps<TDate, DateTimeRangePickerView, TEnableAccessibleFieldDOMStructure>, 'tabs' | 'toolbar'> {
+export interface MobileDateTimeRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateTimeRangePickerSlotProps, Omit<UseMobileRangePickerSlotProps<DateTimeRangePickerView, TEnableAccessibleFieldDOMStructure>, 'tabs' | 'toolbar'> {
 }
-export interface MobileDateTimeRangePickerProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> extends BaseDateTimeRangePickerProps<TDate>, MobileRangeOnlyPickerProps {
+export interface MobileDateTimeRangePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseDateTimeRangePickerProps, MobileRangeOnlyPickerProps {
     /**
      * Overridable component slots.
      * @default {}
      */
-    slots?: MobileDateTimeRangePickerSlots<TDate>;
+    slots?: MobileDateTimeRangePickerSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: MobileDateTimeRangePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure>;
+    slotProps?: MobileDateTimeRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
 }