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

package/modern/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["components", "componentsProps"],
-  _excluded2 = ["ref", "onPaste", "inputMode"];
+  _excluded2 = ["ref", "onPaste", "inputMode", "readOnly"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import TextField from '@mui/material/TextField';
@@ -34,7 +34,8 @@ const SingleInputDateRangeField = /*#__PURE__*/React.forwardRef(function SingleI
     {
       ref: inputRef,
       onPaste,
-      inputMode
+      inputMode,
+      readOnly
     } = _useSingleInputDateRa,
     fieldProps = _objectWithoutPropertiesLoose(_useSingleInputDateRa, _excluded2);
   return /*#__PURE__*/_jsx(Input, _extends({
@@ -43,7 +44,8 @@ const SingleInputDateRangeField = /*#__PURE__*/React.forwardRef(function SingleI
     inputProps: _extends({}, fieldProps.inputProps, {
       ref: inputRef,
       onPaste,
-      inputMode
+      inputMode,
+      readOnly
     })
   }));
 });
@@ -52,6 +54,19 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * If `true`, the `input` element is focused during the first mount.
+   * @default false
+   */
+  autoFocus: PropTypes.bool,
+  className: PropTypes.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   * @default 'primary'
+   */
+  color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
   /**
    * Overrideable components.
    * @default {}
@@ -66,6 +81,11 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    * The default value. Use when the component is not controlled.
    */
   defaultValue: PropTypes.arrayOf(PropTypes.any),
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
   /**
    * If `true` disable values before the current date for date components, time for time components and both for date time components.
    * @default false
@@ -76,10 +96,70 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    * @default false
    */
   disablePast: PropTypes.bool,
+  /**
+   * If `true`, the component is displayed in focused state.
+   */
+  focused: PropTypes.bool,
   /**
    * Format of the date when rendered in the input(s).
    */
   format: PropTypes.string,
+  /**
+   * Props applied to the [`FormHelperText`](/material-ui/api/form-helper-text/) element.
+   */
+  FormHelperTextProps: PropTypes.object,
+  /**
+   * If `true`, the input will take up the full width of its container.
+   * @default false
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * The helper text content.
+   */
+  helperText: PropTypes.node,
+  /**
+   * If `true`, the label is hidden.
+   * This is used to increase density for a `FilledInput`.
+   * Be sure to add `aria-label` to the `input` element.
+   * @default false
+   */
+  hiddenLabel: PropTypes.bool,
+  /**
+   * The id of the `input` element.
+   * Use this prop to make `label` and `helperText` accessible for screen readers.
+   */
+  id: PropTypes.string,
+  /**
+   * Props applied to the [`InputLabel`](/material-ui/api/input-label/) element.
+   * Pointer events like `onClick` are enabled if and only if `shrink` is `true`.
+   */
+  InputLabelProps: PropTypes.object,
+  /**
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
+   */
+  inputProps: PropTypes.object,
+  /**
+   * Props applied to the Input element.
+   * It will be a [`FilledInput`](/material-ui/api/filled-input/),
+   * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
+   * component depending on the `variant` prop value.
+   */
+  InputProps: PropTypes.object,
+  /**
+   * Pass a ref to the `input` element.
+   */
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.any.isRequired
+  })]),
+  /**
+   * The label content.
+   */
+  label: PropTypes.node,
+  /**
+   * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
+   * @default 'none'
+   */
+  margin: PropTypes.oneOf(['dense', 'none', 'normal']),
   /**
    * Maximal selectable date.
    */
@@ -88,6 +168,11 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    * Minimal selectable date.
    */
   minDate: PropTypes.any,
+  /**
+   * Name attribute of the `input` element.
+   */
+  name: PropTypes.string,
+  onBlur: PropTypes.func,
   /**
    * Callback fired when the value changes.
    * @template TValue, TError
@@ -102,6 +187,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    * @param {TValue} value The value associated to the error.
    */
   onError: PropTypes.func,
