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

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 {};

package/DateRangeCalendar/useDragRange.js

@@ -0,0 +1,238 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
+import { isEndOfRange, isStartOfRange } from '../internal/utils/date-utils';
+const resolveDateFromTarget = (target, utils) => {
+  const timestampString = target.dataset.timestamp;
+  if (!timestampString) {
+    return null;
+  }
+  const timestamp = +timestampString;
+  return utils.date(new Date(timestamp));
+};
+const isSameAsDraggingDate = event => {
+  const timestampString = event.target.dataset.timestamp;
+  return timestampString === event.dataTransfer.getData('draggingDate');
+};
+const resolveButtonElement = element => {
+  if (element) {
+    if (element instanceof HTMLButtonElement && !element.disabled) {
+      return element;
+    }
+    if (element.children.length) {
+      return resolveButtonElement(element.children[0]);
+    }
+    return null;
+  }
+  return element;
+};
+const resolveElementFromTouch = (event, ignoreTouchTarget) => {
+  var _event$changedTouches;
+  // don't parse multi-touch result
+  if (((_event$changedTouches = event.changedTouches) == null ? void 0 : _event$changedTouches.length) === 1 && event.touches.length <= 1) {
+    const element = document.elementFromPoint(event.changedTouches[0].clientX, event.changedTouches[0].clientY);
+    // `elementFromPoint` could have resolved preview div or wrapping div
+    // might need to recursively find the nested button
+    const buttonElement = resolveButtonElement(element);
+    if (ignoreTouchTarget && buttonElement === event.changedTouches[0].target) {
+      return null;
+    }
+    return buttonElement;
+  }
+  return null;
+};
+const useDragRangeEvents = ({
+  utils,
+  setRangeDragDay,
+  setIsDragging,
+  isDragging,
+  onDatePositionChange,
+  onDrop,
+  disableDragEditing,
+  dateRange
+}) => {
+  const emptyDragImgRef = React.useRef(null);
+  React.useEffect(() => {
+    // Preload the image - required for Safari support: https://stackoverflow.com/a/40923520/3303436
+    emptyDragImgRef.current = document.createElement('img');
+    emptyDragImgRef.current.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+  }, []);
+  const isElementDraggable = day => {
+    if (day == null) {
+      return false;
+    }
+    const shouldInitDragging = !disableDragEditing && !!dateRange[0] && !!dateRange[1];
+    const isSelectedStartDate = isStartOfRange(utils, day, dateRange);
+    const isSelectedEndDate = isEndOfRange(utils, day, dateRange);
+    return shouldInitDragging && (isSelectedStartDate || isSelectedEndDate);
+  };
+  const handleDragStart = useEventCallback(event => {
+    const newDate = resolveDateFromTarget(event.target, utils);
+    if (!isElementDraggable(newDate)) {
+      return;
+    }
+    event.stopPropagation();
+    if (emptyDragImgRef.current) {
+      event.dataTransfer.setDragImage(emptyDragImgRef.current, 0, 0);
+    }
+    setRangeDragDay(newDate);
+    event.dataTransfer.effectAllowed = 'move';
+    setIsDragging(true);
+    const buttonDataset = event.target.dataset;
+    if (buttonDataset.timestamp) {
+      event.dataTransfer.setData('draggingDate', buttonDataset.timestamp);
+    }
+    if (buttonDataset.position) {
+      onDatePositionChange(buttonDataset.position);
+    }
+  });
+  const handleTouchStart = useEventCallback(event => {
+    const target = resolveElementFromTouch(event);
+    if (!target) {
+      return;
+    }
+    const newDate = resolveDateFromTarget(target, utils);
+    if (!isElementDraggable(newDate)) {
+      return;
+    }
+    setRangeDragDay(newDate);
+    setIsDragging(true);
+    const button = event.target;
+    const buttonDataset = button.dataset;
+    if (buttonDataset.position) {
+      onDatePositionChange(buttonDataset.position);
+    }
+  });
+  const handleDragEnter = useEventCallback(event => {
+    if (!isDragging) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    event.dataTransfer.dropEffect = 'move';
+    setRangeDragDay(resolveDateFromTarget(event.target, utils));
+  });
+  const handleTouchMove = useEventCallback(event => {
+    const target = resolveElementFromTouch(event);
+    if (!isDragging || !target) {
+      return;
+    }
+    const newDate = resolveDateFromTarget(target, utils);
+    if (newDate) {
+      setRangeDragDay(newDate);
+    }
+  });
+  const handleDragLeave = useEventCallback(event => {
+    if (!isDragging) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+  });
+  const handleDragOver = useEventCallback(event => {
+    if (!isDragging) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    event.dataTransfer.dropEffect = 'move';
+  });
+  const handleTouchEnd = useEventCallback(event => {
+    if (!isDragging) {
+      return;
+    }
+    setRangeDragDay(null);
+    setIsDragging(false);
+    const target = resolveElementFromTouch(event, true);
+    if (!target) {
+      return;
+    }
+
+    // make sure the focused element is the element where touch ended
+    target.focus();
+    const newDate = resolveDateFromTarget(target, utils);
+    if (newDate) {
+      onDrop(newDate);
+    }
+  });
+  const handleDragEnd = useEventCallback(event => {
+    if (!isDragging) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    setIsDragging(false);
+    setRangeDragDay(null);
+  });
+  const handleDrop = useEventCallback(event => {
+    if (!isDragging) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    setIsDragging(false);
+    setRangeDragDay(null);
+    // make sure the focused element is the element where drop ended
+    event.currentTarget.focus();
+    if (isSameAsDraggingDate(event)) {
+      return;
+    }
+    const newDate = resolveDateFromTarget(event.target, utils);
+    if (newDate) {
+      onDrop(newDate);
+    }
+  });
+  return {
+    onDragStart: handleDragStart,
+    onDragEnter: handleDragEnter,
+    onDragLeave: handleDragLeave,
+    onDragOver: handleDragOver,
+    onDragEnd: handleDragEnd,
+    onDrop: handleDrop,
+    onTouchStart: handleTouchStart,
+    onTouchMove: handleTouchMove,
+    onTouchEnd: handleTouchEnd
+  };
+};
+export const useDragRange = ({
+  disableDragEditing,
+  utils,
+  onDatePositionChange,
+  onDrop,
+  dateRange
+}) => {
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [rangeDragDay, setRangeDragDay] = React.useState(null);
+  const handleRangeDragDayChange = useEventCallback(val => {
+    if (!utils.isEqual(val, rangeDragDay)) {
+      setRangeDragDay(val);
+    }
+  });
+  const draggingDatePosition = React.useMemo(() => {
+    const [start, end] = dateRange;
+    if (rangeDragDay) {
+      if (start && utils.isBefore(rangeDragDay, start)) {
+        return 'start';
+      }
+      if (end && utils.isAfter(rangeDragDay, end)) {
+        return 'end';
+      }
+    }
+    return null;
+  }, [dateRange, rangeDragDay, utils]);
+  const dragRangeEvents = useDragRangeEvents({
+    utils,
+    onDatePositionChange,
+    onDrop,
+    setIsDragging,
+    isDragging,
+    setRangeDragDay: handleRangeDragDayChange,
+    disableDragEditing,
+    dateRange
+  });
+  return React.useMemo(() => _extends({
+    isDragging,
+    rangeDragDay,
+    draggingDatePosition
+  }, !disableDragEditing ? dragRangeEvents : {}), [isDragging, rangeDragDay, draggingDatePosition, disableDragEditing, dragRangeEvents]);
+};

