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

package/models/validation.d.ts

@@ -1,9 +1,6 @@
 import { DateTimeValidationError, DateValidationError, TimeValidationError } from '@mui/x-date-pickers/models';
-type RangeValidation<ItemError extends string | null> = [
-    ItemError | 'invalidRange',
-    ItemError | 'invalidRange'
-];
+type RangeValidation<ItemError extends string | null> = [ItemError | 'invalidRange', ItemError | 'invalidRange'];
 export type DateRangeValidationError = RangeValidation<DateValidationError>;
 export type TimeRangeValidationError = RangeValidation<TimeValidationError>;
 export type DateTimeRangeValidationError = RangeValidation<DateTimeValidationError>;
-export {};
+export {};

package/models/validation.js

@@ -1 +1,5 @@
-export {};
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/modern/AdapterDateFns/index.d.ts

@@ -0,0 +1 @@
+export { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';

package/modern/AdapterDateFnsJalali/index.d.ts

@@ -0,0 +1 @@
+export { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalali';

package/modern/AdapterDateFnsJalaliV2/index.d.ts

@@ -0,0 +1 @@
+export { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalaliV2';

package/modern/AdapterDateFnsV2/index.d.ts

@@ -0,0 +1 @@
+export { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV2';

package/modern/AdapterDayjs/index.d.ts

@@ -0,0 +1 @@
+export { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';

package/modern/AdapterLuxon/index.d.ts

@@ -0,0 +1 @@
+export { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';

package/modern/AdapterMoment/index.d.ts

@@ -0,0 +1 @@
+export { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';

package/modern/AdapterMomentHijri/index.d.ts

@@ -0,0 +1 @@
+export { AdapterMomentHijri } from '@mui/x-date-pickers/AdapterMomentHijri';

package/modern/AdapterMomentJalaali/index.d.ts

@@ -0,0 +1 @@
+export { AdapterMomentJalaali } from '@mui/x-date-pickers/AdapterMomentJalaali';

package/modern/DateRangeCalendar/DateRangeCalendar.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { DateRangeCalendarProps } from "./DateRangeCalendar.types.js";
+type DateRangeCalendarComponent = ((props: DateRangeCalendarProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+  propTypes?: any;
+};
+/**
+ * Demos:
+ *
+ * - [DateRangePicker](https://mui.com/x/react-date-pickers/date-range-picker/)
+ * - [DateRangeCalendar](https://mui.com/x/react-date-pickers/date-range-calendar/)
+ *
+ * API:
+ *
+ * - [DateRangeCalendar API](https://mui.com/x/api/date-pickers/date-range-calendar/)
+ */
+declare const DateRangeCalendar: DateRangeCalendarComponent;
+export { DateRangeCalendar };

package/modern/DateRangeCalendar/DateRangeCalendar.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["value", "defaultValue", "referenceDate", "onChange", "className", "classes", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "rangePosition", "defaultRangePosition", "onRangePositionChange", "calendars", "currentMonthCalendarPosition", "slots", "slotProps", "loading", "renderLoading", "disableHighlightToday", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber", "timezone", "availableRangePositions", "views", "view", "openTo", "onViewChange"],
+const _excluded = ["value", "defaultValue", "referenceDate", "onChange", "className", "classes", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "rangePosition", "defaultRangePosition", "onRangePositionChange", "calendars", "currentMonthCalendarPosition", "slots", "slotProps", "loading", "renderLoading", "disableHighlightToday", "focusedView", "onFocusedViewChange", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber", "timezone", "availableRangePositions", "views", "view", "openTo", "onViewChange"],
   _excluded2 = ["isDragging", "rangeDragDay", "draggingDatePosition"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -15,7 +15,7 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import useId from '@mui/utils/useId';
 import { Watermark } from '@mui/x-license';
-import { applyDefaultDate, DayCalendar, useDefaultReduceAnimations, useCalendarState, useDefaultDates, useUtils, useNow, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, useControlledValueWithTimezone, useViews, usePickerPrivateContext } from '@mui/x-date-pickers/internals';
+import { applyDefaultDate, DayCalendar, useReduceAnimations, useCalendarState, useDefaultDates, useUtils, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, useControlledValue, useViews, usePickerPrivateContext, areDatesEqual } from '@mui/x-date-pickers/internals';
 import { warnOnce } from '@mui/x-internals/warning';
 import { getReleaseInfo } from "../internals/utils/releaseInfo.js";
 import { dateRangeCalendarClasses, getDateRangeCalendarUtilityClass } from "./dateRangeCalendarClasses.js";
@@ -76,16 +76,16 @@ const DayCalendarForRange = InnerDayCalendarForRange;
 function useDateRangeCalendarDefaultizedProps(props, name) {
   const utils = useUtils();
   const defaultDates = useDefaultDates();
-  const defaultReduceAnimations = useDefaultReduceAnimations();
   const themeProps = useThemeProps({
     props,
     name
   });
+  const reduceAnimations = useReduceAnimations(themeProps.reduceAnimations);
   return _extends({}, themeProps, {
     renderLoading: themeProps.renderLoading ?? (() => /*#__PURE__*/_jsx("span", {
       children: "..."
     })),
-    reduceAnimations: themeProps.reduceAnimations ?? defaultReduceAnimations,
+    reduceAnimations,
     loading: props.loading ?? false,
     disablePast: props.disablePast ?? false,
     disableFuture: props.disableFuture ?? false,
@@ -145,6 +145,8 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       loading,
       renderLoading,
       disableHighlightToday,
+      focusedView: focusedViewProp,
+      onFocusedViewChange,
       readOnly,
       disabled,
       showDaysOutsideCurrentMonth,
@@ -167,7 +169,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     value,
     handleValueChange,
     timezone
-  } = useControlledValueWithTimezone({
+  } = useControlledValue({
     name: 'DateRangeCalendar',
     timezone: timezoneProp,
     value: valueProp,
@@ -177,18 +179,21 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     valueManager: rangeValueManager
   });
   const {
-    setValueAndGoToNextView,
-    view
+    view,
+    setFocusedView,
+    focusedView,
+    setValueAndGoToNextView
   } = useViews({
     view: inView,
     views,
     openTo,
     onChange: handleValueChange,
     onViewChange,
-    autoFocus
+    autoFocus,
+    focusedView: focusedViewProp,
+    onFocusedViewChange
   });
   const utils = useUtils();
-  const now = useNow(timezone);
   const id = useId();
   const {
     rangePosition,
@@ -273,22 +278,39 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
   }, [shouldDisableDate, rangePosition, draggingDatePosition]);
   const {
     calendarState,
-    changeFocusedDay,
-    changeMonth,
-    handleChangeMonth,
+    setVisibleDate,
     onMonthSwitchingAnimationEnd
   } = useCalendarState({
     value: value[0] || value[1],
     referenceDate,
     disableFuture,
     disablePast,
-    disableSwitchToMonthOnDayFocus: true,
     maxDate,
     minDate,
     onMonthChange,
     reduceAnimations,
     shouldDisableDate: wrappedShouldDisableDate,
-    timezone
+    timezone,
+    getCurrentMonthFromVisibleDate: (visibleDate, prevMonth) => {
+      const firstVisibleMonth = utils.addMonths(prevMonth, 1 - currentMonthCalendarPosition);
+      const lastVisibleMonth = utils.endOfMonth(utils.addMonths(firstVisibleMonth, calendars - 1));
+
+      // The new focused day is inside the visible calendars,
+      // Do not change the current month
+      if (utils.isWithinRange(visibleDate, [firstVisibleMonth, lastVisibleMonth])) {
+        return prevMonth;
+      }
+
+      // The new focused day is after the last visible month,
+      // Move the current month so that the new focused day is inside the first visible month
+      if (utils.isAfter(visibleDate, lastVisibleMonth)) {
+        return utils.startOfMonth(utils.addMonths(visibleDate, currentMonthCalendarPosition - 1));
+      }
+
+      // The new focused day is before the first visible month,
+      // Move the current month so that the new focused day is inside the last visible month
+      return utils.startOfMonth(utils.addMonths(visibleDate, currentMonthCalendarPosition - calendars));
+    }
   });
   const CalendarHeader = slots?.calendarHeader ?? PickersRangeCalendarHeader;
   const calendarHeaderProps = useSlotProps({
@@ -299,9 +321,9 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       views: ['day'],
       view: 'day',
       currentMonth: calendarState.currentMonth,
-      onMonthChange: (newMonth, direction) => handleChangeMonth({
-        newMonth,
-        direction
+      onMonthChange: month => setVisibleDate({
+        target: month,
+        reason: 'header-navigation'
       }),
       minDate,
       maxDate,
@@ -315,6 +337,8 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     },
     ownerState
   });
+
+  // TODO: Move this logic inside the render instead of using an effect
   const prevValue = React.useRef(null);
   React.useEffect(() => {
     const date = rangePosition === 'start' ? value[0] : value[1];
@@ -336,7 +360,10 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       const newMonth = rangePosition === 'start' ? date :
       // If need to focus end, scroll to the state when "end" is displaying in the last calendar
       utils.addMonths(date, -displayingMonthRange);
-      changeMonth(newMonth);
+      setVisibleDate({
+        target: newMonth,
+        reason: 'controlled-value-change'
+      });
     }
   }, [rangePosition, value]); // eslint-disable-line
 
@@ -361,11 +388,17 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     newDate: rangePreviewDay,
     rangePosition
   });
-  const handleDayMouseEnter = useEventCallback((event, newPreviewRequest) => {
-    if (!isWithinRange(utils, newPreviewRequest, valueDayRange)) {
-      setRangePreviewDay(newPreviewRequest);
+  const handleDayMouseEnter = useEventCallback((event, newRangePreviewDay) => {
+    let cleanNewRangePreviewDay;
+    if (valueDayRange[0] == null && valueDayRange[1] == null) {
+      cleanNewRangePreviewDay = null;
+    } else if (isWithinRange(utils, newRangePreviewDay, valueDayRange)) {
+      cleanNewRangePreviewDay = null;
     } else {
-      setRangePreviewDay(null);
+      cleanNewRangePreviewDay = newRangePreviewDay;
+    }
+    if (!areDatesEqual(utils, cleanNewRangePreviewDay, rangePreviewDay)) {
+      setRangePreviewDay(cleanNewRangePreviewDay);
     }
   });
   const slotsForDayCalendar = _extends({
@@ -419,25 +452,19 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       length: calendars
     }).map((_, index) => utils.addMonths(firstMonth, index));
   }, [utils, calendarState.currentMonth, calendars, currentMonthCalendarPosition]);
-  const focusedMonth = React.useMemo(() => {
-    if (!autoFocus) {
-      return null;
-    }
-
-    // The focus priority of the "day" view is as follows:
-    // 1. Month of the `start` date
-    // 2. Month of the `end` date
-    // 3. Month of the current date
-    // 4. First visible month
-
-    if (value[0] != null) {
-      return visibleMonths.find(month => utils.isSameMonth(month, value[0]));
+  const hasFocus = focusedView !== null;
+  const prevOpenViewRef = React.useRef(view);
+  React.useEffect(() => {
+    // If the view change and the focus was on the previous view
+    // Then we update the focus.
+    if (prevOpenViewRef.current === view) {
+      return;
     }
-    if (value[1] != null) {
-      return visibleMonths.find(month => utils.isSameMonth(month, value[1]));
+    if (focusedView === prevOpenViewRef.current) {
+      setFocusedView(view, true);
     }
-    return visibleMonths.find(month => utils.isSameMonth(month, now)) ?? visibleMonths[0];
-  }, [utils, value, visibleMonths, autoFocus, now]);
+    prevOpenViewRef.current = view;
+  }, [focusedView, setFocusedView, view]);
   return /*#__PURE__*/_jsxs(DateRangeCalendarRoot, _extends({
     ref: ref,
     className: clsx(classes.root, className),
@@ -459,20 +486,24 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
           className: classes.dayCalendar
         }, calendarState, baseDateValidationProps, commonViewProps, {
           onMonthSwitchingAnimationEnd: onMonthSwitchingAnimationEnd,
-          onFocusedDayChange: changeFocusedDay,
+          onFocusedDayChange: focusedDate => setVisibleDate({
+            target: focusedDate,
+            reason: 'cell-interaction'
+          }),
           reduceAnimations: reduceAnimations,
           selectedDays: value,
           onSelectedDaysChange: handleSelectedDayChange,
           currentMonth: month,
           TransitionProps: CalendarTransitionProps,
           shouldDisableDate: wrappedShouldDisableDate,
+          hasFocus: hasFocus,
+          onFocusedViewChange: isViewFocused => setFocusedView('day', isViewFocused),
           showDaysOutsideCurrentMonth: calendars === 1 && showDaysOutsideCurrentMonth,
           dayOfWeekFormatter: dayOfWeekFormatter,
           loading: loading,
           renderLoading: renderLoading,
           slots: slotsForDayCalendar,
           slotProps: slotPropsForDayCalendar,
-          autoFocus: month === focusedMonth,
           fixedWeekNumber: fixedWeekNumber,
           displayWeekNumber: displayWeekNumber,
           timezone: timezone,

package/modern/DateRangeCalendar/DateRangeCalendar.types.d.ts

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { SlotComponentProps } from '@mui/utils';
+import { Theme } from '@mui/material/styles';
+import { DefaultizedProps } from '@mui/x-internals/types';
+import { PickerOwnerState, PickerValidDate, TimezoneProps } from '@mui/x-date-pickers/models';
+import { PickersCalendarHeader, PickersCalendarHeaderSlots, PickersCalendarHeaderSlotProps } from '@mui/x-date-pickers/PickersCalendarHeader';
+import { PickerDayOwnerState } from '@mui/x-date-pickers/PickersDay';
+import { BaseDateValidationProps, ExportedDayCalendarProps, DayCalendarSlots, DayCalendarSlotProps, PickersArrowSwitcherSlots, PickersArrowSwitcherSlotProps, ExportedUseViewsOptions, PickerRangeValue, FormProps } from '@mui/x-date-pickers/internals';
+import { RangePosition } from "../models/index.js";
+import { DateRangeCalendarClasses } from "./dateRangeCalendarClasses.js";
+import { DateRangePickerDay, DateRangePickerDayProps } from "../DateRangePickerDay/index.js";
+import { UseRangePositionProps } from "../internals/hooks/useRangePosition.js";
+import { PickersRangeCalendarHeaderProps } from "../PickersRangeCalendarHeader/index.js";
+import { ExportedValidateDateRangeProps } from "../validation/validateDateRange.js";
+export interface DateRangeCalendarSlots extends PickersArrowSwitcherSlots, Omit<DayCalendarSlots, 'day'>, PickersCalendarHeaderSlots {
+  /**
+   * Custom component for calendar header.
+   * Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component.
+   * @default PickersCalendarHeader
+   */
+  calendarHeader?: React.ElementType<PickersRangeCalendarHeaderProps>;
+  /**
+   * Custom component for day in range pickers.
+   * Check the [DateRangePickersDay](https://mui.com/x/api/date-pickers/date-range-picker-day/) component.
+   * @default DateRangePickersDay
+   */
+  day?: React.ElementType<DateRangePickerDayProps>;
+}
+export interface DateRangeCalendarSlotProps extends PickersArrowSwitcherSlotProps, Omit<DayCalendarSlotProps, 'day'>, PickersCalendarHeaderSlotProps {
+  calendarHeader?: SlotComponentProps<typeof PickersCalendarHeader, {}, DateRangeCalendarOwnerState>;
+  day?: SlotComponentProps<typeof DateRangePickerDay, {}, PickerDayOwnerState>;
+}
+export interface ExportedDateRangeCalendarProps extends ExportedDayCalendarProps, ExportedValidateDateRangeProps, TimezoneProps, FormProps {
+  /**
+   * If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.
+   * @default false
+   */
+  disableAutoMonthSwitching?: boolean;
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations?: boolean;
+  /**
+   * Callback fired on month change.
+   * @param {PickerValidDate} month The new month.
+   */
+  onMonthChange?: (month: PickerValidDate) => void;
+  /**
+   * Position the current month is rendered in.
+   * @default 1
+   */
+  currentMonthCalendarPosition?: 1 | 2 | 3;
+  /**
+   * If `true`, editing dates by dragging is disabled.
+   * @default false
+   */
+  disableDragEditing?: boolean;
+}
+export interface DateRangeCalendarProps extends ExportedDateRangeCalendarProps, UseRangePositionProps, ExportedUseViewsOptions<PickerRangeValue, 'day'> {
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: PickerRangeValue;
+  /**
+   * The default selected value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: PickerRangeValue;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`.
+   */
+  referenceDate?: PickerValidDate;
+  /**
+   * The number of calendars to render.
+   * @default 2
+   */
+  calendars?: 1 | 2 | 3;
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<DateRangeCalendarClasses>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: DateRangeCalendarSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: DateRangeCalendarSlotProps;
+  /**
+   * Range positions available for selection.
+   * This list is checked against when checking if a next range position can be selected.
+   *
+   * Used on Date Time Range pickers with current `rangePosition` to force a `finish` selection after just one range position selection.
+   * @default ['start', 'end']
+   */
+  availableRangePositions?: RangePosition[];
+}
+export interface DateRangeCalendarOwnerState extends PickerOwnerState {
+  isDraggingDay: boolean;
+}
+export type DateRangeCalendarDefaultizedProps = DefaultizedProps<DateRangeCalendarProps, 'views' | 'openTo' | 'reduceAnimations' | 'calendars' | 'disableDragEditing' | 'availableRangePositions' | keyof BaseDateValidationProps>;

package/modern/DateRangeCalendar/dateRangeCalendarClasses.d.ts

@@ -0,0 +1,11 @@
+export interface DateRangeCalendarClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the container of a month. */
+  monthContainer: string;
+  /** Styles applied to the day calendar container when dragging */
+  dayDragging: string;
+}
+export type DateRangeCalendarClassKey = keyof DateRangeCalendarClasses;
+export declare const getDateRangeCalendarUtilityClass: (slot: string) => string;
+export declare const dateRangeCalendarClasses: DateRangeCalendarClasses;

package/modern/DateRangeCalendar/index.d.ts

@@ -0,0 +1,4 @@
+export { DateRangeCalendar } from "./DateRangeCalendar.js";
+export type { DateRangeCalendarProps, DateRangeCalendarSlots, DateRangeCalendarSlotProps, ExportedDateRangeCalendarProps } from './DateRangeCalendar.types';
+export { getDateRangeCalendarUtilityClass, dateRangeCalendarClasses } from "./dateRangeCalendarClasses.js";
+export type { DateRangeCalendarClassKey, DateRangeCalendarClasses } from './dateRangeCalendarClasses';

package/modern/DateRangeCalendar/useDragRange.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { MuiPickersAdapter, PickersTimezone, PickerValidDate } from '@mui/x-date-pickers/models';
+import { PickerRangeValue } from '@mui/x-date-pickers/internals';
+import { RangePosition } from "../models/index.js";
+interface UseDragRangeParams {
+  disableDragEditing?: boolean;
+  utils: MuiPickersAdapter;
+  setRangeDragDay: (value: PickerValidDate | null) => void;
+  setIsDragging: (value: boolean) => void;
+  isDragging: boolean;
+  onDatePositionChange: (position: RangePosition) => void;
+  onDrop: (newDate: PickerValidDate) => void;
+  dateRange: PickerRangeValue;
+  timezone: PickersTimezone;
+}
+interface UseDragRangeEvents {
+  onDragStart?: React.DragEventHandler<HTMLButtonElement>;
+  onDragEnter?: React.DragEventHandler<HTMLButtonElement>;
+  onDragLeave?: React.DragEventHandler<HTMLButtonElement>;
+  onDragOver?: React.DragEventHandler<HTMLButtonElement>;
+  onDragEnd?: React.DragEventHandler<HTMLButtonElement>;
+  onDrop?: React.DragEventHandler<HTMLButtonElement>;
+  onTouchStart?: React.TouchEventHandler<HTMLButtonElement>;
+  onTouchMove?: React.TouchEventHandler<HTMLButtonElement>;
+  onTouchEnd?: React.TouchEventHandler<HTMLButtonElement>;
+}
+interface UseDragRangeResponse extends UseDragRangeEvents {
+  isDragging: boolean;
+  rangeDragDay: PickerValidDate | null;
+  draggingDatePosition: RangePosition | null;
+}
+export declare const useDragRange: ({
+  disableDragEditing,
+  utils,
+  onDatePositionChange,
+  onDrop,
+  dateRange,
+  timezone
+}: Omit<UseDragRangeParams, "setRangeDragDay" | "setIsDragging" | "isDragging">) => UseDragRangeResponse;
+export {};

package/modern/DateRangePicker/DateRangePicker.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { DateRangePickerProps } from "./DateRangePicker.types.js";
+type DatePickerComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(props: DateRangePickerProps<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:
+ *
+ * - [DateRangePicker API](https://mui.com/x/api/date-pickers/date-range-picker/)
+ */
+declare const DateRangePicker: DatePickerComponent;
+export { DateRangePicker };

package/modern/DateRangePicker/DateRangePicker.js

@@ -7,6 +7,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 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 { refType } from '@mui/utils';
 import { DesktopDateRangePicker } from "../DesktopDateRangePicker/index.js";
 import { MobileDateRangePicker } from "../MobileDateRangePicker/index.js";
@@ -27,7 +28,7 @@ const DateRangePicker = /*#__PURE__*/React.forwardRef(function DateRangePicker(i
     name: 'MuiDateRangePicker'
   });
   const {
-      desktopModeMediaQuery = '@media (pointer: fine)'
+      desktopModeMediaQuery = DEFAULT_DESKTOP_MODE_MEDIA_QUERY
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -123,7 +124,8 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.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).
+   * @deprecated Use the [field component](https://next.mui.com/x/react-date-pickers/fields/) instead.
    * @default false
    */
   disableOpenPicker: PropTypes.bool,
@@ -158,12 +160,10 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.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,
   /**
@@ -189,7 +189,6 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.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/DateRangePicker/DateRangePicker.types.d.ts

@@ -0,0 +1,33 @@
+import { BaseSingleInputFieldProps } from '@mui/x-date-pickers/internals';
+import { DesktopDateRangePickerProps, DesktopDateRangePickerSlots, DesktopDateRangePickerSlotProps } from "../DesktopDateRangePicker/index.js";
+import { MobileDateRangePickerProps, MobileDateRangePickerSlots, MobileDateRangePickerSlotProps } from "../MobileDateRangePicker/index.js";
+import { ValidateDateRangeProps } from "../validation/index.js";
+export interface DateRangePickerSlots extends DesktopDateRangePickerSlots, MobileDateRangePickerSlots {}
+export interface DateRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends DesktopDateRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>, MobileDateRangePickerSlotProps<TEnableAccessibleFieldDOMStructure> {}
+export interface DateRangePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends DesktopDateRangePickerProps<TEnableAccessibleFieldDOMStructure>, MobileDateRangePickerProps<TEnableAccessibleFieldDOMStructure> {
+  /**
+   * CSS media query when `Mobile` mode will be changed to `Desktop`.
+   * @default '@media (pointer: fine)'
+   * @example '@media (min-width: 720px)' or theme.breakpoints.up("sm")
+   */
+  desktopModeMediaQuery?: string;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: DateRangePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: DateRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
+  /**
+   * If `true`, the Picker will close after submitting the full date.
+   * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+   */
+  closeOnSelect?: boolean;
+}
+/**
+ * Props the field can receive when used inside a Date Range Picker (<DateRangePicker />, <DesktopDateRangePicker /> or <MobileDateRangePicker /> component).
+ */
+export type DateRangePickerFieldProps = ValidateDateRangeProps & BaseSingleInputFieldProps;

package/modern/DateRangePicker/DateRangePickerToolbar.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { BaseToolbarProps, ExportedBaseToolbarProps } from '@mui/x-date-pickers/internals';
+import { DateRangePickerToolbarClasses } from "./dateRangePickerToolbarClasses.js";
+export interface DateRangePickerToolbarProps extends ExportedDateRangePickerToolbarProps, Omit<BaseToolbarProps, 'onChange' | 'isLandscape'> {}
+export interface ExportedDateRangePickerToolbarProps extends ExportedBaseToolbarProps {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<DateRangePickerToolbarClasses>;
+}
+type DateRangePickerToolbarComponent = ((props: DateRangePickerToolbarProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+  propTypes?: any;
+};
+/**
+ * Demos:
+ *
+ * - [DateRangePicker](https://mui.com/x/react-date-pickers/date-range-picker/)
+ * - [Custom components](https://mui.com/x/react-date-pickers/custom-components/)
+ *
+ * API:
+ *
+ * - [DateRangePickerToolbar API](https://mui.com/x/api/date-pickers/date-range-picker-toolbar/)
+ */
+declare const DateRangePickerToolbar: DateRangePickerToolbarComponent;
+export { DateRangePickerToolbar };

package/modern/DateRangePicker/dateRangePickerToolbarClasses.d.ts

@@ -0,0 +1,9 @@
+export interface DateRangePickerToolbarClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the container element. */
+  container: string;
+}
+export type DateRangePickerToolbarClassKey = keyof DateRangePickerToolbarClasses;
+export declare function getDateRangePickerToolbarUtilityClass(slot: string): string;
+export declare const dateRangePickerToolbarClasses: DateRangePickerToolbarClasses;

package/modern/DateRangePicker/index.d.ts

@@ -0,0 +1,6 @@
+export { DateRangePicker } from "./DateRangePicker.js";
+export type { DateRangePickerProps, DateRangePickerSlots, DateRangePickerSlotProps, DateRangePickerFieldProps } from './DateRangePicker.types';
+export { DateRangePickerToolbar } from "./DateRangePickerToolbar.js";
+export type { DateRangePickerToolbarProps } from './DateRangePickerToolbar';
+export { getDateRangePickerToolbarUtilityClass, dateRangePickerToolbarClasses } from "./dateRangePickerToolbarClasses.js";
+export type { DateRangePickerToolbarClasses, DateRangePickerToolbarClassKey } from './dateRangePickerToolbarClasses';