+  onFocus: PropTypes.func,
   /**
    * Callback fired when the selected sections change.
    * @param {FieldSelectedSections} newValue The new selected sections.
@@ -113,6 +199,11 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    * @default false
    */
   readOnly: PropTypes.bool,
+  /**
+   * If `true`, the label is displayed as required and the `input` element is required.
+   * @default false
+   */
+  required: PropTypes.bool,
   /**
    * The currently selected sections.
    * This prop accept four formats:
@@ -122,7 +213,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    * 4. If `null` is provided, no section will be selected
    * If not provided, the selected sections will be handled internally.
    */
-  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']), PropTypes.number, PropTypes.shape({
+  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']), PropTypes.number, PropTypes.shape({
     endIndex: PropTypes.number.isRequired,
     startIndex: PropTypes.number.isRequired
   })]),
@@ -134,10 +225,24 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    * @returns {boolean} Returns `true` if the date should be disabled.
    */
   shouldDisableDate: PropTypes.func,
+  /**
+   * The size of the component.
+   */
+  size: PropTypes.oneOf(['medium', 'small']),
+  style: PropTypes.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   /**
    * The selected value.
    * Used when the component is controlled.
    */
-  value: PropTypes.arrayOf(PropTypes.any)
+  value: PropTypes.arrayOf(PropTypes.any),
+  /**
+   * The variant to use.
+   * @default 'outlined'
+   */
+  variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
 } : void 0;
 export { SingleInputDateRangeField };

package/modern/StaticDateRangePicker/StaticDateRangePicker.js

@@ -245,11 +245,6 @@ process.env.NODE_ENV !== "production" ? StaticDateRangePicker.propTypes = {
    * @returns {void|Promise} -
    */
   onMonthChange: PropTypes.func,
-  /**
-   * Callback fired on view change.
-   * @param {DateView} view The new view.
-   */
-  onViewChange: PropTypes.func,
   /**
    * Props to pass to keyboard adornment button.
    */

package/modern/StaticNextDateRangePicker/StaticNextDateRangePicker.js

@@ -3,18 +3,19 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useStaticRangePicker } from '../internal/hooks/useStaticRangePicker';
 import { useNextDateRangePickerDefaultizedProps } from '../NextDateRangePicker/shared';
+import { renderDateRangeViewCalendar } from '../dateRangeViewRenderers';
 import { rangeValueManager } from '../internal/utils/valueManagers';
-import { renderDateRangeView } from '../internal/utils/viewRenderers';
 import { validateDateRange } from '../internal/hooks/validation/useDateRangeValidation';
