@mui/x-date-pickers-pro 6.0.0-alpha.10 → 6.0.0-alpha.12

package/DateRangeCalendar/DateRangeCalendar.js

@@ -1,6 +1,7 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["value", "defaultValue", "onChange", "className", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "defaultCalendarMonth", "currentDatePosition", "onCurrentDatePositionChange", "calendars", "components", "componentsProps", "loading", "renderLoading", "disableHighlightToday", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber"];
+const _excluded = ["value", "defaultValue", "onChange", "className", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "defaultCalendarMonth", "rangePosition", "onRangePositionChange", "calendars", "components", "componentsProps", "loading", "renderLoading", "disableHighlightToday", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber"],
+  _excluded2 = ["isDragging", "rangeDragDay", "draggingDatePosition"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -10,13 +11,14 @@ import { resolveComponentProps } from '@mui/base/utils';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { Watermark } from '@mui/x-license-pro';
-import { applyDefaultDate, DAY_MARGIN, DayCalendar, defaultReduceAnimations, PickersArrowSwitcher, PickersCalendarHeader, useCalendarState, useDefaultDates, useLocaleText, useNextMonthDisabled, usePreviousMonthDisabled, useUtils, WrapperVariantContext } from '@mui/x-date-pickers/internals';
+import { applyDefaultDate, DAY_MARGIN, DayCalendar, defaultReduceAnimations, PickersArrowSwitcher, PickersCalendarHeader, useCalendarState, useDefaultDates, useLocaleText, useNextMonthDisabled, usePreviousMonthDisabled, useUtils, WrapperVariantContext, useNow } from '@mui/x-date-pickers/internals';
 import { getReleaseInfo } from '../internal/utils/releaseInfo';
-import { getDateRangeCalendarUtilityClass } from './dateRangeCalendarClasses';
+import { dateRangeCalendarClasses, getDateRangeCalendarUtilityClass } from './dateRangeCalendarClasses';
 import { isEndOfRange, isRangeValid, isStartOfRange, isWithinRange } from '../internal/utils/date-utils';
 import { calculateRangeChange, calculateRangePreview } from '../DateRangePicker/date-range-manager';
-import { DateRangePickerDay } from '../DateRangePickerDay';
+import { DateRangePickerDay, dateRangePickerDayClasses as dayClasses } from '../DateRangePickerDay';
 import { rangeValueManager } from '../internal/utils/valueManagers';
+import { useDragRange } from './useDragRange';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const releaseInfo = getReleaseInfo();
@@ -47,12 +49,30 @@ const DateRangeCalendarArrowSwitcher = styled(PickersArrowSwitcher)({
 });
 const DAY_RANGE_SIZE = 40;
 const weeksContainerHeight = (DAY_RANGE_SIZE + DAY_MARGIN * 2) * 6;
-const DayCalendarForRange = styled(DayCalendar)({
+const DayCalendarForRange = styled(DayCalendar)(({
+  theme
+}) => ({
   minWidth: 312,
-  minHeight: weeksContainerHeight
-});
+  minHeight: weeksContainerHeight,
+  [`&.${dateRangeCalendarClasses.dayDragging}`]: {
+    [`& .${dayClasses.day}`]: {
+      cursor: 'grabbing'
+    },
+    [`& .${dayClasses.root}:not(.${dayClasses.rangeIntervalDayHighlightStart}):not(.${dayClasses.rangeIntervalDayHighlightEnd}) .${dayClasses.day}:not(.${dayClasses.notSelectedDate})`]: {
+      // we can't override `PickersDay` background color here, because it's styles take precedence
+      opacity: 0.6
+    }
+  },
+  [`&:not(.${dateRangeCalendarClasses.dayDragging}) .${dayClasses.dayOutsideRangeInterval}`]: {
+    '@media (pointer: fine)': {
+      '&:hover': {
+        border: `1px solid ${(theme.vars || theme).palette.grey[500]}`
+      }
+    }
+  }
+}));
 function useDateRangeCalendarDefaultizedProps(props, name) {
-  var _themeProps$renderLoa, _themeProps$reduceAni, _props$loading, _props$disablePast, _props$disableFuture, _themeProps$calendars;
+  var _themeProps$renderLoa, _themeProps$reduceAni, _props$loading, _props$disablePast, _props$disableFuture, _themeProps$calendars, _themeProps$disableDr;
   const utils = useUtils();
   const defaultDates = useDefaultDates();
   const themeProps = useThemeProps({
@@ -69,25 +89,27 @@ function useDateRangeCalendarDefaultizedProps(props, name) {
     disableFuture: (_props$disableFuture = props.disableFuture) != null ? _props$disableFuture : false,
     minDate: applyDefaultDate(utils, themeProps.minDate, defaultDates.minDate),
     maxDate: applyDefaultDate(utils, themeProps.maxDate, defaultDates.maxDate),
-    calendars: (_themeProps$calendars = themeProps.calendars) != null ? _themeProps$calendars : 2
+    calendars: (_themeProps$calendars = themeProps.calendars) != null ? _themeProps$calendars : 2,
+    disableDragEditing: (_themeProps$disableDr = themeProps.disableDragEditing) != null ? _themeProps$disableDr : false
   });
 }
 const useUtilityClasses = ownerState => {
   const {
-    classes
+    classes,
+    isDragging
   } = ownerState;
   const slots = {
     root: ['root'],
-    monthContainer: ['monthContainer']
+    monthContainer: ['monthContainer'],
+    dayCalendar: [isDragging && 'dayDragging']
   };
   return composeClasses(slots, getDateRangeCalendarUtilityClass, classes);
 };
 const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalendar(inProps, ref) {
   const utils = useUtils();
   const localeText = useLocaleText();
+  const now = useNow();
   const props = useDateRangeCalendarDefaultizedProps(inProps, 'MuiDateRangeCalendar');
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
   const isMobile = React.useContext(WrapperVariantContext) === 'mobile';
   const {
       value: valueProp,
@@ -102,8 +124,8 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       reduceAnimations,
       onMonthChange,
       defaultCalendarMonth,
-      currentDatePosition: currentDatePositionProp,
-      onCurrentDatePositionChange,
+      rangePosition: rangePositionProps,
+      onRangePositionChange,
       calendars,
       components,
       componentsProps,
@@ -116,7 +138,9 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       dayOfWeekFormatter,
       disableAutoMonthSwitching,
       autoFocus,
-      fixedWeekNumber
+      fixedWeekNumber,
+      disableDragEditing,
+      displayWeekNumber
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const [value, setValue] = useControlled({
@@ -125,13 +149,78 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     name: 'DateRangeCalendar',
     state: 'value'
   });
-  const [currentDatePosition, setCurrentDatePosition] = useControlled({
-    controlled: currentDatePositionProp,
+  const [rangePosition, setRangePosition] = useControlled({
+    controlled: rangePositionProps,
     default: 'start',
     name: 'DateRangeCalendar',
-    state: 'currentDatePosition'
+    state: 'rangePosition'
+  });
+  const handleDatePositionChange = useEventCallback(position => {
+    if (rangePosition !== position) {
+      setRangePosition(position);
+    }
+  });
+  const handleSelectedDayChange = useEventCallback((newDate, selectionState, allowRangeFlip = false) => {
+    const {
+      nextSelection,
+      newRange
+    } = calculateRangeChange({
+      newDate,
+      utils,
+      range: value,
+      rangePosition,
+      allowRangeFlip
+    });
+    setRangePosition(nextSelection);
+    onRangePositionChange == null ? void 0 : onRangePositionChange(nextSelection);
+    const isFullRangeSelected = rangePosition === 'end' && isRangeValid(utils, newRange);
+    setValue(newRange);
+    onChange == null ? void 0 : onChange(newRange, isFullRangeSelected ? 'finish' : 'partial');
+  });
+  const handleDrop = useEventCallback(newDate => {
+    handleSelectedDayChange(newDate, undefined, true);
+  });
+  const shouldDisableDragEditing = disableDragEditing || disabled || readOnly;
+
+  // Range going for the start of the start day to the end of the end day.
+  // This makes sure that `isWithinRange` works with any time in the start and end day.
+  const valueDayRange = React.useMemo(() => [value[0] == null || !utils.isValid(value[0]) ? value[0] : utils.startOfDay(value[0]), value[1] == null || !utils.isValid(value[1]) ? value[1] : utils.endOfDay(value[1])], [value, utils]);
+  const _useDragRange = useDragRange({
+      disableDragEditing: shouldDisableDragEditing,
+      onDrop: handleDrop,
+      onDatePositionChange: handleDatePositionChange,
+      utils,
+      dateRange: valueDayRange
+    }),
+    {
+      isDragging,
+      rangeDragDay,
+      draggingDatePosition
+    } = _useDragRange,
+    dragEventHandlers = _objectWithoutPropertiesLoose(_useDragRange, _excluded2);
+  const ownerState = _extends({}, props, {
+    isDragging
   });
-  const wrappedShouldDisableDate = shouldDisableDate && (dayToTest => shouldDisableDate == null ? void 0 : shouldDisableDate(dayToTest, currentDatePosition));
+  const classes = useUtilityClasses(ownerState);
+  const draggingRange = React.useMemo(() => {
+    if (!valueDayRange[0] || !valueDayRange[1] || !rangeDragDay) {
+      return [null, null];
+    }
+    const newRange = calculateRangeChange({
+      utils,
+      range: valueDayRange,
+      newDate: rangeDragDay,
+      rangePosition,
+      allowRangeFlip: true
+    }).newRange;
+    return newRange[0] !== null && newRange[1] !== null ? [utils.startOfDay(newRange[0]), utils.endOfDay(newRange[1])] : newRange;
+  }, [rangePosition, rangeDragDay, utils, valueDayRange]);
+  const wrappedShouldDisableDate = React.useMemo(() => {
+    if (!shouldDisableDate) {
+      return undefined;
+    }
+    return dayToTest => shouldDisableDate(dayToTest, draggingDatePosition || rangePosition);
+  }, [shouldDisableDate, rangePosition, draggingDatePosition]);
   const {
     calendarState,
     changeFocusedDay,
@@ -153,14 +242,14 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
   const prevValue = React.useRef(null);
   React.useEffect(() => {
     var _prevValue$current, _prevValue$current2;
-    const date = currentDatePosition === 'start' ? value[0] : value[1];
+    const date = rangePosition === 'start' ? value[0] : value[1];
     if (!date || !utils.isValid(date)) {
       return;
     }
-    const prevDate = currentDatePosition === 'start' ? (_prevValue$current = prevValue.current) == null ? void 0 : _prevValue$current[0] : (_prevValue$current2 = prevValue.current) == null ? void 0 : _prevValue$current2[1];
+    const prevDate = rangePosition === 'start' ? (_prevValue$current = prevValue.current) == null ? void 0 : _prevValue$current[0] : (_prevValue$current2 = prevValue.current) == null ? void 0 : _prevValue$current2[1];
     prevValue.current = value;
 
-    // The current date did not change, this call comes either from a `currentlySelectingRangeEnd` change or a change in the other date.
+    // The current date did not change, this call comes either from a `rangePosition` change or a change in the other date.
     // In both cases, we don't want to change the visible month(s).
     if (disableAutoMonthSwitching && prevDate && utils.isEqual(prevDate, date)) {
       return;
@@ -169,29 +258,13 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     const currentMonthNumber = utils.getMonth(calendarState.currentMonth);
     const requestedMonthNumber = utils.getMonth(date);
     if (!utils.isSameYear(calendarState.currentMonth, date) || requestedMonthNumber < currentMonthNumber || requestedMonthNumber > currentMonthNumber + displayingMonthRange) {
-      const newMonth = currentDatePosition === 'start' ? date :
+      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);
     }
-  }, [currentDatePosition, value]); // eslint-disable-line
+  }, [rangePosition, value]); // eslint-disable-line
 
-  const handleSelectedDayChange = useEventCallback(newDate => {
-    const {
-      nextSelection,
-      newRange
-    } = calculateRangeChange({
-      newDate,
-      utils,
-      range: value,
-      currentlySelectingRangeEnd: currentDatePosition
-    });
-    setCurrentDatePosition(nextSelection);
-    onCurrentDatePositionChange == null ? void 0 : onCurrentDatePositionChange(nextSelection);
-    const isFullRangeSelected = currentDatePosition === 'end' && isRangeValid(utils, newRange);
-    setValue(newRange);
-    onChange == null ? void 0 : onChange(newRange, isFullRangeSelected ? 'finish' : 'partial');
-  });
   const selectNextMonth = React.useCallback(() => {
     changeMonth(utils.getNextMonth(calendarState.currentMonth));
   }, [changeMonth, calendarState.currentMonth, utils]);
@@ -225,23 +298,19 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
   const CalendarTransitionProps = React.useMemo(() => ({
     onMouseLeave: () => setRangePreviewDay(null)
   }), []);
-
-  // Range going for the start of the start day to the end of the end day.
-  // This makes sure that `isWithinRange` works with any time in the start and end day.
-  const valueDayRange = React.useMemo(() => [value[0] == null || !utils.isValid(value[0]) ? value[0] : utils.startOfDay(value[0]), value[1] == null || !utils.isValid(value[1]) ? value[1] : utils.endOfDay(value[1])], [value, utils]);
   const previewingRange = calculateRangePreview({
     utils,
     range: valueDayRange,
     newDate: rangePreviewDay,
-    currentlySelectingRangeEnd: currentDatePosition
+    rangePosition
   });
-  const handlePreviewDayChange = newPreviewRequest => {
+  const handleDayMouseEnter = useEventCallback((event, newPreviewRequest) => {
     if (!isWithinRange(utils, newPreviewRequest, valueDayRange)) {
       setRangePreviewDay(newPreviewRequest);
     } else {
       setRangePreviewDay(null);
     }
-  };
+  });
   const componentsForDayCalendar = _extends({
     Day: DateRangePickerDay
   }, components);
@@ -251,17 +320,57 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       const {
         day
       } = dayOwnerState;
+      const isSelectedStartDate = isStartOfRange(utils, day, valueDayRange);
+      const isSelectedEndDate = isEndOfRange(utils, day, valueDayRange);
+      const shouldInitDragging = !shouldDisableDragEditing && valueDayRange[0] && valueDayRange[1];
+      const isElementDraggable = shouldInitDragging && (isSelectedStartDate || isSelectedEndDate);
+      let datePosition;
+      if (isSelectedStartDate) {
+        datePosition = 'start';
+      } else if (isSelectedEndDate) {
+        datePosition = 'end';
+      }
+      const isStartOfHighlighting = isDragging ? isStartOfRange(utils, day, draggingRange) : isSelectedStartDate;
+      const isEndOfHighlighting = isDragging ? isEndOfRange(utils, day, draggingRange) : isSelectedEndDate;
       return _extends({
         isPreviewing: isMobile ? false : isWithinRange(utils, day, previewingRange),
         isStartOfPreviewing: isMobile ? false : isStartOfRange(utils, day, previewingRange),
         isEndOfPreviewing: isMobile ? false : isEndOfRange(utils, day, previewingRange),
-        isHighlighting: isWithinRange(utils, day, valueDayRange),
-        isStartOfHighlighting: isStartOfRange(utils, day, valueDayRange),
-        isEndOfHighlighting: isEndOfRange(utils, day, valueDayRange),
-        onMouseEnter: () => handlePreviewDayChange(day)
+        isHighlighting: isWithinRange(utils, day, isDragging ? draggingRange : valueDayRange),
+        isStartOfHighlighting,
+        isEndOfHighlighting: isDragging ? isEndOfRange(utils, day, draggingRange) : isSelectedEndDate,
+        onMouseEnter: handleDayMouseEnter,
+        // apply selected styling to the dragging start or end day
+        isVisuallySelected: dayOwnerState.selected || isDragging && (isStartOfHighlighting || isEndOfHighlighting),
+        'data-position': datePosition
+      }, dragEventHandlers, {
+        draggable: isElementDraggable ? true : undefined
       }, (_resolveComponentProp = resolveComponentProps(componentsProps == null ? void 0 : componentsProps.day, dayOwnerState)) != null ? _resolveComponentProp : {});
     }
   });
+  const visibleMonths = React.useMemo(() => Array.from({
+    length: calendars
+  }).map((_, index) => utils.setMonth(calendarState.currentMonth, utils.getMonth(calendarState.currentMonth) + index)), [utils, calendarState.currentMonth, calendars]);
+  const focusedMonth = React.useMemo(() => {
+    var _visibleMonths$find;
+    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]));
+    }
+    if (value[1] != null) {
+      return visibleMonths.find(month => utils.isSameMonth(month, value[1]));
+    }
+    return (_visibleMonths$find = visibleMonths.find(month => utils.isSameMonth(month, now))) != null ? _visibleMonths$find : visibleMonths[0];
+  }, [utils, value, visibleMonths, autoFocus, now]);
   return /*#__PURE__*/_jsxs(DateRangeCalendarRoot, _extends({
     ref: ref,
     className: clsx(className, classes.root),
@@ -270,60 +379,58 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     children: [/*#__PURE__*/_jsx(Watermark, {
       packageName: "x-date-pickers-pro",
       releaseInfo: releaseInfo
-    }), Array.from({
-      length: calendars
-    }).map((_, index) => {
-      const monthOnIteration = utils.setMonth(calendarState.currentMonth, utils.getMonth(calendarState.currentMonth) + index);
-      return /*#__PURE__*/_jsxs(DateRangeCalendarMonthContainer, {
-        className: classes.monthContainer,
-        children: [calendars === 1 ? /*#__PURE__*/_jsx(PickersCalendarHeader, {
-          views: ['day'],
-          openView: 'day',
-          currentMonth: calendarState.currentMonth,
-          onMonthChange: (newMonth, direction) => handleChangeMonth({
-            newMonth,
-            direction
-          }),
-          minDate: minDateWithDisabled,
-          maxDate: maxDateWithDisabled,
-          disabled: disabled,
-          disablePast: disablePast,
-          disableFuture: disableFuture,
-          reduceAnimations: reduceAnimations,
-          components: components,
-          componentsProps: componentsProps
-        }) : /*#__PURE__*/_jsx(DateRangeCalendarArrowSwitcher, {
-          onGoToPrevious: selectPreviousMonth,
-          onGoToNext: selectNextMonth,
-          isPreviousHidden: index !== 0,
-          isPreviousDisabled: isPreviousMonthDisabled,
-          previousLabel: localeText.previousMonth,
-          isNextHidden: index !== calendars - 1,
-          isNextDisabled: isNextMonthDisabled,
-          nextLabel: localeText.nextMonth,
-          components: components,
-          componentsProps: componentsProps,
-          children: utils.format(monthOnIteration, 'monthAndYear')
-        }), /*#__PURE__*/_jsx(DayCalendarForRange, _extends({}, calendarState, baseDateValidationProps, commonViewProps, {
-          onMonthSwitchingAnimationEnd: onMonthSwitchingAnimationEnd,
-          onFocusedDayChange: changeFocusedDay,
-          reduceAnimations: reduceAnimations,
-          selectedDays: value,
-          onSelectedDaysChange: handleSelectedDayChange,
-          currentMonth: monthOnIteration,
-          TransitionProps: CalendarTransitionProps,
-          shouldDisableDate: wrappedShouldDisableDate,
-          showDaysOutsideCurrentMonth: showDaysOutsideCurrentMonth,
-          dayOfWeekFormatter: dayOfWeekFormatter,
-          loading: loading,
-          renderLoading: renderLoading,
-          components: componentsForDayCalendar,
-          componentsProps: componentsPropsForDayCalendar,
-          autoFocus: autoFocus,
-          fixedWeekNumber: fixedWeekNumber
-        }), index)]
-      }, index);
-    })]
+    }), visibleMonths.map((month, index) => /*#__PURE__*/_jsxs(DateRangeCalendarMonthContainer, {
+      className: classes.monthContainer,
+      children: [calendars === 1 ? /*#__PURE__*/_jsx(PickersCalendarHeader, {
+        views: ['day'],
+        openView: 'day',
+        currentMonth: calendarState.currentMonth,
+        onMonthChange: (newMonth, direction) => handleChangeMonth({
+          newMonth,
+          direction
+        }),
+        minDate: minDateWithDisabled,
+        maxDate: maxDateWithDisabled,
+        disabled: disabled,
+        disablePast: disablePast,
+        disableFuture: disableFuture,
+        reduceAnimations: reduceAnimations,
+        components: components,
+        componentsProps: componentsProps
+      }) : /*#__PURE__*/_jsx(DateRangeCalendarArrowSwitcher, {
+        onGoToPrevious: selectPreviousMonth,
+        onGoToNext: selectNextMonth,
+        isPreviousHidden: index !== 0,
+        isPreviousDisabled: isPreviousMonthDisabled,
+        previousLabel: localeText.previousMonth,
+        isNextHidden: index !== calendars - 1,
+        isNextDisabled: isNextMonthDisabled,
+        nextLabel: localeText.nextMonth,
+        components: components,
+        componentsProps: componentsProps,
+        children: utils.format(month, 'monthAndYear')
+      }), /*#__PURE__*/_jsx(DayCalendarForRange, _extends({
+        className: classes.dayCalendar
+      }, calendarState, baseDateValidationProps, commonViewProps, {
+        onMonthSwitchingAnimationEnd: onMonthSwitchingAnimationEnd,
+        onFocusedDayChange: changeFocusedDay,
+        reduceAnimations: reduceAnimations,
+        selectedDays: value,
+        onSelectedDaysChange: handleSelectedDayChange,
+        currentMonth: month,
+        TransitionProps: CalendarTransitionProps,
+        shouldDisableDate: wrappedShouldDisableDate,
+        showDaysOutsideCurrentMonth: showDaysOutsideCurrentMonth,
+        dayOfWeekFormatter: dayOfWeekFormatter,
+        loading: loading,
+        renderLoading: renderLoading,
+        components: componentsForDayCalendar,
+        componentsProps: componentsPropsForDayCalendar,
+        autoFocus: month === focusedMonth,
+        fixedWeekNumber: fixedWeekNumber,
+        displayWeekNumber: displayWeekNumber
+      }), index)]
+    }, month.toString()))]
   }));
 });
 process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