package/DateRangePicker/DateRangePicker.d.ts

@@ -23,7 +23,7 @@ export interface DateRangePickerProps<TDate> extends Omit<DesktopDateRangePicker
      */
     componentsProps?: DateRangePickerSlotsComponentsProps<TDate>;
 }
-declare type DateRangePickerComponent = (<TDate>(props: DateRangePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
+type DateRangePickerComponent = (<TDate>(props: DateRangePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
     propTypes?: any;
 };
 /**

package/DateRangePicker/DateRangePickerInput.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DateInputProps, ExportedDateInputProps, MuiTextFieldProps } from '@mui/x-date-pickers/internals';
-import { CurrentlySelectingRangeEndProps, DateRange } from '../internal/models/range';
+import { RangePositionProps, DateRange } from '../internal/models/range';
 import { DateRangeValidationError } from '../internal/hooks/validation/useDateRangeValidation';
 import { DateRangePickerInputClasses } from './dateRangePickerInputClasses';
 export interface ExportedDateRangePickerInputProps<TDate> extends Omit<ExportedDateInputProps<TDate>, 'renderInput'> {
@@ -28,13 +28,13 @@ export interface ExportedDateRangePickerInputProps<TDate> extends Omit<ExportedD
     renderInput: (startProps: MuiTextFieldProps, endProps: MuiTextFieldProps) => React.ReactElement;
     onChange: (date: DateRange<TDate>, keyboardInputValue?: string) => void;
 }
-export interface DateRangePickerInputProps<TDate> extends Omit<ExportedDateRangePickerInputProps<TDate>, 'value'>, Omit<DateInputProps<TDate>, keyof ExportedDateRangePickerInputProps<TDate> | 'value' | 'validationError'>, CurrentlySelectingRangeEndProps {
+export interface DateRangePickerInputProps<TDate> extends Omit<ExportedDateRangePickerInputProps<TDate>, 'value'>, Omit<DateInputProps<TDate>, keyof ExportedDateRangePickerInputProps<TDate> | 'value' | 'validationError'>, RangePositionProps {
     validationError: DateRangeValidationError;
     value: DateRange<TDate>;
     classes?: Partial<DateRangePickerInputClasses>;
     mobile?: boolean;
 }
-declare type DatePickerInputComponent = <TDate>(props: DateRangePickerInputProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element;
+type DatePickerInputComponent = <TDate>(props: DateRangePickerInputProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element;
 /**
  * @ignore - internal component.
  */

package/DateRangePicker/DateRangePickerInput.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["currentlySelectingRangeEnd", "disableOpenPicker", "onBlur", "onChange", "open", "openPicker", "value", "value", "readOnly", "renderInput", "setCurrentlySelectingRangeEnd", "TextFieldProps", "validationError", "className", "mobile"];
+const _excluded = ["rangePosition", "onRangePositionChange", "disableOpenPicker", "onBlur", "onChange", "open", "openPicker", "value", "value", "readOnly", "renderInput", "TextFieldProps", "validationError", "className", "mobile"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled, useThemeProps } from '@mui/material/styles';
@@ -40,7 +40,8 @@ export const DateRangePickerInput = /*#__PURE__*/React.forwardRef(function DateR
     name: 'MuiDateRangePickerInput'
   });
   const {
-      currentlySelectingRangeEnd,
+      rangePosition,
+      onRangePositionChange,
       disableOpenPicker,
       onBlur,
       onChange,
@@ -49,7 +50,6 @@ export const DateRangePickerInput = /*#__PURE__*/React.forwardRef(function DateR
       value: [start, end],
       readOnly,
       renderInput,
-      setCurrentlySelectingRangeEnd,
       TextFieldProps,
       validationError: [startValidationError, endValidationError],
       className,
@@ -64,14 +64,14 @@ export const DateRangePickerInput = /*#__PURE__*/React.forwardRef(function DateR
     if (!open) {
       return;
     }
-    if (currentlySelectingRangeEnd === 'start') {
+    if (rangePosition === 'start') {
       var _startRef$current;
       (_startRef$current = startRef.current) == null ? void 0 : _startRef$current.focus();
-    } else if (currentlySelectingRangeEnd === 'end') {
+    } else if (rangePosition === 'end') {
       var _endRef$current;
       (_endRef$current = endRef.current) == null ? void 0 : _endRef$current.focus();
     }
-  }, [currentlySelectingRangeEnd, open]);
+  }, [rangePosition, 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
@@ -84,8 +84,8 @@ export const DateRangePickerInput = /*#__PURE__*/React.forwardRef(function DateR
   };
   const openRangeStartSelection = event => {
     event.stopPropagation();
-    if (setCurrentlySelectingRangeEnd) {
-      setCurrentlySelectingRangeEnd('start');
+    if (onRangePositionChange) {
+      onRangePositionChange('start');
     }
     if (!readOnly && !disableOpenPicker) {
       openPicker();
@@ -93,21 +93,21 @@ export const DateRangePickerInput = /*#__PURE__*/React.forwardRef(function DateR
   };
   const openRangeEndSelection = event => {
     event.stopPropagation();
-    if (setCurrentlySelectingRangeEnd) {
-      setCurrentlySelectingRangeEnd('end');
+    if (onRangePositionChange) {
+      onRangePositionChange('end');
     }
     if (!readOnly && !disableOpenPicker) {
       openPicker();
     }
   };
   const focusOnRangeEnd = () => {
-    if (open && setCurrentlySelectingRangeEnd) {
-      setCurrentlySelectingRangeEnd('end');
+    if (open && onRangePositionChange) {
+      onRangePositionChange('end');
     }
   };
   const focusOnRangeStart = () => {
-    if (open && setCurrentlySelectingRangeEnd) {
-      setCurrentlySelectingRangeEnd('start');
+    if (open && onRangePositionChange) {
+      onRangePositionChange('start');
     }
   };
   const startInputProps = useMaskedInput(_extends({}, other, {
@@ -118,7 +118,7 @@ export const DateRangePickerInput = /*#__PURE__*/React.forwardRef(function DateR
     validationError: startValidationError !== null,
     TextFieldProps: _extends({}, TextFieldProps, {
       inputRef: startRef,
-      focused: open ? currentlySelectingRangeEnd === 'start' : undefined
+      focused: open ? rangePosition === 'start' : undefined
     }, !readOnly && !other.disabled && {
       onClick: openRangeStartSelection
     }),
@@ -137,7 +137,7 @@ export const DateRangePickerInput = /*#__PURE__*/React.forwardRef(function DateR
     validationError: endValidationError !== null,
     TextFieldProps: _extends({}, TextFieldProps, {
       inputRef: endRef,
-      focused: open ? currentlySelectingRangeEnd === 'end' : undefined
+      focused: open ? rangePosition === 'end' : undefined
     }, !readOnly && !other.disabled && {
       onClick: openRangeEndSelection
     }),

package/DateRangePicker/DateRangePickerToolbar.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { BaseToolbarProps, ExportedBaseToolbarProps } from '@mui/x-date-pickers/internals';
-import { DateRange, CurrentlySelectingRangeEndProps } from '../internal/models';
+import { DateRange, RangePositionProps } from '../internal/models';
 import { DateRangePickerToolbarClasses } from './dateRangePickerToolbarClasses';
-export interface DateRangePickerToolbarProps<TDate> extends Omit<BaseToolbarProps<DateRange<TDate>, 'day'>, 'views' | 'view' | 'onViewChange' | 'onChange' | 'isLandscape'>, CurrentlySelectingRangeEndProps {
+export interface DateRangePickerToolbarProps<TDate> extends Omit<BaseToolbarProps<DateRange<TDate>, 'day'>, 'views' | 'view' | 'onViewChange' | 'onChange' | 'isLandscape'>, RangePositionProps {
     classes?: Partial<DateRangePickerToolbarClasses>;
 }
 export interface ExportedDateRangePickerToolbarProps extends ExportedBaseToolbarProps {

package/DateRangePicker/DateRangePickerToolbar.js

@@ -44,11 +44,11 @@ export const DateRangePickerToolbar = /*#__PURE__*/React.forwardRef(function Dat
     name: 'MuiDateRangePickerToolbar'
   });
   const {
-    currentlySelectingRangeEnd,
     value: [start, end],
     isMobileKeyboardViewOpen,
-    setCurrentlySelectingRangeEnd,
     toggleMobileKeyboardView,
+    rangePosition,
+    onRangePositionChange,
     toolbarFormat
   } = props;
   const localeText = useLocaleText();
@@ -69,16 +69,16 @@ export const DateRangePickerToolbar = /*#__PURE__*/React.forwardRef(function Dat
       children: [/*#__PURE__*/_jsx(PickersToolbarButton, {
         variant: start !== null ? 'h5' : 'h6',
         value: startDateValue,
-        selected: currentlySelectingRangeEnd === 'start',
-        onClick: () => setCurrentlySelectingRangeEnd('start')
+        selected: rangePosition === 'start',
+        onClick: () => onRangePositionChange('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')
+        selected: rangePosition === 'end',
+        onClick: () => onRangePositionChange('end')
       })]
     })
   });

package/DateRangePicker/DateRangePickerView.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ExportedDateCalendarProps, PickerStatePickerProps, BaseDateValidationProps, DayValidationProps, ExportedBaseToolbarProps } from '@mui/x-date-pickers/internals';
-import { DateRange, CurrentlySelectingRangeEndProps } from '../internal/models/range';
+import { DateRange, RangePositionProps } from '../internal/models/range';
 import { DayRangeValidationProps } from '../internal/models/dateRange';
 import { DateRangePickerViewMobileSlotsComponent, DateRangePickerViewMobileSlotsComponentsProps } from './DateRangePickerViewMobile';
 import { DateRangePickerInputProps } from './DateRangePickerInput';
@@ -41,12 +41,12 @@ export interface ExportedDateRangePickerViewProps<TDate> extends ExportedDateRan
      */
     className?: string;
 }
-interface DateRangePickerViewProps<TDate> extends CurrentlySelectingRangeEndProps, ExportedDateRangePickerViewProps<TDate>, PickerStatePickerProps<DateRange<TDate>>, Required<BaseDateValidationProps<TDate>> {
+interface DateRangePickerViewProps<TDate> extends RangePositionProps, ExportedDateRangePickerViewProps<TDate>, PickerStatePickerProps<DateRange<TDate>>, Required<BaseDateValidationProps<TDate>> {
     calendars: 1 | 2 | 3;
     open: boolean;
     DateInputProps: DateRangePickerInputProps<TDate>;
 }
-declare type DateRangePickerViewComponent = (<TDate>(props: DateRangePickerViewProps<TDate>) => JSX.Element) & {
+type DateRangePickerViewComponent = (<TDate>(props: DateRangePickerViewProps<TDate>) => JSX.Element) & {
     propTypes?: any;
 };
 export declare const DateRangePickerView: DateRangePickerViewComponent;

package/DateRangePicker/DateRangePickerView.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["calendars", "className", "currentlySelectingRangeEnd", "value", "DateInputProps", "defaultCalendarMonth", "disableAutoMonthSwitching", "disableFuture", "disableHighlightToday", "disablePast", "isMobileKeyboardViewOpen", "maxDate", "minDate", "onDateChange", "onMonthChange", "open", "reduceAnimations", "setCurrentlySelectingRangeEnd", "shouldDisableDate", "showToolbar", "toggleMobileKeyboardView", "components", "componentsProps"];
+const _excluded = ["calendars", "className", "value", "DateInputProps", "defaultCalendarMonth", "disableAutoMonthSwitching", "disableFuture", "disableHighlightToday", "disablePast", "isMobileKeyboardViewOpen", "maxDate", "minDate", "onDateChange", "onMonthChange", "open", "reduceAnimations", "rangePosition", "onRangePositionChange", "shouldDisableDate", "showToolbar", "toggleMobileKeyboardView", "components", "componentsProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Watermark } from '@mui/x-license-pro';
@@ -21,7 +21,6 @@ function DateRangePickerViewRaw(props) {
   const {
       calendars,
       className,
-      currentlySelectingRangeEnd,
       value,
       DateInputProps,
       defaultCalendarMonth,
@@ -35,7 +34,8 @@ function DateRangePickerViewRaw(props) {
       onDateChange,
       onMonthChange,
       reduceAnimations = defaultReduceAnimations,
-      setCurrentlySelectingRangeEnd,
+      rangePosition,
+      onRangePositionChange,
       shouldDisableDate,
       showToolbar,
       toggleMobileKeyboardView,
@@ -45,7 +45,7 @@ function DateRangePickerViewRaw(props) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const utils = useUtils();
   const wrapperVariant = React.useContext(WrapperVariantContext);
-  const wrappedShouldDisableDate = shouldDisableDate && (dayToTest => shouldDisableDate == null ? void 0 : shouldDisableDate(dayToTest, currentlySelectingRangeEnd));
+  const wrappedShouldDisableDate = shouldDisableDate && (dayToTest => shouldDisableDate == null ? void 0 : shouldDisableDate(dayToTest, rangePosition));
   const [start, end] = value;
   const {
     changeMonth,
@@ -67,14 +67,14 @@ function DateRangePickerViewRaw(props) {
   const prevValue = React.useRef(null);
   React.useEffect(() => {
     var _prevValue$current, _prevValue$current2;
-    const date = currentlySelectingRangeEnd === 'start' ? start : end;
+    const date = rangePosition === 'start' ? start : end;
     if (!date || !utils.isValid(date)) {
       return;
     }
-    const prevDate = currentlySelectingRangeEnd === '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;
@@ -83,12 +83,12 @@ function DateRangePickerViewRaw(props) {
     const currentMonthNumber = utils.getMonth(calendarState.currentMonth);
     const requestedMonthNumber = utils.getMonth(date);
     if (!utils.isSameYear(calendarState.currentMonth, date) || requestedMonthNumber < currentMonthNumber || requestedMonthNumber > currentMonthNumber + displayingMonthRange) {
-      const newMonth = currentlySelectingRangeEnd === '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);
     }
-  }, [currentlySelectingRangeEnd, value]); // eslint-disable-line
+  }, [rangePosition, value]); // eslint-disable-line
 
   const handleSelectedDayChange = React.useCallback(newDate => {
     const {
@@ -98,12 +98,12 @@ function DateRangePickerViewRaw(props) {
       newDate,
       utils,
       range: value,
-      currentlySelectingRangeEnd
+      rangePosition
     });
-    setCurrentlySelectingRangeEnd(nextSelection);
-    const isFullRangeSelected = currentlySelectingRangeEnd === 'end' && isRangeValid(utils, newRange);
+    onRangePositionChange(nextSelection);
+    const isFullRangeSelected = rangePosition === 'end' && isRangeValid(utils, newRange);
     onDateChange(newRange, wrapperVariant, isFullRangeSelected ? 'finish' : 'partial');
-  }, [currentlySelectingRangeEnd, value, onDateChange, setCurrentlySelectingRangeEnd, utils, wrapperVariant]);
+  }, [rangePosition, value, onDateChange, onRangePositionChange, utils, wrapperVariant]);
   const shouldRenderToolbar = showToolbar != null ? showToolbar : wrapperVariant !== 'desktop';
   const Toolbar = components == null ? void 0 : components.Toolbar;
   const renderView = () => {
@@ -115,7 +115,7 @@ function DateRangePickerViewRaw(props) {
       disableHighlightToday,
       onMonthSwitchingAnimationEnd,
       changeMonth,
-      currentlySelectingRangeEnd,
+      rangePosition,
       disableFuture,
       disablePast,
       minDate,
@@ -146,8 +146,8 @@ function DateRangePickerViewRaw(props) {
       value: value,
       isMobileKeyboardViewOpen: isMobileKeyboardViewOpen,
       toggleMobileKeyboardView: toggleMobileKeyboardView,
-      currentlySelectingRangeEnd: currentlySelectingRangeEnd,
-      setCurrentlySelectingRangeEnd: setCurrentlySelectingRangeEnd
+      rangePosition: rangePosition,
+      onRangePositionChange: onRangePositionChange
     })), isMobileKeyboardViewOpen ? /*#__PURE__*/_jsx(MobileKeyboardInputView, {
       children: /*#__PURE__*/_jsx(DateRangePickerInput, _extends({
         disableOpenPicker: true,

package/DateRangePicker/DateRangePickerViewDesktop.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SlotComponentProps } from '@mui/base/utils';
 import { DayCalendarProps, DayValidationProps, ExportedPickersArrowSwitcherProps, PickersArrowSwitcherSlotsComponent, PickersArrowSwitcherSlotsComponentsProps, DayCalendarSlotsComponent, DayCalendarSlotsComponentsProps } from '@mui/x-date-pickers/internals';
-import { DateRange } from '../internal/models/range';
+import { DateRange, RangePosition } from '../internal/models/range';
 import { DateRangePickerDay, DateRangePickerDayProps } from '../DateRangePickerDay';
 import { DateRangePickerViewDesktopClasses } from './dateRangePickerViewDesktopClasses';
 export interface ExportedDateRangePickerViewDesktopProps {
@@ -38,7 +38,7 @@ export interface DateRangePickerViewDesktopProps<TDate> extends ExportedDateRang
     calendars: 1 | 2 | 3;
     value: DateRange<TDate>;
     changeMonth: (date: TDate) => void;
-    currentlySelectingRangeEnd: 'start' | 'end';
+    rangePosition: RangePosition;
     classes?: Partial<DateRangePickerViewDesktopClasses>;
 }
 /**

package/DateRangePicker/DateRangePickerViewDesktop.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["calendars", "changeMonth", "components", "componentsProps", "currentlySelectingRangeEnd", "currentMonth", "value", "disableFuture", "disablePast", "maxDate", "minDate", "onSelectedDaysChange", "className", "classes"];
+const _excluded = ["calendars", "changeMonth", "components", "componentsProps", "rangePosition", "currentMonth", "value", "disableFuture", "disablePast", "maxDate", "minDate", "onSelectedDaysChange", "className", "classes"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled, useThemeProps } from '@mui/material/styles';
@@ -83,7 +83,7 @@ export function DateRangePickerViewDesktop(inProps) {
       changeMonth,
       components,
       componentsProps,
-      currentlySelectingRangeEnd,
+      rangePosition,
       currentMonth,
       value,
       disableFuture,
@@ -117,7 +117,7 @@ export function DateRangePickerViewDesktop(inProps) {
     utils,
     range: valueDayRange,
     newDate: rangePreviewDay,
-    currentlySelectingRangeEnd
+    rangePosition
   });
   const handleSelectedDayChange = React.useCallback(day => {
     setRangePreviewDay(null);