@mui/x-date-pickers-pro 6.0.2 → 6.0.4

package/legacy/internal/utils/valueManagers.js

@@ -1,7 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { replaceInvalidDateByNull, splitFormatIntoSections, addPositionPropertiesToSections, createDateStrForInputFromSections, getSectionOrder as _getSectionOrder } from '@mui/x-date-pickers/internals';
+import { replaceInvalidDateByNull, addPositionPropertiesToSections, createDateStrForInputFromSections, areDatesEqual } from '@mui/x-date-pickers/internals';
 import { splitDateRangeSections, removeLastSeparator } from './date-fields-utils';
 export var rangeValueManager = {
   emptyValue: [null, null],
@@ -14,7 +14,7 @@ export var rangeValueManager = {
     });
   },
   areValuesEqual: function areValuesEqual(utils, a, b) {
-    return utils.isEqual(a[0], b[0]) && utils.isEqual(a[1], b[1]);
+    return areDatesEqual(utils, a[0], b[0]) && areDatesEqual(utils, a[1], b[1]);
   },
   isSameError: function isSameError(a, b) {
     return b !== null && a[1] === b[1] && a[0] === b[0];
@@ -36,20 +36,20 @@ export var rangeFieldValueManager = {
     }
     return [prevReferenceValue[1], value[1]];
   },
