@mui/x-date-pickers-pro 8.0.0-alpha.0 → 8.0.0-alpha.10

package/modern/internals/hooks/useNullablePickerRangePositionContext.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { PickerRangePositionContext } from "../../hooks/usePickerRangePositionContext.js";
+
+/**
+ * Returns information about the range position of the picker that wraps the current component.
+ * If no picker wraps the current component, returns `null`.
+ */
+export function useNullablePickerRangePositionContext() {
+  return React.useContext(PickerRangePositionContext);
+}

package/modern/internals/hooks/useRangePosition.js

@@ -25,6 +25,6 @@ export const useRangePosition = (props, singleInputFieldRef) => {
   });
   return {
     rangePosition,
-    onRangePositionChange: handleRangePositionChange
+    setRangePosition: handleRangePositionChange
   };
 };

package/modern/internals/hooks/useStaticRangePicker/useStaticRangePicker.js

@@ -1,12 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["props", "ref"];
+const _excluded = ["props"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
 import { PickersLayout } from '@mui/x-date-pickers/PickersLayout';
-import { usePicker, DIALOG_WIDTH, PickerProvider } from '@mui/x-date-pickers/internals';
+import { usePicker, DIALOG_WIDTH, PickerProvider, mergeSx } from '@mui/x-date-pickers/internals';
 import { useRangePosition } from "../useRangePosition.js";
+import { PickerRangePositionContext } from "../../../hooks/usePickerRangePositionContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PickerStaticLayout = styled(PickersLayout)(({
   theme
@@ -22,25 +23,18 @@ const PickerStaticLayout = styled(PickersLayout)(({
  */
 export const useStaticRangePicker = _ref => {
   let {
-      props,
-      ref
+      props
     } = _ref,
     pickerParams = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
     localeText,
     slots,
     slotProps,
-    className,
-    sx,
     displayStaticWrapperAs,
     autoFocus
   } = props;
+  const rangePositionResponse = useRangePosition(props);
   const {
-    rangePosition,
-    onRangePositionChange
-  } = useRangePosition(props);
-  const {
-    layoutProps,
     providerProps,
     renderCurrentView
   } = usePicker(_extends({}, pickerParams, {
@@ -48,29 +42,22 @@ export const useStaticRangePicker = _ref => {
     autoFocusView: autoFocus ?? false,
     fieldRef: undefined,
     localeText,
-    additionalViewProps: {
-      rangePosition,
-      onRangePositionChange
-    },
-    wrapperVariant: displayStaticWrapperAs
+    variant: displayStaticWrapperAs
   }));
   const Layout = slots?.layout ?? PickerStaticLayout;
-  const slotPropsForLayout = _extends({}, slotProps, {
-    toolbar: _extends({}, slotProps?.toolbar, {
-      rangePosition,
-      onRangePositionChange
-    })
-  });
-  const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
-    children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps?.layout, {
-      slots: slots,
-      slotProps: slotPropsForLayout,
-      sx: [...(Array.isArray(sx) ? sx : [sx]), ...(Array.isArray(slotProps?.layout?.sx) ? slotProps.layout.sx : [slotProps?.layout?.sx])],
-      className: clsx(className, slotProps?.layout?.className),
-      ref: ref,
-      children: renderCurrentView()
+  const renderPicker = () => /*#__PURE__*/_jsx(PickerRangePositionContext.Provider, {
+    value: rangePositionResponse,
+    children: /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
+      children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
+        slots: slots,
+        slotProps: slotProps,
+        sx: mergeSx(providerProps.contextValue.rootSx, slotProps?.layout?.sx),
+        className: clsx(providerProps.contextValue.rootClassName, slotProps?.layout?.className),
+        ref: providerProps.contextValue.rootRef,
+        children: renderCurrentView()
+      }))
     }))
-  }));
+  });
   return {
     renderPicker
   };

package/modern/internals/models/index.js

@@ -1,4 +1,3 @@
 export * from "./dateRange.js";
 export * from "./dateTimeRange.js";
-export * from "./timeRange.js";
 export * from "./rangePickerProps.js";

package/modern/internals/utils/createMultiInputRangeField/createMultiInputRangeField.js