@@ -349,7 +456,6 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    * @default {}
    */
   componentsProps: PropTypes.object,
-  currentDatePosition: PropTypes.oneOf(['end', 'start']),
   /**
    * Formats the day of week displayed in the calendar header.
    * @param {string} day The day of week provided by the adapter's method `getWeekdays`.
@@ -376,6 +482,11 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    * @default false
    */
   disabled: PropTypes.bool,
+  /**
+   * If `true`, editing dates by dragging is disabled.
+   * @default false
+   */
+  disableDragEditing: PropTypes.bool,
   /**
    * If `true` disable values before the current date for date components, time for time components and both for date time components.
    * @default false
@@ -422,7 +533,6 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    * @param {PickerSelectionState | undefined} selectionState Indicates if the date range selection is complete.
    */
   onChange: PropTypes.func,
-  onCurrentDatePositionChange: PropTypes.func,
   /**
    * Callback firing on month change @DateIOType.
    * @template TDate
@@ -430,6 +540,8 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    * @returns {void|Promise} -
    */
   onMonthChange: PropTypes.func,
+  onRangePositionChange: PropTypes.func,
+  rangePosition: PropTypes.oneOf(['end', 'start']),
   /**
    * Make picker read only.
    * @default false

package/DateRangeCalendar/DateRangeCalendar.types.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
+import { SlotComponentProps } from '@mui/base';
 import { Theme } from '@mui/material/styles';
-import { BaseDateValidationProps, DefaultizedProps, ExportedDayCalendarProps, DayCalendarSlotsComponent, DayCalendarSlotsComponentsProps, PickersArrowSwitcherSlotsComponent, PickersArrowSwitcherSlotsComponentsProps, PickerSelectionState, PickersCalendarHeaderSlotsComponent, PickersCalendarHeaderSlotsComponentsProps } from '@mui/x-date-pickers/internals';
-import { DateRange, DayRangeValidationProps } from '../internal/models';
+import { BaseDateValidationProps, DefaultizedProps, ExportedDayCalendarProps, DayCalendarSlotsComponent, DayCalendarSlotsComponentsProps, PickersArrowSwitcherSlotsComponent, PickersArrowSwitcherSlotsComponentsProps, PickerSelectionState, PickersCalendarHeaderSlotsComponent, PickersCalendarHeaderSlotsComponentsProps, DayCalendarProps } from '@mui/x-date-pickers/internals';
+import { DateRange, RangePositionProps, DayRangeValidationProps } from '../internal/models';
 import { DateRangeCalendarClasses } from './dateRangeCalendarClasses';
-import { DateRangePickerDayProps } from '../DateRangePickerDay';
-export declare type DateRangePosition = 'start' | 'end';
+import { DateRangePickerDay, DateRangePickerDayProps } from '../DateRangePickerDay';
+export type DateRangePosition = 'start' | 'end';
 export interface DateRangeCalendarSlotsComponent<TDate> extends PickersArrowSwitcherSlotsComponent, Omit<DayCalendarSlotsComponent<TDate>, 'Day'>, PickersCalendarHeaderSlotsComponent {
     /**
      * Custom component for day in range pickers.
@@ -14,9 +15,13 @@ export interface DateRangeCalendarSlotsComponent<TDate> extends PickersArrowSwit
      */
     Day?: React.ElementType<DateRangePickerDayProps<TDate>>;
 }