-  getSectionsFromValue: function getSectionsFromValue(utils, localeText, prevSections, _ref, format) {
+  getSectionsFromValue: function getSectionsFromValue(utils, _ref, fallbackSections, isRTL, getSectionsFromDate) {
     var _ref2 = _slicedToArray(_ref, 2),
       start = _ref2[0],
       end = _ref2[1];
-    var prevDateRangeSections = prevSections == null ? {
+    var separatedFallbackSections = fallbackSections == null ? {
       startDate: null,
       endDate: null
-    } : splitDateRangeSections(prevSections);
-    var getSections = function getSections(newDate, prevDateSections, position) {
-      var shouldReUsePrevDateSections = !utils.isValid(newDate) && !!prevDateSections;
+    } : splitDateRangeSections(fallbackSections);
+    var getSections = function getSections(newDate, fallbackDateSections, position) {
+      var shouldReUsePrevDateSections = !utils.isValid(newDate) && !!fallbackDateSections;
       if (shouldReUsePrevDateSections) {
-        return prevDateSections;
+        return fallbackDateSections;
       }
-      var sections = splitFormatIntoSections(utils, localeText, format, newDate);
+      var sections = getSectionsFromDate(newDate);
       return sections.map(function (section, sectionIndex) {
         if (sectionIndex === sections.length - 1 && position === 'start') {
           return _extends({}, section, {
@@ -62,16 +62,11 @@ export var rangeFieldValueManager = {
         });
       });
     };
-    return addPositionPropertiesToSections([].concat(_toConsumableArray(getSections(start, prevDateRangeSections.startDate, 'start')), _toConsumableArray(getSections(end, prevDateRangeSections.endDate, 'end'))));
+    return addPositionPropertiesToSections([].concat(_toConsumableArray(getSections(start, separatedFallbackSections.startDate, 'start')), _toConsumableArray(getSections(end, separatedFallbackSections.endDate, 'end'))), isRTL);
   },
-  getValueStrFromSections: function getValueStrFromSections(sections) {
+  getValueStrFromSections: function getValueStrFromSections(sections, isRTL) {
     var dateRangeSections = splitDateRangeSections(sections);
-    return createDateStrForInputFromSections([].concat(_toConsumableArray(dateRangeSections.startDate), _toConsumableArray(dateRangeSections.endDate)));
-  },
-  getActiveDateSections: function getActiveDateSections(sections, activeSection) {
-    var index = activeSection.dateName === 'start' ? 0 : 1;
-    var dateRangeSections = splitDateRangeSections(sections);
-    return index === 0 ? removeLastSeparator(dateRangeSections.startDate) : dateRangeSections.endDate;
+    return createDateStrForInputFromSections([].concat(_toConsumableArray(dateRangeSections.startDate), _toConsumableArray(dateRangeSections.endDate)), isRTL);
   },
   parseValueStr: function parseValueStr(valueStr, referenceValue, parseDate) {
     // TODO: Improve because it would not work if the date format has `–` as a separator.
@@ -92,9 +87,16 @@ export var rangeFieldValueManager = {
       return index === 0 ? [newDate, prevDateRange[1]] : [prevDateRange[0], newDate];
     };
     return {
-      activeDate: state.value[index],
-      referenceActiveDate: state.referenceValue[index],
-      getNewValueFromNewActiveDate: function getNewValueFromNewActiveDate(newActiveDate) {
+      date: state.value[index],
+      referenceDate: state.referenceValue[index],
+      getSections: function getSections(sections) {
+        var dateRangeSections = splitDateRangeSections(sections);
+        if (index === 0) {
+          return removeLastSeparator(dateRangeSections.startDate);
+        }
+        return dateRangeSections.endDate;
+      },
+      getNewValuesFromNewActiveDate: function getNewValuesFromNewActiveDate(newActiveDate) {
         return {
           value: updateDateInRange(newActiveDate, state.value),
           referenceValue: newActiveDate == null || !utils.isValid(newActiveDate) ? state.referenceValue : updateDateInRange(newActiveDate, state.referenceValue)
@@ -104,11 +106,5 @@ export var rangeFieldValueManager = {
   },
   hasError: function hasError(error) {
     return error[0] != null || error[1] != null;
-  },
-  getSectionOrder: function getSectionOrder(utils, localeText, format, isRTL) {
-    var splitedFormat = splitFormatIntoSections(utils, localeText, format, null);
-    return _getSectionOrder([].concat(_toConsumableArray(splitedFormat.slice(0, splitedFormat.length - 1)), [_extends({}, splitedFormat[splitedFormat.length - 1], {
-      endSeparator: ' – '
-    })], _toConsumableArray(splitedFormat)), isRTL);
   }
 };

package/modern/DateRangePicker/DateRangePicker.js

@@ -147,6 +147,18 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * Defaults to localized format based on the used `views`.
    */
   format: PropTypes.string,
+  /**
+   * Pass a ref to the `input` element.
+   * Ignored if the field has several inputs.
+   */
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.object
+  })]),
+  /**
+   * The label content.
+   * Ignored if the field has several inputs.
+   */
+  label: PropTypes.node,
   /**
    * If `true`, calls `renderLoading` instead of rendering the day calendar.
    * Can be used to preload information and show it in calendar.

package/modern/DateRangePickerDay/DateRangePickerDay.js

@@ -80,7 +80,7 @@ const DateRangePickerDayRoot = styled('div', {
 }, ownerState.isHighlighting && {
   borderRadius: 0,
   color: (theme.vars || theme).palette.primary.contrastText,
-  backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.lightChannel} / 0.6)` : alpha(theme.palette.primary.light, 0.6),
+  backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.focusOpacity),
   '&:first-of-type': startBorderStyle,
   '&:last-of-type': endBorderStyle
 }, (ownerState.isStartOfHighlighting || ownerState.isFirstVisibleCell) && _extends({}, startBorderStyle, {
@@ -139,7 +139,6 @@ const DateRangePickerDayDay = styled(PickersDay, {
     [`&.${dateRangePickerDayClasses.notSelectedDate}`]: styles.notSelectedDate
   }, styles.day]
 })(({
-  theme,
   ownerState
 }) => _extends({
   // Required to overlap preview border
@@ -147,12 +146,10 @@ const DateRangePickerDayDay = styled(PickersDay, {
   '& > *': {
     transform: 'scale(0.9)'
   }
-}, !ownerState.selected && {
-  backgroundColor: 'transparent'
 }, !ownerState.selected && ownerState.isHighlighting && {
-  color: theme.palette.getContrastText(alpha(theme.palette.primary.light, 0.6)),
+  opacity: 0.7,
   [`&.${pickersDayClasses.dayOutsideMonth}`]: {
-    color: alpha(theme.palette.getContrastText(theme.palette.primary.light), 0.4)
+    opacity: 0.4
   }
 }, ownerState.draggable && {
   cursor: 'grab'

package/modern/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -151,6 +151,18 @@ DesktopDateRangePicker.propTypes = {
    * Defaults to localized format based on the used `views`.
    */
   format: PropTypes.string,
+  /**
+   * Pass a ref to the `input` element.
+   * Ignored if the field has several inputs.
+   */
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.object
+  })]),
+  /**
+   * The label content.
+   * Ignored if the field has several inputs.
+   */
+  label: PropTypes.node,
   /**
    * If `true`, calls `renderLoading` instead of rendering the day calendar.
    * Can be used to preload information and show it in calendar.

package/modern/MobileDateRangePicker/MobileDateRangePicker.js

@@ -154,6 +154,18 @@ MobileDateRangePicker.propTypes = {
    * Defaults to localized format based on the used `views`.
    */
   format: PropTypes.string,
+  /**
+   * Pass a ref to the `input` element.
+   * Ignored if the field has several inputs.
+   */
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.object
+  })]),
+  /**
+   * The label content.
+   * Ignored if the field has several inputs.
+   */
+  label: PropTypes.node,
   /**
    * If `true`, calls `renderLoading` instead of rendering the day calendar.
    * Can be used to preload information and show it in calendar.

package/modern/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -283,6 +283,8 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
    * The system prop, which allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  unstableEndFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  unstableStartFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * The selected value.
    * Used when the component is controlled.

package/modern/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["slots", "slotProps", "components", "componentsProps", "value", "defaultValue", "format", "onChange", "readOnly", "disabled", "onError", "shouldDisableDate", "minDate", "maxDate", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange"],
+const _excluded = ["slots", "slotProps", "components", "componentsProps", "value", "defaultValue", "format", "onChange", "readOnly", "disabled", "onError", "shouldDisableDate", "minDate", "maxDate", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableStartFieldRef", "unstableEndFieldRef", "autoFocus"],
   _excluded2 = ["onKeyDown", "ref", "readOnly", "inputMode"],
   _excluded3 = ["onKeyDown", "ref", "readOnly", "inputMode"];
 import * as React from 'react';
@@ -61,7 +61,10 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
       disableFuture,
       disablePast,
       selectedSections,
-      onSelectedSectionsChange
+      onSelectedSectionsChange,
+      unstableStartFieldRef,
+      unstableEndFieldRef,
+      autoFocus
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const slots = innerSlots ?? uncapitalizeObjectKeys(components);
@@ -81,6 +84,9 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
   const startTextFieldProps = useSlotProps({
     elementType: TextField,
     externalSlotProps: slotProps?.textField,
+    additionalProps: {
+      autoFocus
+    },
     ownerState: _extends({}, ownerState, {
       position: 'start'
     })
@@ -125,7 +131,9 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
       startTextFieldProps,
       endTextFieldProps,
       startInputRef: startTextFieldProps.inputRef,
-      endInputRef: endTextFieldProps.inputRef
+      unstableStartFieldRef,
+      endInputRef: endTextFieldProps.inputRef,
+      unstableEndFieldRef
     }),
     {
       startDate: {
@@ -175,6 +183,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
    * @default `utils.is12HourCycleInCurrentLocale()`
    */
   ampm: PropTypes.bool,
