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

package/internal/utils/valueManagers.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { replaceInvalidDateByNull, splitFormatIntoSections, addPositionPropertiesToSections, createDateStrForInputFromSections, areDatesEqual } 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],
@@ -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,9 +67,16 @@ 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)
       })

package/legacy/DateRangePicker/DateRangePicker.js

@@ -146,6 +146,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/legacy/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -154,6 +154,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/legacy/MobileDateRangePicker/MobileDateRangePicker.js

@@ -159,6 +159,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/legacy/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -48,6 +48,7 @@ var SingleInputDateRangeField = /*#__PURE__*/React.forwardRef(function SingleInp
     })
   }));
 });
+SingleInputDateRangeField.fieldType = 'single-input';
 process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/legacy/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -48,6 +48,7 @@ var SingleInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Singl
     })
   }));
 });
+SingleInputDateTimeRangeField.fieldType = 'single-input';
 process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/legacy/SingleInputTimeRangeField/SingleInputTimeRangeField.js

@@ -48,6 +48,7 @@ var SingleInputTimeRangeField = /*#__PURE__*/React.forwardRef(function SingleInp
     })
   }));
 });
+SingleInputTimeRangeField.fieldType = 'single-input';
 process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v6.0.3
+ * @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/legacy/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -1,18 +1,18 @@
 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";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var releaseInfo = getReleaseInfo();
 export var useDesktopRangePicker = function useDesktopRangePicker(_ref) {
-  var _slots$layout;
+  var _fieldType, _slots$layout;
   var props = _ref.props,
     valueManager = _ref.valueManager,
     validator = _ref.validator;
@@ -22,16 +22,19 @@ export var useDesktopRangePicker = function useDesktopRangePicker(_ref) {
     className = props.className,
     sx = props.sx,
     format = props.format,
+    label = props.label,
+    inputRef = props.inputRef,
     readOnly = props.readOnly,
     disabled = props.disabled,
     autoFocus = props.autoFocus,
     disableOpenPicker = props.disableOpenPicker,
     localeText = props.localeText;
-  var fieldRef = React.useRef(null);
+  var fieldContainerRef = React.useRef(null);
   var popperRef = React.useRef(null);
   var _useRangePosition = useRangePosition(props),
     rangePosition = _useRangePosition.rangePosition,
-    onRangePositionChange = _useRangePosition.onRangePositionChange;
+    onRangePositionChange = _useRangePosition.onRangePositionChange,
+    singleInputFieldRef = _useRangePosition.singleInputFieldRef;
   var _usePicker = usePicker({
       props: props,
       valueManager: valueManager,
@@ -51,26 +54,15 @@ export var useDesktopRangePicker = function useDesktopRangePicker(_ref) {
     pickerFieldProps = _usePicker.fieldProps;
   var handleBlur = function handleBlur() {
     executeInTheNextEventLoopTick(function () {
-      var _fieldRef$current, _popperRef$current;
-      if ((_fieldRef$current = fieldRef.current) != null && _fieldRef$current.contains(getActiveElement(document)) || (_popperRef$current = popperRef.current) != null && _popperRef$current.contains(getActiveElement(document))) {
+      var _fieldContainerRef$cu, _popperRef$current;
+      if ((_fieldContainerRef$cu = fieldContainerRef.current) != null && _fieldContainerRef$cu.contains(getActiveElement(document)) || (_popperRef$current = popperRef.current) != null && _popperRef$current.contains(getActiveElement(document))) {
         return;
       }
       actions.onDismiss();
     });
   };
-  var fieldSlotProps = useRangePickerInputProps({
-    wrapperVariant: 'desktop',
-    open: open,
-    actions: actions,
-    readOnly: readOnly,
-    disabled: disabled,
-    disableOpenPicker: disableOpenPicker,
-    localeText: localeText,
-    onBlur: handleBlur,
-    rangePosition: rangePosition,
-    onRangePositionChange: onRangePositionChange
-  });
   var Field = slots.field;
+  var fieldType = (_fieldType = Field.fieldType) != null ? _fieldType : 'multi-input';
   var fieldProps = useSlotProps({
     elementType: Field,
     externalSlotProps: slotProps == null ? void 0 : slotProps.field,
@@ -81,25 +73,28 @@ export var useDesktopRangePicker = function useDesktopRangePicker(_ref) {
       sx: sx,
       format: format,
       autoFocus: autoFocus && !props.open,
-      ref: fieldRef
+      ref: fieldContainerRef
+    }, fieldType === 'single-input' && {
+      inputRef: inputRef
     }),
     ownerState: props
   });
-  var slotsForField = _extends({
-    textField: slots.textField,
-    root: slots.fieldRoot,
-    separator: slots.fieldSeparator
-  }, fieldProps.slots);
-  var slotPropsForField = _extends({}, fieldProps.slotProps, {
-    textField: function textField(ownerState) {
-      var externalInputProps = resolveComponentProps(slotProps == null ? void 0 : slotProps.textField, ownerState);
-      return _extends({}, ownerState.position === 'start' ? fieldSlotProps.startInput : fieldSlotProps.endInput, externalInputProps);
-    },
-    root: function root(ownerState) {
-      var externalRootProps = resolveComponentProps(slotProps == null ? void 0 : slotProps.fieldRoot, ownerState);
-      return _extends({}, externalRootProps, fieldSlotProps.root);
-    },
-    separator: slotProps == null ? void 0 : slotProps.fieldSeparator
+  var enrichedFieldProps = useEnrichedRangePickerFieldProps({
+    wrapperVariant: 'desktop',
+    fieldType: fieldType,
+    open: open,
+    actions: actions,
+    readOnly: readOnly,
+    disableOpenPicker: disableOpenPicker,
+    label: label,
+    localeText: localeText,
+    onBlur: handleBlur,
+    rangePosition: rangePosition,
+    onRangePositionChange: onRangePositionChange,
+    singleInputFieldRef: singleInputFieldRef,
+    pickerSlotProps: slotProps,
+    pickerSlots: slots,
+    fieldProps: fieldProps
   });
   var slotPropsForLayout = _extends({}, slotProps, {
     toolbar: _extends({}, slotProps == null ? void 0 : slotProps.toolbar, {
@@ -111,13 +106,10 @@ export var useDesktopRangePicker = function useDesktopRangePicker(_ref) {
   var renderPicker = function renderPicker() {
     return /*#__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,

package/legacy/internal/hooks/useEnrichedRangePickerFieldProps.js

@@ -0,0 +1,200 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { resolveComponentProps } from '@mui/base/utils';
+import useEventCallback from '@mui/utils/useEventCallback';
+import useForkRef from '@mui/utils/useForkRef';
+import { onSpaceOrEnter, useLocaleText, getActiveElement } from '@mui/x-date-pickers/internals';
+var useMultiInputFieldSlotProps = function useMultiInputFieldSlotProps(_ref) {
+  var wrapperVariant = _ref.wrapperVariant,
+    open = _ref.open,
+    actions = _ref.actions,
+    readOnly = _ref.readOnly,
+    labelId = _ref.labelId,
+    disableOpenPicker = _ref.disableOpenPicker,
+    onBlur = _ref.onBlur,
+    rangePosition = _ref.rangePosition,
+    onRangePositionChange = _ref.onRangePositionChange,
+    inLocaleText = _ref.localeText,
+    pickerSlotProps = _ref.pickerSlotProps,
+    pickerSlots = _ref.pickerSlots,
+    fieldProps = _ref.fieldProps;
+  var localeText = useLocaleText();
+  var startRef = React.useRef(null);
+  var endRef = React.useRef(null);
+  React.useEffect(function () {
+    if (!open) {
+      return;
+    }
+    if (rangePosition === 'start') {
+      var _startRef$current;
+      (_startRef$current = startRef.current) == null ? void 0 : _startRef$current.focus();
+    } else if (rangePosition === 'end') {
+      var _endRef$current;
+      (_endRef$current = endRef.current) == null ? void 0 : _endRef$current.focus();
+    }
+  }, [rangePosition, open]);
+  var openRangeStartSelection = function openRangeStartSelection(event) {
+    event.stopPropagation();
+    onRangePositionChange('start');
+    if (!readOnly && !disableOpenPicker) {
+      actions.onOpen();
+    }
+  };
+  var openRangeEndSelection = function openRangeEndSelection(event) {
+    event.stopPropagation();
+    onRangePositionChange('end');
+    if (!readOnly && !disableOpenPicker) {
+      actions.onOpen();
+    }
+  };
+  var handleFocusStart = function handleFocusStart() {
+    if (open) {
+      onRangePositionChange('start');
+    }
+  };
+  var handleFocusEnd = function handleFocusEnd() {
+    if (open) {
+      onRangePositionChange('end');
+    }
+  };
+  var slots = _extends({
+    textField: pickerSlots == null ? void 0 : pickerSlots.textField,
+    root: pickerSlots == null ? void 0 : pickerSlots.fieldRoot,
+    separator: pickerSlots == null ? void 0 : pickerSlots.fieldSeparator
+  }, fieldProps.slots);
+  var slotProps = _extends({}, fieldProps.slotProps, {
+    textField: function textField(ownerState) {
+      var inputProps;
+      if (ownerState.position === 'start') {
+        var _inLocaleText$start;
+        inputProps = _extends({
+          inputRef: startRef,
+          label: (_inLocaleText$start = inLocaleText == null ? void 0 : inLocaleText.start) != null ? _inLocaleText$start : localeText.start,
+          onKeyDown: onSpaceOrEnter(openRangeStartSelection),
+          onFocus: handleFocusStart,
+          focused: open ? rangePosition === 'start' : undefined
+        }, !readOnly && !fieldProps.disabled && {
+          onClick: openRangeStartSelection
+        }, wrapperVariant === 'mobile' && {
+          readOnly: true
+        });
+      } else {
+        var _inLocaleText$end;
+        inputProps = _extends({
+          inputRef: endRef,
+          label: (_inLocaleText$end = inLocaleText == null ? void 0 : inLocaleText.end) != null ? _inLocaleText$end : localeText.end,
+          onKeyDown: onSpaceOrEnter(openRangeEndSelection),
+          onFocus: handleFocusEnd,
+          focused: open ? rangePosition === 'end' : undefined
+        }, !readOnly && !fieldProps.disabled && {
+          onClick: openRangeEndSelection
+        }, wrapperVariant === 'mobile' && {
+          readOnly: true
+        });
+      }
+      return _extends({}, labelId != null && {
+        id: "".concat(labelId, "-").concat(ownerState.position)
+      }, inputProps, resolveComponentProps(pickerSlotProps == null ? void 0 : pickerSlotProps.textField, ownerState));
+    },
+    root: function root(ownerState) {
+      var rootProps = {
+        onBlur: onBlur
+      };
+      return _extends({}, rootProps, resolveComponentProps(pickerSlotProps == null ? void 0 : pickerSlotProps.fieldRoot, ownerState));
+    },
+    separator: pickerSlotProps == null ? void 0 : pickerSlotProps.fieldSeparator
+  });
+  var enrichedFieldProps = _extends({}, fieldProps, {
+    slots: slots,
+    slotProps: slotProps
+  });
+  return enrichedFieldProps;
+};
+var useSingleInputFieldSlotProps = function useSingleInputFieldSlotProps(_ref2) {
+  var wrapperVariant = _ref2.wrapperVariant,
+    open = _ref2.open,
+    actions = _ref2.actions,
+    readOnly = _ref2.readOnly,
+    inInputRef = _ref2.inputRef,
+    labelId = _ref2.labelId,
+    disableOpenPicker = _ref2.disableOpenPicker,
+    label = _ref2.label,
+    onBlur = _ref2.onBlur,
+    rangePosition = _ref2.rangePosition,
+    onRangePositionChange = _ref2.onRangePositionChange,
+    singleInputFieldRef = _ref2.singleInputFieldRef,
+    pickerSlots = _ref2.pickerSlots,
+    pickerSlotProps = _ref2.pickerSlotProps,
+    fieldProps = _ref2.fieldProps;
+  var inputRef = React.useRef(null);
+  var handleInputRef = useForkRef(inInputRef, inputRef);
+  var handleFieldRef = useForkRef(fieldProps.unstableFieldRef, singleInputFieldRef);
+  React.useEffect(function () {
+    var _inputRef$current;
+    if (!open) {
+      return;
+    }
+    (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
+  }, [rangePosition, open]);
+  var updateRangePosition = function updateRangePosition() {
+    var _singleInputFieldRef$;
+    if (!singleInputFieldRef.current || inputRef.current !== getActiveElement(document)) {
+      return;
+    }
+    var sections = singleInputFieldRef.current.getSections();
+    var activeSectionIndex = (_singleInputFieldRef$ = singleInputFieldRef.current) == null ? void 0 : _singleInputFieldRef$.getActiveSectionIndex();
+    var domRangePosition = activeSectionIndex == null || activeSectionIndex < sections.length / 2 ? 'start' : 'end';
+    if (domRangePosition != null && domRangePosition !== rangePosition) {
+      onRangePositionChange(domRangePosition);
+    }
+  };
+  var handleSelectedSectionsChange = useEventCallback(function (selectedSections) {
+    var _fieldProps$onSelecte;
+    setTimeout(updateRangePosition);
+    (_fieldProps$onSelecte = fieldProps.onSelectedSectionsChange) == null ? void 0 : _fieldProps$onSelecte.call(fieldProps, selectedSections);
+  });
+  var openPicker = function openPicker(event) {
+    event.stopPropagation();
+    if (!readOnly && !disableOpenPicker) {
+      actions.onOpen();
+    }
+  };
+  var slots = _extends({}, fieldProps.slots, {
+    textField: pickerSlots == null ? void 0 : pickerSlots.textField
+  });
+  var slotProps = _extends({}, fieldProps.slotProps, {
+    textField: pickerSlotProps == null ? void 0 : pickerSlotProps.textField
+  });
+  var enrichedFieldProps = _extends({}, fieldProps, {
+    slots: slots,
+    slotProps: slotProps,
+    label: label,
+    unstableFieldRef: handleFieldRef,
+    inputRef: handleInputRef,
+    onKeyDown: onSpaceOrEnter(openPicker, fieldProps.onKeyDown),
+    onSelectedSectionsChange: handleSelectedSectionsChange,
+    onBlur: onBlur,
+    focused: open
+  }, labelId != null && {
+    id: labelId
+  }, wrapperVariant === 'mobile' && {
+    readOnly: true
+  }, !readOnly && !fieldProps.disabled && {
+    onClick: openPicker
+  });
+  return enrichedFieldProps;
+};
+export var useEnrichedRangePickerFieldProps = function useEnrichedRangePickerFieldProps(params) {
+  /* eslint-disable react-hooks/rules-of-hooks */
+  if (process.env.NODE_ENV !== 'production') {
+    var fieldTypeRef = React.useRef(params.fieldType);
+    if (params.fieldType !== fieldTypeRef.current) {
+      console.error('Should not switch between a multi input field and a single input field on a range picker.');
+    }
+  }
+  if (params.fieldType === 'multi-input') {
+    return useMultiInputFieldSlotProps(params);
+  }
+  return useSingleInputFieldSlotProps(params);
+  /* eslint-enable react-hooks/rules-of-hooks */
+};

package/legacy/internal/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -1,19 +1,19 @@
 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 { usePicker, PickersModalDialog, useLocaleText } from '@mui/x-date-pickers/internals';
 import useId from '@mui/utils/useId';
-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";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var releaseInfo = getReleaseInfo();
 export var useMobileRangePicker = function useMobileRangePicker(_ref) {
-  var _innerSlotProps$toolb, _innerSlotProps$toolb2, _slots$layout;
+  var _fieldType, _innerSlotProps$toolb, _innerSlotProps$toolb2, _slots$layout;
   var props = _ref.props,
     valueManager = _ref.valueManager,
     validator = _ref.validator;
@@ -23,13 +23,16 @@ export var useMobileRangePicker = function useMobileRangePicker(_ref) {
     className = props.className,
     sx = props.sx,
     format = props.format,
+    label = props.label,
+    inputRef = props.inputRef,
     readOnly = props.readOnly,
     disabled = props.disabled,
     disableOpenPicker = props.disableOpenPicker,
     localeText = props.localeText;
   var _useRangePosition = useRangePosition(props),
     rangePosition = _useRangePosition.rangePosition,
-    onRangePositionChange = _useRangePosition.onRangePositionChange;
+    onRangePositionChange = _useRangePosition.onRangePositionChange,
+    singleInputFieldRef = _useRangePosition.singleInputFieldRef;
   var labelId = useId();
   var contextLocaleText = useLocaleText();
   var _usePicker = usePicker({
@@ -48,18 +51,8 @@ export var useMobileRangePicker = function useMobileRangePicker(_ref) {
     layoutProps = _usePicker.layoutProps,
     renderCurrentView = _usePicker.renderCurrentView,
     pickerFieldProps = _usePicker.fieldProps;
-  var fieldSlotProps = useRangePickerInputProps({
-    wrapperVariant: 'mobile',
-    open: open,
-    actions: actions,
-    readOnly: readOnly,
-    disabled: disabled,
-    disableOpenPicker: disableOpenPicker,
-    localeText: localeText,
-    rangePosition: rangePosition,
-    onRangePositionChange: onRangePositionChange
-  });
   var Field = slots.field;
+  var fieldType = (_fieldType = Field.fieldType) != null ? _fieldType : 'multi-input';
   var fieldProps = useSlotProps({
     elementType: Field,
     externalSlotProps: innerSlotProps == null ? void 0 : innerSlotProps.field,
@@ -69,25 +62,28 @@ export var useMobileRangePicker = function useMobileRangePicker(_ref) {
       className: className,
       sx: sx,
       format: format
+    }, fieldType === 'single-input' && {
+      inputRef: inputRef
     }),
     ownerState: props
   });
-  var slotsForField = _extends({
-    textField: slots.textField
-  }, fieldProps.slots);
   var isToolbarHidden = (_innerSlotProps$toolb = innerSlotProps == null ? void 0 : (_innerSlotProps$toolb2 = innerSlotProps.toolbar) == null ? void 0 : _innerSlotProps$toolb2.hidden) != null ? _innerSlotProps$toolb : false;
-  var slotPropsForField = _extends({}, fieldProps.slotProps, {
-    textField: function textField(ownerState) {
-      var externalInputProps = resolveComponentProps(innerSlotProps == null ? void 0 : innerSlotProps.textField, ownerState);
-      return _extends({}, isToolbarHidden && {
-        id: "".concat(labelId, "-").concat(ownerState.position)
-      }, ownerState.position === 'start' ? fieldSlotProps.startInput : fieldSlotProps.endInput, externalInputProps);
-    },
-    root: function root(ownerState) {
-      var externalRootProps = resolveComponentProps(innerSlotProps == null ? void 0 : innerSlotProps.fieldRoot, ownerState);
-      return _extends({}, externalRootProps, fieldSlotProps.root);
-    },
-    separator: innerSlotProps == null ? void 0 : innerSlotProps.fieldSeparator
+  var enrichedFieldProps = useEnrichedRangePickerFieldProps({
+    wrapperVariant: 'mobile',
+    fieldType: fieldType,
+    open: open,
+    actions: actions,
+    readOnly: readOnly,
+    labelId: labelId,
+    disableOpenPicker: disableOpenPicker,
+    label: label,
+    localeText: localeText,
+    rangePosition: rangePosition,
+    onRangePositionChange: onRangePositionChange,
+    singleInputFieldRef: singleInputFieldRef,
+    pickerSlots: slots,
+    pickerSlotProps: innerSlotProps,
+    fieldProps: fieldProps
   });
   var slotPropsForLayout = _extends({}, innerSlotProps, {
     toolbar: _extends({}, innerSlotProps == null ? void 0 : innerSlotProps.toolbar, {
@@ -101,11 +97,15 @@ export var useMobileRangePicker = function useMobileRangePicker(_ref) {
   var labelledById = labelId;
   if (isToolbarHidden) {
     var labels = [];
-    if (finalLocaleText.start) {
-      labels.push("".concat(labelId, "-start-label"));
-    }
-    if (finalLocaleText.end) {
-      labels.push("".concat(labelId, "-end-label"));
+    if (fieldType === 'multi-input') {
+      if (finalLocaleText.start) {
+        labels.push("".concat(labelId, "-start-label"));
+      }
+      if (finalLocaleText.end) {
+        labels.push("".concat(labelId, "-end-label"));
+      }
+    } else if (label != null) {
+      labels.push("".concat(labelId, "-label"));
     }
     labelledById = labels.length > 0 ? labels.join(' ') : undefined;
   }
@@ -117,10 +117,7 @@ export var useMobileRangePicker = function useMobileRangePicker(_ref) {
   var renderPicker = function renderPicker() {
     return /*#__PURE__*/_jsxs(LocalizationProvider, {
       localeText: localeText,
-      children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
-        slots: slotsForField,
-        slotProps: slotPropsForField
-      })), /*#__PURE__*/_jsx(PickersModalDialog, _extends({}, actions, {
+      children: [/*#__PURE__*/_jsx(Field, _extends({}, enrichedFieldProps)), /*#__PURE__*/_jsx(PickersModalDialog, _extends({}, actions, {
         open: open,
         slots: slots,
         slotProps: slotProps,