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

package/modern/DateRangePicker/shared.d.ts

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

package/modern/DateRangePickerDay/DateRangePickerDay.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { PickersDayProps } from '@mui/x-date-pickers/PickersDay';
+import { DateRangePickerDayClasses } from "./dateRangePickerDayClasses.js";
+export interface DateRangePickerDayProps extends Omit<PickersDayProps, 'classes' | 'onBlur' | 'onFocus' | 'onKeyDown'> {
+  /**
+   * Set to `true` if the `day` is in a highlighted date range.
+   */
+  isHighlighting: boolean;
+  /**
+   * Set to `true` if the `day` is the end of a highlighted date range.
+   */
+  isEndOfHighlighting: boolean;
+  /**
+   * Set to `true` if the `day` is the start of a highlighted date range.
+   */
+  isStartOfHighlighting: boolean;
+  /**
+   * Set to `true` if the `day` is in a preview date range.
+   */
+  isPreviewing: boolean;
+  /**
+   * Set to `true` if the `day` is the end of a previewing date range.
+   */
+  isEndOfPreviewing: boolean;
+  /**
+   * Set to `true` if the `day` is the start of a previewing date range.
+   */
+  isStartOfPreviewing: boolean;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<DateRangePickerDayClasses>;
+  /**
+   * Indicates if the day should be visually selected.
+   */
+  isVisuallySelected?: boolean;
+  /**
+   * If `true`, the day can be dragged to change the current date range.
+   * @default false
+   */
+  draggable?: boolean;
+}
+type DateRangePickerDayComponent = (props: DateRangePickerDayProps & React.RefAttributes<HTMLButtonElement>) => React.JSX.Element;
+/**
+ * Demos:
+ *
+ * - [DateRangePicker](https://mui.com/x/react-date-pickers/date-range-picker/)
+ *
+ * API:
+ *
+ * - [DateRangePickerDay API](https://mui.com/x/api/date-pickers/date-range-picker-day/)
+ */
+export declare const DateRangePickerDay: DateRangePickerDayComponent;
+export {};

package/modern/DateRangePickerDay/dateRangePickerDayClasses.d.ts

@@ -0,0 +1,41 @@
+export interface DateRangePickerDayClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `isHighlighting=true`. */
+  rangeIntervalDayHighlight: string;
+  /** Styles applied to the root element if `isStartOfHighlighting=true`. */
+  rangeIntervalDayHighlightStart: string;
+  /** Styles applied to the root element if `isEndOfHighlighting=true`. */
+  rangeIntervalDayHighlightEnd: string;
+  /** Styles applied to the preview element. */
+  rangeIntervalPreview: string;
+  /** Styles applied to the root element if `isPreviewing=true`. */
+  rangeIntervalDayPreview: string;
+  /** Styles applied to the root element if `isStartOfPreviewing=true`. */
+  rangeIntervalDayPreviewStart: string;
+  /** Styles applied to the root element if `isEndOfPreviewing=true`. */
+  rangeIntervalDayPreviewEnd: string;
+  /** Styles applied to the root element if `outsideCurrentMonth=true` */
+  outsideCurrentMonth: string;
+  /** Styles applied to the root element if `day` is the start of the month. */
+  startOfMonth: string;
+  /** Styles applied to the root element if `day` is the end of the month. */
+  endOfMonth: string;
+  /** Styles applied to the root element if `day` is the first visible cell of the month. */
+  firstVisibleCell: string;
+  /** Styles applied to the root element if `day` is the last visible cell of the month. */
+  lastVisibleCell: string;
+  /** Styles applied to the root element if it is an empty cell used to fill the week. */
+  hiddenDayFiller: string;
+  /** Styles applied to the day element. */
+  day: string;
+  /** Styles applied to the day element if `isHighlighting=false`. */
+  dayOutsideRangeInterval: string;
+  /** Styles applied to the day element if `selected=false` and `isHighlighting=true`. */
+  dayInsideRangeInterval: string;
+  /** Styles applied to the day element if `selected=false`. */
+  notSelectedDate: string;
+}
+export type DateRangePickerDayClassKey = keyof DateRangePickerDayClasses;
+export declare function getDateRangePickerDayUtilityClass(slot: string): string;
+export declare const dateRangePickerDayClasses: DateRangePickerDayClasses;