+  autoFocus: PropTypes.bool,
   className: PropTypes.string,
   /**
    * Overridable components.
@@ -340,6 +349,8 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
    * The system prop, which allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  unstableEndFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  unstableStartFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * The selected value.
    * Used when the component is controlled.

package/modern/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["slots", "slotProps", "components", "componentsProps", "value", "defaultValue", "format", "onChange", "readOnly", "disabled", "onError", "minTime", "maxTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange"],
+const _excluded = ["slots", "slotProps", "components", "componentsProps", "value", "defaultValue", "format", "onChange", "readOnly", "disabled", "onError", "minTime", "maxTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableStartFieldRef", "unstableEndFieldRef", "autoFocus"],
   _excluded2 = ["onKeyDown", "ref", "readOnly", "inputMode"],
   _excluded3 = ["onKeyDown", "ref", "readOnly", "inputMode"];
 import * as React from 'react';
@@ -56,7 +56,10 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
       disableFuture,
       disablePast,
       selectedSections,
-      onSelectedSectionsChange
+      onSelectedSectionsChange,
+      unstableStartFieldRef,
+      unstableEndFieldRef,
+      autoFocus
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const slots = innerSlots ?? uncapitalizeObjectKeys(components);
@@ -76,6 +79,9 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
   const startTextFieldProps = useSlotProps({
     elementType: TextField,
     externalSlotProps: slotProps?.textField,
+    additionalProps: {
+      autoFocus
+    },
     ownerState: _extends({}, ownerState, {
       position: 'start'
     })
@@ -115,7 +121,9 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
       startTextFieldProps,
       endTextFieldProps,
       startInputRef: startTextFieldProps.inputRef,
-      endInputRef: endTextFieldProps.inputRef
+      unstableStartFieldRef,
+      endInputRef: endTextFieldProps.inputRef,
+      unstableEndFieldRef
     }),
     {
       startDate: {
@@ -165,6 +173,7 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.propTypes = {
    * @default `utils.is12HourCycleInCurrentLocale()`
    */
   ampm: PropTypes.bool,
