@mui/x-date-pickers-pro 5.0.0-alpha.0

package/DateRangePicker/DateRangePickerInput.js

@@ -0,0 +1,128 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["currentlySelectingRangeEnd", "disableOpenPicker", "endText", "onBlur", "onChange", "open", "openPicker", "rawValue", "rawValue", "readOnly", "renderInput", "setCurrentlySelectingRangeEnd", "startText", "TextFieldProps", "validationError"];
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { useUtils, executeInTheNextEventLoopTick, WrapperVariantContext, useMaskedInput } from '@mui/x-date-pickers/internals';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DateRangePickerInputRoot = styled('div')(({
+  theme
+}) => ({
+  display: 'flex',
+  alignItems: 'baseline',
+  [theme.breakpoints.down('xs')]: {
+    flexDirection: 'column',
+    alignItems: 'center'
+  }
+}));
+
+/**
+ * @ignore - internal component.
+ */
+export const DateRangePickerInput = /*#__PURE__*/React.forwardRef(function DateRangePickerInput(props, ref) {
+  const {
+    currentlySelectingRangeEnd,
+    disableOpenPicker,
+    endText,
+    onBlur,
+    onChange,
+    open,
+    openPicker,
+    rawValue: [start, end],
+    readOnly,
+    renderInput,
+    setCurrentlySelectingRangeEnd,
+    startText,
+    TextFieldProps,
+    validationError: [startValidationError, endValidationError]
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const utils = useUtils();
+  const startRef = React.useRef(null);
+  const endRef = React.useRef(null);
+  const wrapperVariant = React.useContext(WrapperVariantContext);
+  React.useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    if (currentlySelectingRangeEnd === 'start') {
+      var _startRef$current;
+
+      (_startRef$current = startRef.current) == null ? void 0 : _startRef$current.focus();
+    } else if (currentlySelectingRangeEnd === 'end') {
+      var _endRef$current;
+
+      (_endRef$current = endRef.current) == null ? void 0 : _endRef$current.focus();
+    }
+  }, [currentlySelectingRangeEnd, open]); // TODO: rethink this approach. We do not need to wait for calendar to be updated to rerender input (looks like freezing)
+  // TODO: so simply break 1 react's commit phase in 2 (first for input and second for calendars) by executing onChange in the next tick
+
+  const lazyHandleChangeCallback = React.useCallback((...args) => executeInTheNextEventLoopTick(() => onChange(...args)), [onChange]);
+
+  const handleStartChange = (date, inputString) => {
+    lazyHandleChangeCallback([date, utils.date(end)], inputString);
+  };
+
+  const handleEndChange = (date, inputString) => {
+    lazyHandleChangeCallback([utils.date(start), date], inputString);
+  };
+
+  const openRangeStartSelection = () => {
+    if (setCurrentlySelectingRangeEnd) {
+      setCurrentlySelectingRangeEnd('start');
+    }
+
+    if (!readOnly && !disableOpenPicker) {
+      openPicker();
+    }
+  };
+
+  const openRangeEndSelection = () => {
+    if (setCurrentlySelectingRangeEnd) {
+      setCurrentlySelectingRangeEnd('end');
+    }
+
+    if (!readOnly && !disableOpenPicker) {
+      openPicker();
+    }
+  };
+
+  const openOnFocus = wrapperVariant === 'desktop';
+  const startInputProps = useMaskedInput(_extends({}, other, {
+    readOnly,
+    rawValue: start,
+    onChange: handleStartChange,
+    label: startText,
+    validationError: startValidationError !== null,
+    TextFieldProps: _extends({}, TextFieldProps, {
+      ref: startRef,
+      focused: open && currentlySelectingRangeEnd === 'start'
+    }),
+    inputProps: {
+      onClick: !openOnFocus ? openRangeStartSelection : undefined,
+      onFocus: openOnFocus ? openRangeStartSelection : undefined
+    }
+  }));
+  const endInputProps = useMaskedInput(_extends({}, other, {
+    readOnly,
+    label: endText,
+    rawValue: end,
+    onChange: handleEndChange,
+    validationError: endValidationError !== null,
+    TextFieldProps: _extends({}, TextFieldProps, {
+      ref: endRef,
+      focused: open && currentlySelectingRangeEnd === 'end'
+    }),
+    inputProps: {
+      onClick: !openOnFocus ? openRangeEndSelection : undefined,
+      onFocus: openOnFocus ? openRangeEndSelection : undefined
+    }
+  }));
+  return /*#__PURE__*/_jsx(DateRangePickerInputRoot, {
+    onBlur: onBlur,
+    ref: ref,
+    children: renderInput(startInputProps, endInputProps)
+  });
+});

