@mui/x-date-pickers-pro 6.0.0-alpha.11 → 6.0.0-alpha.12

package/legacy/MobileNextDateRangePicker/MobileNextDateRangePicker.js

@@ -26,7 +26,6 @@ var MobileNextDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileNex
     views: ['day'],
     openTo: 'day',
     showToolbar: (_defaultizedProps$sho = defaultizedProps.showToolbar) != null ? _defaultizedProps$sho : true,
-    autoFocus: true,
     components: _extends({
       Field: MultiInputDateRangeField
     }, defaultizedProps.components),

package/legacy/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["components", "componentsProps", "value", "defaultValue", "format", "onChange", "readOnly", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange"],
+var _excluded = ["components", "componentsProps", "value", "defaultValue", "format", "onChange", "readOnly", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "autoFocus"],
   _excluded2 = ["onKeyDown", "ref"],
   _excluded3 = ["onKeyDown", "ref"];
 import * as React from 'react';
@@ -27,7 +27,9 @@ var MultiInputDateRangeFieldRoot = styled( /*#__PURE__*/React.forwardRef(functio
   overridesResolver: function overridesResolver(props, styles) {
     return styles.root;
   }
-})({});
+})({
+  alignItems: 'baseline'
+});
 var MultiInputDateRangeFieldSeparator = styled(function (props) {
   var _props$children;
   return /*#__PURE__*/_jsx(Typography, _extends({}, props, {
@@ -61,6 +63,7 @@ var MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInput
     disablePast = themeProps.disablePast,
     selectedSections = themeProps.selectedSections,
     onSelectedSectionsChange = themeProps.onSelectedSectionsChange,
+    autoFocus = themeProps.autoFocus,
     other = _objectWithoutProperties(themeProps, _excluded);
   var ownerState = themeProps;
   var Root = (_components$Root = components == null ? void 0 : components.Root) != null ? _components$Root : MultiInputDateRangeFieldRoot;
@@ -77,6 +80,9 @@ var MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInput
   var startInputProps = useSlotProps({
     elementType: Input,
     externalSlotProps: componentsProps == null ? void 0 : componentsProps.input,
+    additionalProps: {
+      autoFocus: autoFocus
+    },
     ownerState: _extends({}, ownerState, {
       position: 'start'
     })
@@ -142,6 +148,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  autoFocus: PropTypes.bool,
   /**
    * Overrideable components.
    * @default {}

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v6.0.0-alpha.11
+/** @license MUI v6.0.0-alpha.12
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -23,6 +23,7 @@ export var useDesktopRangePicker = function useDesktopRangePicker(_ref) {
     format = props.format,
     readOnly = props.readOnly,
     disabled = props.disabled,
+    autoFocus = props.autoFocus,
     disableOpenPicker = props.disableOpenPicker,
     localeText = props.localeText;
   var fieldRef = React.useRef(null);
@@ -37,6 +38,7 @@ export var useDesktopRangePicker = function useDesktopRangePicker(_ref) {
       wrapperVariant: 'desktop',
       viewLookup: viewLookup,
       validator: validator,
+      autoFocusView: true,
       additionalViewProps: {
         rangePosition: rangePosition,
         onRangePositionChange: setRangePosition
@@ -64,6 +66,7 @@ export var useDesktopRangePicker = function useDesktopRangePicker(_ref) {
     readOnly: readOnly,
     disabled: disabled,
     disableOpenPicker: disableOpenPicker,
+    localeText: localeText,
     onBlur: handleBlur,
     rangePosition: rangePosition,
     onRangePositionChange: setRangePosition
@@ -77,6 +80,7 @@ export var useDesktopRangePicker = function useDesktopRangePicker(_ref) {
       disabled: disabled,
       className: className,
       format: format,
+      autoFocus: autoFocus && !props.open,
       ref: fieldRef
     }),
     ownerState: props

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

@@ -36,6 +36,7 @@ export var useMobileRangePicker = function useMobileRangePicker(_ref) {
       wrapperVariant: 'mobile',
       viewLookup: viewLookup,
       validator: validator,
+      autoFocusView: true,
       additionalViewProps: {
         rangePosition: rangePosition,
         onRangePositionChange: setRangePosition
@@ -53,6 +54,7 @@ export var useMobileRangePicker = function useMobileRangePicker(_ref) {
     readOnly: readOnly,
     disabled: disabled,
     disableOpenPicker: disableOpenPicker,
+    localeText: localeText,
     rangePosition: rangePosition,
     onRangePositionChange: setRangePosition
   });

package/legacy/internal/hooks/useRangePickerInputProps.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { onSpaceOrEnter, useLocaleText } from '@mui/x-date-pickers/internals';
 export var useRangePickerInputProps = function useRangePickerInputProps(_ref) {
+  var _inLocaleText$start, _inLocaleText$end;
   var wrapperVariant = _ref.wrapperVariant,
     open = _ref.open,
     actions = _ref.actions,
@@ -10,7 +11,8 @@ export var useRangePickerInputProps = function useRangePickerInputProps(_ref) {
     disableOpenPicker = _ref.disableOpenPicker,
     onBlur = _ref.onBlur,
     rangePosition = _ref.rangePosition,
-    onRangePositionChange = _ref.onRangePositionChange;
+    onRangePositionChange = _ref.onRangePositionChange,
+    inLocaleText = _ref.localeText;
   var localeText = useLocaleText();
   var startRef = React.useRef(null);
   var endRef = React.useRef(null);
@@ -27,14 +29,14 @@ export var useRangePickerInputProps = function useRangePickerInputProps(_ref) {
     }
   }, [rangePosition, open]);
   var openRangeStartSelection = function openRangeStartSelection(event) {
-    event == null ? void 0 : event.stopPropagation();
+    event.stopPropagation();
     onRangePositionChange('start');
     if (!readOnly && !disableOpenPicker) {
       actions.onOpen();
     }
   };
   var openRangeEndSelection = function openRangeEndSelection(event) {
-    event == null ? void 0 : event.stopPropagation();
+    event.stopPropagation();
     onRangePositionChange('end');
     if (!readOnly && !disableOpenPicker) {
       actions.onOpen();
@@ -52,7 +54,7 @@ export var useRangePickerInputProps = function useRangePickerInputProps(_ref) {
   };
   var startInputProps = _extends({
     inputRef: startRef,
-    label: localeText.start,
+    label: (_inLocaleText$start = inLocaleText == null ? void 0 : inLocaleText.start) != null ? _inLocaleText$start : localeText.start,
     onKeyDown: onSpaceOrEnter(openRangeStartSelection),
     onFocus: focusOnRangeStart,
     focused: open ? rangePosition === 'start' : undefined
@@ -65,7 +67,7 @@ export var useRangePickerInputProps = function useRangePickerInputProps(_ref) {
   });
   var endInputProps = _extends({
     inputRef: endRef,
-    label: localeText.end,
+    label: (_inLocaleText$end = inLocaleText == null ? void 0 : inLocaleText.end) != null ? _inLocaleText$end : localeText.end,
     onKeyDown: onSpaceOrEnter(openRangeEndSelection),
     onFocus: focusOnRangeEnd,
     focused: open ? rangePosition === 'end' : undefined

package/legacy/internal/hooks/useStaticRangePicker/useStaticRangePicker.js

@@ -27,7 +27,8 @@ export var useStaticRangePicker = function useStaticRangePicker(_ref2) {
   var localeText = props.localeText,
     components = props.components,
     componentsProps = props.componentsProps,
-    displayStaticWrapperAs = props.displayStaticWrapperAs;
+    displayStaticWrapperAs = props.displayStaticWrapperAs,
+    autoFocus = props.autoFocus;
   var _React$useState = React.useState('start'),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     rangePosition = _React$useState2[0],
@@ -37,6 +38,7 @@ export var useStaticRangePicker = function useStaticRangePicker(_ref2) {
       viewLookup: viewLookup,
       valueManager: valueManager,
       validator: validator,
+      autoFocusView: autoFocus != null ? autoFocus : false,
       additionalViewProps: {},
       wrapperVariant: displayStaticWrapperAs
     }),

package/legacy/internal/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export var getReleaseInfo = function getReleaseInfo() {
-  var releaseInfo = "MTY3MDQ1NDAwMDAwMA==";
+  var releaseInfo = "MTY3MTE0NTIwMDAwMA==";
   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/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, createDateStrFromSections } from '@mui/x-date-pickers/internals';
+import { replaceInvalidDateByNull, splitFormatIntoSections, addPositionPropertiesToSections, createDateStrFromSections, getSectionOrder as _getSectionOrder } from '@mui/x-date-pickers/internals';
 import { splitDateRangeSections, removeLastSeparator } from './date-fields-utils';
 export var rangeValueManager = {
   emptyValue: [null, null],
@@ -57,7 +57,8 @@ export var rangeFieldValueManager = {
       if (sectionIndex === rawSectionsOfStartDate.length - 1) {
         return _extends({}, section, {
           dateName: 'start',
-          separator: ' – '
+          separator: "\u2069 \u2013 \u2066",
+          parsingSeparator: ' – '
         });
       }
       return _extends({}, section, {
@@ -73,9 +74,7 @@ export var rangeFieldValueManager = {
   },
   getValueStrFromSections: function getValueStrFromSections(sections) {
     var dateRangeSections = splitDateRangeSections(sections);
-    var startDateStr = createDateStrFromSections(dateRangeSections.startDate, true);
-    var endDateStr = createDateStrFromSections(dateRangeSections.endDate, true);
-    return "".concat(startDateStr).concat(endDateStr);
+    return createDateStrFromSections([].concat(_toConsumableArray(dateRangeSections.startDate), _toConsumableArray(dateRangeSections.endDate)), true);
   },
   getActiveDateSections: function getActiveDateSections(sections, activeSection) {
     var index = activeSection.dateName === 'start' ? 0 : 1;
@@ -113,5 +112,11 @@ 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], {
+      separator: ' – '
+    })], _toConsumableArray(splitedFormat)), isRTL);
   }
 };

package/modern/DateRangeCalendar/DateRangeCalendar.js

@@ -11,7 +11,7 @@ import { resolveComponentProps } from '@mui/base/utils';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { Watermark } from '@mui/x-license-pro';
-import { applyDefaultDate, DAY_MARGIN, DayCalendar, defaultReduceAnimations, PickersArrowSwitcher, PickersCalendarHeader, useCalendarState, useDefaultDates, useLocaleText, useNextMonthDisabled, usePreviousMonthDisabled, useUtils, WrapperVariantContext } from '@mui/x-date-pickers/internals';
+import { applyDefaultDate, DAY_MARGIN, DayCalendar, defaultReduceAnimations, PickersArrowSwitcher, PickersCalendarHeader, useCalendarState, useDefaultDates, useLocaleText, useNextMonthDisabled, usePreviousMonthDisabled, useUtils, WrapperVariantContext, useNow } from '@mui/x-date-pickers/internals';
 import { getReleaseInfo } from '../internal/utils/releaseInfo';
 import { dateRangeCalendarClasses, getDateRangeCalendarUtilityClass } from './dateRangeCalendarClasses';
 import { isEndOfRange, isRangeValid, isStartOfRange, isWithinRange } from '../internal/utils/date-utils';
@@ -107,6 +107,7 @@ const useUtilityClasses = ownerState => {
 const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalendar(inProps, ref) {
   const utils = useUtils();
   const localeText = useLocaleText();
+  const now = useNow();
   const props = useDateRangeCalendarDefaultizedProps(inProps, 'MuiDateRangeCalendar');
   const isMobile = React.useContext(WrapperVariantContext) === 'mobile';
   const {
@@ -347,6 +348,25 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
   const visibleMonths = React.useMemo(() => Array.from({
     length: calendars
   }).map((_, index) => utils.setMonth(calendarState.currentMonth, utils.getMonth(calendarState.currentMonth) + index)), [utils, calendarState.currentMonth, calendars]);
+  const focusedMonth = React.useMemo(() => {
+    if (!autoFocus) {
+      return null;
+    }
+
+    // The focus priority of the "day" view is as follows:
+    // 1. Month of the `start` date
+    // 2. Month of the `end` date
+    // 3. Month of the current date
+    // 4. First visible month
+
+    if (value[0] != null) {
+      return visibleMonths.find(month => utils.isSameMonth(month, value[0]));
+    }
+    if (value[1] != null) {
+      return visibleMonths.find(month => utils.isSameMonth(month, value[1]));
+    }
+    return visibleMonths.find(month => utils.isSameMonth(month, now)) ?? visibleMonths[0];
+  }, [utils, value, visibleMonths, autoFocus, now]);
   return /*#__PURE__*/_jsxs(DateRangeCalendarRoot, _extends({
     ref: ref,
     className: clsx(className, classes.root),
@@ -402,7 +422,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
         renderLoading: renderLoading,
         components: componentsForDayCalendar,
         componentsProps: componentsPropsForDayCalendar,
-        autoFocus: autoFocus,
+        autoFocus: month === focusedMonth,
         fixedWeekNumber: fixedWeekNumber,
         displayWeekNumber: displayWeekNumber
       }), index)]

package/modern/DateRangePicker/DateRangePicker.js

@@ -55,7 +55,6 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * @default /\dap/gi
    */
   acceptRegex: PropTypes.instanceOf(RegExp),
-  autoFocus: PropTypes.bool,
   /**
    * The number of calendars that render on **desktop**.
    * @default 2

package/modern/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -75,7 +75,6 @@ process.env.NODE_ENV !== "production" ? DesktopDateRangePicker.propTypes = {
    * @default /\dap/gi
    */
   acceptRegex: PropTypes.instanceOf(RegExp),
-  autoFocus: PropTypes.bool,
   /**
    * The number of calendars that render on **desktop**.
    * @default 2

package/modern/DesktopNextDateRangePicker/DesktopNextDateRangePicker.js

@@ -27,7 +27,6 @@ const DesktopNextDateRangePicker = /*#__PURE__*/React.forwardRef(function Deskto
     views: ['day'],
     openTo: 'day',
     showToolbar: defaultizedProps.showToolbar ?? false,
-    autoFocus: true,
     components: _extends({
       Field: MultiInputDateRangeField
     }, defaultizedProps.components),

package/modern/MobileDateRangePicker/MobileDateRangePicker.js

@@ -82,7 +82,6 @@ process.env.NODE_ENV !== "production" ? MobileDateRangePicker.propTypes = {
    * @default /\dap/gi
    */
   acceptRegex: PropTypes.instanceOf(RegExp),
-  autoFocus: PropTypes.bool,
   /**
    * The number of calendars that render on **desktop**.
    * @default 2

package/modern/MobileNextDateRangePicker/MobileNextDateRangePicker.js

@@ -27,7 +27,6 @@ const MobileNextDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileN
     views: ['day'],
     openTo: 'day',
     showToolbar: defaultizedProps.showToolbar ?? true,
-    autoFocus: true,
     components: _extends({
       Field: MultiInputDateRangeField
     }, defaultizedProps.components),

package/modern/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["components", "componentsProps", "value", "defaultValue", "format", "onChange", "readOnly", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange"],
+const _excluded = ["components", "componentsProps", "value", "defaultValue", "format", "onChange", "readOnly", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "autoFocus"],
   _excluded2 = ["onKeyDown", "ref"],
   _excluded3 = ["onKeyDown", "ref"];
 import * as React from 'react';
@@ -23,7 +23,9 @@ const MultiInputDateRangeFieldRoot = styled( /*#__PURE__*/React.forwardRef((prop
   name: 'MuiMultiInputDateRangeField',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
-})({});
+})({
+  alignItems: 'baseline'
+});
 const MultiInputDateRangeFieldSeparator = styled(props => /*#__PURE__*/_jsx(Typography, _extends({}, props, {
   children: props.children ?? ' — '
 })), {
@@ -51,7 +53,8 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
       disableFuture,
       disablePast,
       selectedSections,
-      onSelectedSectionsChange
+      onSelectedSectionsChange,
+      autoFocus
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const ownerState = themeProps;
@@ -69,6 +72,9 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
   const startInputProps = useSlotProps({
     elementType: Input,
     externalSlotProps: componentsProps?.input,
+    additionalProps: {
+      autoFocus
+    },
     ownerState: _extends({}, ownerState, {
       position: 'start'
     })
@@ -138,6 +144,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  autoFocus: PropTypes.bool,
   /**
    * Overrideable components.
    * @default {}

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v6.0.0-alpha.11
+/** @license MUI v6.0.0-alpha.12
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

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

@@ -23,6 +23,7 @@ export const useDesktopRangePicker = ({
     format,
     readOnly,
     disabled,
+    autoFocus,
     disableOpenPicker,
     localeText
   } = props;
@@ -42,6 +43,7 @@ export const useDesktopRangePicker = ({
     wrapperVariant: 'desktop',
     viewLookup,
     validator,
+    autoFocusView: true,
     additionalViewProps: {
       rangePosition,
       onRangePositionChange: setRangePosition
@@ -62,6 +64,7 @@ export const useDesktopRangePicker = ({
     readOnly,
     disabled,
     disableOpenPicker,
+    localeText,
     onBlur: handleBlur,
     rangePosition,
     onRangePositionChange: setRangePosition
@@ -75,6 +78,7 @@ export const useDesktopRangePicker = ({
       disabled,
       className,
       format,
+      autoFocus: autoFocus && !props.open,
       ref: fieldRef
     }),
     ownerState: props

package/modern/internal/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -40,6 +40,7 @@ export const useMobileRangePicker = ({
     wrapperVariant: 'mobile',
     viewLookup,
     validator,
+    autoFocusView: true,
     additionalViewProps: {
       rangePosition,
       onRangePositionChange: setRangePosition
@@ -52,6 +53,7 @@ export const useMobileRangePicker = ({
     readOnly,
     disabled,
     disableOpenPicker,
+    localeText,
     rangePosition,
     onRangePositionChange: setRangePosition
   });

package/modern/internal/hooks/useRangePickerInputProps.js

@@ -10,7 +10,8 @@ export const useRangePickerInputProps = ({
   disableOpenPicker,
   onBlur,
   rangePosition,
-  onRangePositionChange
+  onRangePositionChange,
+  localeText: inLocaleText
 }) => {
   const localeText = useLocaleText();
   const startRef = React.useRef(null);
@@ -26,14 +27,14 @@ export const useRangePickerInputProps = ({
     }
   }, [rangePosition, open]);
   const openRangeStartSelection = event => {
-    event?.stopPropagation();
+    event.stopPropagation();
     onRangePositionChange('start');
     if (!readOnly && !disableOpenPicker) {
       actions.onOpen();
     }
   };
   const openRangeEndSelection = event => {
-    event?.stopPropagation();
+    event.stopPropagation();
     onRangePositionChange('end');
     if (!readOnly && !disableOpenPicker) {
       actions.onOpen();
@@ -51,7 +52,7 @@ export const useRangePickerInputProps = ({
   };
   const startInputProps = _extends({
     inputRef: startRef,
-    label: localeText.start,
+    label: inLocaleText?.start ?? localeText.start,
     onKeyDown: onSpaceOrEnter(openRangeStartSelection),
     onFocus: focusOnRangeStart,
     focused: open ? rangePosition === 'start' : undefined
@@ -64,7 +65,7 @@ export const useRangePickerInputProps = ({
   });
   const endInputProps = _extends({
     inputRef: endRef,
-    label: localeText.end,
+    label: inLocaleText?.end ?? localeText.end,
     onKeyDown: onSpaceOrEnter(openRangeEndSelection),
     onFocus: focusOnRangeEnd,
     focused: open ? rangePosition === 'end' : undefined

package/modern/internal/hooks/useStaticRangePicker/useStaticRangePicker.js

@@ -27,7 +27,8 @@ export const useStaticRangePicker = ({
     localeText,
     components,
     componentsProps,
-    displayStaticWrapperAs
+    displayStaticWrapperAs,
+    autoFocus
   } = props;
   const [rangePosition, setRangePosition] = React.useState('start');
   const {
@@ -38,6 +39,7 @@ export const useStaticRangePicker = ({
     viewLookup,
     valueManager,
     validator,
+    autoFocusView: autoFocus ?? false,
     additionalViewProps: {},
     wrapperVariant: displayStaticWrapperAs
   });

package/modern/internal/utils/releaseInfo.js

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

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { replaceInvalidDateByNull, splitFormatIntoSections, addPositionPropertiesToSections, createDateStrFromSections } from '@mui/x-date-pickers/internals';
+import { replaceInvalidDateByNull, splitFormatIntoSections, addPositionPropertiesToSections, createDateStrFromSections, getSectionOrder } from '@mui/x-date-pickers/internals';
 import { splitDateRangeSections, removeLastSeparator } from './date-fields-utils';
 export const rangeValueManager = {
   emptyValue: [null, null],
@@ -42,7 +42,8 @@ export const rangeFieldValueManager = {
       if (sectionIndex === rawSectionsOfStartDate.length - 1) {
         return _extends({}, section, {
           dateName: 'start',
-          separator: ' – '
+          separator: `\u2069 – \u2066`,
+          parsingSeparator: ' – '
         });
       }
       return _extends({}, section, {
@@ -56,9 +57,7 @@ export const rangeFieldValueManager = {
   },
   getValueStrFromSections: sections => {
     const dateRangeSections = splitDateRangeSections(sections);
-    const startDateStr = createDateStrFromSections(dateRangeSections.startDate, true);
-    const endDateStr = createDateStrFromSections(dateRangeSections.endDate, true);
-    return `${startDateStr}${endDateStr}`;
+    return createDateStrFromSections([...dateRangeSections.startDate, ...dateRangeSections.endDate], true);
   },
   getActiveDateSections: (sections, activeSection) => {
     const index = activeSection.dateName === 'start' ? 0 : 1;
@@ -87,5 +86,11 @@ export const rangeFieldValueManager = {
       })
     };
   },
-  hasError: error => error[0] != null || error[1] != null
+  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], {
+      separator: ' – '
+    }), ...splitedFormat], isRTL);
+  }
 };

package/node/DateRangeCalendar/DateRangeCalendar.js

@@ -115,6 +115,7 @@ const useUtilityClasses = ownerState => {
 const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalendar(inProps, ref) {
   const utils = (0, _internals.useUtils)();
   const localeText = (0, _internals.useLocaleText)();
+  const now = (0, _internals.useNow)();
   const props = useDateRangeCalendarDefaultizedProps(inProps, 'MuiDateRangeCalendar');
   const isMobile = React.useContext(_internals.WrapperVariantContext) === 'mobile';
   const {
@@ -355,6 +356,25 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
   const visibleMonths = React.useMemo(() => Array.from({
     length: calendars
   }).map((_, index) => utils.setMonth(calendarState.currentMonth, utils.getMonth(calendarState.currentMonth) + index)), [utils, calendarState.currentMonth, calendars]);
+  const focusedMonth = React.useMemo(() => {
+    if (!autoFocus) {
+      return null;
+    }
+
+    // The focus priority of the "day" view is as follows:
+    // 1. Month of the `start` date
+    // 2. Month of the `end` date
+    // 3. Month of the current date
+    // 4. First visible month
+
+    if (value[0] != null) {
+      return visibleMonths.find(month => utils.isSameMonth(month, value[0]));
+    }
+    if (value[1] != null) {
+      return visibleMonths.find(month => utils.isSameMonth(month, value[1]));
+    }
+    return visibleMonths.find(month => utils.isSameMonth(month, now)) ?? visibleMonths[0];
+  }, [utils, value, visibleMonths, autoFocus, now]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateRangeCalendarRoot, (0, _extends2.default)({
     ref: ref,
     className: (0, _clsx.default)(className, classes.root),
@@ -410,7 +430,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
         renderLoading: renderLoading,
         components: componentsForDayCalendar,
         componentsProps: componentsPropsForDayCalendar,
-        autoFocus: autoFocus,
+        autoFocus: month === focusedMonth,
         fixedWeekNumber: fixedWeekNumber,
         displayWeekNumber: displayWeekNumber
       }), index)]

package/node/DateRangePicker/DateRangePicker.js

@@ -65,7 +65,6 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * @default /\dap/gi
    */
   acceptRegex: _propTypes.default.instanceOf(RegExp),
-  autoFocus: _propTypes.default.bool,
   /**
    * The number of calendars that render on **desktop**.
    * @default 2

package/node/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -85,7 +85,6 @@ process.env.NODE_ENV !== "production" ? DesktopDateRangePicker.propTypes = {
    * @default /\dap/gi
    */
   acceptRegex: _propTypes.default.instanceOf(RegExp),
-  autoFocus: _propTypes.default.bool,
   /**
    * The number of calendars that render on **desktop**.
    * @default 2

package/node/DesktopNextDateRangePicker/DesktopNextDateRangePicker.js

@@ -36,7 +36,6 @@ const DesktopNextDateRangePicker = /*#__PURE__*/React.forwardRef(function Deskto
     views: ['day'],
     openTo: 'day',
     showToolbar: defaultizedProps.showToolbar ?? false,
-    autoFocus: true,
     components: (0, _extends2.default)({
       Field: _MultiInputDateRangeField.Unstable_MultiInputDateRangeField
     }, defaultizedProps.components),

package/node/MobileDateRangePicker/MobileDateRangePicker.js

@@ -92,7 +92,6 @@ process.env.NODE_ENV !== "production" ? MobileDateRangePicker.propTypes = {
    * @default /\dap/gi
    */
   acceptRegex: _propTypes.default.instanceOf(RegExp),
-  autoFocus: _propTypes.default.bool,
   /**
    * The number of calendars that render on **desktop**.
    * @default 2

package/node/MobileNextDateRangePicker/MobileNextDateRangePicker.js

@@ -36,7 +36,6 @@ const MobileNextDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileN
     views: ['day'],
     openTo: 'day',
     showToolbar: defaultizedProps.showToolbar ?? true,
-    autoFocus: true,
     components: (0, _extends2.default)({
       Field: _MultiInputDateRangeField.Unstable_MultiInputDateRangeField
     }, defaultizedProps.components),