@@ -0,0 +1,136 @@
+'use client';
+
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["slots", "slotProps", "className", "classes"];
+import * as React from 'react';
+import clsx from 'clsx';
+import Stack from '@mui/material/Stack';
+import MuiTextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import { styled, useThemeProps } from '@mui/material/styles';
+import composeClasses from '@mui/utils/composeClasses';
+import useSlotProps from '@mui/utils/useSlotProps';
+import useForkRef from '@mui/utils/useForkRef';
+import { cleanFieldResponse, useFieldOwnerState, useNullablePickerContext } from '@mui/x-date-pickers/internals';
+import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
+import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
+import { useMultiInputRangeField } from "../../../hooks/useMultiInputRangeField/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function createMultiInputRangeField({
+  useManager,
+  name,
+  getUtilityClass
+}) {
+  const useUtilityClasses = classes => {
+    const slots = {
+      root: ['root'],
+      separator: ['separator']
+    };
+    return composeClasses(slots, getUtilityClass, classes);
+  };
+  const MultiInputRangeFieldRoot = styled(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/_jsx(Stack, _extends({
+    ref: ref,
+    spacing: 2,
+    direction: "row",
+    alignItems: "center"
+  }, props))), {
+    name,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+  })({});
+  const MultiInputRangeFieldSeparator = styled(Typography, {
+    name,
+    slot: 'Separator',
+    overridesResolver: (props, styles) => styles.separator
+  })({
+    lineHeight: '1.4375em' // 23px
+  });
+  const MultiInputRangeField = /*#__PURE__*/React.forwardRef(function MultiInputRangeField(props, ref) {
+    const themeProps = useThemeProps({
+      props,
+      // eslint-disable-next-line material-ui/mui-name-matches-component-name
+      name
+    });
+    const manager = useManager({
+      enableAccessibleFieldDOMStructure: props.enableAccessibleFieldDOMStructure,
+      dateSeparator: props.dateSeparator
+    });
+    const {
+      internalProps,
+      forwardedProps
+    } = useSplitFieldProps(themeProps, manager.valueType);
+    const {
+        slots,
+        slotProps,
+        className,
+        classes: classesProp
+      } = forwardedProps,
+      otherForwardedProps = _objectWithoutPropertiesLoose(forwardedProps, _excluded);
+    const classes = useUtilityClasses(classesProp);
+    const ownerState = useFieldOwnerState(internalProps);
+    const pickerContext = useNullablePickerContext();
+    const handleRef = useForkRef(ref, pickerContext?.rootRef);
+    const Root = slots?.root ?? MultiInputRangeFieldRoot;
+    const rootProps = useSlotProps({
+      elementType: Root,
+      externalSlotProps: slotProps?.root,
+      externalForwardedProps: otherForwardedProps,
+      additionalProps: {
+        ref: handleRef
+      },
+      ownerState,
+      className: clsx(className, classes.root)
+    });
+    const startTextFieldProps = useSlotProps({
+      elementType: PickersTextField,
+      externalSlotProps: slotProps?.textField,
+      ownerState: _extends({}, ownerState, {
+        position: 'start'
+      })
+    });
+    const endTextFieldProps = useSlotProps({
+      elementType: PickersTextField,
+      externalSlotProps: slotProps?.textField,
+      ownerState: _extends({}, ownerState, {
+        position: 'end'
+      })
+    });
+    const {
+      startDate,
+      endDate,
+      enableAccessibleFieldDOMStructure
+    } = useMultiInputRangeField({
+      manager,
+      internalProps,
+      startForwardedProps: startTextFieldProps,
+      endForwardedProps: endTextFieldProps
+    });
+    const Separator = slots?.separator ?? MultiInputRangeFieldSeparator;
+    const separatorProps = useSlotProps({
+      elementType: Separator,
+      externalSlotProps: slotProps?.separator,
+      additionalProps: {
+        children: internalProps.dateSeparator ?? '–'
+      },
+      ownerState,
+      className: classes.separator
+    });
+    const {
+      textFieldProps: startDateProps
+    } = cleanFieldResponse(startDate);
+    const {
+      textFieldProps: endDateProps
+    } = cleanFieldResponse(endDate);
+    const TextField = slots?.textField ?? (enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField);
+    return /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, {
+      children: [/*#__PURE__*/_jsx(TextField, _extends({
+        fullWidth: true
+      }, startDateProps)), /*#__PURE__*/_jsx(Separator, _extends({}, separatorProps)), /*#__PURE__*/_jsx(TextField, _extends({
+        fullWidth: true
+      }, endDateProps))]
+    }));
+  });
+  MultiInputRangeField.fieldType = 'multi-input';
+  return MultiInputRangeField;
+}