package/modern/DateRangePickerDay/index.d.ts

@@ -0,0 +1,4 @@
+export { DateRangePickerDay } from "./DateRangePickerDay.js";
+export type { DateRangePickerDayProps } from './DateRangePickerDay';
+export { getDateRangePickerDayUtilityClass, dateRangePickerDayClasses } from "./dateRangePickerDayClasses.js";
+export type { DateRangePickerDayClasses, DateRangePickerDayClassKey } from './dateRangePickerDayClasses';

package/modern/DateTimeRangePicker/DateTimeRangePicker.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { DateTimeRangePickerProps } from "./DateTimeRangePicker.types.js";
+type DateTimeRangePickerComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(props: DateTimeRangePickerProps<TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+  propTypes?: any;
+};
+/**
+ * Demos:
+ *
+ * - [DateTimeRangePicker](https://mui.com/x/react-date-pickers/date-time-range-picker/)
+ * - [Validation](https://mui.com/x/react-date-pickers/validation/)
+ *
+ * API:
+ *
+ * - [DateTimeRangePicker API](https://mui.com/x/api/date-pickers/date-time-range-picker/)
+ */
+declare const DateTimeRangePicker: DateTimeRangePickerComponent;
+export { DateTimeRangePicker };

package/modern/DateTimeRangePicker/DateTimeRangePicker.js

@@ -133,7 +133,7 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
    */
   disableIgnoringDatePartForTimeValidation: PropTypes.bool,
   /**
-   * If `true`, the open picker button will not be rendered (renders only the field).
+   * If `true`, the button to open the Picker will not be rendered (it will only render the field).
    * @default false
    */
   disableOpenPicker: PropTypes.bool,
@@ -168,12 +168,10 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
   formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Pass a ref to the `input` element.
-   * Ignored if the field has several inputs.
    */
   inputRef: refType,
   /**
    * The label content.
-   * Ignored if the field has several inputs.
    */
   label: PropTypes.node,
   /**
@@ -222,7 +220,6 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
   minutesStep: PropTypes.number,
   /**
    * Name attribute used by the `input` element in the Field.
-   * Ignored if the field has several inputs.
    */
   name: PropTypes.string,
   /**

package/modern/DateTimeRangePicker/DateTimeRangePicker.types.d.ts

@@ -0,0 +1,28 @@
+import { BaseSingleInputFieldProps } from '@mui/x-date-pickers/internals';
+import { DesktopDateTimeRangePickerProps, DesktopDateTimeRangePickerSlots, DesktopDateTimeRangePickerSlotProps } from "../DesktopDateTimeRangePicker/index.js";
+import { MobileDateTimeRangePickerProps, MobileDateTimeRangePickerSlots, MobileDateTimeRangePickerSlotProps } from "../MobileDateTimeRangePicker/index.js";
+import type { ValidateDateTimeRangeProps } from '../validation';
+export interface DateTimeRangePickerSlots extends DesktopDateTimeRangePickerSlots, MobileDateTimeRangePickerSlots {}
+export interface DateTimeRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends DesktopDateTimeRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>, MobileDateTimeRangePickerSlotProps<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)'
+   * @example '@media (min-width: 720px)' or theme.breakpoints.up("sm")
+   */
+  desktopModeMediaQuery?: string;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: DateTimeRangePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: DateTimeRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
+}
+/**
+ * Props the field can receive when used inside a Date Time Range Picker (<DateTimeRangePicker />, <DesktopDateTimeRangePicker /> or <MobileDateTimeRangePicker /> component).
+ */
+export type DateTimeRangePickerFieldProps = ValidateDateTimeRangeProps & BaseSingleInputFieldProps;