+  autoFocus: PropTypes.bool,
   className: PropTypes.string,
   /**
    * Overridable components.
@@ -306,6 +315,8 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.propTypes = {
    * The system prop, which allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  unstableEndFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  unstableStartFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * The selected value.
    * Used when the component is controlled.

package/modern/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -51,6 +51,7 @@ const SingleInputDateRangeField = /*#__PURE__*/React.forwardRef(function SingleI
     })
   }));
 });
+SingleInputDateRangeField.fieldType = 'single-input';
 process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -250,6 +251,10 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The ref object used to imperatively interact with the field.
+   */
+  unstableFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * The selected value.
    * Used when the component is controlled.

package/modern/SingleInputDateRangeField/useSingleInputDateRangeField.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", "format", "onChange", "readOnly", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange"];
+const _excluded = ["value", "defaultValue", "format", "onChange", "readOnly", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
 import { useUtils, useDefaultDates, applyDefaultDate, useField } from '@mui/x-date-pickers/internals';
 import { rangeValueManager, rangeFieldValueManager } from '../internal/utils/valueManagers';
 import { validateDateRange } from '../internal/hooks/validation/useDateRangeValidation';
@@ -33,7 +33,8 @@ export const useSingleInputDateRangeField = ({
       disableFuture,
       disablePast,
       selectedSections,
-      onSelectedSectionsChange
+      onSelectedSectionsChange,
+      unstableFieldRef
     } = _useDefaultizedDateRa,
     other = _objectWithoutPropertiesLoose(_useDefaultizedDateRa, _excluded);
   return useField({
@@ -52,7 +53,8 @@ export const useSingleInputDateRangeField = ({
       disableFuture,
       disablePast,
       selectedSections,
-      onSelectedSectionsChange
+      onSelectedSectionsChange,
+      unstableFieldRef
     },
     valueManager: rangeValueManager,
     fieldValueManager: rangeFieldValueManager,

package/modern/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -51,6 +51,7 @@ const SingleInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Sin
     })
   }));
 });
+SingleInputDateTimeRangeField.fieldType = 'single-input';
 process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -298,6 +299,10 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.propTypes
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The ref object used to imperatively interact with the field.
+   */
+  unstableFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * The selected value.
    * Used when the component is controlled.

