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

package/CHANGELOG.md

@@ -3,6 +3,119 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.0.0-alpha.11
+
+_Dec 8, 2022_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Add dragging support for the new Date Range Picker (`NextDateRangePicker`) (#6763) @LukasTy
+- ⚡️ Improve performance of the `day` view (#7066) @flaviendelangle
+- ✨ Fix lazy-loading feature not working in `DataGridPremium` (#7124) @m4theushw
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v6.0.0-alpha.11` / `@mui/x-data-grid-pro@v6.0.0-alpha.11` / `@mui/x-data-grid-premium@v6.0.0-alpha.11`
+
+#### Breaking changes
+
+- The `filterPanelOperators` translation key was renamed to `filterPanelOperator` (#7062) @MBilalShafi
+- The `components.Header` slot was removed. Use `components.Toolbar` slot instead (#6999) @cherniavskii
+
+#### Changes
+
+- [DataGrid] Fix rows not rendering properly after height change (#6892) @MBilalShafi
+- [DataGrid] Remove `Header` slot (#6999) @cherniavskii
+- [DataGrid] Rename `filterPanelOperators` -> `filterPanelOperator` (#7062) @MBilalShafi
+- [DataGridPremium] Add support for lazy-loading (#7124) @m4theushw
+- [DataGridPremium] Pass `groupId` to aggregation function (#7003) @m4theushw
+
+### `@mui/x-date-pickers@v6.0.0-alpha.11` / `@mui/x-date-pickers-pro@v6.0.0-alpha.11`
+
+#### Breaking changes
+
+- Remove the callback version of the `action` prop on the `actionBar` slot (#7038) @flaviendelangle
+
+  The `action` prop of the `actionBar` slot is no longer supporting a callback.
+  Instead, you can pass a callback at the slot level:
+
+  ```diff
+   <DatePicker
+     componentsProps={{
+  -     actionBar: {
+  -       actions: (variant) => (variant === 'desktop' ? [] : ['clear']),
+  -     },
+  +     actionBar: ({ wrapperVariant }) => ({
+  +       actions: wrapperVariant === 'desktop' ? [] : ['clear'],
+  +     }),
+     }}
+   />
+  ```
+
+- The `selectedDays` prop has been removed from the `Day` component (#7066) @flaviendelangle
+  If you need to access it, you can control the value and pass it to the slot using `componentsProps`:
+
+  ```tsx
+  function CustomDay({ selectedDay, ...other }) {
+    // do something with 'selectedDay'
+    return <PickersDay {...other} />;
+  }
+  function App() {
+    const [value, setValue] = React.useState(null);
+    return (
+      <DatePicker
+        value={value}
+        onChange={(newValue) => setValue(newValue)}
+        components={{ Day: CustomDay }}
+        componentsProps={{
+          day: { selectedDay: value },
+        }}
+      />
+    );
+  }
+  ```
+
+- The `currentlySelectingRangeEnd` / `setCurrentlySelectingRangeEnd` props on the Date Range Picker toolbar have been renamed to `rangePosition` / `onRangePositionChange` (#6989) @flaviendelangle
+
+  ```diff
+   const CustomToolbarComponent = props => (
+     <div>
+  -    <button onChange={() => props.setCurrentlySelectingRangeEnd('end')}>Edit end date</button>
+  +    <button onClick={() => props.onRangePositionChange('end')}>Edit end date</button>
+  -    <div>Is editing end date: {props.currentlySelectingRangeEnd === 'end'}</div>
+  +    <div>Is editing end date: {props.rangePosition === 'end'}</div>
+     </div>
+   )
+   <DateRangePicker
+     components={{
+       Toolbar: CustomToolbarComponent
+     }}
+   />
+  ```
+
+#### Changes
+
+- [DateRangePicker] Add dragging support to edit range (#6763) @LukasTy
+- [pickers] Fix lost props on Date Range Pickers (#7092) @flaviendelangle
+- [pickers] Fix toolbar on the new range pickers (#6989) @flaviendelangle
+- [pickers] Improve performance of `DayCalendar` (#7066) @flaviendelangle
+- [pickers] Initialize date without time when selecting year or month (#7120) @LukasTy
+- [pickers] Remove the callback version of the `action` prop in the `actionBar` component slot (#7038) @flaviendelangle
+
+### Docs
+
+- [docs] Add `GridCell` change in migration guide (#7087) @MBilalShafi
+- [docs] Fix API page ad space regression (#7051) @oliviertassinari
+- [docs] Update localization doc to use existing locale (#7102) @LukasTy
+
+### Core
+
+- [core] Add codemod to move l10n translation (#7027) @alexfauquette
+- [core] Add notes to remove the legacy pickers internals (#7133) @flaviendelangle
+- [core] Remove `internals-fields` imports (#7119) @flaviendelangle
+- [core] Remove unused code (#7094) @flaviendelangle
+- [core] Sync `ApiPage.js` with monorepo (#7073) @oliviertassinari
+- [test] Fix karma-mocha assertion error messages (#7054) @cherniavskii
+
 ## 6.0.0-alpha.10
 
 _Dec 1, 2022_

package/DateRangeCalendar/DateRangeCalendar.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DateRangeCalendarProps } from './DateRangeCalendar.types';
-declare type DateRangeCalendarComponent = (<TDate>(props: DateRangeCalendarProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
+type DateRangeCalendarComponent = (<TDate>(props: DateRangeCalendarProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
     propTypes?: any;
 };
 declare const DateRangeCalendar: DateRangeCalendarComponent;

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';
@@ -12,11 +13,12 @@ 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 { 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,16 +89,19 @@ 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);
 };
@@ -86,8 +109,6 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
   const utils = useUtils();
   const localeText = useLocaleText();
   const props = useDateRangeCalendarDefaultizedProps(inProps, 'MuiDateRangeCalendar');
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
   const isMobile = React.useContext(WrapperVariantContext) === 'mobile';
   const {
       value: valueProp,
@@ -102,8 +123,8 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       reduceAnimations,
       onMonthChange,
       defaultCalendarMonth,
-      currentDatePosition: currentDatePositionProp,
-      onCurrentDatePositionChange,
+      rangePosition: rangePositionProps,
+      onRangePositionChange,
       calendars,
       components,
       componentsProps,
@@ -116,7 +137,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 +148,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 wrappedShouldDisableDate = shouldDisableDate && (dayToTest => shouldDisableDate == null ? void 0 : shouldDisableDate(dayToTest, currentDatePosition));
+  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 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 +241,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 +257,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 +297,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 +319,37 @@ 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]);
   return /*#__PURE__*/_jsxs(DateRangeCalendarRoot, _extends({
     ref: ref,
     className: clsx(className, classes.root),
@@ -270,60 +358,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: autoFocus,
+        fixedWeekNumber: fixedWeekNumber,
+        displayWeekNumber: displayWeekNumber
+      }), index)]
+    }, month.toString()))]
   }));
 });
 process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
@@ -349,7 +435,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 +461,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 +512,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 +519,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'>;