package/DateRangePicker/DateRangePickerToolbar.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { BaseToolbarProps } from '@mui/x-date-pickers/internals';
+import { DateRange, CurrentlySelectingRangeEndProps } from '../internal/models';
+interface DateRangePickerToolbarProps<TDate> extends CurrentlySelectingRangeEndProps, Pick<BaseToolbarProps<TDate>, 'isMobileKeyboardViewOpen' | 'toggleMobileKeyboardView' | 'toolbarTitle' | 'toolbarFormat'> {
+    date: DateRange<TDate>;
+    startText: React.ReactNode;
+    endText: React.ReactNode;
+    currentlySelectingRangeEnd: 'start' | 'end';
+    setCurrentlySelectingRangeEnd: (newSelectingEnd: 'start' | 'end') => void;
+}
+/**
+ * @ignore - internal component.
+ */
+export declare const DateRangePickerToolbar: <TDate extends unknown>({ currentlySelectingRangeEnd, date: [start, end], endText, isMobileKeyboardViewOpen, setCurrentlySelectingRangeEnd, startText, toggleMobileKeyboardView, toolbarFormat, toolbarTitle, }: DateRangePickerToolbarProps<TDate>) => JSX.Element;
+export {};

package/DateRangePicker/DateRangePickerToolbar.js

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import Typography from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
+import { generateUtilityClasses } from '@mui/material';
+import { PickersToolbar, PickersToolbarButton, useUtils } from '@mui/x-date-pickers/internals';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const classes = generateUtilityClasses('PrivateDateRangePickerToolbar', ['penIcon']);
+const DateRangePickerToolbarRoot = styled(PickersToolbar)({
+  [`& .${classes.penIcon}`]: {
+    position: 'relative',
+    top: 4
+  }
+});
+const DateRangePickerToolbarContainer = styled('div')({
+  display: 'flex'
+});
+/**
+ * @ignore - internal component.
+ */
+
+export const DateRangePickerToolbar = ({
+  currentlySelectingRangeEnd,
+  date: [start, end],
+  endText,
+  isMobileKeyboardViewOpen,
+  setCurrentlySelectingRangeEnd,
+  startText,
+  toggleMobileKeyboardView,
+  toolbarFormat,
+  toolbarTitle = 'Select date range'
+}) => {
+  const utils = useUtils();
+  const startDateValue = start ? utils.formatByString(start, toolbarFormat || utils.formats.shortDate) : startText;
+  const endDateValue = end ? utils.formatByString(end, toolbarFormat || utils.formats.shortDate) : endText;
+  return /*#__PURE__*/_jsx(DateRangePickerToolbarRoot, {
+    toolbarTitle: toolbarTitle,
+    isMobileKeyboardViewOpen: isMobileKeyboardViewOpen,
+    toggleMobileKeyboardView: toggleMobileKeyboardView,
+    isLandscape: false,
+    penIconClassName: classes.penIcon,
+    children: /*#__PURE__*/_jsxs(DateRangePickerToolbarContainer, {
+      children: [/*#__PURE__*/_jsx(PickersToolbarButton, {
+        variant: start !== null ? 'h5' : 'h6',
+        value: startDateValue,
+        selected: currentlySelectingRangeEnd === 'start',
+        onClick: () => setCurrentlySelectingRangeEnd('start')
+      }), /*#__PURE__*/_jsxs(Typography, {
+        variant: "h5",
+        children: ["\xA0", '–', "\xA0"]
+      }), /*#__PURE__*/_jsx(PickersToolbarButton, {
+        variant: end !== null ? 'h5' : 'h6',
+        value: endDateValue,
+        selected: currentlySelectingRangeEnd === 'end',
+        onClick: () => setCurrentlySelectingRangeEnd('end')
+      })]
+    })
+  });
+};