package/modern/internals/utils/createMultiInputRangeField/index.js

@@ -0,0 +1,2 @@
+export { createMultiInputRangeField } from "./createMultiInputRangeField.js";
+export { useMultiInputRangeField as unstable_useMultiInputRangeField } from "../../../hooks/useMultiInputRangeField/useMultiInputRangeField.js";

package/modern/internals/utils/date-range-manager.js

@@ -5,9 +5,11 @@ export function calculateRangeChange({
   newDate: selectedDate,
   rangePosition,
   allowRangeFlip = false,
-  shouldMergeDateAndTime = false
+  shouldMergeDateAndTime = false,
+  referenceDate
 }) {
-  const [start, end] = range;
+  const start = !utils.isValid(range[0]) ? null : range[0];
+  const end = !utils.isValid(range[1]) ? null : range[1];
   if (shouldMergeDateAndTime && selectedDate) {
     // If there is a date already selected, then we want to keep its time
     if (start && rangePosition === 'start') {
@@ -17,29 +19,30 @@ export function calculateRangeChange({
       selectedDate = mergeDateAndTime(utils, selectedDate, end);
     }
   }
+  const newSelectedDate = referenceDate && selectedDate && shouldMergeDateAndTime ? mergeDateAndTime(utils, selectedDate, referenceDate) : selectedDate;
   if (rangePosition === 'start') {
     const truthyResult = allowRangeFlip ? {
       nextSelection: 'start',
-      newRange: [end, selectedDate]
+      newRange: [end, newSelectedDate]
     } : {
       nextSelection: 'end',
-      newRange: [selectedDate, null]
+      newRange: [newSelectedDate, null]
     };
-    return Boolean(end) && utils.isAfter(selectedDate, end) ? truthyResult : {
+    return Boolean(end) && utils.isAfter(newSelectedDate, end) ? truthyResult : {
       nextSelection: 'end',
-      newRange: [selectedDate, end]
+      newRange: [newSelectedDate, end]
     };
   }
   const truthyResult = allowRangeFlip ? {
     nextSelection: 'end',
-    newRange: [selectedDate, start]
+    newRange: [newSelectedDate, start]
   } : {
     nextSelection: 'end',
-    newRange: [selectedDate, null]
+    newRange: [newSelectedDate, null]
   };
-  return Boolean(start) && utils.isBeforeDay(selectedDate, start) ? truthyResult : {
+  return Boolean(start) && utils.isBeforeDay(newSelectedDate, start) ? truthyResult : {
     nextSelection: 'start',
-    newRange: [start, selectedDate]
+    newRange: [start, newSelectedDate]
   };
 }
 export function calculateRangePreview(options) {

package/modern/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTczMTUzODgwMDAwMA==";
+  const releaseInfo = "MTczODI5OTYwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/modern/internals/utils/valueManagers.js

@@ -12,8 +12,8 @@ export const rangeValueManager = {
         referenceDate: referenceDateProp
       } = _ref,
       params = _objectWithoutPropertiesLoose(_ref, _excluded);
-    const shouldKeepStartDate = value[0] != null && params.utils.isValid(value[0]);
-    const shouldKeepEndDate = value[1] != null && params.utils.isValid(value[1]);
+    const shouldKeepStartDate = params.utils.isValid(value[0]);
+    const shouldKeepEndDate = params.utils.isValid(value[1]);
     if (shouldKeepStartDate && shouldKeepEndDate) {
       return value;
     }
@@ -26,8 +26,8 @@ export const rangeValueManager = {
   hasError: error => error[0] != null || error[1] != null,
   defaultErrorState: [null, null],
   getTimezone: (utils, value) => {
-    const timezoneStart = value[0] == null || !utils.isValid(value[0]) ? null : utils.getTimezone(value[0]);
-    const timezoneEnd = value[1] == null || !utils.isValid(value[1]) ? null : utils.getTimezone(value[1]);
+    const timezoneStart = utils.isValid(value[0]) ? utils.getTimezone(value[0]) : null;
+    const timezoneEnd = utils.isValid(value[1]) ? utils.getTimezone(value[1]) : null;
     if (timezoneStart != null && timezoneEnd != null && timezoneStart !== timezoneEnd) {
       throw new Error('MUI X: The timezone of the start and the end date should be the same.');
     }
@@ -39,8 +39,8 @@ export const getRangeFieldValueManager = ({
   dateSeparator = '–'
 }) => ({
   updateReferenceValue: (utils, value, prevReferenceValue) => {
-    const shouldKeepStartDate = value[0] != null && utils.isValid(value[0]);
-    const shouldKeepEndDate = value[1] != null && utils.isValid(value[1]);
+    const shouldKeepStartDate = utils.isValid(value[0]);
+    const shouldKeepEndDate = utils.isValid(value[1]);
     if (!shouldKeepStartDate && !shouldKeepEndDate) {
       return prevReferenceValue;
     }
@@ -111,7 +111,7 @@ export const getRangeFieldValueManager = ({
       },
       getNewValuesFromNewActiveDate: newActiveDate => ({
         value: updateDateInRange(newActiveDate, state.value),
-        referenceValue: newActiveDate == null || !utils.isValid(newActiveDate) ? state.referenceValue : updateDateInRange(newActiveDate, state.referenceValue)
+        referenceValue: !utils.isValid(newActiveDate) ? state.referenceValue : updateDateInRange(newActiveDate, state.referenceValue)
       })
     };
   }

package/modern/managers/index.js

@@ -0,0 +1,3 @@
+export { useDateRangeManager } from "./useDateRangeManager.js";
+export { useTimeRangeManager } from "./useTimeRangeManager.js";
+export { useDateTimeRangeManager } from "./useDateTimeRangeManager.js";

package/modern/managers/useDateRangeManager.js

@@ -0,0 +1,33 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { getDateFieldInternalPropsDefaults } from '@mui/x-date-pickers/internals';
+import { getRangeFieldValueManager, rangeValueManager } from "../internals/utils/valueManagers.js";
+import { validateDateRange } from "../validation/index.js";
+export function useDateRangeManager(parameters = {}) {
+  const {
+    enableAccessibleFieldDOMStructure = true,
+    dateSeparator
+  } = parameters;
+  return React.useMemo(() => ({
+    valueType: 'date',
+    validator: validateDateRange,
+    internal_valueManager: rangeValueManager,
+    internal_fieldValueManager: getRangeFieldValueManager({
+      dateSeparator
+    }),
+    internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
+    internal_applyDefaultsToFieldInternalProps: ({
+      internalProps,
+      utils,
+      defaultDates
+    }) => _extends({}, internalProps, getDateFieldInternalPropsDefaults({
+      defaultDates,
+      utils,
+      internalProps
+    })),
+    // TODO v8: Add a real aria label before moving the opening logic to the field on range pickers.
+    internal_getOpenPickerButtonAriaLabel: () => ''
+  }), [enableAccessibleFieldDOMStructure, dateSeparator]);
+}

package/modern/managers/useDateTimeRangeManager.js

@@ -0,0 +1,33 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { getDateTimeFieldInternalPropsDefaults } from '@mui/x-date-pickers/internals';
+import { getRangeFieldValueManager, rangeValueManager } from "../internals/utils/valueManagers.js";
+import { validateDateTimeRange } from "../validation/index.js";
+export function useDateTimeRangeManager(parameters = {}) {
+  const {
+    enableAccessibleFieldDOMStructure = true,
+    dateSeparator
+  } = parameters;
+  return React.useMemo(() => ({
+    valueType: 'date-time',
+    validator: validateDateTimeRange,
+    internal_valueManager: rangeValueManager,
+    internal_fieldValueManager: getRangeFieldValueManager({
+      dateSeparator
+    }),
+    internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
+    internal_applyDefaultsToFieldInternalProps: ({
+      internalProps,
+      utils,
+      defaultDates
+    }) => _extends({}, internalProps, getDateTimeFieldInternalPropsDefaults({
+      internalProps,
+      utils,
+      defaultDates
+    })),
+    // TODO v8: Add a real aria label before moving the opening logic to the field on range pickers.
+    internal_getOpenPickerButtonAriaLabel: () => ''
+  }), [enableAccessibleFieldDOMStructure, dateSeparator]);
+}

package/modern/managers/useTimeRangeManager.js

@@ -0,0 +1,31 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { getTimeFieldInternalPropsDefaults } from '@mui/x-date-pickers/internals';
+import { getRangeFieldValueManager, rangeValueManager } from "../internals/utils/valueManagers.js";
+import { validateTimeRange } from "../validation/index.js";
+export function useTimeRangeManager(parameters = {}) {
+  const {
+    enableAccessibleFieldDOMStructure = true,
+    dateSeparator
+  } = parameters;
+  return React.useMemo(() => ({
+    valueType: 'time',
+    validator: validateTimeRange,
+    internal_valueManager: rangeValueManager,
+    internal_fieldValueManager: getRangeFieldValueManager({
+      dateSeparator
+    }),
+    internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
+    internal_applyDefaultsToFieldInternalProps: ({
+      internalProps,
+      utils
+    }) => _extends({}, internalProps, getTimeFieldInternalPropsDefaults({
+      utils,
+      internalProps
+    })),
+    // TODO v8: Add a real aria label before moving the opening logic to the field on range pickers.
+    internal_getOpenPickerButtonAriaLabel: () => ''
+  }), [enableAccessibleFieldDOMStructure, dateSeparator]);
+}

package/modern/models/index.js

@@ -1,5 +1,4 @@
-export * from "./dateRange.js";
 export * from "./fields.js";
 export * from "./range.js";
 export * from "./validation.js";
-export * from "./multiInputRangeFieldClasses.js";
+export {};

package/modern/validation/validateDateRange.js

@@ -9,6 +9,14 @@ import { rangeValueManager } from "../internals/utils/valueManagers.js";
  * Validation props used by the Date Range Picker, Date Range Field and Date Range Calendar components.
  */
 
+/**
+ * Validation props as received by the validateDateRange method.
+ */
+
+/**
+ * Name of the props that should be defaulted before being passed to the validateDateRange method.
+ */
+
 export const validateDateRange = ({
   adapter,
   value,

package/modern/validation/validateDateTimeRange.js

@@ -9,6 +9,10 @@ import { rangeValueManager } from "../internals/utils/valueManagers.js";
  * Validation props used by the Date Time Range Picker and Date Time Range Field.
  */
 
+/**
+ * Validation props as received by the validateDateTimeRange method.
+ */
+
 export const validateDateTimeRange = ({
   adapter,
   value,

package/modern/validation/validateTimeRange.js

@@ -6,6 +6,14 @@ import { rangeValueManager } from "../internals/utils/valueManagers.js";
  * Validation props used by the Time Range Picker and Time Range Field.
  */
 
+/**
+ * Validation props as received by the validateTimeRange method.
+ */
+
+/**
+ * Name of the props that should be defaulted before being passed to the validateTimeRange method.
+ */
+
 export const validateTimeRange = ({
   adapter,
   value,

package/node/{AdapterDateFnsJalaliV3 → AdapterDateFnsJalaliV2}/index.js

@@ -9,4 +9,4 @@ Object.defineProperty(exports, "AdapterDateFnsJalali", {
     return _AdapterDateFnsJalaliV.AdapterDateFnsJalali;
   }
 });
-var _AdapterDateFnsJalaliV = require("@mui/x-date-pickers/AdapterDateFnsJalaliV3");
+var _AdapterDateFnsJalaliV = require("@mui/x-date-pickers/AdapterDateFnsJalaliV2");

package/node/{AdapterDateFnsV3 → AdapterDateFnsV2}/index.js

@@ -9,4 +9,4 @@ Object.defineProperty(exports, "AdapterDateFns", {
     return _AdapterDateFnsV.AdapterDateFns;
   }
 });
-var _AdapterDateFnsV = require("@mui/x-date-pickers/AdapterDateFnsV3");
+var _AdapterDateFnsV = require("@mui/x-date-pickers/AdapterDateFnsV2");

package/node/DateRangeCalendar/DateRangeCalendar.js

@@ -32,6 +32,7 @@ var _useDragRange2 = require("./useDragRange");
 var _useRangePosition = require("../internals/hooks/useRangePosition");
 var _dimensions = require("../internals/constants/dimensions");
 var _PickersRangeCalendarHeader = require("../PickersRangeCalendarHeader");
+var _useNullablePickerRangePositionContext = require("../internals/hooks/useNullablePickerRangePositionContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["value", "defaultValue", "referenceDate", "onChange", "className", "classes", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "rangePosition", "defaultRangePosition", "onRangePositionChange", "calendars", "currentMonthCalendarPosition", "slots", "slotProps", "loading", "renderLoading", "disableHighlightToday", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber", "timezone", "availableRangePositions", "views", "view", "openTo", "onViewChange"],
   _excluded2 = ["isDragging", "rangeDragDay", "draggingDatePosition"];
@@ -82,16 +83,16 @@ const DayCalendarForRange = InnerDayCalendarForRange;
 function useDateRangeCalendarDefaultizedProps(props, name) {
   const utils = (0, _internals.useUtils)();
   const defaultDates = (0, _internals.useDefaultDates)();
-  const defaultReduceAnimations = (0, _internals.useDefaultReduceAnimations)();
   const themeProps = (0, _styles.useThemeProps)({
     props,
     name
   });
+  const reduceAnimations = (0, _internals.useReduceAnimations)(themeProps.reduceAnimations);
   return (0, _extends2.default)({}, themeProps, {
     renderLoading: themeProps.renderLoading ?? (() => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       children: "..."
     })),
-    reduceAnimations: themeProps.reduceAnimations ?? defaultReduceAnimations,
+    reduceAnimations,
     loading: props.loading ?? false,
     disablePast: props.disablePast ?? false,
     disableFuture: props.disableFuture ?? false,
@@ -142,8 +143,8 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
       reduceAnimations,
       onMonthChange,
       rangePosition: rangePositionProp,
-      defaultRangePosition: inDefaultRangePosition,
-      onRangePositionChange: inOnRangePositionChange,
+      defaultRangePosition: defaultRangePositionProp,
+      onRangePositionChange: onRangePositionChangeProp,
       calendars,
       currentMonthCalendarPosition = 1,
       slots,
@@ -168,6 +169,7 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
       onViewChange
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rangePositionContext = (0, _useNullablePickerRangePositionContext.useNullablePickerRangePositionContext)();
   const {
     value,
     handleValueChange,
@@ -176,6 +178,7 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
     name: 'DateRangeCalendar',
     timezone: timezoneProp,
     value: valueProp,
+    referenceDate,
     defaultValue,
     onChange,
     valueManager: _valueManagers.rangeValueManager
@@ -196,15 +199,15 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
   const id = (0, _useId.default)();
   const {
     rangePosition,
-    onRangePositionChange
+    setRangePosition
   } = (0, _useRangePosition.useRangePosition)({
-    rangePosition: rangePositionProp,
-    defaultRangePosition: inDefaultRangePosition,
-    onRangePositionChange: inOnRangePositionChange
+    rangePosition: rangePositionProp ?? rangePositionContext?.rangePosition,
+    defaultRangePosition: defaultRangePositionProp,
+    onRangePositionChange: onRangePositionChangeProp ?? rangePositionContext?.setRangePosition
   });
   const handleDatePositionChange = (0, _useEventCallback.default)(position => {
     if (rangePosition !== position) {
-      onRangePositionChange(position);
+      setRangePosition(position);
     }
   });
   const handleSelectedDayChange = (0, _useEventCallback.default)((newDate, selectionState, allowRangeFlip = false) => {
@@ -217,11 +220,12 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
       range: value,
       rangePosition,
       allowRangeFlip,
-      shouldMergeDateAndTime: true
+      shouldMergeDateAndTime: true,
+      referenceDate
     });
     const isNextSectionAvailable = availableRangePositions.includes(nextSelection);
     if (isNextSectionAvailable) {
-      onRangePositionChange(nextSelection);
+      setRangePosition(nextSelection);
     }
     const isFullRangeSelected = rangePosition === 'end' && (0, _dateUtils.isRangeValid)(utils, newRange);
     setValueAndGoToNextView(newRange, isFullRangeSelected || !isNextSectionAvailable ? 'finish' : 'partial', view);
@@ -233,7 +237,7 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
 
   // 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 valueDayRange = React.useMemo(() => [!utils.isValid(value[0]) ? value[0] : utils.startOfDay(value[0]), !utils.isValid(value[1]) ? value[1] : utils.endOfDay(value[1])], [value, utils]);
   const _useDragRange = (0, _useDragRange2.useDragRange)({
       disableDragEditing: shouldDisableDragEditing,
       onDrop: handleDrop,
@@ -321,7 +325,7 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
   const prevValue = React.useRef(null);
   React.useEffect(() => {
     const date = rangePosition === 'start' ? value[0] : value[1];
-    if (!date || !utils.isValid(date)) {
+    if (!utils.isValid(date)) {
       return;
     }
     const prevDate = rangePosition === 'start' ? prevValue.current?.[0] : prevValue.current?.[1];