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

package/modern/internal/utils/valueManagers.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { replaceInvalidDateByNull, splitFormatIntoSections, addPositionPropertiesToSections, createDateStrForInputFromSections, 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 const rangeValueManager = {
   emptyValue: [null, null],
   getTodayValue: utils => [utils.date(), utils.date()],
   cleanValue: (utils, value) => value.map(date => replaceInvalidDateByNull(utils, date)),
-  areValuesEqual: (utils, a, b) => utils.isEqual(a[0], b[0]) && utils.isEqual(a[1], b[1]),
+  areValuesEqual: (utils, a, b) => areDatesEqual(utils, a[0], b[0]) && areDatesEqual(utils, a[1], b[1]),
   isSameError: (a, b) => b !== null && a[1] === b[1] && a[0] === b[0],
   defaultErrorState: [null, null]
 };
@@ -24,17 +24,17 @@ export const rangeFieldValueManager = {
     }
     return [prevReferenceValue[1], value[1]];
   },
-  getSectionsFromValue: (utils, localeText, prevSections, [start, end], format) => {
-    const prevDateRangeSections = prevSections == null ? {
+  getSectionsFromValue: (utils, [start, end], fallbackSections, isRTL, getSectionsFromDate) => {
+    const separatedFallbackSections = fallbackSections == null ? {
       startDate: null,
       endDate: null
-    } : splitDateRangeSections(prevSections);
-    const getSections = (newDate, prevDateSections, position) => {
-      const shouldReUsePrevDateSections = !utils.isValid(newDate) && !!prevDateSections;
+    } : splitDateRangeSections(fallbackSections);
+    const getSections = (newDate, fallbackDateSections, position) => {
+      const shouldReUsePrevDateSections = !utils.isValid(newDate) && !!fallbackDateSections;
       if (shouldReUsePrevDateSections) {
-        return prevDateSections;
+        return fallbackDateSections;
       }
-      const sections = splitFormatIntoSections(utils, localeText, format, newDate);
+      const sections = getSectionsFromDate(newDate);
       return sections.map((section, sectionIndex) => {
         if (sectionIndex === sections.length - 1 && position === 'start') {
           return _extends({}, section, {
@@ -47,16 +47,11 @@ export const rangeFieldValueManager = {
         });
       });
     };
-    return addPositionPropertiesToSections([...getSections(start, prevDateRangeSections.startDate, 'start'), ...getSections(end, prevDateRangeSections.endDate, 'end')]);
+    return addPositionPropertiesToSections([...getSections(start, separatedFallbackSections.startDate, 'start'), ...getSections(end, separatedFallbackSections.endDate, 'end')], isRTL);
   },
-  getValueStrFromSections: sections => {
+  getValueStrFromSections: (sections, isRTL) => {
     const dateRangeSections = splitDateRangeSections(sections);
-    return createDateStrForInputFromSections([...dateRangeSections.startDate, ...dateRangeSections.endDate]);
-  },
-  getActiveDateSections: (sections, activeSection) => {
-    const index = activeSection.dateName === 'start' ? 0 : 1;
-    const dateRangeSections = splitDateRangeSections(sections);
-    return index === 0 ? removeLastSeparator(dateRangeSections.startDate) : dateRangeSections.endDate;
+    return createDateStrForInputFromSections([...dateRangeSections.startDate, ...dateRangeSections.endDate], isRTL);
   },
   parseValueStr: (valueStr, referenceValue, parseDate) => {
     // TODO: Improve because it would not work if the date format has `–` as a separator.
@@ -72,19 +67,20 @@ export const rangeFieldValueManager = {
     const index = activeSection.dateName === 'start' ? 0 : 1;
     const updateDateInRange = (newDate, prevDateRange) => index === 0 ? [newDate, prevDateRange[1]] : [prevDateRange[0], newDate];
     return {
-      activeDate: state.value[index],
-      referenceActiveDate: state.referenceValue[index],
-      getNewValueFromNewActiveDate: newActiveDate => ({
+      date: state.value[index],
+      referenceDate: state.referenceValue[index],
+      getSections: sections => {
+        const dateRangeSections = splitDateRangeSections(sections);
+        if (index === 0) {
+          return removeLastSeparator(dateRangeSections.startDate);
+        }
+        return dateRangeSections.endDate;
+      },
+      getNewValuesFromNewActiveDate: newActiveDate => ({
         value: updateDateInRange(newActiveDate, state.value),
         referenceValue: newActiveDate == null || !utils.isValid(newActiveDate) ? state.referenceValue : updateDateInRange(newActiveDate, state.referenceValue)
       })
     };
   },
-  hasError: error => error[0] != null || error[1] != null,
-  getSectionOrder: (utils, localeText, format, isRTL) => {
-    const splitedFormat = splitFormatIntoSections(utils, localeText, format, null);
-    return getSectionOrder([...splitedFormat.slice(0, splitedFormat.length - 1), _extends({}, splitedFormat[splitedFormat.length - 1], {
-      endSeparator: ' – '
-    }), ...splitedFormat], isRTL);
-  }
+  hasError: error => error[0] != null || error[1] != null
 };

package/node/DateRangePicker/DateRangePicker.js

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

package/node/DateRangePickerDay/DateRangePickerDay.js

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

package/node/DesktopDateRangePicker/DesktopDateRangePicker.js

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

package/node/MobileDateRangePicker/MobileDateRangePicker.js

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

package/node/MultiInputDateRangeField/MultiInputDateRangeField.js

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

package/node/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -17,7 +17,7 @@ var _utils = require("@mui/base/utils");
 var _internals = require("@mui/x-date-pickers/internals");
 var _useMultiInputDateTimeRangeField = require("../internal/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -69,7 +69,10 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
       disableFuture,
       disablePast,
       selectedSections,
-      onSelectedSectionsChange
+      onSelectedSectionsChange,
+      unstableStartFieldRef,
+      unstableEndFieldRef,
+      autoFocus
     } = themeProps,
     other = (0, _objectWithoutPropertiesLoose2.default)(themeProps, _excluded);
   const slots = innerSlots ?? (0, _internals.uncapitalizeObjectKeys)(components);
@@ -89,6 +92,9 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
   const startTextFieldProps = (0, _utils.useSlotProps)({
     elementType: TextField,
     externalSlotProps: slotProps?.textField,
+    additionalProps: {
+      autoFocus
+    },
     ownerState: (0, _extends2.default)({}, ownerState, {
       position: 'start'
     })
@@ -133,7 +139,9 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
       startTextFieldProps,
       endTextFieldProps,
       startInputRef: startTextFieldProps.inputRef,
-      endInputRef: endTextFieldProps.inputRef
+      unstableStartFieldRef,
+      endInputRef: endTextFieldProps.inputRef,
+      unstableEndFieldRef
     }),
     {
       startDate: {
@@ -184,6 +192,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
    * @default `utils.is12HourCycleInCurrentLocale()`
    */
   ampm: _propTypes.default.bool,
+  autoFocus: _propTypes.default.bool,
   className: _propTypes.default.string,
   /**
    * Overridable components.
@@ -349,6 +358,8 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
    * The system prop, which allows defining system overrides as well as additional CSS styles.
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  unstableEndFieldRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  unstableStartFieldRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   /**
    * The selected value.
    * Used when the component is controlled.

package/node/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -17,7 +17,7 @@ var _utils = require("@mui/base/utils");
 var _internals = require("@mui/x-date-pickers/internals");
 var _useMultiInputTimeRangeField = require("../internal/hooks/useMultiInputRangeField/useMultiInputTimeRangeField");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -64,7 +64,10 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
       disableFuture,
       disablePast,
       selectedSections,
-      onSelectedSectionsChange
+      onSelectedSectionsChange,
+      unstableStartFieldRef,
+      unstableEndFieldRef,
+      autoFocus
     } = themeProps,
     other = (0, _objectWithoutPropertiesLoose2.default)(themeProps, _excluded);
   const slots = innerSlots ?? (0, _internals.uncapitalizeObjectKeys)(components);
@@ -84,6 +87,9 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
   const startTextFieldProps = (0, _utils.useSlotProps)({
     elementType: TextField,
     externalSlotProps: slotProps?.textField,
+    additionalProps: {
+      autoFocus
+    },
     ownerState: (0, _extends2.default)({}, ownerState, {
       position: 'start'
     })
@@ -123,7 +129,9 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
       startTextFieldProps,
       endTextFieldProps,
       startInputRef: startTextFieldProps.inputRef,
-      endInputRef: endTextFieldProps.inputRef
+      unstableStartFieldRef,
+      endInputRef: endTextFieldProps.inputRef,
+      unstableEndFieldRef
     }),
     {
       startDate: {
@@ -174,6 +182,7 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.propTypes = {
    * @default `utils.is12HourCycleInCurrentLocale()`
    */
   ampm: _propTypes.default.bool,
+  autoFocus: _propTypes.default.bool,
   className: _propTypes.default.string,
   /**
    * Overridable components.
@@ -315,6 +324,8 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.propTypes = {
    * The system prop, which allows defining system overrides as well as additional CSS styles.
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  unstableEndFieldRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  unstableStartFieldRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   /**
    * The selected value.
    * Used when the component is controlled.

package/node/SingleInputDateRangeField/SingleInputDateRangeField.js

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

package/node/SingleInputDateRangeField/useSingleInputDateRangeField.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _internals = require("@mui/x-date-pickers/internals");
 var _valueManagers = require("../internal/utils/valueManagers");
 var _useDateRangeValidation = require("../internal/hooks/validation/useDateRangeValidation");
-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"];
 const useDefaultizedDateRangeFieldProps = props => {
   const utils = (0, _internals.useUtils)();
   const defaultDates = (0, _internals.useDefaultDates)();
@@ -41,7 +41,8 @@ const useSingleInputDateRangeField = ({
       disableFuture,
       disablePast,
       selectedSections,
-      onSelectedSectionsChange
+      onSelectedSectionsChange,
+      unstableFieldRef
     } = _useDefaultizedDateRa,
     other = (0, _objectWithoutPropertiesLoose2.default)(_useDefaultizedDateRa, _excluded);
   return (0, _internals.useField)({
@@ -60,7 +61,8 @@ const useSingleInputDateRangeField = ({
       disableFuture,
       disablePast,
       selectedSections,
-      onSelectedSectionsChange
+      onSelectedSectionsChange,
+      unstableFieldRef
     },
     valueManager: _valueManagers.rangeValueManager,
     fieldValueManager: _valueManagers.rangeFieldValueManager,

package/node/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

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

package/node/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _internals = require("@mui/x-date-pickers/internals");
 var _valueManagers = require("../internal/utils/valueManagers");
 var _useDateTimeRangeValidation = require("../internal/hooks/validation/useDateTimeRangeValidation");
-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"];
 const useDefaultizedTimeRangeFieldProps = props => {
   const utils = (0, _internals.useUtils)();
   const defaultDates = (0, _internals.useDefaultDates)();
@@ -51,7 +51,8 @@ const useSingleInputDateTimeRangeField = ({
       shouldDisableTime,
       disableIgnoringDatePartForTimeValidation,
       selectedSections,
-      onSelectedSectionsChange
+      onSelectedSectionsChange,
+      unstableFieldRef
     } = _useDefaultizedTimeRa,
     other = (0, _objectWithoutPropertiesLoose2.default)(_useDefaultizedTimeRa, _excluded);
   return (0, _internals.useField)({
@@ -75,7 +76,8 @@ const useSingleInputDateTimeRangeField = ({
       shouldDisableTime,
       disableIgnoringDatePartForTimeValidation,
       selectedSections,
-      onSelectedSectionsChange
+      onSelectedSectionsChange,
+      unstableFieldRef
     },
     valueManager: _valueManagers.rangeValueManager,
     fieldValueManager: _valueManagers.rangeFieldValueManager,

package/node/SingleInputTimeRangeField/SingleInputTimeRangeField.js

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

package/node/SingleInputTimeRangeField/useSingleInputTimeRangeField.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _internals = require("@mui/x-date-pickers/internals");
 var _valueManagers = require("../internal/utils/valueManagers");
 var _useTimeRangeValidation = require("../internal/hooks/validation/useTimeRangeValidation");
-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"];
 const useDefaultizedTimeRangeFieldProps = props => {
   const utils = (0, _internals.useUtils)();
   const ampm = props.ampm ?? utils.is12HourCycleInCurrentLocale();
@@ -41,7 +41,8 @@ const useSingleInputTimeRangeField = ({
       disableFuture,
       disablePast,
       selectedSections,
-      onSelectedSectionsChange
+      onSelectedSectionsChange,
+      unstableFieldRef
     } = _useDefaultizedTimeRa,
     other = (0, _objectWithoutPropertiesLoose2.default)(_useDefaultizedTimeRa, _excluded);
   return (0, _internals.useField)({
@@ -61,7 +62,8 @@ const useSingleInputTimeRangeField = ({
       disableFuture,
       disablePast,
       selectedSections,
-      onSelectedSectionsChange
+      onSelectedSectionsChange,
+      unstableFieldRef
     },
     valueManager: _valueManagers.rangeValueManager,
     fieldValueManager: _valueManagers.rangeFieldValueManager,

package/node/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/node/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -12,7 +12,7 @@ var _xLicensePro = require("@mui/x-license-pro");
 var _LocalizationProvider = require("@mui/x-date-pickers/LocalizationProvider");
 var _PickersLayout = require("@mui/x-date-pickers/PickersLayout");
 var _internals = require("@mui/x-date-pickers/internals");
-var _useRangePickerInputProps = require("../useRangePickerInputProps");
+var _useEnrichedRangePickerFieldProps = require("../useEnrichedRangePickerFieldProps");
 var _releaseInfo = require("../../utils/releaseInfo");
 var _useRangePosition = require("../useRangePosition");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -31,17 +31,20 @@ 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
   } = (0, _useRangePosition.useRangePosition)(props);
   const {
     open,
@@ -63,25 +66,14 @@ const useDesktopRangePicker = ({
   });
   const handleBlur = () => {
     (0, _internals.executeInTheNextEventLoopTick)(() => {
-      if (fieldRef.current?.contains((0, _internals.getActiveElement)(document)) || popperRef.current?.contains((0, _internals.getActiveElement)(document))) {
+      if (fieldContainerRef.current?.contains((0, _internals.getActiveElement)(document)) || popperRef.current?.contains((0, _internals.getActiveElement)(document))) {
         return;
       }
       actions.onDismiss();
     });
   };
-  const fieldSlotProps = (0, _useRangePickerInputProps.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 = (0, _utils.useSlotProps)({
     elementType: Field,
     externalSlotProps: slotProps?.field,
@@ -92,25 +84,28 @@ const useDesktopRangePicker = ({
       sx,
       format,
       autoFocus: autoFocus && !props.open,
-      ref: fieldRef
+      ref: fieldContainerRef
+    }, fieldType === 'single-input' && {
+      inputRef
     }),
     ownerState: props
   });
-  const slotsForField = (0, _extends2.default)({
-    textField: slots.textField,
-    root: slots.fieldRoot,
-    separator: slots.fieldSeparator
-  }, fieldProps.slots);
-  const slotPropsForField = (0, _extends2.default)({}, fieldProps.slotProps, {
-    textField: ownerState => {
-      const externalInputProps = (0, _utils.resolveComponentProps)(slotProps?.textField, ownerState);
-      return (0, _extends2.default)({}, ownerState.position === 'start' ? fieldSlotProps.startInput : fieldSlotProps.endInput, externalInputProps);
-    },
-    root: ownerState => {
-      const externalRootProps = (0, _utils.resolveComponentProps)(slotProps?.fieldRoot, ownerState);
-      return (0, _extends2.default)({}, externalRootProps, fieldSlotProps.root);
-    },
-    separator: slotProps?.fieldSeparator
+  const enrichedFieldProps = (0, _useEnrichedRangePickerFieldProps.useEnrichedRangePickerFieldProps)({
+    wrapperVariant: 'desktop',
+    fieldType,
+    open,
+    actions,
+    readOnly,
+    disableOpenPicker,
+    label,
+    localeText,
+    onBlur: handleBlur,
+    rangePosition,
+    onRangePositionChange,
+    singleInputFieldRef,
+    pickerSlotProps: slotProps,
+    pickerSlots: slots,
+    fieldProps
   });
   const slotPropsForLayout = (0, _extends2.default)({}, slotProps, {
     toolbar: (0, _extends2.default)({}, slotProps?.toolbar, {
@@ -121,13 +116,10 @@ const useDesktopRangePicker = ({
   const Layout = slots?.layout ?? _PickersLayout.PickersLayout;
   const renderPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_LocalizationProvider.LocalizationProvider, {
     localeText: localeText,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Field, (0, _extends2.default)({}, fieldProps, {
-      slots: slotsForField,
-      slotProps: slotPropsForField
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickersPopper, (0, _extends2.default)({
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Field, (0, _extends2.default)({}, enrichedFieldProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickersPopper, (0, _extends2.default)({
       role: "tooltip",
       containerRef: popperRef,
-      anchorEl: fieldRef.current,
+      anchorEl: fieldContainerRef.current,
       onBlur: handleBlur
     }, actions, {
       open: open,