@mui/x-date-pickers-pro 8.0.0-alpha.1 → 8.0.0-alpha.11

package/modern/internals/utils/createMultiInputRangeField/index.js

@@ -0,0 +1,2 @@
+export { createMultiInputRangeField } from "./createMultiInputRangeField.js";
+export { useMultiInputRangeField as unstable_useMultiInputRangeField } from "../../../hooks/useMultiInputRangeField/useMultiInputRangeField.js";

package/modern/internals/utils/date-range-manager.js

@@ -8,7 +8,8 @@ export function calculateRangeChange({
   shouldMergeDateAndTime = false,
   referenceDate
 }) {
-  const [start, end] = range;
+  const start = !utils.isValid(range[0]) ? null : range[0];
+  const end = !utils.isValid(range[1]) ? null : range[1];
   if (shouldMergeDateAndTime && selectedDate) {
     // If there is a date already selected, then we want to keep its time
     if (start && rangePosition === 'start') {

package/modern/internals/utils/releaseInfo.js

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

@@ -12,8 +12,8 @@ export const rangeValueManager = {
         referenceDate: referenceDateProp
       } = _ref,
       params = _objectWithoutPropertiesLoose(_ref, _excluded);
-    const shouldKeepStartDate = value[0] != null && params.utils.isValid(value[0]);
-    const shouldKeepEndDate = value[1] != null && params.utils.isValid(value[1]);
+    const shouldKeepStartDate = params.utils.isValid(value[0]);
+    const shouldKeepEndDate = params.utils.isValid(value[1]);
     if (shouldKeepStartDate && shouldKeepEndDate) {
       return value;
     }
@@ -26,8 +26,8 @@ export const rangeValueManager = {
   hasError: error => error[0] != null || error[1] != null,
   defaultErrorState: [null, null],
   getTimezone: (utils, value) => {
-    const timezoneStart = value[0] == null || !utils.isValid(value[0]) ? null : utils.getTimezone(value[0]);
-    const timezoneEnd = value[1] == null || !utils.isValid(value[1]) ? null : utils.getTimezone(value[1]);
+    const timezoneStart = utils.isValid(value[0]) ? utils.getTimezone(value[0]) : null;
+    const timezoneEnd = utils.isValid(value[1]) ? utils.getTimezone(value[1]) : null;
     if (timezoneStart != null && timezoneEnd != null && timezoneStart !== timezoneEnd) {
       throw new Error('MUI X: The timezone of the start and the end date should be the same.');
     }
@@ -39,8 +39,8 @@ export const getRangeFieldValueManager = ({
   dateSeparator = '–'
 }) => ({
   updateReferenceValue: (utils, value, prevReferenceValue) => {
-    const shouldKeepStartDate = value[0] != null && utils.isValid(value[0]);
-    const shouldKeepEndDate = value[1] != null && utils.isValid(value[1]);
+    const shouldKeepStartDate = utils.isValid(value[0]);
+    const shouldKeepEndDate = utils.isValid(value[1]);
     if (!shouldKeepStartDate && !shouldKeepEndDate) {
       return prevReferenceValue;
     }
@@ -111,7 +111,7 @@ export const getRangeFieldValueManager = ({
       },
       getNewValuesFromNewActiveDate: newActiveDate => ({
         value: updateDateInRange(newActiveDate, state.value),
-        referenceValue: newActiveDate == null || !utils.isValid(newActiveDate) ? state.referenceValue : updateDateInRange(newActiveDate, state.referenceValue)
+        referenceValue: !utils.isValid(newActiveDate) ? state.referenceValue : updateDateInRange(newActiveDate, state.referenceValue)
       })
     };
   }

package/modern/managers/index.js

@@ -0,0 +1,3 @@
+export { useDateRangeManager } from "./useDateRangeManager.js";
+export { useTimeRangeManager } from "./useTimeRangeManager.js";
+export { useDateTimeRangeManager } from "./useDateTimeRangeManager.js";

package/modern/managers/useDateRangeManager.js

@@ -0,0 +1,33 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { getDateFieldInternalPropsDefaults } from '@mui/x-date-pickers/internals';
+import { getRangeFieldValueManager, rangeValueManager } from "../internals/utils/valueManagers.js";
+import { validateDateRange } from "../validation/index.js";
+export function useDateRangeManager(parameters = {}) {
+  const {
+    enableAccessibleFieldDOMStructure = true,
+    dateSeparator
+  } = parameters;
+  return React.useMemo(() => ({
+    valueType: 'date',
+    validator: validateDateRange,
+    internal_valueManager: rangeValueManager,
+    internal_fieldValueManager: getRangeFieldValueManager({
+      dateSeparator
+    }),
+    internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
+    internal_applyDefaultsToFieldInternalProps: ({
+      internalProps,
+      utils,
+      defaultDates
+    }) => _extends({}, internalProps, getDateFieldInternalPropsDefaults({
+      defaultDates,
+      utils,
+      internalProps
+    })),
+    // TODO v8: Add a real aria label before moving the opening logic to the field on range pickers.
+    internal_getOpenPickerButtonAriaLabel: () => ''
+  }), [enableAccessibleFieldDOMStructure, dateSeparator]);
+}

package/modern/managers/useDateTimeRangeManager.js

@@ -0,0 +1,33 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { getDateTimeFieldInternalPropsDefaults } from '@mui/x-date-pickers/internals';
+import { getRangeFieldValueManager, rangeValueManager } from "../internals/utils/valueManagers.js";
+import { validateDateTimeRange } from "../validation/index.js";
+export function useDateTimeRangeManager(parameters = {}) {
+  const {
+    enableAccessibleFieldDOMStructure = true,
+    dateSeparator
+  } = parameters;
+  return React.useMemo(() => ({
+    valueType: 'date-time',
+    validator: validateDateTimeRange,
+    internal_valueManager: rangeValueManager,
+    internal_fieldValueManager: getRangeFieldValueManager({
+      dateSeparator
+    }),
+    internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
+    internal_applyDefaultsToFieldInternalProps: ({
+      internalProps,
+      utils,
+      defaultDates
+    }) => _extends({}, internalProps, getDateTimeFieldInternalPropsDefaults({
+      internalProps,
+      utils,
+      defaultDates
+    })),
+    // TODO v8: Add a real aria label before moving the opening logic to the field on range pickers.
+    internal_getOpenPickerButtonAriaLabel: () => ''
+  }), [enableAccessibleFieldDOMStructure, dateSeparator]);
+}

package/modern/managers/useTimeRangeManager.js

@@ -0,0 +1,31 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { getTimeFieldInternalPropsDefaults } from '@mui/x-date-pickers/internals';
+import { getRangeFieldValueManager, rangeValueManager } from "../internals/utils/valueManagers.js";
+import { validateTimeRange } from "../validation/index.js";
+export function useTimeRangeManager(parameters = {}) {
+  const {
+    enableAccessibleFieldDOMStructure = true,
+    dateSeparator
+  } = parameters;
+  return React.useMemo(() => ({
+    valueType: 'time',
+    validator: validateTimeRange,
+    internal_valueManager: rangeValueManager,
+    internal_fieldValueManager: getRangeFieldValueManager({
+      dateSeparator
+    }),
+    internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
+    internal_applyDefaultsToFieldInternalProps: ({
+      internalProps,
+      utils
+    }) => _extends({}, internalProps, getTimeFieldInternalPropsDefaults({
+      utils,
+      internalProps
+    })),
+    // TODO v8: Add a real aria label before moving the opening logic to the field on range pickers.
+    internal_getOpenPickerButtonAriaLabel: () => ''
+  }), [enableAccessibleFieldDOMStructure, dateSeparator]);
+}

package/modern/models/index.js

@@ -1,5 +1,4 @@
-export * from "./dateRange.js";
 export * from "./fields.js";
 export * from "./range.js";
 export * from "./validation.js";
-export * from "./multiInputRangeFieldClasses.js";
+export {};

package/modern/validation/validateDateRange.js

@@ -9,6 +9,14 @@ import { rangeValueManager } from "../internals/utils/valueManagers.js";
  * Validation props used by the Date Range Picker, Date Range Field and Date Range Calendar components.
  */
 
+/**
+ * Validation props as received by the validateDateRange method.
+ */
+
+/**
+ * Name of the props that should be defaulted before being passed to the validateDateRange method.
+ */
+
 export const validateDateRange = ({
   adapter,
   value,

package/modern/validation/validateDateTimeRange.js

@@ -9,6 +9,10 @@ import { rangeValueManager } from "../internals/utils/valueManagers.js";
  * Validation props used by the Date Time Range Picker and Date Time Range Field.
  */
 
+/**
+ * Validation props as received by the validateDateTimeRange method.
+ */
+
 export const validateDateTimeRange = ({
   adapter,
   value,

package/modern/validation/validateTimeRange.js

@@ -6,6 +6,14 @@ import { rangeValueManager } from "../internals/utils/valueManagers.js";
  * Validation props used by the Time Range Picker and Time Range Field.
  */
 
+/**
+ * Validation props as received by the validateTimeRange method.
+ */
+
+/**
+ * Name of the props that should be defaulted before being passed to the validateTimeRange method.
+ */
+
 export const validateTimeRange = ({
   adapter,
   value,

package/node/{AdapterDateFnsJalaliV3 → AdapterDateFnsJalaliV2}/index.js

@@ -9,4 +9,4 @@ Object.defineProperty(exports, "AdapterDateFnsJalali", {
     return _AdapterDateFnsJalaliV.AdapterDateFnsJalali;
   }
 });
-var _AdapterDateFnsJalaliV = require("@mui/x-date-pickers/AdapterDateFnsJalaliV3");
+var _AdapterDateFnsJalaliV = require("@mui/x-date-pickers/AdapterDateFnsJalaliV2");

package/node/{AdapterDateFnsV3 → AdapterDateFnsV2}/index.js

@@ -9,4 +9,4 @@ Object.defineProperty(exports, "AdapterDateFns", {
     return _AdapterDateFnsV.AdapterDateFns;
   }
 });
-var _AdapterDateFnsV = require("@mui/x-date-pickers/AdapterDateFnsV3");
+var _AdapterDateFnsV = require("@mui/x-date-pickers/AdapterDateFnsV2");

package/node/DateRangeCalendar/DateRangeCalendar.js

@@ -32,8 +32,9 @@ var _useDragRange2 = require("./useDragRange");
 var _useRangePosition = require("../internals/hooks/useRangePosition");
 var _dimensions = require("../internals/constants/dimensions");
 var _PickersRangeCalendarHeader = require("../PickersRangeCalendarHeader");
+var _useNullablePickerRangePositionContext = require("../internals/hooks/useNullablePickerRangePositionContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["value", "defaultValue", "referenceDate", "onChange", "className", "classes", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "rangePosition", "defaultRangePosition", "onRangePositionChange", "calendars", "currentMonthCalendarPosition", "slots", "slotProps", "loading", "renderLoading", "disableHighlightToday", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber", "timezone", "availableRangePositions", "views", "view", "openTo", "onViewChange"],
+const _excluded = ["value", "defaultValue", "referenceDate", "onChange", "className", "classes", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "rangePosition", "defaultRangePosition", "onRangePositionChange", "calendars", "currentMonthCalendarPosition", "slots", "slotProps", "loading", "renderLoading", "disableHighlightToday", "focusedView", "onFocusedViewChange", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber", "timezone", "availableRangePositions", "views", "view", "openTo", "onViewChange"],
   _excluded2 = ["isDragging", "rangeDragDay", "draggingDatePosition"];
 const releaseInfo = (0, _releaseInfo.getReleaseInfo)();
 const DateRangeCalendarRoot = (0, _styles.styled)('div', {
@@ -82,16 +83,16 @@ const DayCalendarForRange = InnerDayCalendarForRange;
 function useDateRangeCalendarDefaultizedProps(props, name) {
   const utils = (0, _internals.useUtils)();
   const defaultDates = (0, _internals.useDefaultDates)();
-  const defaultReduceAnimations = (0, _internals.useDefaultReduceAnimations)();
   const themeProps = (0, _styles.useThemeProps)({
     props,
     name
   });
+  const reduceAnimations = (0, _internals.useReduceAnimations)(themeProps.reduceAnimations);
   return (0, _extends2.default)({}, themeProps, {
     renderLoading: themeProps.renderLoading ?? (() => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       children: "..."
     })),
-    reduceAnimations: themeProps.reduceAnimations ?? defaultReduceAnimations,
+    reduceAnimations,
     loading: props.loading ?? false,
     disablePast: props.disablePast ?? false,
     disableFuture: props.disableFuture ?? false,
@@ -142,8 +143,8 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
       reduceAnimations,
       onMonthChange,
       rangePosition: rangePositionProp,
-      defaultRangePosition: inDefaultRangePosition,
-      onRangePositionChange: inOnRangePositionChange,
+      defaultRangePosition: defaultRangePositionProp,
+      onRangePositionChange: onRangePositionChangeProp,
       calendars,
       currentMonthCalendarPosition = 1,
       slots,
@@ -151,6 +152,8 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
       loading,
       renderLoading,
       disableHighlightToday,
+      focusedView: focusedViewProp,
+      onFocusedViewChange,
       readOnly,
       disabled,
       showDaysOutsideCurrentMonth,
@@ -168,6 +171,7 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
       onViewChange
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rangePositionContext = (0, _useNullablePickerRangePositionContext.useNullablePickerRangePositionContext)();
   const {
     value,
     handleValueChange,
@@ -182,30 +186,33 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
     valueManager: _valueManagers.rangeValueManager
   });
   const {
-    setValueAndGoToNextView,
-    view
+    view,
+    setFocusedView,
+    focusedView,
+    setValueAndGoToNextView
   } = (0, _internals.useViews)({
     view: inView,
     views,
     openTo,
     onChange: handleValueChange,
     onViewChange,
-    autoFocus
+    autoFocus,
+    focusedView: focusedViewProp,
+    onFocusedViewChange
   });
   const utils = (0, _internals.useUtils)();
-  const now = (0, _internals.useNow)(timezone);
   const id = (0, _useId.default)();
   const {
     rangePosition,
-    onRangePositionChange
+    setRangePosition
   } = (0, _useRangePosition.useRangePosition)({
-    rangePosition: rangePositionProp,
-    defaultRangePosition: inDefaultRangePosition,
-    onRangePositionChange: inOnRangePositionChange
+    rangePosition: rangePositionProp ?? rangePositionContext?.rangePosition,
+    defaultRangePosition: defaultRangePositionProp,
+    onRangePositionChange: onRangePositionChangeProp ?? rangePositionContext?.setRangePosition
   });
   const handleDatePositionChange = (0, _useEventCallback.default)(position => {
     if (rangePosition !== position) {
-      onRangePositionChange(position);
+      setRangePosition(position);
     }
   });
   const handleSelectedDayChange = (0, _useEventCallback.default)((newDate, selectionState, allowRangeFlip = false) => {
@@ -223,7 +230,7 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
     });
     const isNextSectionAvailable = availableRangePositions.includes(nextSelection);
     if (isNextSectionAvailable) {
-      onRangePositionChange(nextSelection);
+      setRangePosition(nextSelection);
     }
     const isFullRangeSelected = rangePosition === 'end' && (0, _dateUtils.isRangeValid)(utils, newRange);
     setValueAndGoToNextView(newRange, isFullRangeSelected || !isNextSectionAvailable ? 'finish' : 'partial', view);
@@ -235,7 +242,7 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
 
   // Range going for the start of the start day to the end of the end day.
   // This makes sure that `isWithinRange` works with any time in the start and end day.
-  const valueDayRange = React.useMemo(() => [value[0] == null || !utils.isValid(value[0]) ? value[0] : utils.startOfDay(value[0]), value[1] == null || !utils.isValid(value[1]) ? value[1] : utils.endOfDay(value[1])], [value, utils]);
+  const valueDayRange = React.useMemo(() => [!utils.isValid(value[0]) ? value[0] : utils.startOfDay(value[0]), !utils.isValid(value[1]) ? value[1] : utils.endOfDay(value[1])], [value, utils]);
   const _useDragRange = (0, _useDragRange2.useDragRange)({
       disableDragEditing: shouldDisableDragEditing,
       onDrop: handleDrop,
@@ -278,22 +285,39 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
   }, [shouldDisableDate, rangePosition, draggingDatePosition]);
   const {
     calendarState,
-    changeFocusedDay,
-    changeMonth,
-    handleChangeMonth,
+    setVisibleDate,
     onMonthSwitchingAnimationEnd
   } = (0, _internals.useCalendarState)({
     value: value[0] || value[1],
     referenceDate,
     disableFuture,
     disablePast,
-    disableSwitchToMonthOnDayFocus: true,
     maxDate,
     minDate,
     onMonthChange,
     reduceAnimations,
     shouldDisableDate: wrappedShouldDisableDate,
-    timezone
+    timezone,
+    getCurrentMonthFromVisibleDate: (visibleDate, prevMonth) => {
+      const firstVisibleMonth = utils.addMonths(prevMonth, 1 - currentMonthCalendarPosition);
+      const lastVisibleMonth = utils.endOfMonth(utils.addMonths(firstVisibleMonth, calendars - 1));
+
+      // The new focused day is inside the visible calendars,
+      // Do not change the current month
+      if (utils.isWithinRange(visibleDate, [firstVisibleMonth, lastVisibleMonth])) {
+        return prevMonth;
+      }
+
+      // The new focused day is after the last visible month,
+      // Move the current month so that the new focused day is inside the first visible month
+      if (utils.isAfter(visibleDate, lastVisibleMonth)) {
+        return utils.startOfMonth(utils.addMonths(visibleDate, currentMonthCalendarPosition - 1));
+      }
+
+      // The new focused day is before the first visible month,
+      // Move the current month so that the new focused day is inside the last visible month
+      return utils.startOfMonth(utils.addMonths(visibleDate, currentMonthCalendarPosition - calendars));
+    }
   });
   const CalendarHeader = slots?.calendarHeader ?? _PickersRangeCalendarHeader.PickersRangeCalendarHeader;
   const calendarHeaderProps = (0, _useSlotProps.default)({
@@ -304,9 +328,9 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
       views: ['day'],
       view: 'day',
       currentMonth: calendarState.currentMonth,
-      onMonthChange: (newMonth, direction) => handleChangeMonth({
-        newMonth,
-        direction
+      onMonthChange: month => setVisibleDate({
+        target: month,
+        reason: 'header-navigation'
       }),
       minDate,
       maxDate,
@@ -320,10 +344,12 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
     },
     ownerState
   });
+
+  // TODO: Move this logic inside the render instead of using an effect
   const prevValue = React.useRef(null);
   React.useEffect(() => {
     const date = rangePosition === 'start' ? value[0] : value[1];
-    if (!date || !utils.isValid(date)) {
+    if (!utils.isValid(date)) {
       return;
     }
     const prevDate = rangePosition === 'start' ? prevValue.current?.[0] : prevValue.current?.[1];
@@ -341,7 +367,10 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
       const newMonth = rangePosition === 'start' ? date :
       // If need to focus end, scroll to the state when "end" is displaying in the last calendar
       utils.addMonths(date, -displayingMonthRange);
-      changeMonth(newMonth);
+      setVisibleDate({
+        target: newMonth,
+        reason: 'controlled-value-change'
+      });
     }
   }, [rangePosition, value]); // eslint-disable-line
 
@@ -424,25 +453,19 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
       length: calendars
     }).map((_, index) => utils.addMonths(firstMonth, index));
   }, [utils, calendarState.currentMonth, calendars, currentMonthCalendarPosition]);
-  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]));
+  const hasFocus = focusedView !== null;
+  const prevOpenViewRef = React.useRef(view);
+  React.useEffect(() => {
+    // If the view change and the focus was on the previous view
+    // Then we update the focus.
+    if (prevOpenViewRef.current === view) {
+      return;
     }
-    if (value[1] != null) {
-      return visibleMonths.find(month => utils.isSameMonth(month, value[1]));
+    if (focusedView === prevOpenViewRef.current) {
+      setFocusedView(view, true);
     }
-    return visibleMonths.find(month => utils.isSameMonth(month, now)) ?? visibleMonths[0];
-  }, [utils, value, visibleMonths, autoFocus, now]);
+    prevOpenViewRef.current = view;
+  }, [focusedView, setFocusedView, view]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateRangeCalendarRoot, (0, _extends2.default)({
     ref: ref,
     className: (0, _clsx.default)(classes.root, className),
@@ -464,20 +487,24 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
           className: classes.dayCalendar
         }, calendarState, baseDateValidationProps, commonViewProps, {
           onMonthSwitchingAnimationEnd: onMonthSwitchingAnimationEnd,
-          onFocusedDayChange: changeFocusedDay,
+          onFocusedDayChange: focusedDate => setVisibleDate({
+            target: focusedDate,
+            reason: 'cell-interaction'
+          }),
           reduceAnimations: reduceAnimations,
           selectedDays: value,
           onSelectedDaysChange: handleSelectedDayChange,
           currentMonth: month,
           TransitionProps: CalendarTransitionProps,
           shouldDisableDate: wrappedShouldDisableDate,
+          hasFocus: hasFocus,
+          onFocusedViewChange: isViewFocused => setFocusedView('day', isViewFocused),
           showDaysOutsideCurrentMonth: calendars === 1 && showDaysOutsideCurrentMonth,
           dayOfWeekFormatter: dayOfWeekFormatter,
           loading: loading,
           renderLoading: renderLoading,
           slots: slotsForDayCalendar,
           slotProps: slotPropsForDayCalendar,
-          autoFocus: month === focusedMonth,
           fixedWeekNumber: fixedWeekNumber,
           displayWeekNumber: displayWeekNumber,
           timezone: timezone,

package/node/DateRangePicker/DateRangePicker.js

@@ -70,7 +70,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
   calendars: _propTypes.default.oneOf([1, 2, 3]),
   className: _propTypes.default.string,
   /**
-   * If `true`, the popover or modal will close after submitting the full date.
+   * If `true`, the Picker will close after submitting the full date.
    * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
    */
   closeOnSelect: _propTypes.default.bool,
@@ -165,12 +165,10 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
   formatDensity: _propTypes.default.oneOf(['dense', 'spacious']),
   /**
    * Pass a ref to the `input` element.
-   * Ignored if the field has several inputs.
    */
   inputRef: _utils.refType,
   /**
    * The label content.
-   * Ignored if the field has several inputs.
    */
   label: _propTypes.default.node,
   /**
@@ -196,7 +194,6 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
   minDate: _propTypes.default.object,
   /**
    * Name attribute used by the `input` element in the Field.
-   * Ignored if the field has several inputs.
    */
   name: _propTypes.default.string,
   /**

package/node/DateRangePicker/DateRangePickerToolbar.js

@@ -18,12 +18,10 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _internals = require("@mui/x-date-pickers/internals");
 var _hooks = require("@mui/x-date-pickers/hooks");
 var _dateRangePickerToolbarClasses = require("./dateRangePickerToolbarClasses");
+var _hooks2 = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["value", "rangePosition", "onRangePositionChange", "toolbarFormat", "className", "onViewChange", "view", "views"];
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const _excluded = ["toolbarFormat", "className", "classes"];
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     container: ['container']
@@ -59,39 +57,50 @@ const DateRangePickerToolbar = exports.DateRangePickerToolbar = /*#__PURE__*/Rea
     name: 'MuiDateRangePickerToolbar'
   });
   const {
-      value: [start, end],
-      rangePosition,
-      onRangePositionChange,
-      toolbarFormat,
-      className
+      toolbarFormat: toolbarFormatProp,
+      className,
+      classes: classesProp
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    value
+  } = (0, _hooks.usePickerContext)();
   const translations = (0, _hooks.usePickerTranslations)();
-  const startDateValue = start ? utils.formatByString(start, toolbarFormat || utils.formats.shortDate) : translations.start;
-  const endDateValue = end ? utils.formatByString(end, toolbarFormat || utils.formats.shortDate) : translations.end;
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
+  const ownerState = (0, _internals.useToolbarOwnerState)();
+  const {
+    rangePosition,
+    setRangePosition
+  } = (0, _hooks2.usePickerRangePositionContext)();
+  const classes = useUtilityClasses(classesProp);
+
+  // This can't be a default value when spreading because it breaks the API generation.
+  const toolbarFormat = toolbarFormatProp ?? utils.formats.shortDate;
+  const formatDate = (date, fallback) => {
+    if (!utils.isValid(date)) {
+      return fallback;
+    }
+    return utils.formatByString(date, toolbarFormat);
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(DateRangePickerToolbarRoot, (0, _extends2.default)({}, other, {
     toolbarTitle: translations.dateRangePickerToolbarTitle,
-    isLandscape: false,
     className: (0, _clsx.default)(classes.root, className),
     ownerState: ownerState,
     ref: ref,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateRangePickerToolbarContainer, {
       className: classes.container,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickersToolbarButton, {
-        variant: start !== null ? 'h5' : 'h6',
-        value: startDateValue,
+        variant: value[0] == null ? 'h6' : 'h5',
+        value: formatDate(value[0], translations.start),
         selected: rangePosition === 'start',
-        onClick: () => onRangePositionChange('start')
+        onClick: () => setRangePosition('start')
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
         variant: "h5",
         children: ["\xA0", '–', "\xA0"]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickersToolbarButton, {
-        variant: end !== null ? 'h5' : 'h6',
-        value: endDateValue,
+        variant: value[1] == null ? 'h6' : 'h5',
+        value: formatDate(value[1], translations.end),
         selected: rangePosition === 'end',
-        onClick: () => onRangePositionChange('end')
+        onClick: () => setRangePosition('end')
       })]
     })
   }));
@@ -111,14 +120,6 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.propTypes = {
    * @default `true` for Desktop, `false` for Mobile.
    */
   hidden: _propTypes.default.bool,
-  onRangePositionChange: _propTypes.default.func.isRequired,
-  /**
-   * Callback called when a toolbar is clicked
-   * @template TView
-   * @param {TView} view The view to open
-   */
-  onViewChange: _propTypes.default.func.isRequired,
-  rangePosition: _propTypes.default.oneOf(['end', 'start']).isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -132,14 +133,5 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.propTypes = {
    * Toolbar value placeholder—it is displayed when the value is empty.
    * @default "––"
    */
-  toolbarPlaceholder: _propTypes.default.node,
-  value: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
-  /**
-   * Currently visible picker view.
-   */
-  view: _propTypes.default.oneOf(['day']).isRequired,
-  /**
-   * Available views.
-   */
-  views: _propTypes.default.arrayOf(_propTypes.default.oneOf(['day'])).isRequired
+  toolbarPlaceholder: _propTypes.default.node
 } : void 0;