@mui/x-date-pickers-pro 6.12.0 → 6.13.0

package/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -38,6 +38,7 @@ export const useDesktopRangePicker = _ref => {
     reduceAnimations
   } = props;
   const fieldContainerRef = React.useRef(null);
+  const anchorRef = React.useRef(null);
   const popperRef = React.useRef(null);
   const {
     rangePosition,
@@ -104,7 +105,8 @@ export const useDesktopRangePicker = _ref => {
     singleInputFieldRef,
     pickerSlotProps: slotProps,
     pickerSlots: slots,
-    fieldProps
+    fieldProps,
+    anchorRef
   });
   const slotPropsForLayout = _extends({}, slotProps, {
     toolbar: _extends({}, slotProps == null ? void 0 : slotProps.toolbar, {
@@ -117,8 +119,9 @@ export const useDesktopRangePicker = _ref => {
     localeText: localeText,
     children: [/*#__PURE__*/_jsx(Field, _extends({}, enrichedFieldProps)), /*#__PURE__*/_jsx(PickersPopper, _extends({
       role: "tooltip",
+      placement: "bottom-start",
       containerRef: popperRef,
-      anchorEl: fieldContainerRef.current,
+      anchorEl: anchorRef.current,
       onBlur: handleBlur
     }, actions, {
       open: open,

package/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.types.d.ts

@@ -15,7 +15,7 @@ export interface DesktopRangeOnlyPickerProps<TDate> extends BaseNonStaticPickerP
      */
     autoFocus?: boolean;
 }
-export interface UseDesktopRangePickerProps<TDate, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<any, TView, any, any>> extends DesktopRangeOnlyPickerProps<TDate>, BasePickerProps<DateRange<TDate>, TDate, TView, TError, TExternalProps, DesktopRangePickerAdditionalViewProps> {
+export interface UseDesktopRangePickerProps<TDate, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<any, any, TView, any, any>> extends DesktopRangeOnlyPickerProps<TDate>, BasePickerProps<DateRange<TDate>, TDate, TView, TError, TExternalProps, DesktopRangePickerAdditionalViewProps> {
     /**
      * Overridable component slots.
      * @default {}

package/internals/hooks/useEnrichedRangePickerFieldProps.d.ts

@@ -30,7 +30,7 @@ export interface RangePickerFieldSlotsComponent {
     TextField?: React.ElementType<TextFieldProps>;
 }
 export interface RangePickerFieldSlotsComponentsProps<TDate> {
-    field?: SlotComponentProps<React.ElementType<BaseMultiInputFieldProps<DateRange<TDate>, TDate, RangeFieldSection, unknown>>, {}, UsePickerProps<DateRange<TDate>, any, RangeFieldSection, any, any, any>>;
+    field?: SlotComponentProps<React.ElementType<BaseMultiInputFieldProps<DateRange<TDate>, TDate, RangeFieldSection, unknown>>, {}, UsePickerProps<DateRange<TDate>, TDate, any, RangeFieldSection, any, any, any>>;
     fieldRoot?: SlotComponentProps<typeof Stack, {}, Record<string, any>>;
     fieldSeparator?: SlotComponentProps<typeof Typography, {}, Record<string, any>>;
     textField?: SlotComponentProps<typeof TextField, {}, UseDateRangeFieldProps<TDate> & {
@@ -50,5 +50,6 @@ export interface UseEnrichedRangePickerFieldPropsParams<TDate, TView extends Dat
     pickerSlotProps: RangePickerFieldSlotsComponentsProps<TDate> | undefined;
     pickerSlots: UncapitalizeObjectKeys<RangePickerFieldSlotsComponent> | undefined;
     fieldProps: FieldProps;
+    anchorRef?: React.Ref<HTMLDivElement>;
 }
 export declare const useEnrichedRangePickerFieldProps: <TDate, TView extends DateOrTimeViewWithMeridiem, TError>(params: UseEnrichedRangePickerFieldPropsParams<TDate, TView, TError, BaseFieldProps<DateRange<TDate>, TDate, RangeFieldSection, TError>>) => BaseMultiInputFieldProps<DateRange<TDate>, TDate, RangeFieldSection, TError> | BaseSingleInputFieldProps<DateRange<TDate>, TDate, RangeFieldSection, TError>;

package/internals/hooks/useEnrichedRangePickerFieldProps.js

@@ -17,7 +17,8 @@ const useMultiInputFieldSlotProps = ({
   localeText: inLocaleText,
   pickerSlotProps,
   pickerSlots,
-  fieldProps
+  fieldProps,
+  anchorRef
 }) => {
   const localeText = useLocaleText();
   const startRef = React.useRef(null);
@@ -65,7 +66,9 @@ const useMultiInputFieldSlotProps = ({
   }, fieldProps.slots);
   const slotProps = _extends({}, fieldProps.slotProps, {
     textField: ownerState => {
+      const resolvedComponentProps = resolveComponentProps(pickerSlotProps == null ? void 0 : pickerSlotProps.textField, ownerState);
       let inputProps;
+      let InputProps;
       if (ownerState.position === 'start') {
         var _inLocaleText$start;
         inputProps = _extends({
@@ -79,6 +82,11 @@ const useMultiInputFieldSlotProps = ({
         }, wrapperVariant === 'mobile' && {
           readOnly: true
         });
+        if (anchorRef) {
+          InputProps = _extends({}, resolvedComponentProps == null ? void 0 : resolvedComponentProps.InputProps, {
+            ref: anchorRef
+          });
+        }
       } else {
         var _inLocaleText$end;
         inputProps = _extends({
@@ -95,7 +103,9 @@ const useMultiInputFieldSlotProps = ({
       }
       return _extends({}, labelId != null && {
         id: `${labelId}-${ownerState.position}`
-      }, inputProps, resolveComponentProps(pickerSlotProps == null ? void 0 : pickerSlotProps.textField, ownerState));
+      }, inputProps, resolveComponentProps(pickerSlotProps == null ? void 0 : pickerSlotProps.textField, ownerState), {
+        InputProps
+      });
     },
     root: ownerState => {
       const rootProps = {
@@ -126,7 +136,8 @@ const useSingleInputFieldSlotProps = ({
   singleInputFieldRef,
   pickerSlots,
   pickerSlotProps,
-  fieldProps
+  fieldProps,
+  anchorRef
 }) => {
   const inputRef = React.useRef(null);
   const handleInputRef = useForkRef(inInputRef, inputRef);
@@ -176,6 +187,9 @@ const useSingleInputFieldSlotProps = ({
     onKeyDown: onSpaceOrEnter(openPicker, fieldProps.onKeyDown),
     onSelectedSectionsChange: handleSelectedSectionsChange,
     onBlur,
+    InputProps: _extends({
+      ref: anchorRef
+    }, fieldProps == null ? void 0 : fieldProps.InputProps),
     focused: open
   }, labelId != null && {
     id: labelId

package/internals/hooks/useMobileRangePicker/useMobileRangePicker.types.d.ts

@@ -11,7 +11,7 @@ export interface UseMobileRangePickerSlotsComponentsProps<TDate, TView extends D
 }
 export interface MobileRangeOnlyPickerProps<TDate> extends BaseNonStaticPickerProps, UsePickerValueNonStaticProps<TDate | null, RangeFieldSection>, UsePickerViewsNonStaticProps, BaseRangeNonStaticPickerProps, UseRangePositionProps {
 }
-export interface UseMobileRangePickerProps<TDate, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<any, TView, any, any>> extends MobileRangeOnlyPickerProps<TDate>, BasePickerProps<DateRange<TDate>, TDate, TView, TError, TExternalProps, MobileRangePickerAdditionalViewProps> {
+export interface UseMobileRangePickerProps<TDate, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<any, any, TView, any, any>> extends MobileRangeOnlyPickerProps<TDate>, BasePickerProps<DateRange<TDate>, TDate, TView, TError, TExternalProps, MobileRangePickerAdditionalViewProps> {
     /**
      * Overridable component slots.
      * @default {}

package/internals/models/fields.d.ts

@@ -17,6 +17,9 @@ export interface MultiInputFieldSlotTextFieldProps {
     onKeyDown?: React.KeyboardEventHandler;
     onFocus?: React.FocusEventHandler;
     focused?: boolean;
+    InputProps?: {
+        ref?: React.Ref<HTMLDivElement>;
+    };
 }
 /**
  * Props the `root` slot of the multi input field can receive when used inside a picker.

package/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY5MjkxNDQwMDAwMA==";
+  const releaseInfo = "MTY5NDEyMDQwMDAwMA==";
   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/legacy/DateRangeCalendar/DateRangeCalendar.js

@@ -2,7 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _excluded = ["value", "defaultValue", "onChange", "className", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "defaultCalendarMonth", "rangePosition", "defaultRangePosition", "onRangePositionChange", "calendars", "currentMonthCalendarPosition", "components", "componentsProps", "slots", "slotProps", "loading", "renderLoading", "disableHighlightToday", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber", "timezone"],
+var _excluded = ["value", "defaultValue", "referenceDate", "onChange", "className", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "defaultCalendarMonth", "rangePosition", "defaultRangePosition", "onRangePositionChange", "calendars", "currentMonthCalendarPosition", "components", "componentsProps", "slots", "slotProps", "loading", "renderLoading", "disableHighlightToday", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber", "timezone"],
   _excluded2 = ["isDragging", "rangeDragDay", "draggingDatePosition"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -120,6 +120,7 @@ var DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalendar
   });
   var valueProp = props.value,
     defaultValue = props.defaultValue,
+    referenceDate = props.referenceDate,
     onChange = props.onChange,
     className = props.className,
     disableFuture = props.disableFuture,
@@ -246,6 +247,7 @@ var DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalendar
   }, [shouldDisableDate, rangePosition, draggingDatePosition]);
   var _useCalendarState = useCalendarState({
       value: value[0] || value[1],
+      referenceDate: referenceDate,
       defaultCalendarMonth: defaultCalendarMonth,
       disableFuture: disableFuture,
       disablePast: disablePast,
@@ -637,6 +639,11 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
    */
   reduceAnimations: PropTypes.bool,
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`.
+   */
+  referenceDate: PropTypes.any,
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.

package/legacy/DateRangePicker/DateRangePicker.js

@@ -254,6 +254,11 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
    */
   reduceAnimations: PropTypes.bool,
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate: PropTypes.any,
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.

package/legacy/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -263,6 +263,11 @@ DesktopDateRangePicker.propTypes = {
    * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
    */
   reduceAnimations: PropTypes.bool,
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate: PropTypes.any,
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.

package/legacy/MobileDateRangePicker/MobileDateRangePicker.js

@@ -263,6 +263,11 @@ MobileDateRangePicker.propTypes = {
    * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
    */
   reduceAnimations: PropTypes.bool,
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate: PropTypes.any,
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.

package/legacy/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -203,10 +203,6 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onChange: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onClick: PropTypes.func,
   /**
    * Callback fired when the error associated to the current value changes.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/legacy/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -236,10 +236,6 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.propTypes
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onChange: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onClick: PropTypes.func,
   /**
    * Callback fired when the error associated to the current value changes.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/legacy/SingleInputTimeRangeField/SingleInputTimeRangeField.js

@@ -220,10 +220,6 @@ process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.propTypes = {
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onChange: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onClick: PropTypes.func,
   /**
    * Callback fired when the error associated to the current value changes.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/legacy/StaticDateRangePicker/StaticDateRangePicker.js

@@ -213,6 +213,11 @@ StaticDateRangePicker.propTypes = {
    * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
    */
   reduceAnimations: PropTypes.bool,
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate: PropTypes.any,
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.

package/legacy/dateRangeViewRenderers/dateRangeViewRenderers.js

@@ -8,6 +8,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export var renderDateRangeViewCalendar = function renderDateRangeViewCalendar(_ref) {
   var value = _ref.value,
     defaultValue = _ref.defaultValue,
+    referenceDate = _ref.referenceDate,
     onChange = _ref.onChange,
     className = _ref.className,
     classes = _ref.classes,
@@ -45,6 +46,7 @@ export var renderDateRangeViewCalendar = function renderDateRangeViewCalendar(_r
   return /*#__PURE__*/_jsx(DateRangeCalendar, {
     value: value,
     defaultValue: defaultValue,
+    referenceDate: referenceDate,
     onChange: onChange,
     className: className,
     classes: classes,

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v6.12.0
+ * @mui/x-date-pickers-pro v6.13.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/legacy/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -34,6 +34,7 @@ export var useDesktopRangePicker = function useDesktopRangePicker(_ref) {
     localeText = props.localeText,
     reduceAnimations = props.reduceAnimations;
   var fieldContainerRef = React.useRef(null);
+  var anchorRef = React.useRef(null);
   var popperRef = React.useRef(null);
   var _useRangePosition = useRangePosition(props),
     rangePosition = _useRangePosition.rangePosition,
@@ -98,7 +99,8 @@ export var useDesktopRangePicker = function useDesktopRangePicker(_ref) {
     singleInputFieldRef: singleInputFieldRef,
     pickerSlotProps: slotProps,
     pickerSlots: slots,
-    fieldProps: fieldProps
+    fieldProps: fieldProps,
+    anchorRef: anchorRef
   });
   var slotPropsForLayout = _extends({}, slotProps, {
     toolbar: _extends({}, slotProps == null ? void 0 : slotProps.toolbar, {
@@ -112,8 +114,9 @@ export var useDesktopRangePicker = function useDesktopRangePicker(_ref) {
       localeText: localeText,
       children: [/*#__PURE__*/_jsx(Field, _extends({}, enrichedFieldProps)), /*#__PURE__*/_jsx(PickersPopper, _extends({
         role: "tooltip",
+        placement: "bottom-start",
         containerRef: popperRef,
-        anchorEl: fieldContainerRef.current,
+        anchorEl: anchorRef.current,
         onBlur: handleBlur
       }, actions, {
         open: open,

package/legacy/internals/hooks/useEnrichedRangePickerFieldProps.js

@@ -17,7 +17,8 @@ var useMultiInputFieldSlotProps = function useMultiInputFieldSlotProps(_ref) {
     inLocaleText = _ref.localeText,
     pickerSlotProps = _ref.pickerSlotProps,
     pickerSlots = _ref.pickerSlots,
-    fieldProps = _ref.fieldProps;
+    fieldProps = _ref.fieldProps,
+    anchorRef = _ref.anchorRef;
   var localeText = useLocaleText();
   var startRef = React.useRef(null);
   var endRef = React.useRef(null);
@@ -64,7 +65,9 @@ var useMultiInputFieldSlotProps = function useMultiInputFieldSlotProps(_ref) {
   }, fieldProps.slots);
   var slotProps = _extends({}, fieldProps.slotProps, {
     textField: function textField(ownerState) {
+      var resolvedComponentProps = resolveComponentProps(pickerSlotProps == null ? void 0 : pickerSlotProps.textField, ownerState);
       var inputProps;
+      var InputProps;
       if (ownerState.position === 'start') {
         var _inLocaleText$start;
         inputProps = _extends({
@@ -78,6 +81,11 @@ var useMultiInputFieldSlotProps = function useMultiInputFieldSlotProps(_ref) {
         }, wrapperVariant === 'mobile' && {
           readOnly: true
         });
+        if (anchorRef) {
+          InputProps = _extends({}, resolvedComponentProps == null ? void 0 : resolvedComponentProps.InputProps, {
+            ref: anchorRef
+          });
+        }
       } else {
         var _inLocaleText$end;
         inputProps = _extends({
@@ -94,7 +102,9 @@ var useMultiInputFieldSlotProps = function useMultiInputFieldSlotProps(_ref) {
       }
       return _extends({}, labelId != null && {
         id: "".concat(labelId, "-").concat(ownerState.position)
-      }, inputProps, resolveComponentProps(pickerSlotProps == null ? void 0 : pickerSlotProps.textField, ownerState));
+      }, inputProps, resolveComponentProps(pickerSlotProps == null ? void 0 : pickerSlotProps.textField, ownerState), {
+        InputProps: InputProps
+      });
     },
     root: function root(ownerState) {
       var rootProps = {
@@ -125,7 +135,8 @@ var useSingleInputFieldSlotProps = function useSingleInputFieldSlotProps(_ref2)
     singleInputFieldRef = _ref2.singleInputFieldRef,
     pickerSlots = _ref2.pickerSlots,
     pickerSlotProps = _ref2.pickerSlotProps,
-    fieldProps = _ref2.fieldProps;
+    fieldProps = _ref2.fieldProps,
+    anchorRef = _ref2.anchorRef;
   var inputRef = React.useRef(null);
   var handleInputRef = useForkRef(inInputRef, inputRef);
   var handleFieldRef = useForkRef(fieldProps.unstableFieldRef, singleInputFieldRef);
@@ -174,6 +185,9 @@ var useSingleInputFieldSlotProps = function useSingleInputFieldSlotProps(_ref2)
     onKeyDown: onSpaceOrEnter(openPicker, fieldProps.onKeyDown),
     onSelectedSectionsChange: handleSelectedSectionsChange,
     onBlur: onBlur,
+    InputProps: _extends({
+      ref: anchorRef
+    }, fieldProps == null ? void 0 : fieldProps.InputProps),
     focused: open
   }, labelId != null && {
     id: labelId

package/legacy/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export var getReleaseInfo = function getReleaseInfo() {
-  var releaseInfo = "MTY5MjkxNDQwMDAwMA==";
+  var releaseInfo = "MTY5NDEyMDQwMDAwMA==";
   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/DateRangeCalendar/DateRangeCalendar.js

@@ -1,6 +1,6 @@
 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", "rangePosition", "defaultRangePosition", "onRangePositionChange", "calendars", "currentMonthCalendarPosition", "components", "componentsProps", "slots", "slotProps", "loading", "renderLoading", "disableHighlightToday", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber", "timezone"],
+const _excluded = ["value", "defaultValue", "referenceDate", "onChange", "className", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "defaultCalendarMonth", "rangePosition", "defaultRangePosition", "onRangePositionChange", "calendars", "currentMonthCalendarPosition", "components", "componentsProps", "slots", "slotProps", "loading", "renderLoading", "disableHighlightToday", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber", "timezone"],
   _excluded2 = ["isDragging", "rangeDragDay", "draggingDatePosition"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -116,6 +116,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
   const {
       value: valueProp,
       defaultValue,
+      referenceDate,
       onChange,
       className,
       disableFuture,
@@ -248,6 +249,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     onMonthSwitchingAnimationEnd
   } = useCalendarState({
     value: value[0] || value[1],
+    referenceDate,
     defaultCalendarMonth,
     disableFuture,
     disablePast,
@@ -610,6 +612,11 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
    */
   reduceAnimations: PropTypes.bool,
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`.
+   */
+  referenceDate: PropTypes.any,
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.

package/modern/DateRangePicker/DateRangePicker.js

@@ -255,6 +255,11 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
    */
   reduceAnimations: PropTypes.bool,
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate: PropTypes.any,
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.

package/modern/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -260,6 +260,11 @@ DesktopDateRangePicker.propTypes = {
    * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
    */
   reduceAnimations: PropTypes.bool,
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate: PropTypes.any,
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.

package/modern/MobileDateRangePicker/MobileDateRangePicker.js

@@ -260,6 +260,11 @@ MobileDateRangePicker.propTypes = {
    * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
    */
   reduceAnimations: PropTypes.bool,
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate: PropTypes.any,
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.

package/modern/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -208,10 +208,6 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onChange: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onClick: PropTypes.func,
   /**
    * Callback fired when the error associated to the current value changes.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/modern/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -241,10 +241,6 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.propTypes
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onChange: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onClick: PropTypes.func,
   /**
    * Callback fired when the error associated to the current value changes.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/modern/SingleInputTimeRangeField/SingleInputTimeRangeField.js

@@ -225,10 +225,6 @@ process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.propTypes = {
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onChange: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onClick: PropTypes.func,
   /**
    * Callback fired when the error associated to the current value changes.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/modern/StaticDateRangePicker/StaticDateRangePicker.js

@@ -213,6 +213,11 @@ StaticDateRangePicker.propTypes = {
    * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
    */
   reduceAnimations: PropTypes.bool,
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate: PropTypes.any,
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.

package/modern/dateRangeViewRenderers/dateRangeViewRenderers.js

@@ -8,6 +8,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export const renderDateRangeViewCalendar = ({
   value,
   defaultValue,
+  referenceDate,
   onChange,
   className,
   classes,
@@ -45,6 +46,7 @@ export const renderDateRangeViewCalendar = ({
 }) => /*#__PURE__*/_jsx(DateRangeCalendar, {
   value: value,
   defaultValue: defaultValue,
+  referenceDate: referenceDate,
   onChange: onChange,
   className: className,
   classes: classes,

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v6.12.0
+ * @mui/x-date-pickers-pro v6.13.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/modern/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -37,6 +37,7 @@ export const useDesktopRangePicker = _ref => {
     reduceAnimations
   } = props;
   const fieldContainerRef = React.useRef(null);
+  const anchorRef = React.useRef(null);
   const popperRef = React.useRef(null);
   const {
     rangePosition,
@@ -102,7 +103,8 @@ export const useDesktopRangePicker = _ref => {
     singleInputFieldRef,
     pickerSlotProps: slotProps,
     pickerSlots: slots,
-    fieldProps
+    fieldProps,
+    anchorRef
   });
   const slotPropsForLayout = _extends({}, slotProps, {
     toolbar: _extends({}, slotProps?.toolbar, {
@@ -115,8 +117,9 @@ export const useDesktopRangePicker = _ref => {
     localeText: localeText,
     children: [/*#__PURE__*/_jsx(Field, _extends({}, enrichedFieldProps)), /*#__PURE__*/_jsx(PickersPopper, _extends({
       role: "tooltip",
+      placement: "bottom-start",
       containerRef: popperRef,
-      anchorEl: fieldContainerRef.current,
+      anchorEl: anchorRef.current,
       onBlur: handleBlur
     }, actions, {
       open: open,

package/modern/internals/hooks/useEnrichedRangePickerFieldProps.js

@@ -17,7 +17,8 @@ const useMultiInputFieldSlotProps = ({
   localeText: inLocaleText,
   pickerSlotProps,
   pickerSlots,
-  fieldProps
+  fieldProps,
+  anchorRef
 }) => {
   const localeText = useLocaleText();
   const startRef = React.useRef(null);
@@ -63,7 +64,9 @@ const useMultiInputFieldSlotProps = ({
   }, fieldProps.slots);
   const slotProps = _extends({}, fieldProps.slotProps, {
     textField: ownerState => {
+      const resolvedComponentProps = resolveComponentProps(pickerSlotProps?.textField, ownerState);
       let inputProps;
+      let InputProps;
       if (ownerState.position === 'start') {
         inputProps = _extends({
           inputRef: startRef,
@@ -76,6 +79,11 @@ const useMultiInputFieldSlotProps = ({
         }, wrapperVariant === 'mobile' && {
           readOnly: true
         });
+        if (anchorRef) {
+          InputProps = _extends({}, resolvedComponentProps?.InputProps, {
+            ref: anchorRef
+          });
+        }
       } else {
         inputProps = _extends({
           inputRef: endRef,
@@ -91,7 +99,9 @@ const useMultiInputFieldSlotProps = ({
       }
       return _extends({}, labelId != null && {
         id: `${labelId}-${ownerState.position}`
-      }, inputProps, resolveComponentProps(pickerSlotProps?.textField, ownerState));
+      }, inputProps, resolveComponentProps(pickerSlotProps?.textField, ownerState), {
+        InputProps
+      });
     },
     root: ownerState => {
       const rootProps = {
@@ -122,7 +132,8 @@ const useSingleInputFieldSlotProps = ({
   singleInputFieldRef,
   pickerSlots,
   pickerSlotProps,
-  fieldProps
+  fieldProps,
+  anchorRef
 }) => {
   const inputRef = React.useRef(null);
   const handleInputRef = useForkRef(inInputRef, inputRef);
@@ -169,6 +180,9 @@ const useSingleInputFieldSlotProps = ({
     onKeyDown: onSpaceOrEnter(openPicker, fieldProps.onKeyDown),
     onSelectedSectionsChange: handleSelectedSectionsChange,
     onBlur,
+    InputProps: _extends({
+      ref: anchorRef
+    }, fieldProps?.InputProps),
     focused: open
   }, labelId != null && {
     id: labelId