package/modern/DateTimeRangePicker/DateTimeRangePickerTabs.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { ExportedBaseTabsProps } from '@mui/x-date-pickers/internals';
+import { DateTimeRangePickerTabsClasses } from "./dateTimeRangePickerTabsClasses.js";
+export interface ExportedDateTimeRangePickerTabsProps extends ExportedBaseTabsProps {
+  /**
+   * Toggles visibility of the tabs allowing view switching.
+   * @default `window.innerHeight < 667` for `DesktopDateTimeRangePicker` and `MobileDateTimeRangePicker`
+   */
+  hidden?: boolean;
+  /**
+   * Date tab icon.
+   * @default DateRangeIcon
+   */
+  dateIcon?: React.ReactElement<any>;
+  /**
+   * Time tab icon.
+   * @default TimeIcon
+   */
+  timeIcon?: React.ReactElement<any>;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<DateTimeRangePickerTabsClasses>;
+}
+export interface DateTimeRangePickerTabsProps extends ExportedDateTimeRangePickerTabsProps {}
+declare const DateTimeRangePickerTabs: {
+  (inProps: DateTimeRangePickerTabsProps): React.JSX.Element | null;
+  propTypes: any;
+};
+export { DateTimeRangePickerTabs };

package/modern/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.d.ts

@@ -0,0 +1,17 @@
+import { DefaultizedProps } from '@mui/x-internals/types';
+import { PickerSelectionState, PickerViewRenderer, TimeViewWithMeridiem, BaseClockProps, PickerRangeValue } from '@mui/x-date-pickers/internals';
+export type DateTimeRangePickerTimeWrapperProps<TComponentProps extends DefaultizedProps<Omit<BaseClockProps<TimeViewWithMeridiem>, 'value' | 'defaultValue' | 'onChange'>, 'views'>> = Omit<TComponentProps, 'views' | 'view' | 'onViewChange' | 'value' | 'defaultValue' | 'onChange'> & {
+  view: TimeViewWithMeridiem;
+  onViewChange?: (view: TimeViewWithMeridiem) => void;
+  views: readonly TimeViewWithMeridiem[];
+  value?: PickerRangeValue;
+  defaultValue?: PickerRangeValue;
+  onChange?: (value: PickerRangeValue, selectionState: PickerSelectionState, selectedView: TimeViewWithMeridiem) => void;
+  viewRenderer?: PickerViewRenderer<PickerRangeValue, TComponentProps> | null;
+  openTo?: TimeViewWithMeridiem;
+};
+/**
+ * @ignore - internal component.
+ */
+declare function DateTimeRangePickerTimeWrapper<TComponentProps extends DefaultizedProps<Omit<BaseClockProps<TimeViewWithMeridiem>, 'value' | 'defaultValue' | 'onChange'>, 'views'>>(props: DateTimeRangePickerTimeWrapperProps<TComponentProps>): import("react").ReactNode;
+export { DateTimeRangePickerTimeWrapper };

package/modern/DateTimeRangePicker/DateTimeRangePickerToolbar.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { BaseToolbarProps, ExportedBaseToolbarProps } from '@mui/x-date-pickers/internals';
+import { DateTimeRangePickerToolbarClasses } from "./dateTimeRangePickerToolbarClasses.js";
+export interface DateTimeRangePickerToolbarProps extends BaseToolbarProps, ExportedDateTimeRangePickerToolbarProps {
+  ampm?: boolean;
+}
+export interface ExportedDateTimeRangePickerToolbarProps extends ExportedBaseToolbarProps {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<DateTimeRangePickerToolbarClasses>;
+}
+type DateTimeRangePickerToolbarComponent = ((props: DateTimeRangePickerToolbarProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+  propTypes?: any;
+};
+declare const DateTimeRangePickerToolbar: DateTimeRangePickerToolbarComponent;
+export { DateTimeRangePickerToolbar };

package/modern/DateTimeRangePicker/DateTimeRangePickerToolbar.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "classes", "classes", "ampm", "hidden", "toolbarFormat", "toolbarPlaceholder", "titleId", "sx"];
+const _excluded = ["className", "classes", "ampm", "hidden", "toolbarFormat", "toolbarPlaceholder", "titleId", "sx"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';

package/modern/DateTimeRangePicker/dateTimeRangePickerTabsClasses.d.ts

@@ -0,0 +1,13 @@
+export interface DateTimeRangePickerTabsClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the tab button element. */
+  tabButton: string;
+  /** Styles applied to the tab navigation button elements. */
+  navigationButton: string;
+  /** Styles applied to the filler element, shown instead of a navigation arrow. */
+  filler: string;
+}
+export type DateTimeRangePickerTabsClassKey = keyof DateTimeRangePickerTabsClasses;
+export declare function getDateTimeRangePickerTabsUtilityClass(slot: string): string;
+export declare const dateTimeRangePickerTabsClasses: DateTimeRangePickerTabsClasses;