package/modern/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.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", "format", "onChange", "readOnly", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "shouldDisableTime", "disableIgnoringDatePartForTimeValidation", "selectedSections", "onSelectedSectionsChange"];
+const _excluded = ["value", "defaultValue", "format", "onChange", "readOnly", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "shouldDisableTime", "disableIgnoringDatePartForTimeValidation", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
 import { useUtils, useField, applyDefaultDate, useDefaultDates } from '@mui/x-date-pickers/internals';
 import { rangeValueManager, rangeFieldValueManager } from '../internal/utils/valueManagers';
 import { validateDateTimeRange } from '../internal/hooks/validation/useDateTimeRangeValidation';
@@ -43,7 +43,8 @@ export const useSingleInputDateTimeRangeField = ({
       shouldDisableTime,
       disableIgnoringDatePartForTimeValidation,
       selectedSections,
-      onSelectedSectionsChange
+      onSelectedSectionsChange,
+      unstableFieldRef
     } = _useDefaultizedTimeRa,
     other = _objectWithoutPropertiesLoose(_useDefaultizedTimeRa, _excluded);
   return useField({
@@ -67,7 +68,8 @@ export const useSingleInputDateTimeRangeField = ({
       shouldDisableTime,
       disableIgnoringDatePartForTimeValidation,
       selectedSections,
-      onSelectedSectionsChange
+      onSelectedSectionsChange,
+      unstableFieldRef
     },
     valueManager: rangeValueManager,
     fieldValueManager: rangeFieldValueManager,

package/modern/SingleInputTimeRangeField/SingleInputTimeRangeField.js

@@ -51,6 +51,7 @@ const SingleInputTimeRangeField = /*#__PURE__*/React.forwardRef(function SingleI
     })
   }));
 });
+SingleInputTimeRangeField.fieldType = 'single-input';
 process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -274,6 +275,10 @@ process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The ref object used to imperatively interact with the field.
+   */
+  unstableFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * The selected value.
    * Used when the component is controlled.

