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

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,14 @@
+import * as React from 'react';
+import { DateRangePickerDayProps } from "./DateRangePickerDay.types.js";
+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/DateRangePickerDay.js

@@ -2,40 +2,42 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "day", "outsideCurrentMonth", "isEndOfHighlighting", "isEndOfPreviewing", "isHighlighting", "isPreviewing", "isStartOfHighlighting", "isStartOfPreviewing", "selected", "isVisuallySelected", "sx", "draggable", "isFirstVisibleCell", "isLastVisibleCell"];
+const _excluded = ["className", "classes", "isEndOfHighlighting", "isEndOfPreviewing", "isHighlighting", "isPreviewing", "isStartOfHighlighting", "isStartOfPreviewing", "isVisuallySelected", "sx", "draggable", "isFirstVisibleCell", "isLastVisibleCell", "day", "selected", "disabled", "today", "outsideCurrentMonth", "disableMargin", "disableHighlightToday", "showDaysOutsideCurrentMonth"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { useLicenseVerifier } from '@mui/x-license';
 import { alpha, styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
-import { useUtils } from '@mui/x-date-pickers/internals';
+import { useUtils, usePickerDayOwnerState } from '@mui/x-date-pickers/internals';
 import { PickersDay } from '@mui/x-date-pickers/PickersDay';
 import { getDateRangePickerDayUtilityClass, dateRangePickerDayClasses } from "./dateRangePickerDayClasses.js";
 import { getReleaseInfo } from "../internals/utils/releaseInfo.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const releaseInfo = getReleaseInfo();
-const useUtilityClasses = ownerState => {
+const useUtilityClasses = (classes, ownerState) => {
   const {
-    isHighlighting,
-    outsideCurrentMonth,
-    isStartOfHighlighting,
-    isStartOfMonth,
-    isEndOfHighlighting,
-    isEndOfMonth,
-    isPreviewing,
-    isStartOfPreviewing,
-    isEndOfPreviewing,
-    isFirstVisibleCell,
-    isLastVisibleCell,
-    isHiddenDayFiller,
-    selected,
-    classes
+    // Properties shared with PickersDay
+    isDaySelected,
+    isDayOutsideMonth,
+    // Range-specific properties (present in the Base UI implementation)
+    isDaySelectionStart,
+    isDaySelectionEnd,
+    isDayInsideSelection,
+    isDayPreviewStart,
+    isDayPreviewEnd,
+    isDayPreviewed,
+    // Range-specific properties (specific to the MUI implementation)
+    isDayStartOfMonth,
+    isDayEndOfMonth,
+    isDayFirstVisibleCell,
+    isDayLastVisibleCell,
+    isDayFillerCell
   } = ownerState;
   const slots = {
-    root: ['root', isHighlighting && 'rangeIntervalDayHighlight', isStartOfHighlighting && 'rangeIntervalDayHighlightStart', isEndOfHighlighting && 'rangeIntervalDayHighlightEnd', outsideCurrentMonth && 'outsideCurrentMonth', isStartOfMonth && 'startOfMonth', isEndOfMonth && 'endOfMonth', isFirstVisibleCell && 'firstVisibleCell', isLastVisibleCell && 'lastVisibleCell', isHiddenDayFiller && 'hiddenDayFiller'],
-    rangeIntervalPreview: ['rangeIntervalPreview', isPreviewing && 'rangeIntervalDayPreview', (isStartOfPreviewing || isStartOfMonth) && 'rangeIntervalDayPreviewStart', (isEndOfPreviewing || isEndOfMonth) && 'rangeIntervalDayPreviewEnd'],
-    day: ['day', !selected && 'notSelectedDate', !isHighlighting && 'dayOutsideRangeInterval', !selected && isHighlighting && 'dayInsideRangeInterval']
+    root: ['root', isDaySelected && 'rangeIntervalDayHighlight', isDaySelectionStart && 'rangeIntervalDayHighlightStart', isDaySelectionEnd && 'rangeIntervalDayHighlightEnd', isDayOutsideMonth && 'outsideCurrentMonth', isDayStartOfMonth && 'startOfMonth', isDayEndOfMonth && 'endOfMonth', isDayFirstVisibleCell && 'firstVisibleCell', isDayLastVisibleCell && 'lastVisibleCell', isDayFillerCell && 'hiddenDayFiller'],
+    rangeIntervalPreview: ['rangeIntervalPreview', isDayPreviewed && 'rangeIntervalDayPreview', (isDayPreviewStart || isDayStartOfMonth) && 'rangeIntervalDayPreviewStart', (isDayPreviewEnd || isDayEndOfMonth) && 'rangeIntervalDayPreviewEnd'],
+    day: ['day', !isDaySelected && 'notSelectedDate', !isDaySelected && 'dayOutsideRangeInterval', !isDayInsideSelection && 'dayInsideRangeInterval']
   };
   return composeClasses(slots, getDateRangePickerDayUtilityClass, classes);
 };
@@ -74,7 +76,7 @@ const DateRangePickerDayRoot = styled('div', {
 }) => ({
   variants: [{
     props: {
-      isHiddenDayFiller: false
+      isDayFillerCell: false
     },
     style: {
       [`&:first-of-type .${dateRangePickerDayClasses.rangeIntervalDayPreview}`]: _extends({}, startBorderStyle, {
@@ -86,7 +88,7 @@ const DateRangePickerDayRoot = styled('div', {
     }
   }, {
     props: {
-      isHiddenDayFiller: false,
+      isDayFillerCell: false,
       isHighlighting: true
     },
     style: {
@@ -99,22 +101,22 @@ const DateRangePickerDayRoot = styled('div', {
   }, {
     props: ({
       ownerState: {
-        isHiddenDayFiller,
-        isStartOfHighlighting,
-        isFirstVisibleCell
+        isDayFillerCell,
+        isDaySelectionStart,
+        isDayFirstVisibleCell
       }
-    }) => !isHiddenDayFiller && (isStartOfHighlighting || isFirstVisibleCell),
+    }) => !isDayFillerCell && (isDaySelectionStart || isDayFirstVisibleCell),
     style: _extends({}, startBorderStyle, {
       paddingLeft: 0
     })
   }, {
     props: ({
       ownerState: {
-        isHiddenDayFiller,
-        isEndOfHighlighting,
-        isLastVisibleCell
+        isDayFillerCell,
+        isDaySelectionEnd,
+        isDayLastVisibleCell
       }
-    }) => !isHiddenDayFiller && (isEndOfHighlighting || isLastVisibleCell),
+    }) => !isDayFillerCell && (isDaySelectionEnd || isDayLastVisibleCell),
     style: _extends({}, endBorderStyle, {
       paddingRight: 0
     })
@@ -137,8 +139,8 @@ const DateRangePickerDayRangeIntervalPreview = styled('div', {
   border: '2px solid transparent',
   variants: [{
     props: {
-      isPreviewing: true,
-      isHiddenDayFiller: false
+      isDayPreviewed: true,
+      isDayFillerCell: false
     },
     style: {
       borderRadius: 0,
@@ -149,24 +151,24 @@ const DateRangePickerDayRangeIntervalPreview = styled('div', {
   }, {
     props: ({
       ownerState: {
-        isPreviewing,
-        isHiddenDayFiller,
-        isStartOfPreviewing,
-        isFirstVisibleCell
+        isDayPreviewed,
+        isDayFillerCell,
+        isDayPreviewStart,
+        isDayFirstVisibleCell
       }
-    }) => isPreviewing && !isHiddenDayFiller && (isStartOfPreviewing || isFirstVisibleCell),
+    }) => isDayPreviewed && !isDayFillerCell && (isDayPreviewStart || isDayFirstVisibleCell),
     style: _extends({
       borderLeftColor: (theme.vars || theme).palette.divider
     }, startBorderStyle)
   }, {
     props: ({
       ownerState: {
-        isPreviewing,
-        isHiddenDayFiller,
-        isEndOfPreviewing,
-        isLastVisibleCell
+        isDayPreviewed,
+        isDayFillerCell,
+        isDayPreviewEnd,
+        isDayLastVisibleCell
       }
-    }) => isPreviewing && !isHiddenDayFiller && (isEndOfPreviewing || isLastVisibleCell),
+    }) => isDayPreviewed && !isDayFillerCell && (isDayPreviewEnd || isDayLastVisibleCell),
     style: _extends({
       borderRightColor: (theme.vars || theme).palette.divider
     }, endBorderStyle)
@@ -205,34 +207,60 @@ const DateRangePickerDayRaw = /*#__PURE__*/React.forwardRef(function DateRangePi
   });
   const {
       className,
-      day,
-      outsideCurrentMonth,
+      classes: classesProp,
+      isEndOfHighlighting,
+      isEndOfPreviewing,
       isHighlighting,
       isPreviewing,
-      selected = false,
+      isStartOfHighlighting,
+      isStartOfPreviewing,
       isVisuallySelected,
       sx,
       draggable,
       isFirstVisibleCell,
-      isLastVisibleCell
+      isLastVisibleCell,
+      day,
+      selected,
+      disabled,
+      today,
+      outsideCurrentMonth,
+      disableMargin,
+      disableHighlightToday,
+      showDaysOutsideCurrentMonth
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   useLicenseVerifier('x-date-pickers-pro', releaseInfo);
   const utils = useUtils();
-  const isEndOfMonth = utils.isSameDay(day, utils.endOfMonth(day));
-  const isStartOfMonth = utils.isSameDay(day, utils.startOfMonth(day));
   const shouldRenderHighlight = isHighlighting && !outsideCurrentMonth;
   const shouldRenderPreview = isPreviewing && !outsideCurrentMonth;
-  const ownerState = _extends({}, props, {
+  const pickersDayOwnerState = usePickerDayOwnerState({
+    day,
     selected,
-    isStartOfMonth,
-    isEndOfMonth,
-    draggable,
-    isFirstVisibleCell,
-    isLastVisibleCell,
-    isHiddenDayFiller: outsideCurrentMonth && !other.showDaysOutsideCurrentMonth
+    disabled,
+    today,
+    outsideCurrentMonth,
+    disableMargin,
+    disableHighlightToday,
+    showDaysOutsideCurrentMonth
+  });
+  const ownerState = _extends({}, pickersDayOwnerState, {
+    // Properties that the Base UI implementation will have
+    isDaySelectionStart: isStartOfHighlighting,
+    isDaySelectionEnd: isEndOfHighlighting,
+    isDayInsideSelection: isHighlighting && !isStartOfHighlighting && !isEndOfHighlighting,
+    isDaySelected: isHighlighting,
+    isDayPreviewed: isPreviewing,
+    isDayPreviewStart: isStartOfPreviewing,
+    isDayPreviewEnd: isEndOfPreviewing,
+    isDayInsidePreview: isPreviewing && !isStartOfPreviewing && !isEndOfPreviewing,
+    // Properties specific to the MUI implementation (some might be removed in the next major)
+    isDayStartOfMonth: utils.isSameDay(day, utils.startOfMonth(day)),
+    isDayEndOfMonth: utils.isSameDay(day, utils.endOfMonth(day)),
+    isDayFirstVisibleCell: isFirstVisibleCell,
+    isDayLastVisibleCell: isLastVisibleCell,
+    isDayFillerCell: outsideCurrentMonth && !showDaysOutsideCurrentMonth
   });
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp, ownerState);
   return /*#__PURE__*/_jsx(DateRangePickerDayRoot, {
     className: clsx(classes.root, className),
     ownerState: ownerState,
@@ -242,10 +270,14 @@ const DateRangePickerDayRaw = /*#__PURE__*/React.forwardRef(function DateRangePi
       ownerState: ownerState,
       children: /*#__PURE__*/_jsx(DateRangePickerDayDay, _extends({}, other, {
         ref: ref,
-        disableMargin: true,
         day: day,
         selected: isVisuallySelected,
+        disabled: disabled,
+        today: today,
         outsideCurrentMonth: outsideCurrentMonth,
+        disableMargin: true,
+        disableHighlightToday: disableHighlightToday,
+        showDaysOutsideCurrentMonth: showDaysOutsideCurrentMonth,
         className: classes.day,
         ownerState: ownerState,
         draggable: draggable,

package/modern/DateRangePickerDay/DateRangePickerDay.types.d.ts

@@ -0,0 +1,91 @@
+import { PickerDayOwnerState, 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;
+}
+export interface DateRangePickerDayOwnerState extends PickerDayOwnerState {
+  /**
+   * Whether the day is the first day of the selected range.
+   */
+  isDaySelectionStart: boolean;
+  /**
+   * Whether the day is the last day of the selected range.
+   */
+  isDaySelectionEnd: boolean;
+  /**
+   * Whether the day is within the selected range and is not its first or last day.
+   */
+  isDayInsideSelection: boolean;
+  /**
+   * Whether the day is within the preview range.
+   */
+  isDayPreviewed: boolean;
+  /**
+   * Whether the day is the first day of the preview range.
+   */
+  isDayPreviewStart: boolean;
+  /**
+   * Whether the day is the last day of the preview range.
+   */
+  isDayPreviewEnd: boolean;
+  /**
+   * Whether the day is within the preview range and is not its first or last day.
+   */
+  isDayInsidePreview: boolean;
+  /**
+   * Whether the day is the first day of the month.
+   */
+  isDayStartOfMonth: boolean;
+  /**
+   * Whether the day is the last day of the month.
+   */
+  isDayEndOfMonth: boolean;
+  /**
+   * Whether the day is the first visible cell of the month it's being rendered in.
+   */
+  isDayFirstVisibleCell: boolean;
+  /**
+   * Whether the day is the last visible cell of the month it's being rendered in.
+   */
+  isDayLastVisibleCell: boolean;
+  /**
+   * Whether the day is a filler day (its content is hidden).
+   */
+  isDayFillerCell: boolean;
+}

package/modern/DateRangePickerDay/DateRangePickerDay.types.js

@@ -0,0 +1 @@
+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, DateRangePickerDayOwnerState } from './DateRangePickerDay.types';
+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

@@ -8,6 +8,7 @@ import PropTypes from 'prop-types';
 import { refType } from '@mui/utils';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useThemeProps } from '@mui/material/styles';
+import { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from '@mui/x-date-pickers/internals';
 import { DesktopDateTimeRangePicker } from "../DesktopDateTimeRangePicker/index.js";
 import { MobileDateTimeRangePicker } from "../MobileDateTimeRangePicker/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -27,7 +28,7 @@ const DateTimeRangePicker = /*#__PURE__*/React.forwardRef(function DateTimeRange
     name: 'MuiDateTimeRangePicker'
   });
   const {
-      desktopModeMediaQuery = '@media (pointer: fine)'
+      desktopModeMediaQuery = DEFAULT_DESKTOP_MODE_MEDIA_QUERY
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -133,7 +134,8 @@ 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).
+   * @deprecated Use the [field component](https://next.mui.com/x/react-date-pickers/fields/) instead.
    * @default false
    */
   disableOpenPicker: PropTypes.bool,
@@ -168,12 +170,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 +222,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;