package/modern/DateTimeRangePicker/dateTimeRangePickerToolbarClasses.d.ts

@@ -0,0 +1,11 @@
+export interface DateTimeRangePickerToolbarClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the start toolbar element. */
+  startToolbar: string;
+  /** Styles applied to the end toolbar element. */
+  endToolbar: string;
+}
+export type DateTimeRangePickerToolbarClassKey = keyof DateTimeRangePickerToolbarClasses;
+export declare function getDateTimeRangePickerToolbarUtilityClass(slot: string): string;
+export declare const dateTimeRangePickerToolbarClasses: DateTimeRangePickerToolbarClasses;

package/modern/DateTimeRangePicker/index.d.ts

@@ -0,0 +1,10 @@
+export { DateTimeRangePicker } from "./DateTimeRangePicker.js";
+export type { DateTimeRangePickerProps, DateTimeRangePickerSlots, DateTimeRangePickerSlotProps, DateTimeRangePickerFieldProps } from './DateTimeRangePicker.types';
+export { DateTimeRangePickerTabs } from "./DateTimeRangePickerTabs.js";
+export type { ExportedDateTimeRangePickerTabsProps } from './DateTimeRangePickerTabs';
+export { getDateTimeRangePickerTabsUtilityClass, dateTimeRangePickerTabsClasses } from "./dateTimeRangePickerTabsClasses.js";
+export type { DateTimeRangePickerTabsClasses, DateTimeRangePickerTabsClassKey } from './dateTimeRangePickerTabsClasses';
+export { DateTimeRangePickerToolbar } from "./DateTimeRangePickerToolbar.js";
+export type { DateTimeRangePickerToolbarProps } from './DateTimeRangePickerToolbar';
+export { getDateTimeRangePickerToolbarUtilityClass, dateTimeRangePickerToolbarClasses } from "./dateTimeRangePickerToolbarClasses.js";
+export type { DateTimeRangePickerToolbarClasses, DateTimeRangePickerToolbarClassKey } from './dateTimeRangePickerToolbarClasses';

