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

package/CHANGELOG.md

@@ -3,6 +3,80 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.0.0-alpha.12
+
+_Dec 16, 2022_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 The `apiRef` prop is now available in the `@mui/x-data-grid` package:
+
+  ```tsx
+  const apiRef = useGridApiRef();
+
+  return (
+    <DataGrid apiRef={apiRef} {...other} />
+  )
+  ```
+
+  See [the documentation](https://next.mui.com/x/react-data-grid/api-object/) for more information.
+
+- 🎁 The `DataGridPremium` now supports cell selection:
+
+  ```tsx
+  <DataGridPremium unstable_cellSelection />
+  ```
+
+  See [the documentation](https://next.mui.com/x/react-data-grid/selection/#cell-selection) for more information
+
+- 🌍 Support the Right To Left orientation on the fields components
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v6.0.0-alpha.12` / `@mui/x-data-grid-pro@v6.0.0-alpha.12` / `@mui/x-data-grid-premium@v6.0.0-alpha.12`
+
+#### Breaking changes
+
+- The `showCellRightBorder` was renamed to `showCellVerticalBorder`
+- The `showColumnRightBorder` was renamed to `showColumnVerticalBorder`
+- The `.MuiDataGrid-withBorder` CSS class was renamed to `.MuiDataGrid-withBorderColor` and it only sets `border-color` CSS property now.
+- The following undocumented properties from `apiRef` were removed: `footerRef`, `headerRef`, `columnHeadersElementRef`, `columnHeadersContainerElementRef`
+- The `GridHeaderPlaceholder` component was removed.
+- The `MAX_PAGE_SIZE` constant was removed.
+- The `useGridScrollFn` hook was removed.
+
+#### Changes
+
+- [DataGrid] Display sort column menu items as per `sortingOrder` prop (#7180) @MBilalShafi
+- [DataGrid] Support `apiRef` in Community package (#6773) @cherniavskii
+- [DataGridPremium] Add support for cell selection (#6567) @m4theushw
+- [DataGridPremium] Use separate cache for aggregation columns pre-processor (#7142) @m4theushw
+- [DataGridPro] Fix missing border in right-pinned columns (#4197) @cherniavskii
+- [DataGridPro] Fix wrong border color on skeleton cells (#7202) @cherniavskii
+
+### `@mui/x-date-pickers@v6.0.0-alpha.12` / `@mui/x-date-pickers-pro@v6.0.0-alpha.12`
+
+#### Changes
+
+- [fields] Fix bug introduced by RTL in single input range fields (#7189) @alexfauquette
+- [fields] Support RTL out of the box (#6715) @alexfauquette
+- [pickers] Clean `autoFocus` behavior on fields and new pickers (#7153) @flaviendelangle
+- [pickers] Fix label on the new range pickers (#7210) @flaviendelangle
+- [pickers] Fix wrong component name on `StaticNextDateTime` (#7187) @flaviendelangle
+
+### Docs
+
+- [docs] Add docs section about field placeholders' localization (#7139) @flaviendelangle
+- [docs] Create a `DemoGrid` component to unify demos with several components (#7057) @flaviendelangle
+- [docs] Document aggregation selectors (#7148) @cherniavskii
+- [docs] Fix 301 links to demo pages in API pages (#7197) @oliviertassinari
+- [docs] Fix errors and warning in demos (#7209) @LukasTy
+- [docs] Use `DemoContainer` and `DemoItem` on every picker demo (#7149) @flaviendelangle
+
+### Core
+
+- [core] Fix broken test (#7179) @flaviendelangle
+
 ## 6.0.0-alpha.11
 
 _Dec 8, 2022_
@@ -1301,6 +1375,60 @@ You can find more information about the new api, including how to set those tran
 - [test] Skip tests for column pinning and dynamic row height (#5997) @m4theushw
 - [website] Improve security header @oliviertassinari
 
+## 5.17.16
+
+_Dec 16, 2022_
+
+We'd like to offer a big thanks to the 4 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.16` / `@mui/x-data-grid-pro@v5.17.16` / `@mui/x-data-grid-premium@v5.17.16`
+
+#### Changes
+
+- [DataGrid] Display sort column menu items as per `sortingOrder` prop (#7125) @hanbin9775
+- [DataGrid] Fix flickering on mount (#7155) @cherniavskii
+- [DataGridPremium] Use separate cache for aggregation columns pre-processor (#7174) @m4theushw
+
+### `@mui/x-date-pickers@v5.0.11` / `@mui/x-date-pickers-pro@v5.0.11`
+
+#### Changes
+
+- [DateTimePicker] Update export pattern (#7172) @kealjones-wk
+
+### Docs
+
+- [docs] Document aggregation selectors (#7151) @cherniavskii
+
+## 5.17.15
+
+_Dec 8, 2022_
+
+We'd like to offer a big thanks to the 4 contributors who made this release possible. Here are some highlights ✨:
+
+- ✨ Fix lazy-loading not working in `DataGridPremium` (#7130) @m4theushw
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.15` / `@mui/x-data-grid-pro@v5.17.15` / `@mui/x-data-grid-premium@v5.17.15`
+
+#### Changes
+
+- [DataGridPremium] Add support for lazy-loading (#7130) @m4theushw
+- [DataGridPremium] Pass `groupId` to the aggregation function (#7143) @m4theushw
+
+### `@mui/x-date-pickers@v5.0.10` / `@mui/x-date-pickers-pro@v5.0.10`
+
+#### Changes
+
+- [pickers] Initialize date without time when selecting year or month (#7136) @LukasTy
+
+### Docs
+
+- [docs] Fix the nested import on the api pages (#7134) @flaviendelangle
+- [docs] Keep track of the localization completion (#7099) @alexfauquette
+- [docs] Update localization doc to use existing locale (#7104) @LukasTy
+
 ## 5.17.14
 
 _Dec 1, 2022_

package/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';
@@ -108,6 +108,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 {
@@ -350,6 +351,26 @@ 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(() => {
+    var _visibleMonths$find;
+    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 = visibleMonths.find(month => utils.isSameMonth(month, now))) != null ? _visibleMonths$find : visibleMonths[0];
+  }, [utils, value, visibleMonths, autoFocus, now]);
   return /*#__PURE__*/_jsxs(DateRangeCalendarRoot, _extends({
     ref: ref,
     className: clsx(className, classes.root),
@@ -405,7 +426,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/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/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/DesktopNextDateRangePicker/DesktopNextDateRangePicker.js

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

package/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/MobileNextDateRangePicker/MobileNextDateRangePicker.js

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

package/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 => {
   var _props$children;
   return /*#__PURE__*/_jsx(Typography, _extends({}, props, {
@@ -55,7 +57,8 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
       disableFuture,
       disablePast,
       selectedSections,
-      onSelectedSectionsChange
+      onSelectedSectionsChange,
+      autoFocus
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const ownerState = themeProps;
@@ -73,6 +76,9 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
   const startInputProps = useSlotProps({
     elementType: Input,
     externalSlotProps: componentsProps == null ? void 0 : componentsProps.input,
+    additionalProps: {
+      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/MultiInputDateRangeField/MultiInputDateRangeField.types.d.ts

@@ -15,7 +15,9 @@ export interface UseMultiInputDateRangeFieldParams<TDate, TChildProps extends {}
 export interface UseMultiInputDateRangeFieldProps<TDate> extends UseDateRangeFieldProps<TDate> {
 }
 export type UseMultiInputDateRangeFieldComponentProps<TDate, TChildProps extends {}> = Omit<TChildProps, keyof UseMultiInputDateRangeFieldProps<TDate>> & UseMultiInputDateRangeFieldProps<TDate>;
-export interface MultiInputDateRangeFieldProps<TDate> extends UseMultiInputDateRangeFieldComponentProps<TDate, {}> {
+export interface MultiInputDateRangeFieldProps<TDate> extends UseMultiInputDateRangeFieldComponentProps<TDate, {
+    autoFocus?: boolean;
+}> {
     /**
      * Overrideable components.
      * @default {}

package/index.d.ts

@@ -9,7 +9,7 @@ export * from './MultiInputDateRangeField';
 export * from './MultiInputTimeRangeField';
 export * from './MultiInputDateTimeRangeField';
 export * from './SingleInputDateRangeField';
-export type { DateRangeFieldSection } from './internal/models/range';
+export type { RangeFieldSection } from './internal/models/fields';
 export * from './DateRangeCalendar';
 export * from './NextDateRangePicker';
 export * from './DesktopNextDateRangePicker';

package/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/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
@@ -63,6 +65,7 @@ export const useDesktopRangePicker = ({
     readOnly,
     disabled,
     disableOpenPicker,
+    localeText,
     onBlur: handleBlur,
     rangePosition,
     onRangePositionChange: setRangePosition
@@ -76,6 +79,7 @@ export const useDesktopRangePicker = ({
       disabled,
       className,
       format,
+      autoFocus: autoFocus && !props.open,
       ref: fieldRef
     }),
     ownerState: props

package/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/internal/hooks/useRangePickerInputProps.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { PickersInputLocaleText } from '@mui/x-date-pickers';
 import { DateOrTimeView, UsePickerResponse, WrapperVariant } from '@mui/x-date-pickers/internals';
 import { DateRange, RangePosition } from '../models';
 interface UseRangePickerFieldParams<TDate, TView extends DateOrTimeView> extends Pick<UsePickerResponse<DateRange<TDate>, TView, any>, 'open' | 'actions'> {
@@ -9,8 +10,9 @@ interface UseRangePickerFieldParams<TDate, TView extends DateOrTimeView> extends
     onBlur?: () => void;
     rangePosition: RangePosition;
     onRangePositionChange: (newPosition: RangePosition) => void;
+    localeText: PickersInputLocaleText<TDate> | undefined;
 }
-export declare const useRangePickerInputProps: <TDate, TView extends DateOrTimeView>({ wrapperVariant, open, actions, readOnly, disabled, disableOpenPicker, onBlur, rangePosition, onRangePositionChange, }: UseRangePickerFieldParams<TDate, TView>) => {
+export declare const useRangePickerInputProps: <TDate, TView extends DateOrTimeView>({ wrapperVariant, open, actions, readOnly, disabled, disableOpenPicker, onBlur, rangePosition, onRangePositionChange, localeText: inLocaleText, }: UseRangePickerFieldParams<TDate, TView>) => {
     startInput: {
         inputProps: {
             readOnly: boolean;

package/internal/hooks/useRangePickerInputProps.js

@@ -10,8 +10,10 @@ export const useRangePickerInputProps = ({
   disableOpenPicker,
   onBlur,
   rangePosition,
-  onRangePositionChange
+  onRangePositionChange,
+  localeText: inLocaleText
 }) => {
+  var _inLocaleText$start, _inLocaleText$end;
   const localeText = useLocaleText();
   const startRef = React.useRef(null);
   const endRef = React.useRef(null);
@@ -28,14 +30,14 @@ export const useRangePickerInputProps = ({
     }
   }, [rangePosition, open]);
   const openRangeStartSelection = event => {
-    event == null ? void 0 : event.stopPropagation();
+    event.stopPropagation();
     onRangePositionChange('start');
     if (!readOnly && !disableOpenPicker) {
       actions.onOpen();
     }
   };
   const openRangeEndSelection = event => {
-    event == null ? void 0 : event.stopPropagation();
+    event.stopPropagation();
     onRangePositionChange('end');
     if (!readOnly && !disableOpenPicker) {
       actions.onOpen();
@@ -53,7 +55,7 @@ export const useRangePickerInputProps = ({
   };
   const 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
@@ -66,7 +68,7 @@ export const useRangePickerInputProps = ({
   });
   const 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/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 != null ? autoFocus : false,
     additionalViewProps: {},
     wrapperVariant: displayStaticWrapperAs
   });

package/internal/models/fields.d.ts

@@ -3,7 +3,12 @@ import { SlotComponentProps } from '@mui/base/utils';
 import TextField, { TextFieldProps } from '@mui/material/TextField';
 import Stack, { StackProps } from '@mui/material/Stack';
 import Typography, { TypographyProps } from '@mui/material/Typography';
-import { BaseFieldProps } from '@mui/x-date-pickers/internals';
+import { BaseFieldProps, FieldSection } from '@mui/x-date-pickers/internals';
+export interface RangeFieldSection extends FieldSection {
+    dateName: 'start' | 'end';
+}
+export interface RangeFieldSectionWithoutPosition extends Omit<RangeFieldSection, 'start' | 'end' | 'startInInput' | 'endInInput'> {
+}
 export interface BaseMultiInputFieldProps<TValue, TError> extends Omit<BaseFieldProps<TValue, TError>, 'components' | 'componentsProps'> {
     components?: {
         Root?: React.ElementType<StackProps>;

package/internal/models/range.d.ts

@@ -1,4 +1,3 @@
-import { FieldSection } from '@mui/x-date-pickers/internals';
 export type DateRange<TDate> = [TDate | null, TDate | null];
 export type NonEmptyDateRange<TDate> = [TDate, TDate];
 export type RangePosition = 'start' | 'end';
@@ -6,6 +5,3 @@ export interface RangePositionProps {
     rangePosition: RangePosition;
     onRangePositionChange: (newPosition: RangePosition) => void;
 }
-export interface DateRangeFieldSection extends FieldSection {
-    dateName: 'start' | 'end';
-}

package/internal/utils/date-fields-utils.d.ts

@@ -1,6 +1,6 @@
-import { DateRangeFieldSection } from '../models/range';
-export declare const splitDateRangeSections: (sections: DateRangeFieldSection[]) => {
-    startDate: DateRangeFieldSection[];
-    endDate: DateRangeFieldSection[];
+import { RangeFieldSection } from '../models/fields';
+export declare const splitDateRangeSections: (sections: RangeFieldSection[]) => {
+    startDate: RangeFieldSection[];
+    endDate: RangeFieldSection[];
 };
-export declare const removeLastSeparator: (dateSections: DateRangeFieldSection[]) => DateRangeFieldSection[];
+export declare const removeLastSeparator: (dateSections: RangeFieldSection[]) => RangeFieldSection[];

package/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/internal/utils/valueManagers.d.ts

@@ -1,8 +1,9 @@
 import { PickerStateValueManager, FieldValueManager } from '@mui/x-date-pickers/internals';
-import { DateRange, DateRangeFieldSection } from '../models/range';
+import { DateRange } from '../models/range';
 import type { DateRangeValidationError } from '../hooks/validation/useDateRangeValidation';
 import type { TimeRangeValidationError } from '../hooks/validation/useTimeRangeValidation';
 import type { DateTimeRangeValidationError } from '../hooks/validation/useDateTimeRangeValidation';
+import { RangeFieldSection } from '../models/fields';
 export type RangePickerStateValueManager<TValue = [any, any], TDate = any, TError extends DateRangeValidationError | TimeRangeValidationError | DateTimeRangeValidationError = any> = PickerStateValueManager<TValue, TDate, TError>;
 export declare const rangeValueManager: RangePickerStateValueManager;
-export declare const rangeFieldValueManager: FieldValueManager<DateRange<any>, any, DateRangeFieldSection, DateRangeValidationError | TimeRangeValidationError | DateTimeRangeValidationError>;
+export declare const rangeFieldValueManager: FieldValueManager<DateRange<any>, any, RangeFieldSection, DateRangeValidationError | TimeRangeValidationError | DateTimeRangeValidationError>;

package/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/legacy/DateRangeCalendar/DateRangeCalendar.js

@@ -13,7 +13,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';
@@ -112,6 +112,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
 var DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalendar(inProps, ref) {
   var utils = useUtils();
   var localeText = useLocaleText();
+  var now = useNow();
   var props = useDateRangeCalendarDefaultizedProps(inProps, 'MuiDateRangeCalendar');
   var isMobile = React.useContext(WrapperVariantContext) === 'mobile';
   var valueProp = props.value,
@@ -368,6 +369,32 @@ var DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalendar
       return utils.setMonth(calendarState.currentMonth, utils.getMonth(calendarState.currentMonth) + index);
     });
   }, [utils, calendarState.currentMonth, calendars]);
+  var focusedMonth = React.useMemo(function () {
+    var _visibleMonths$find;
+    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(function (month) {
+        return utils.isSameMonth(month, value[0]);
+      });
+    }
+    if (value[1] != null) {
+      return visibleMonths.find(function (month) {
+        return utils.isSameMonth(month, value[1]);
+      });
+    }
+    return (_visibleMonths$find = visibleMonths.find(function (month) {
+      return utils.isSameMonth(month, now);
+    })) != null ? _visibleMonths$find : visibleMonths[0];
+  }, [utils, value, visibleMonths, autoFocus, now]);
   return /*#__PURE__*/_jsxs(DateRangeCalendarRoot, _extends({
     ref: ref,
     className: clsx(className, classes.root),
@@ -426,7 +453,7 @@ var DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalendar
           renderLoading: renderLoading,
           components: componentsForDayCalendar,
           componentsProps: componentsPropsForDayCalendar,
-          autoFocus: autoFocus,
+          autoFocus: month === focusedMonth,
           fixedWeekNumber: fixedWeekNumber,
           displayWeekNumber: displayWeekNumber
         }), index)]

package/legacy/DateRangePicker/DateRangePicker.js

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

@@ -78,7 +78,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/legacy/DesktopNextDateRangePicker/DesktopNextDateRangePicker.js

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

package/legacy/MobileDateRangePicker/MobileDateRangePicker.js

@@ -83,7 +83,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