package/DateRangePicker/DateRangePickerView.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { BasePickerProps, WrapperVariant, PickerSelectionState, ExportedCalendarPickerProps } from '@mui/x-date-pickers/internals';
+import { DateRange, CurrentlySelectingRangeEndProps, RangeInput } from '../internal/models/dateRange';
+import { DateRangeInputProps } from './DateRangePickerInput';
+import { ExportedDesktopDateRangeCalendarProps } from './DateRangePickerViewDesktop';
+declare type BaseCalendarPropsToReuse<TDate> = Omit<ExportedCalendarPickerProps<TDate>, 'onYearChange' | 'renderDay'>;
+export interface ExportedDateRangePickerViewProps<TDate> extends BaseCalendarPropsToReuse<TDate>, ExportedDesktopDateRangeCalendarProps<TDate>, Omit<BasePickerProps<RangeInput<TDate>, DateRange<TDate>>, 'value' | 'onChange'> {
+    /**
+     * If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.
+     * @default false
+     */
+    disableAutoMonthSwitching?: boolean;
+    /**
+     * Mobile picker title, displaying in the toolbar.
+     * @default 'Select date range'
+     */
+    toolbarTitle?: React.ReactNode;
+}
+interface DateRangePickerViewProps<TDate> extends CurrentlySelectingRangeEndProps, ExportedDateRangePickerViewProps<TDate> {
+    calendars: 1 | 2 | 3;
+    open: boolean;
+    startText: React.ReactNode;
+    endText: React.ReactNode;
+    isMobileKeyboardViewOpen: boolean;
+    toggleMobileKeyboardView: () => void;
+    DateInputProps: DateRangeInputProps;
+    date: DateRange<TDate>;
+    onDateChange: (date: DateRange<TDate>, currentWrapperVariant: WrapperVariant, isFinish?: PickerSelectionState) => void;
+}
+/**
+ * @ignore - internal component.
+ */
+export declare function DateRangePickerView<TDate>(props: DateRangePickerViewProps<TDate>): JSX.Element;
+export declare namespace DateRangePickerView {
+    var propTypes: {
+        calendars: PropTypes.Requireable<number>;
+        disableAutoMonthSwitching: PropTypes.Requireable<boolean>;
+    };
+}
+export {};

package/DateRangePicker/DateRangePickerView.js