package/modern/DateTimeRangePicker/shared.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { DefaultizedProps } from '@mui/x-internals/types';
+import { LocalizedComponent } from '@mui/x-date-pickers/locales';
+import { BasePickerInputProps, PickerViewRendererLookup, BaseClockProps, DigitalTimePickerProps, TimeViewWithMeridiem, UseViewsOptions, 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 { DateTimeRangeValidationError } from "../models/index.js";
+import { DateTimeRangePickerView, DateTimeRangePickerViewExternal } from "../internals/models/index.js";
+import { DateRangeCalendarSlots, DateRangeCalendarSlotProps, ExportedDateRangeCalendarProps } from "../DateRangeCalendar/index.js";
+import { DateTimeRangePickerToolbarProps, ExportedDateTimeRangePickerToolbarProps } from "./DateTimeRangePickerToolbar.js";
+import { DateRangeViewRendererProps } from "../dateRangeViewRenderers/index.js";
+import { DateTimeRangePickerTabsProps, ExportedDateTimeRangePickerTabsProps } from "./DateTimeRangePickerTabs.js";
+import { ExportedValidateDateTimeRangeProps, ValidateDateTimeRangePropsToDefault } from "../validation/validateDateTimeRange.js";
+export interface BaseDateTimeRangePickerSlots extends DateRangeCalendarSlots, DigitalClockSlots, MultiSectionDigitalClockSlots {
+  /**
+   * Tabs enabling toggling between date and time pickers.
+   * @default DateTimeRangePickerTabs
+   */
+  tabs?: React.ElementType<DateTimeRangePickerTabsProps>;
+  /**
+   * Custom component for the toolbar rendered above the views.
+   * @default DateTimeRangePickerToolbar
+   */
+  toolbar?: React.JSXElementConstructor<DateTimeRangePickerToolbarProps>;
+}
+export interface BaseDateTimeRangePickerSlotProps extends DateRangeCalendarSlotProps, DigitalClockSlotProps, MultiSectionDigitalClockSlotProps {
+  /**
+   * Props passed down to the tabs component.
+   */
+  tabs?: ExportedDateTimeRangePickerTabsProps;
+  /**
+   * Props passed down to the toolbar component.
+   */
+  toolbar?: ExportedDateTimeRangePickerToolbarProps;
+}
+type DateTimeRangePickerRenderers<TView extends DateOrTimeViewWithMeridiem> = PickerViewRendererLookup<PickerRangeValue, TView, Omit<DateRangeViewRendererProps<'day'>, 'view' | 'slots' | 'slotProps'> & Omit<TimeViewRendererProps<TimeViewWithMeridiem, BaseClockProps<TimeViewWithMeridiem>>, 'view' | 'slots' | 'slotProps'> & {
+  view: TView;
+}>;
+export interface BaseDateTimeRangePickerProps extends Omit<BasePickerInputProps<PickerRangeValue, DateTimeRangePickerView, DateTimeRangeValidationError>, 'orientation' | 'views' | 'openTo'>, ExportedDateRangeCalendarProps, ExportedValidateDateTimeRangeProps, DigitalTimePickerProps, Partial<Pick<UseViewsOptions<PickerRangeValue, DateTimeRangePickerViewExternal>, 'openTo' | 'views'>> {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BaseDateTimeRangePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  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<DateTimeRangePickerView>>;
+}
+type UseDateTimeRangePickerDefaultizedProps<Props extends BaseDateTimeRangePickerProps> = LocalizedComponent<Omit<DefaultizedProps<Props, 'openTo' | 'ampm' | ValidateDateTimeRangePropsToDefault>, 'views'>> & {
+  shouldRenderTimeInASingleColumn: boolean;
+  views: readonly DateTimeRangePickerView[];
+};
+export declare function useDateTimeRangePickerDefaultizedProps<Props extends BaseDateTimeRangePickerProps>(props: Props, name: string): UseDateTimeRangePickerDefaultizedProps<Props>;
+export {};

package/modern/DesktopDateRangePicker/DesktopDateRangePicker.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { DesktopDateRangePickerProps } from "./DesktopDateRangePicker.types.js";
+type DesktopDateRangePickerComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(props: DesktopDateRangePickerProps<TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+  propTypes?: any;
+};
+/**
+ * Demos:
+ *
+ * - [DateRangePicker](https://mui.com/x/react-date-pickers/date-range-picker/)
+ * - [Validation](https://mui.com/x/react-date-pickers/validation/)
+ *
+ * API:
+ *
+ * - [DesktopDateRangePicker API](https://mui.com/x/api/date-pickers/desktop-date-range-picker/)
+ */
+declare const DesktopDateRangePicker: DesktopDateRangePickerComponent;
+export { DesktopDateRangePicker };

package/modern/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -10,7 +10,7 @@ import { refType } from '@mui/utils';
 import { rangeValueManager } from "../internals/utils/valueManagers.js";
 import { useDateRangePickerDefaultizedProps } from "../DateRangePicker/shared.js";
 import { renderDateRangeViewCalendar } from "../dateRangeViewRenderers/index.js";
-import { MultiInputDateRangeField } from "../MultiInputDateRangeField/index.js";
+import { SingleInputDateRangeField } from "../SingleInputDateRangeField/index.js";
 import { useDesktopRangePicker } from "../internals/hooks/useDesktopRangePicker/index.js";
 import { validateDateRange } from "../validation/index.js";
 const emptyActions = [];
@@ -41,12 +41,10 @@ const DesktopDateRangePicker = /*#__PURE__*/React.forwardRef(function DesktopDat
     views: ['day'],
     openTo: 'day',
     slots: _extends({
-      field: MultiInputDateRangeField
+      field: SingleInputDateRangeField
     }, defaultizedProps.slots),
     slotProps: _extends({}, defaultizedProps.slotProps, {
-      field: ownerState => _extends({}, resolveComponentProps(defaultizedProps.slotProps?.field, ownerState), extractValidationProps(defaultizedProps), {
-        ref
-      }),
+      field: ownerState => _extends({}, resolveComponentProps(defaultizedProps.slotProps?.field, ownerState), extractValidationProps(defaultizedProps)),
       toolbar: _extends({
         hidden: true
       }, defaultizedProps.slotProps?.toolbar),
@@ -58,6 +56,7 @@ const DesktopDateRangePicker = /*#__PURE__*/React.forwardRef(function DesktopDat
   const {
     renderPicker
   } = useDesktopRangePicker({
+    ref,
     props,
     valueManager: rangeValueManager,
     valueType: 'date',
@@ -138,7 +137,7 @@ DesktopDateRangePicker.propTypes = {
    */
   disableHighlightToday: PropTypes.bool,
   /**
-   * If `true`, the open picker button will not be rendered (renders only the field).
+   * If `true`, the button to open the Picker will not be rendered (it will only render the field).
    * @default false
    */
   disableOpenPicker: PropTypes.bool,
@@ -173,12 +172,10 @@ DesktopDateRangePicker.propTypes = {
   formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Pass a ref to the `input` element.
-   * Ignored if the field has several inputs.
    */
   inputRef: refType,
   /**
    * The label content.
-   * Ignored if the field has several inputs.
    */
   label: PropTypes.node,
   /**
@@ -204,7 +201,6 @@ DesktopDateRangePicker.propTypes = {
   minDate: PropTypes.object,
   /**
    * Name attribute used by the `input` element in the Field.
-   * Ignored if the field has several inputs.
    */
   name: PropTypes.string,
   /**

package/modern/DesktopDateRangePicker/DesktopDateRangePicker.types.d.ts

@@ -0,0 +1,27 @@
+import { MakeOptional } from '@mui/x-internals/types';
+import { UseDesktopRangePickerSlots, UseDesktopRangePickerSlotProps, DesktopRangeOnlyPickerProps } from "../internals/hooks/useDesktopRangePicker/index.js";
+import { BaseDateRangePickerProps, BaseDateRangePickerSlots, BaseDateRangePickerSlotProps } from "../DateRangePicker/shared.js";
+export interface DesktopDateRangePickerSlots extends BaseDateRangePickerSlots, MakeOptional<UseDesktopRangePickerSlots, 'field'> {}
+export interface DesktopDateRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateRangePickerSlotProps, Omit<UseDesktopRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>, 'tabs' | 'toolbar'> {}
+export interface DesktopDateRangePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseDateRangePickerProps, DesktopRangeOnlyPickerProps {
+  /**
+   * The number of calendars to render on **desktop**.
+   * @default 2
+   */
+  calendars?: 1 | 2 | 3;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: DesktopDateRangePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: DesktopDateRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
+  /**
+   * If `true`, the Picker will close after submitting the full date.
+   * @default true
+   */
+  closeOnSelect?: boolean;
+}

package/modern/DesktopDateRangePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { DesktopDateRangePicker } from "./DesktopDateRangePicker.js";
+export type { DesktopDateRangePickerProps, DesktopDateRangePickerSlots, DesktopDateRangePickerSlotProps } from './DesktopDateRangePicker.types';

package/modern/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { DesktopDateTimeRangePickerProps } from "./DesktopDateTimeRangePicker.types.js";
+type DesktopDateRangePickerComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(props: DesktopDateTimeRangePickerProps<TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+  propTypes?: any;
+};
+/**
+ * Demos:
+ *
+ * - [DateTimeRangePicker](https://mui.com/x/react-date-pickers/date-time-range-picker/)
+ * - [Validation](https://mui.com/x/react-date-pickers/validation/)
+ *
+ * API:
+ *
+ * - [DesktopDateTimeRangePicker API](https://mui.com/x/api/date-pickers/desktop-date-time-range-picker/)
+ */
+declare const DesktopDateTimeRangePicker: DesktopDateRangePickerComponent;
+export { DesktopDateTimeRangePicker };

package/modern/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js

@@ -19,7 +19,7 @@ import { renderDateRangeViewCalendar } from "../dateRangeViewRenderers/index.js"
 import { useDesktopRangePicker } from "../internals/hooks/useDesktopRangePicker/index.js";
 import { validateDateTimeRange } from "../validation/index.js";
 import { useDateTimeRangePickerDefaultizedProps } from "../DateTimeRangePicker/shared.js";
-import { MultiInputDateTimeRangeField } from "../MultiInputDateTimeRangeField/index.js";
+import { SingleInputDateTimeRangeField } from "../SingleInputDateTimeRangeField/index.js";
 import { DateTimeRangePickerTimeWrapper } from "../DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js";
 import { RANGE_VIEW_HEIGHT } from "../internals/constants/dimensions.js";
 import { usePickerRangePositionContext } from "../hooks/index.js";
@@ -107,13 +107,11 @@ const DesktopDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function Deskto
     ampmInClock: true,
     calendars: defaultizedProps.calendars ?? 1,
     slots: _extends({
-      field: MultiInputDateTimeRangeField,
+      field: SingleInputDateTimeRangeField,
       layout: DesktopDateTimePickerLayout
     }, defaultizedProps.slots),
     slotProps: _extends({}, defaultizedProps.slotProps, {
-      field: ownerState => _extends({}, resolveComponentProps(defaultizedProps.slotProps?.field, ownerState), extractValidationProps(defaultizedProps), {
-        ref
-      }),
+      field: ownerState => _extends({}, resolveComponentProps(defaultizedProps.slotProps?.field, ownerState), extractValidationProps(defaultizedProps)),
       tabs: _extends({
         hidden: true
       }, defaultizedProps.slotProps?.tabs),
@@ -125,6 +123,7 @@ const DesktopDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function Deskto
   const {
     renderPicker
   } = useDesktopRangePicker({
+    ref,
     props,
     valueManager: rangeValueManager,
     valueType: 'date-time',
@@ -216,7 +215,7 @@ DesktopDateTimeRangePicker.propTypes = {
    */
   disableIgnoringDatePartForTimeValidation: PropTypes.bool,
   /**
-   * If `true`, the open picker button will not be rendered (renders only the field).
+   * If `true`, the button to open the Picker will not be rendered (it will only render the field).
    * @default false
    */
   disableOpenPicker: PropTypes.bool,
@@ -251,12 +250,10 @@ DesktopDateTimeRangePicker.propTypes = {
   formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Pass a ref to the `input` element.
-   * Ignored if the field has several inputs.
    */
   inputRef: refType,
   /**
    * The label content.
-   * Ignored if the field has several inputs.
    */
   label: PropTypes.node,
   /**
@@ -305,7 +302,6 @@ DesktopDateTimeRangePicker.propTypes = {
   minutesStep: PropTypes.number,
   /**
    * Name attribute used by the `input` element in the Field.
-   * Ignored if the field has several inputs.
    */
   name: PropTypes.string,
   /**

package/modern/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.types.d.ts

@@ -0,0 +1,22 @@
+import { MakeOptional } from '@mui/x-internals/types';
+import { UseDesktopRangePickerSlots, UseDesktopRangePickerSlotProps, DesktopRangeOnlyPickerProps } from "../internals/hooks/useDesktopRangePicker/index.js";
+import { BaseDateTimeRangePickerProps, BaseDateTimeRangePickerSlots, BaseDateTimeRangePickerSlotProps } from "../DateTimeRangePicker/shared.js";
+export interface DesktopDateTimeRangePickerSlots extends BaseDateTimeRangePickerSlots, MakeOptional<UseDesktopRangePickerSlots, 'field'> {}
+export interface DesktopDateTimeRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateTimeRangePickerSlotProps, Omit<UseDesktopRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>, 'tabs' | 'toolbar'> {}
+export interface DesktopDateTimeRangePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseDateTimeRangePickerProps, DesktopRangeOnlyPickerProps {
+  /**
+   * The number of calendars to render on **desktop**.
+   * @default 1
+   */
+  calendars?: 1 | 2 | 3;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: DesktopDateTimeRangePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: DesktopDateTimeRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
+}

package/modern/DesktopDateTimeRangePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { DesktopDateTimeRangePicker } from "./DesktopDateTimeRangePicker.js";
+export type { DesktopDateTimeRangePickerProps, DesktopDateTimeRangePickerSlots, DesktopDateTimeRangePickerSlotProps } from './DesktopDateTimeRangePicker.types';

package/modern/DesktopTimeRangePicker/DesktopTimeRangePicker.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { DesktopTimeRangePickerProps } from "./DesktopTimeRangePicker.types.js";
+type DesktopTimeRangePickerComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(props: DesktopTimeRangePickerProps<TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+  propTypes?: any;
+};
+declare const DesktopTimeRangePicker: DesktopTimeRangePickerComponent;
+export { DesktopTimeRangePicker };