-export interface DateRangeCalendarSlotsComponentsProps<TDate> extends PickersArrowSwitcherSlotsComponentsProps, Omit<DayCalendarSlotsComponentsProps<TDate>, 'Day'>, PickersCalendarHeaderSlotsComponentsProps<TDate> {
+export interface DateRangeCalendarSlotsComponentsProps<TDate> extends PickersArrowSwitcherSlotsComponentsProps, Omit<DayCalendarSlotsComponentsProps<TDate>, 'day'>, PickersCalendarHeaderSlotsComponentsProps<TDate> {
+    day?: SlotComponentProps<typeof DateRangePickerDay, {}, DayCalendarProps<TDate> & {
+        day: TDate;
+        selected: boolean;
+    }>;
 }
-export interface DateRangeCalendarProps<TDate> extends ExportedDayCalendarProps<TDate>, BaseDateValidationProps<TDate>, DayRangeValidationProps<TDate> {
+export interface DateRangeCalendarProps<TDate> extends ExportedDayCalendarProps<TDate>, BaseDateValidationProps<TDate>, DayRangeValidationProps<TDate>, Partial<RangePositionProps> {
     /**
      * The selected value.
      * Used when the component is controlled.
@@ -82,13 +87,19 @@ export interface DateRangeCalendarProps<TDate> extends ExportedDayCalendarProps<
      * @returns {void|Promise} -
      */
     onMonthChange?: (month: TDate) => void | Promise<void>;
-    currentDatePosition?: DateRangePosition;
-    onCurrentDatePositionChange?: (newPosition: DateRangePosition) => void;
     /**
      * The number of calendars to render.
      * @default 2
      */
     calendars?: 1 | 2 | 3;
+    /**
+     * If `true`, editing dates by dragging is disabled.
+     * @default false
+     */
+    disableDragEditing?: boolean;
+}
+export interface DateRangeCalendarOwnerState<TDate> extends DateRangeCalendarProps<TDate> {
+    isDragging: boolean;
 }
-export declare type DateRangeCalendarDefaultizedProps<TDate> = DefaultizedProps<DateRangeCalendarProps<TDate>, 'reduceAnimations' | 'calendars' | keyof BaseDateValidationProps<TDate>>;
-export declare type ExportedDateRangeCalendarProps<TDate> = Omit<DateRangeCalendarProps<TDate>, 'defaultValue' | 'value' | 'onChange' | 'changeView' | 'slideDirection' | 'currentMonth' | 'className' | 'classes' | 'components' | 'componentsProps' | 'currentDatePosition' | 'onCurrentDatePositionChange'>;
+export type DateRangeCalendarDefaultizedProps<TDate> = DefaultizedProps<DateRangeCalendarProps<TDate>, 'reduceAnimations' | 'calendars' | 'disableDragEditing' | keyof BaseDateValidationProps<TDate>>;
+export type ExportedDateRangeCalendarProps<TDate> = Omit<DateRangeCalendarProps<TDate>, 'defaultValue' | 'value' | 'onChange' | 'changeView' | 'slideDirection' | 'currentMonth' | 'className' | 'classes' | 'components' | 'componentsProps' | 'rangePosition' | 'onRangePositionChange'>;

package/DateRangeCalendar/dateRangeCalendarClasses.d.ts

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

package/DateRangeCalendar/dateRangeCalendarClasses.js

@@ -1,3 +1,3 @@
 import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
 export const getDateRangeCalendarUtilityClass = slot => generateUtilityClass('MuiDateRangeCalendar', slot);
-export const dateRangeCalendarClasses = generateUtilityClasses('MuiDateRangeCalendar', ['root', 'monthContainer']);
+export const dateRangeCalendarClasses = generateUtilityClasses('MuiDateRangeCalendar', ['root', 'monthContainer', 'dayDragging']);

package/DateRangeCalendar/useDragRange.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { MuiPickersAdapter } from '@mui/x-date-pickers/internals';
+import { DateRangePosition } from './DateRangeCalendar.types';
+import { DateRange } from '../internal/models';
+interface UseDragRangeParams<TDate> {
+    disableDragEditing?: boolean;
+    utils: MuiPickersAdapter<TDate>;
+    setRangeDragDay: (value: TDate | null) => void;
+    setIsDragging: (value: boolean) => void;
+    isDragging: boolean;
+    onDatePositionChange: (position: DateRangePosition) => void;
+    onDrop: (newDate: TDate) => void;
+    dateRange: DateRange<TDate>;
+}
+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<TDate> extends UseDragRangeEvents {
+    isDragging: boolean;
+    rangeDragDay: TDate | null;
+    draggingDatePosition: DateRangePosition | null;
+}
+export declare const useDragRange: <TDate>({ disableDragEditing, utils, onDatePositionChange, onDrop, dateRange, }: Omit<UseDragRangeParams<TDate>, "isDragging" | "setRangeDragDay" | "setIsDragging">) => UseDragRangeResponse<TDate>;
+export {};