package/modern/SingleInputTimeRangeField/useSingleInputTimeRangeField.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", "format", "onChange", "readOnly", "onError", "minTime", "maxTime", "minutesStep", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange"];
+const _excluded = ["value", "defaultValue", "format", "onChange", "readOnly", "onError", "minTime", "maxTime", "minutesStep", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
 import { useUtils, useField } from '@mui/x-date-pickers/internals';
 import { rangeValueManager, rangeFieldValueManager } from '../internal/utils/valueManagers';
 import { validateTimeRange } from '../internal/hooks/validation/useTimeRangeValidation';
@@ -33,7 +33,8 @@ export const useSingleInputTimeRangeField = ({
       disableFuture,
       disablePast,
       selectedSections,
-      onSelectedSectionsChange
+      onSelectedSectionsChange,
+      unstableFieldRef
     } = _useDefaultizedTimeRa,
     other = _objectWithoutPropertiesLoose(_useDefaultizedTimeRa, _excluded);
   return useField({
@@ -53,7 +54,8 @@ export const useSingleInputTimeRangeField = ({
       disableFuture,
       disablePast,
       selectedSections,
-      onSelectedSectionsChange
+      onSelectedSectionsChange,
+      unstableFieldRef
     },
     valueManager: rangeValueManager,
     fieldValueManager: rangeFieldValueManager,

package/modern/index.js

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

package/modern/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { resolveComponentProps, useSlotProps } from '@mui/base/utils';
+import { useSlotProps } from '@mui/base/utils';
 import { useLicenseVerifier } from '@mui/x-license-pro';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { PickersLayout } from '@mui/x-date-pickers/PickersLayout';
 import { executeInTheNextEventLoopTick, getActiveElement, usePicker, PickersPopper } from '@mui/x-date-pickers/internals';
-import { useRangePickerInputProps } from '../useRangePickerInputProps';
+import { useEnrichedRangePickerFieldProps } from '../useEnrichedRangePickerFieldProps';
 import { getReleaseInfo } from '../../utils/releaseInfo';
 import { useRangePosition } from '../useRangePosition';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -23,17 +23,20 @@ export const useDesktopRangePicker = ({
     className,
     sx,
     format,
+    label,
+    inputRef,
     readOnly,
     disabled,
     autoFocus,
     disableOpenPicker,
     localeText
   } = props;
-  const fieldRef = React.useRef(null);
+  const fieldContainerRef = React.useRef(null);
   const popperRef = React.useRef(null);
   const {
     rangePosition,
-    onRangePositionChange
+    onRangePositionChange,
+    singleInputFieldRef
   } = useRangePosition(props);
   const {
     open,
@@ -55,25 +58,14 @@ export const useDesktopRangePicker = ({
   });
   const handleBlur = () => {
     executeInTheNextEventLoopTick(() => {
-      if (fieldRef.current?.contains(getActiveElement(document)) || popperRef.current?.contains(getActiveElement(document))) {
+      if (fieldContainerRef.current?.contains(getActiveElement(document)) || popperRef.current?.contains(getActiveElement(document))) {
         return;
       }
       actions.onDismiss();
     });
   };
-  const fieldSlotProps = useRangePickerInputProps({
-    wrapperVariant: 'desktop',
-    open,
-    actions,
-    readOnly,
-    disabled,
-    disableOpenPicker,
-    localeText,
-    onBlur: handleBlur,
-    rangePosition,
-    onRangePositionChange
-  });
   const Field = slots.field;
+  const fieldType = Field.fieldType ?? 'multi-input';
   const fieldProps = useSlotProps({
     elementType: Field,
     externalSlotProps: slotProps?.field,
@@ -84,25 +76,28 @@ export const useDesktopRangePicker = ({
       sx,
       format,
       autoFocus: autoFocus && !props.open,
-      ref: fieldRef
+      ref: fieldContainerRef
+    }, fieldType === 'single-input' && {
+      inputRef
     }),
     ownerState: props
   });
-  const slotsForField = _extends({
-    textField: slots.textField,
-    root: slots.fieldRoot,
-    separator: slots.fieldSeparator
-  }, fieldProps.slots);
-  const slotPropsForField = _extends({}, fieldProps.slotProps, {
-    textField: ownerState => {
-      const externalInputProps = resolveComponentProps(slotProps?.textField, ownerState);
-      return _extends({}, ownerState.position === 'start' ? fieldSlotProps.startInput : fieldSlotProps.endInput, externalInputProps);
-    },
-    root: ownerState => {
-      const externalRootProps = resolveComponentProps(slotProps?.fieldRoot, ownerState);
-      return _extends({}, externalRootProps, fieldSlotProps.root);
-    },
-    separator: slotProps?.fieldSeparator
+  const enrichedFieldProps = useEnrichedRangePickerFieldProps({
+    wrapperVariant: 'desktop',
+    fieldType,
+    open,
+    actions,
+    readOnly,
+    disableOpenPicker,
+    label,
+    localeText,
+    onBlur: handleBlur,
+    rangePosition,
+    onRangePositionChange,
+    singleInputFieldRef,
+    pickerSlotProps: slotProps,
+    pickerSlots: slots,
+    fieldProps
   });
   const slotPropsForLayout = _extends({}, slotProps, {
     toolbar: _extends({}, slotProps?.toolbar, {
@@ -113,13 +108,10 @@ export const useDesktopRangePicker = ({
   const Layout = slots?.layout ?? PickersLayout;
   const renderPicker = () => /*#__PURE__*/_jsxs(LocalizationProvider, {
     localeText: localeText,
-    children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
-      slots: slotsForField,
-      slotProps: slotPropsForField
-    })), /*#__PURE__*/_jsx(PickersPopper, _extends({
+    children: [/*#__PURE__*/_jsx(Field, _extends({}, enrichedFieldProps)), /*#__PURE__*/_jsx(PickersPopper, _extends({
       role: "tooltip",
       containerRef: popperRef,
-      anchorEl: fieldRef.current,
+      anchorEl: fieldContainerRef.current,
       onBlur: handleBlur
     }, actions, {
       open: open,