-const VIEW_LOOKUP = {
-  day: renderDateRangeView
-};
 const StaticNextDateRangePicker = /*#__PURE__*/React.forwardRef(function StaticNextDateRangePicker(inProps, ref) {
   const defaultizedProps = useNextDateRangePickerDefaultizedProps(inProps, 'MuiStaticNextDateRangePicker');
   const displayStaticWrapperAs = defaultizedProps.displayStaticWrapperAs ?? 'mobile';
+  const viewRenderers = _extends({
+    day: renderDateRangeViewCalendar
+  }, defaultizedProps.viewRenderers);
 
   // Props with the default values specific to the static variant
   const props = _extends({}, defaultizedProps, {
+    viewRenderers,
     displayStaticWrapperAs,
     views: ['day'],
     openTo: 'day',
@@ -26,7 +27,6 @@ const StaticNextDateRangePicker = /*#__PURE__*/React.forwardRef(function StaticN
   } = useStaticRangePicker({
     props,
     valueManager: rangeValueManager,
-    viewLookup: VIEW_LOOKUP,
     validator: validateDateRange,
     ref
   });
@@ -37,6 +37,12 @@ StaticNextDateRangePicker.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
   autoFocus: PropTypes.bool,
   /**
    * The number of calendars to render.
@@ -204,6 +210,14 @@ StaticNextDateRangePicker.propTypes = {
    * The selected value.
    * Used when the component is controlled.
    */
-  value: PropTypes.arrayOf(PropTypes.any)
+  value: PropTypes.arrayOf(PropTypes.any),
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be the used.
+   */
+  viewRenderers: PropTypes.shape({
+    day: PropTypes.func
+  })
 };
 export { StaticNextDateRangePicker };

package/modern/{internal/utils/viewRenderers.js → dateRangeViewRenderers/dateRangeViewRenderers.js}

@@ -1,12 +1,11 @@
 import * as React from 'react';
-import { DateRangeCalendar } from '../../DateRangeCalendar';
-
+import { DateRangeCalendar } from '../DateRangeCalendar';
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * We don't pass all the props down to `DateRangeCalendar`,
  * because otherwise some unwanted props would be passed to the HTML element.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-export const renderDateRangeView = ({
+export const renderDateRangeViewCalendar = ({
   value,
   defaultValue,
   onChange,

package/modern/dateRangeViewRenderers/index.js

@@ -0,0 +1 @@
+export { renderDateRangeViewCalendar } from './dateRangeViewRenderers';

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v6.0.0-alpha.12
+/** @license MUI v6.0.0-alpha.13
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -23,4 +23,7 @@ export * from './DateRangeCalendar';
 export * from './NextDateRangePicker';
 export * from './DesktopNextDateRangePicker';
 export * from './MobileNextDateRangePicker';
-export * from './StaticNextDateRangePicker';
+export * from './StaticNextDateRangePicker';
+
+// View renderers
+export * from './dateRangeViewRenderers';

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

@@ -12,7 +12,6 @@ const releaseInfo = getReleaseInfo();
 export const useDesktopRangePicker = ({
   props,
   valueManager,
-  viewLookup,
   validator
 }) => {
   useLicenseVerifier('x-date-pickers-pro', releaseInfo);
@@ -41,7 +40,6 @@ export const useDesktopRangePicker = ({
     props,
     valueManager,
     wrapperVariant: 'desktop',
-    viewLookup,
     validator,
     autoFocusView: true,
     additionalViewProps: {
@@ -58,7 +56,7 @@ export const useDesktopRangePicker = ({
     });
   };
   const fieldSlotsProps = useRangePickerInputProps({
-    wrapperVariant: 'mobile',
+    wrapperVariant: 'desktop',
     open,
     actions,
     readOnly,
@@ -94,7 +92,7 @@ export const useDesktopRangePicker = ({
       const inputPropsPassedByField = resolveComponentProps(fieldProps.componentsProps?.input, ownerState);
       const inputPropsPassedByPicker = ownerState.position === 'start' ? fieldSlotsProps.startInput : fieldSlotsProps.endInput;
       return _extends({}, externalInputProps, inputPropsPassedByField, inputPropsPassedByPicker, {
-        inputProps: _extends({}, externalInputProps?.inputProps, inputPropsPassedByField?.inputProps, inputPropsPassedByPicker?.inputProps)
+        inputProps: _extends({}, externalInputProps?.inputProps, inputPropsPassedByField?.inputProps)
       });
     },
     root: ownerState => {

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

@@ -12,7 +12,6 @@ const releaseInfo = getReleaseInfo();
 export const useMobileRangePicker = ({
   props,
   valueManager,
-  viewLookup,
   validator
 }) => {
   useLicenseVerifier('x-date-pickers-pro', releaseInfo);
@@ -38,7 +37,6 @@ export const useMobileRangePicker = ({
     props,
     valueManager,
     wrapperVariant: 'mobile',
-    viewLookup,
     validator,
     autoFocusView: true,
     additionalViewProps: {
@@ -62,7 +60,7 @@ export const useMobileRangePicker = ({
     elementType: Field,
     externalSlotProps: componentsProps.field,
     additionalProps: _extends({}, pickerFieldProps, {
-      readOnly,
+      readOnly: readOnly ?? true,
       disabled,
       className,
       format,
@@ -79,7 +77,7 @@ export const useMobileRangePicker = ({
       const inputPropsPassedByField = resolveComponentProps(fieldProps.componentsProps?.input, ownerState);
       const inputPropsPassedByPicker = ownerState.position === 'start' ? fieldSlotsProps.startInput : fieldSlotsProps.endInput;
       return _extends({}, externalInputProps, inputPropsPassedByField, inputPropsPassedByPicker, {
-        inputProps: _extends({}, externalInputProps?.inputProps, inputPropsPassedByField?.inputProps, inputPropsPassedByPicker?.inputProps)
+        inputProps: _extends({}, externalInputProps?.inputProps, inputPropsPassedByField?.inputProps)
       });
     },
     root: ownerState => {

package/modern/internal/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js

@@ -19,7 +19,9 @@ export const useMultiInputDateRangeField = ({
     value: valueProp,
     defaultValue,
     format,
-    onChange
+    onChange,
+    disabled,
+    readOnly
   } = sharedProps;
   const firstDefaultValue = React.useRef(defaultValue);
 
@@ -46,6 +48,8 @@ export const useMultiInputDateRangeField = ({
   const handleStartDateChange = useEventCallback(buildChangeHandler(0));
   const handleEndDateChange = useEventCallback(buildChangeHandler(1));
   const startInputProps = _extends({}, inStartInputProps, {
+    disabled,
+    readOnly,
     format,
     value: valueProp === undefined ? undefined : valueProp[0],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
@@ -53,6 +57,8 @@ export const useMultiInputDateRangeField = ({
   });
   const endInputProps = _extends({}, inEndInputProps, {
     format,
+    disabled,
+    readOnly,
     value: valueProp === undefined ? undefined : valueProp[1],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[1],
     onChange: handleEndDateChange

package/modern/internal/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js

@@ -34,7 +34,9 @@ export const useMultiInputDateTimeRangeField = ({
     value: valueProp,
     defaultValue,
     format,
-    onChange
+    onChange,
+    disabled,
+    readOnly
   } = sharedProps;
   const firstDefaultValue = React.useRef(defaultValue);
 
@@ -62,12 +64,16 @@ export const useMultiInputDateTimeRangeField = ({
   const handleEndDateChange = useEventCallback(buildChangeHandler(1));
   const startInputProps = _extends({}, inStartInputProps, {
     format,
+    disabled,
+    readOnly,
     value: valueProp === undefined ? undefined : valueProp[0],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
     onChange: handleStartDateChange
   });
   const endInputProps = _extends({}, inEndInputProps, {
     format,
+    disabled,
+    readOnly,
     value: valueProp === undefined ? undefined : valueProp[1],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[1],
     onChange: handleEndDateChange

package/modern/internal/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.js

@@ -30,7 +30,9 @@ export const useMultiInputTimeRangeField = ({
     value: valueProp,
     defaultValue,
     format,
-    onChange
+    onChange,
+    disabled,
+    readOnly
   } = sharedProps;
   const firstDefaultValue = React.useRef(defaultValue);
 
@@ -58,12 +60,16 @@ export const useMultiInputTimeRangeField = ({
   const handleEndDateChange = useEventCallback(buildChangeHandler(1));
   const startInputProps = _extends({}, inStartInputProps, {
     format,
+    disabled,
+    readOnly,
     value: valueProp === undefined ? undefined : valueProp[0],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
     onChange: handleStartDateChange
   });
   const endInputProps = _extends({}, inEndInputProps, {
     format,
+    disabled,
+    readOnly,
     value: valueProp === undefined ? undefined : valueProp[1],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[1],
     onChange: handleEndDateChange

package/modern/internal/hooks/useRangePickerInputProps.js

@@ -50,6 +50,7 @@ export const useRangePickerInputProps = ({
       onRangePositionChange('end');
     }
   };
+  const readOnlyInput = readOnly ?? wrapperVariant === 'mobile';
   const startInputProps = _extends({
     inputRef: startRef,
     label: inLocaleText?.start ?? localeText.start,
@@ -59,9 +60,8 @@ export const useRangePickerInputProps = ({
   }, !readOnly && !disabled && {
     onClick: openRangeStartSelection
   }, {
-    inputProps: {
-      readOnly: wrapperVariant === 'mobile'
-    }
+    readOnly: readOnlyInput,
+    disabled
   });
   const endInputProps = _extends({
     inputRef: endRef,
@@ -72,9 +72,8 @@ export const useRangePickerInputProps = ({
   }, !readOnly && !disabled && {
     onClick: openRangeEndSelection
   }, {
-    inputProps: {
-      readOnly: wrapperVariant === 'mobile'
-    }
+    readOnly: readOnlyInput,
+    disabled
   });
   const rootProps = {
     onBlur

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

@@ -19,7 +19,6 @@ const PickerStaticViewLayout = styled(PickersViewLayout)(({
 export const useStaticRangePicker = ({
   props,
   valueManager,
-  viewLookup,
   validator,
   ref
 }) => {
@@ -36,7 +35,6 @@ export const useStaticRangePicker = ({
     renderCurrentView
   } = usePicker({
     props,
-    viewLookup,
     valueManager,
     validator,
     autoFocusView: autoFocus ?? false,

package/modern/internal/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY3MTE0NTIwMDAwMA==";
+  const releaseInfo = "MTY3MTgzMjgwMDAwMA==";
   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, getSectionOrder } from '@mui/x-date-pickers/internals';
+import { replaceInvalidDateByNull, splitFormatIntoSections, addPositionPropertiesToSections, createDateStrForInputFromSections, getSectionOrder } from '@mui/x-date-pickers/internals';
 import { splitDateRangeSections, removeLastSeparator } from './date-fields-utils';
 export const rangeValueManager = {
   emptyValue: [null, null],
@@ -29,35 +29,29 @@ export const rangeFieldValueManager = {
       startDate: null,
       endDate: null
     } : splitDateRangeSections(prevSections);
-    const getSections = (newDate, prevDateSections) => {
+    const getSections = (newDate, prevDateSections, position) => {
       const shouldReUsePrevDateSections = !utils.isValid(newDate) && !!prevDateSections;
       if (shouldReUsePrevDateSections) {
         return prevDateSections;
       }
-      return splitFormatIntoSections(utils, localeText, format, newDate);
-    };
-    const rawSectionsOfStartDate = getSections(start, prevDateRangeSections.startDate);
-    const rawSectionsOfEndDate = getSections(end, prevDateRangeSections.endDate);
-    const sectionsOfStartDate = rawSectionsOfStartDate.map((section, sectionIndex) => {
-      if (sectionIndex === rawSectionsOfStartDate.length - 1) {
+      const sections = splitFormatIntoSections(utils, localeText, format, newDate);
+      return sections.map((section, sectionIndex) => {
+        if (sectionIndex === sections.length - 1 && position === 'start') {
+          return _extends({}, section, {
+            dateName: position,
+            endSeparator: `${section.endSeparator}\u2069 – \u2066`
+          });
+        }
         return _extends({}, section, {
-          dateName: 'start',
-          separator: `\u2069 – \u2066`,
-          parsingSeparator: ' – '
+          dateName: position
         });
-      }
-      return _extends({}, section, {
-        dateName: 'start'
       });
-    });
-    const sectionsOfEndDate = rawSectionsOfEndDate.map(section => _extends({}, section, {
-      dateName: 'end'
-    }));
-    return addPositionPropertiesToSections([...sectionsOfStartDate, ...sectionsOfEndDate]);
+    };
+    return addPositionPropertiesToSections([...getSections(start, prevDateRangeSections.startDate, 'start'), ...getSections(end, prevDateRangeSections.endDate, 'end')]);
   },
   getValueStrFromSections: sections => {
     const dateRangeSections = splitDateRangeSections(sections);
-    return createDateStrFromSections([...dateRangeSections.startDate, ...dateRangeSections.endDate], true);
+    return createDateStrForInputFromSections([...dateRangeSections.startDate, ...dateRangeSections.endDate]);
   },
   getActiveDateSections: (sections, activeSection) => {
     const index = activeSection.dateName === 'start' ? 0 : 1;
@@ -90,7 +84,7 @@ export const rangeFieldValueManager = {
   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: ' – '
+      endSeparator: ' – '
     }), ...splitedFormat], isRTL);
   }
 };

package/modern/tests/describeRangeValidation/testTextFieldRangeValidation.js

@@ -26,7 +26,7 @@ export const testTextFieldRangeValidation = (ElementToTest, getOptions) => {
     withDate,
     withTime
   } = getOptions();
-  if (!['legacy-picker', 'picker'].includes(componentFamily)) {
+  if (!['legacy-picker', 'new-picker'].includes(componentFamily)) {
     return;
   }
   describe('text field:', () => {

package/node/DateRangeCalendar/DateRangeCalendar.js

@@ -387,7 +387,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       className: classes.monthContainer,
       children: [calendars === 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickersCalendarHeader, {
         views: ['day'],
-        openView: 'day',
+        view: 'day',
         currentMonth: calendarState.currentMonth,
         onMonthChange: (newMonth, direction) => handleChangeMonth({
           newMonth,
@@ -443,6 +443,12 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
   autoFocus: _propTypes.default.bool,
   /**
    * The number of calendars to render.

package/node/DateRangePicker/DateRangePicker.js

@@ -244,11 +244,6 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * Use in controlled mode (see open).
    */
   onOpen: _propTypes.default.func,
-  /**
-   * Callback fired on view change.
-   * @param {DateView} view The new view.
-   */
-  onViewChange: _propTypes.default.func,
   /**
    * Control the popup or dialog open state.
    */

package/node/DateRangePicker/DateRangePickerView.js

@@ -18,7 +18,7 @@ var _DateRangePickerInput = require("./DateRangePickerInput");
 var _DateRangePickerViewDesktop = require("./DateRangePickerViewDesktop");
 var _releaseInfo = require("../internal/utils/releaseInfo");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["calendars", "className", "value", "DateInputProps", "defaultCalendarMonth", "disableAutoMonthSwitching", "disableFuture", "disableHighlightToday", "disablePast", "isMobileKeyboardViewOpen", "maxDate", "minDate", "onDateChange", "onMonthChange", "open", "reduceAnimations", "rangePosition", "onRangePositionChange", "shouldDisableDate", "showToolbar", "toggleMobileKeyboardView", "components", "componentsProps"];
+const _excluded = ["calendars", "className", "value", "DateInputProps", "defaultCalendarMonth", "disableAutoMonthSwitching", "disableFuture", "disableHighlightToday", "disablePast", "isMobileKeyboardViewOpen", "maxDate", "minDate", "onDateChange", "onMonthChange", "open", "reduceAnimations", "rangePosition", "onRangePositionChange", "shouldDisableDate", "showToolbar", "toggleMobileKeyboardView", "components", "componentsProps", "onFocusedViewChange"];
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const releaseInfo = (0, _releaseInfo.getReleaseInfo)();
@@ -48,7 +48,8 @@ function DateRangePickerViewRaw(props) {
       showToolbar,
       toggleMobileKeyboardView,
       components,
-      componentsProps
+      componentsProps,
+      onFocusedViewChange
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const utils = (0, _internals.useUtils)();
@@ -130,7 +131,9 @@ function DateRangePickerViewRaw(props) {
       components,
       componentsProps,
       shouldDisableDate: wrappedShouldDisableDate
-    }, calendarState, other);
+    }, calendarState, {
+      onFocusedViewChange: onFocusedViewChange ? newHasFocus => onFocusedViewChange('day', newHasFocus) : undefined
+    }, other);
     switch (wrapperVariant) {
       case 'desktop':
         {