@@ -0,0 +1,179 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["calendars", "className", "currentlySelectingRangeEnd", "date", "DateInputProps", "defaultCalendarMonth", "disableAutoMonthSwitching", "disableFuture", "disableHighlightToday", "disablePast", "endText", "isMobileKeyboardViewOpen", "maxDate", "minDate", "onDateChange", "onMonthChange", "open", "reduceAnimations", "setCurrentlySelectingRangeEnd", "shouldDisableDate", "showToolbar", "startText", "toggleMobileKeyboardView", "toolbarFormat", "toolbarTitle"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { Watermark } from '@mui/x-license-pro';
+import { useUtils, WrapperVariantContext, MobileKeyboardInputView, defaultReduceAnimations, useCalendarState } from '@mui/x-date-pickers/internals';
+import { isRangeValid } from '../internal/utils/date-utils';
+import { calculateRangeChange } from './date-range-manager';
+import { DateRangePickerToolbar } from './DateRangePickerToolbar';
+import { DateRangePickerViewMobile } from './DateRangePickerViewMobile';
+import { DateRangePickerInput } from './DateRangePickerInput';
+import { DateRangePickerViewDesktop } from './DateRangePickerViewDesktop';
+import { getReleaseInfo } from '../internal/utils/releaseInfo';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const releaseInfo = getReleaseInfo();
+
+/**
+ * @ignore - internal component.
+ */
+export function DateRangePickerView(props) {
+  const {
+    calendars,
+    className,
+    currentlySelectingRangeEnd,
+    date,
+    DateInputProps,
+    defaultCalendarMonth,
+    disableAutoMonthSwitching = false,
+    disableFuture,
+    disableHighlightToday,
+    disablePast,
+    endText,
+    isMobileKeyboardViewOpen,
+    maxDate,
+    minDate,
+    onDateChange,
+    onMonthChange,
+    open,
+    reduceAnimations = defaultReduceAnimations,
+    setCurrentlySelectingRangeEnd,
+    shouldDisableDate,
+    showToolbar,
+    startText,
+    toggleMobileKeyboardView,
+    toolbarFormat,
+    toolbarTitle
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const utils = useUtils();
+  const wrapperVariant = React.useContext(WrapperVariantContext);
+  const [start, end] = date;
+  const {
+    changeMonth,
+    calendarState,
+    isDateDisabled,
+    onMonthSwitchingAnimationEnd,
+    changeFocusedDay
+  } = useCalendarState({
+    date: start || end,
+    defaultCalendarMonth,
+    disableFuture,
+    disablePast,
+    disableSwitchToMonthOnDayFocus: true,
+    maxDate,
+    minDate,
+    onMonthChange,
+    reduceAnimations,
+    shouldDisableDate
+  });
+  const toShowToolbar = showToolbar != null ? showToolbar : wrapperVariant !== 'desktop';
+
+  const scrollToDayIfNeeded = day => {
+    if (!day || !utils.isValid(day) || isDateDisabled(day)) {
+      return;
+    }
+
+    const currentlySelectedDate = currentlySelectingRangeEnd === 'start' ? start : end;
+
+    if (currentlySelectedDate === null) {
+      // do not scroll if one of ages is not selected
+      return;
+    }
+
+    const displayingMonthRange = wrapperVariant === 'mobile' ? 0 : calendars - 1;
+    const currentMonthNumber = utils.getMonth(calendarState.currentMonth);
+    const requestedMonthNumber = utils.getMonth(day);
+
+    if (!utils.isSameYear(calendarState.currentMonth, day) || requestedMonthNumber < currentMonthNumber || requestedMonthNumber > currentMonthNumber + displayingMonthRange) {
+      const newMonth = currentlySelectingRangeEnd === 'start' ? currentlySelectedDate : // If need to focus end, scroll to the state when "end" is displaying in the last calendar
+      utils.addMonths(currentlySelectedDate, -displayingMonthRange);
+      changeMonth(newMonth);
+    }
+  };
+
+  React.useEffect(() => {
+    if (disableAutoMonthSwitching || !open) {
+      return;
+    }
+
+    scrollToDayIfNeeded(currentlySelectingRangeEnd === 'start' ? start : end);
+  }, [currentlySelectingRangeEnd, date]); // eslint-disable-line
+
+  const handleChange = React.useCallback(newDate => {
+    const {
+      nextSelection,
+      newRange
+    } = calculateRangeChange({
+      newDate,
+      utils,
+      range: date,
+      currentlySelectingRangeEnd
+    });
+    setCurrentlySelectingRangeEnd(nextSelection);
+    const isFullRangeSelected = currentlySelectingRangeEnd === 'end' && isRangeValid(utils, newRange);
+    onDateChange(newRange, wrapperVariant, isFullRangeSelected ? 'finish' : 'partial');
+  }, [currentlySelectingRangeEnd, date, onDateChange, setCurrentlySelectingRangeEnd, utils, wrapperVariant]);
+
+  const renderView = () => {
+    const sharedCalendarProps = _extends({
+      date,
+      isDateDisabled,
+      changeFocusedDay,
+      onChange: handleChange,
+      reduceAnimations,
+      disableHighlightToday,
+      onMonthSwitchingAnimationEnd,
+      changeMonth,
+      currentlySelectingRangeEnd,
+      disableFuture,
+      disablePast,
+      minDate,
+      maxDate
+    }, calendarState, other);
+
+    switch (wrapperVariant) {
+      case 'desktop':
+        {
+          return /*#__PURE__*/_jsx(DateRangePickerViewDesktop, _extends({
+            calendars: calendars
+          }, sharedCalendarProps));
+        }
+
+      default:
+        {
+          return /*#__PURE__*/_jsx(DateRangePickerViewMobile, _extends({}, sharedCalendarProps));
+        }
+    }
+  };
+
+  return /*#__PURE__*/_jsxs("div", {
+    className: className,
+    children: [/*#__PURE__*/_jsx(Watermark, {
+      packageName: "x-date-pickers-pro",
+      releaseInfo: releaseInfo
+    }), toShowToolbar && /*#__PURE__*/_jsx(DateRangePickerToolbar, {
+      date: date,
+      isMobileKeyboardViewOpen: isMobileKeyboardViewOpen,
+      toggleMobileKeyboardView: toggleMobileKeyboardView,
+      currentlySelectingRangeEnd: currentlySelectingRangeEnd,
+      setCurrentlySelectingRangeEnd: setCurrentlySelectingRangeEnd,
+      startText: startText,
+      endText: endText,
+      toolbarTitle: toolbarTitle,
+      toolbarFormat: toolbarFormat
+    }), isMobileKeyboardViewOpen ? /*#__PURE__*/_jsx(MobileKeyboardInputView, {
+      children: /*#__PURE__*/_jsx(DateRangePickerInput, _extends({
+        disableOpenPicker: true,
+        ignoreInvalidInputs: true
+      }, DateInputProps))
+    }) : renderView()]
+  });
+}
+process.env.NODE_ENV !== "production" ? DateRangePickerView.propTypes = {
+  calendars: PropTypes.oneOf([1, 2, 3]),
+  disableAutoMonthSwitching: PropTypes.bool
+} : void 0;

package/DateRangePicker/DateRangePickerViewDesktop.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { ExportedDateValidationProps, ExportedArrowSwitcherProps, PickersCalendarProps } from '@mui/x-date-pickers/internals';
+import { DateRange } from '../internal/models';
+import { DateRangePickerDayProps } from '../DateRangePickerDay';
+export interface ExportedDesktopDateRangeCalendarProps<TDate> {
+    /**
+     * The number of calendars that render on **desktop**.
+     * @default 2
+     */
+    calendars?: 1 | 2 | 3;
+    /**
+     * Custom renderer for `<DateRangePicker />` days. @DateIOType
+     * @example (date, dateRangePickerDayProps) => <DateRangePickerDay {...dateRangePickerDayProps} />
+     * @param {TDate} day The day to render.
+     * @param {DateRangePickerDayProps<TDate>} dateRangePickerDayProps The props of the day to render.
+     * @returns {JSX.Element} The element representing the day.
+     */
+    renderDay?: (day: TDate, dateRangePickerDayProps: DateRangePickerDayProps<TDate>) => JSX.Element;
+}
+interface DesktopDateRangeCalendarProps<TDate> extends ExportedDesktopDateRangeCalendarProps<TDate>, Omit<PickersCalendarProps<TDate>, 'renderDay' | 'onFocusedDayChange'>, ExportedDateValidationProps<TDate>, ExportedArrowSwitcherProps {
+    calendars: 1 | 2 | 3;
+    date: DateRange<TDate | null>;
+    changeMonth: (date: TDate) => void;
+    currentlySelectingRangeEnd: 'start' | 'end';
+}
+/**
+ * @ignore - internal component.
+ */
+export declare function DateRangePickerViewDesktop<TDate>(props: DesktopDateRangeCalendarProps<TDate>): JSX.Element;
+export {};

package/DateRangePicker/DateRangePickerViewDesktop.js

@@ -0,0 +1,154 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["calendars", "changeMonth", "components", "componentsProps", "currentlySelectingRangeEnd", "currentMonth", "date", "disableFuture", "disablePast", "leftArrowButtonText", "maxDate", "minDate", "onChange", "renderDay", "rightArrowButtonText"];
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { useDefaultDates, useUtils, PickersArrowSwitcher, usePreviousMonthDisabled, useNextMonthDisabled, DayPicker } from '@mui/x-date-pickers/internals';
+import { calculateRangePreview } from './date-range-manager';
+import { DateRangePickerDay } from '../DateRangePickerDay';
+import { isWithinRange, isStartOfRange, isEndOfRange } from '../internal/utils/date-utils';
+import { doNothing } from '../internal/utils/utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const DateRangePickerViewDesktopRoot = styled('div')({
+  display: 'flex',
+  flexDirection: 'row'
+});
+const DateRangePickerViewDesktopContainer = styled('div')(({
+  theme
+}) => ({
+  '&:not(:last-of-type)': {
+    borderRight: `2px solid ${theme.palette.divider}`
+  }
+}));
+const DateRangePickerViewDesktopCalendar = styled(DayPicker)({
+  minWidth: 312,
+  minHeight: 288
+});
+const DateRangePickerViewDesktopArrowSwitcher = styled(PickersArrowSwitcher)({
+  padding: '16px 16px 8px 16px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between'
+});
+
+function getCalendarsArray(calendars) {
+  switch (calendars) {
+    case 1:
+      return [0];
+
+    case 2:
+      return [0, 0];
+
+    case 3:
+      return [0, 0, 0];
+    // this will not work in IE11, but allows to support any amount of calendars
+
+    default:
+      return new Array(calendars).fill(0);
+  }
+}
+/**
+ * @ignore - internal component.
+ */
+
+
+export function DateRangePickerViewDesktop(props) {
+  const {
+    calendars,
+    changeMonth,
+    components,
+    componentsProps,
+    currentlySelectingRangeEnd,
+    currentMonth,
+    date,
+    disableFuture,
+    disablePast,
+    leftArrowButtonText = 'Previous month',
+    maxDate: maxDateProp,
+    minDate: minDateProp,
+    onChange,
+    renderDay = (_, dateRangeProps) => /*#__PURE__*/_jsx(DateRangePickerDay, _extends({}, dateRangeProps)),
+    rightArrowButtonText = 'Next month'
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const utils = useUtils();
+  const defaultDates = useDefaultDates();
+  const minDate = minDateProp != null ? minDateProp : defaultDates.minDate;
+  const maxDate = maxDateProp != null ? maxDateProp : defaultDates.maxDate;
+  const [rangePreviewDay, setRangePreviewDay] = React.useState(null);
+  const isNextMonthDisabled = useNextMonthDisabled(currentMonth, {
+    disableFuture,
+    maxDate
+  });
+  const isPreviousMonthDisabled = usePreviousMonthDisabled(currentMonth, {
+    disablePast,
+    minDate
+  });
+  const previewingRange = calculateRangePreview({
+    utils,
+    range: date,
+    newDate: rangePreviewDay,
+    currentlySelectingRangeEnd
+  });
+  const handleDayChange = React.useCallback(day => {
+    setRangePreviewDay(null);
+    onChange(day);
+  }, [onChange]);
+
+  const handlePreviewDayChange = newPreviewRequest => {
+    if (!isWithinRange(utils, newPreviewRequest, date)) {
+      setRangePreviewDay(newPreviewRequest);
+    } else {
+      setRangePreviewDay(null);
+    }
+  };
+
+  const CalendarTransitionProps = React.useMemo(() => ({
+    onMouseLeave: () => setRangePreviewDay(null)
+  }), []);
+  const selectNextMonth = React.useCallback(() => {
+    changeMonth(utils.getNextMonth(currentMonth));
+  }, [changeMonth, currentMonth, utils]);
+  const selectPreviousMonth = React.useCallback(() => {
+    changeMonth(utils.getPreviousMonth(currentMonth));
+  }, [changeMonth, currentMonth, utils]);
+  return /*#__PURE__*/_jsx(DateRangePickerViewDesktopRoot, {
+    children: getCalendarsArray(calendars).map((_, index) => {
+      const monthOnIteration = utils.setMonth(currentMonth, utils.getMonth(currentMonth) + index);
+      return /*#__PURE__*/_jsxs(DateRangePickerViewDesktopContainer, {
+        children: [/*#__PURE__*/_jsx(DateRangePickerViewDesktopArrowSwitcher, {
+          onLeftClick: selectPreviousMonth,
+          onRightClick: selectNextMonth,
+          isLeftHidden: index !== 0,
+          isRightHidden: index !== calendars - 1,
+          isLeftDisabled: isPreviousMonthDisabled,
+          isRightDisabled: isNextMonthDisabled,
+          leftArrowButtonText: leftArrowButtonText,
+          components: components,
+          componentsProps: componentsProps,
+          rightArrowButtonText: rightArrowButtonText,
+          children: utils.format(monthOnIteration, 'monthAndYear')
+        }), /*#__PURE__*/_createElement(DateRangePickerViewDesktopCalendar, _extends({}, other, {
+          key: index,
+          date: date,
+          onFocusedDayChange: doNothing,
+          onChange: handleDayChange,
+          currentMonth: monthOnIteration,
+          TransitionProps: CalendarTransitionProps,
+          renderDay: (day, __, DayProps) => renderDay(day, _extends({
+            isPreviewing: isWithinRange(utils, day, previewingRange),
+            isStartOfPreviewing: isStartOfRange(utils, day, previewingRange),
+            isEndOfPreviewing: isEndOfRange(utils, day, previewingRange),
+            isHighlighting: isWithinRange(utils, day, date),
+            isStartOfHighlighting: isStartOfRange(utils, day, date),
+            isEndOfHighlighting: isEndOfRange(utils, day, date),
+            onMouseEnter: () => handlePreviewDayChange(day)
+          }, DayProps))
+        }))]
+      }, index);
+    })
+  });
+}

package/DateRangePicker/DateRangePickerViewMobile.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { ExportedCalendarHeaderProps, ExportedDateValidationProps, PickersCalendarProps } from '@mui/x-date-pickers/internals';
+import { DateRange } from '../internal/models/dateRange';
+import { ExportedDesktopDateRangeCalendarProps } from './DateRangePickerViewDesktop';
+export interface ExportedMobileDateRangeCalendarProps<TDate> extends Pick<ExportedDesktopDateRangeCalendarProps<TDate>, 'renderDay'> {
+}
+interface DesktopDateRangeCalendarProps<TDate> extends ExportedMobileDateRangeCalendarProps<TDate>, Omit<PickersCalendarProps<TDate>, 'date' | 'renderDay' | 'onFocusedDayChange'>, ExportedDateValidationProps<TDate>, ExportedCalendarHeaderProps<TDate> {
+    date: DateRange<TDate>;
+    changeMonth: (date: TDate) => void;
+}
+/**
+ * @ignore - internal component.
+ */
+export declare function DateRangePickerViewMobile<TDate>(props: DesktopDateRangeCalendarProps<TDate>): JSX.Element;
+export {};