@mui/x-date-pickers-pro 7.0.0-beta.6 → 7.0.0

package/modern/PickersRangeCalendarHeader/PickersRangeCalendarHeader.js

@@ -0,0 +1,124 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["calendars", "month", "monthIndex"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { PickersCalendarHeader } from '@mui/x-date-pickers/PickersCalendarHeader';
+import { PickersArrowSwitcher, useLocaleText, useNextMonthDisabled, usePreviousMonthDisabled, useUtils } from '@mui/x-date-pickers/internals';
+import { jsx as _jsx } from "react/jsx-runtime";
+const PickersRangeCalendarHeaderContentMultipleCalendars = styled(PickersArrowSwitcher)({
+  padding: '12px 16px 4px 16px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between'
+});
+const PickersRangeCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersRangeCalendarHeader(props, ref) {
+  const utils = useUtils();
+  const localeText = useLocaleText();
+  const {
+      calendars,
+      month,
+      monthIndex
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    format,
+    slots,
+    slotProps,
+    currentMonth,
+    onMonthChange,
+    disableFuture,
+    disablePast,
+    minDate,
+    maxDate,
+    timezone
+  } = props;
+  const isNextMonthDisabled = useNextMonthDisabled(currentMonth, {
+    disableFuture,
+    maxDate,
+    timezone
+  });
+  const isPreviousMonthDisabled = usePreviousMonthDisabled(currentMonth, {
+    disablePast,
+    minDate,
+    timezone
+  });
+  if (calendars === 1) {
+    return /*#__PURE__*/_jsx(PickersCalendarHeader, _extends({}, other, {
+      ref: ref
+    }));
+  }
+  const selectNextMonth = () => onMonthChange(utils.addMonths(currentMonth, 1), 'left');
+  const selectPreviousMonth = () => onMonthChange(utils.addMonths(currentMonth, -1), 'right');
+  return /*#__PURE__*/_jsx(PickersRangeCalendarHeaderContentMultipleCalendars, {
+    ref: ref,
+    onGoToPrevious: selectPreviousMonth,
+    onGoToNext: selectNextMonth,
+    isPreviousHidden: monthIndex !== 0,
+    isPreviousDisabled: isPreviousMonthDisabled,
+    previousLabel: localeText.previousMonth,
+    isNextHidden: monthIndex !== calendars - 1,
+    isNextDisabled: isNextMonthDisabled,
+    nextLabel: localeText.nextMonth,
+    slots: slots,
+    slotProps: slotProps,
+    children: utils.formatByString(month, format ?? `${utils.formats.month} ${utils.formats.year}`)
+  });
+});
+process.env.NODE_ENV !== "production" ? PickersRangeCalendarHeader.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The number of calendars rendered.
+   */
+  calendars: PropTypes.oneOf([1, 2, 3]).isRequired,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  className: PropTypes.string,
+  currentMonth: PropTypes.object.isRequired,
+  disabled: PropTypes.bool,
+  disableFuture: PropTypes.bool,
+  disablePast: PropTypes.bool,
+  /**
+   * Format used to display the date.
+   * @default `${adapter.formats.month} ${adapter.formats.year}`
+   */
+  format: PropTypes.string,
+  labelId: PropTypes.string,
+  maxDate: PropTypes.object.isRequired,
+  minDate: PropTypes.object.isRequired,
+  /**
+   * Month used for this header.
+   */
+  month: PropTypes.object.isRequired,
+  /**
+   * Index of the month used for this header.
+   */
+  monthIndex: PropTypes.number.isRequired,
+  onMonthChange: PropTypes.func.isRequired,
+  onViewChange: PropTypes.func,
+  reduceAnimations: PropTypes.bool.isRequired,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: 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]),
+  timezone: PropTypes.string.isRequired,
+  view: PropTypes.oneOf(['day', 'month', 'year']).isRequired,
+  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired).isRequired
+} : void 0;
+export { PickersRangeCalendarHeader };

package/modern/PickersRangeCalendarHeader/PickersRangeCalendarHeader.types.js

@@ -0,0 +1 @@
+export {};

package/modern/PickersRangeCalendarHeader/index.js

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

package/modern/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -82,6 +82,11 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    */
   color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
   component: PropTypes.elementType,
+  /**
+   * String displayed between the start and the end dates.
+   * @default "–"
+   */
+  dateSeparator: PropTypes.string,
   /**
    * The default value. Use when the component is not controlled.
    */
@@ -242,7 +247,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
   /**
    * Disable specific date.
    *
-   * Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
    *
    * @template TDate
    * @param {TDate} day The date to test.

package/modern/SingleInputDateRangeField/useSingleInputDateRangeField.js

@@ -1,5 +1,6 @@
+import * as React from 'react';
 import { useField, splitFieldInternalAndForwardedProps, useDefaultizedDateField } from '@mui/x-date-pickers/internals';
-import { rangeValueManager, rangeFieldValueManager } from '../internals/utils/valueManagers';
+import { rangeValueManager, getRangeFieldValueManager } from '../internals/utils/valueManagers';
 import { validateDateRange } from '../internals/utils/validation/validateDateRange';
 export const useSingleInputDateRangeField = inProps => {
   const props = useDefaultizedDateField(inProps);
@@ -7,11 +8,14 @@ export const useSingleInputDateRangeField = inProps => {
     forwardedProps,
     internalProps
   } = splitFieldInternalAndForwardedProps(props, 'date');
+  const fieldValueManager = React.useMemo(() => getRangeFieldValueManager({
+    dateSeparator: internalProps.dateSeparator
+  }), [internalProps.dateSeparator]);
   return useField({
     forwardedProps,
     internalProps,
     valueManager: rangeValueManager,
-    fieldValueManager: rangeFieldValueManager,
+    fieldValueManager,
     validator: validateDateRange,
     valueType: 'date'
   });

package/modern/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -87,6 +87,11 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.propTypes
    */
   color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
   component: PropTypes.elementType,
+  /**
+   * String displayed between the start and the end dates.
+   * @default "–"
+   */
+  dateSeparator: PropTypes.string,
   /**
    * The default value. Use when the component is not controlled.
    */
@@ -275,7 +280,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.propTypes
   /**
    * Disable specific date.
    *
-   * Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
    *
    * @template TDate
    * @param {TDate} day The date to test.

package/modern/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.js

@@ -1,5 +1,6 @@
+import * as React from 'react';
 import { useField, splitFieldInternalAndForwardedProps, useDefaultizedDateTimeField } from '@mui/x-date-pickers/internals';
-import { rangeValueManager, rangeFieldValueManager } from '../internals/utils/valueManagers';
+import { rangeValueManager, getRangeFieldValueManager } from '../internals/utils/valueManagers';
 import { validateDateTimeRange } from '../internals/utils/validation/validateDateTimeRange';
 export const useSingleInputDateTimeRangeField = inProps => {
   const props = useDefaultizedDateTimeField(inProps);
@@ -7,11 +8,14 @@ export const useSingleInputDateTimeRangeField = inProps => {
     forwardedProps,
     internalProps
   } = splitFieldInternalAndForwardedProps(props, 'date-time');
+  const fieldValueManager = React.useMemo(() => getRangeFieldValueManager({
+    dateSeparator: internalProps.dateSeparator
+  }), [internalProps.dateSeparator]);
   return useField({
     forwardedProps,
     internalProps,
     valueManager: rangeValueManager,
-    fieldValueManager: rangeFieldValueManager,
+    fieldValueManager,
     validator: validateDateTimeRange,
     valueType: 'date-time'
   });

package/modern/SingleInputTimeRangeField/SingleInputTimeRangeField.js

@@ -87,6 +87,11 @@ process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.propTypes = {
    */
   color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
   component: PropTypes.elementType,
+  /**
+   * String displayed between the start and the end dates.
+   * @default "–"
+   */
+  dateSeparator: PropTypes.string,
   /**
    * The default value. Use when the component is not controlled.
    */

package/modern/SingleInputTimeRangeField/useSingleInputTimeRangeField.js

@@ -1,5 +1,6 @@
+import * as React from 'react';
 import { useField, splitFieldInternalAndForwardedProps, useDefaultizedTimeField } from '@mui/x-date-pickers/internals';
-import { rangeValueManager, rangeFieldValueManager } from '../internals/utils/valueManagers';
+import { rangeValueManager, getRangeFieldValueManager } from '../internals/utils/valueManagers';
 import { validateTimeRange } from '../internals/utils/validation/validateTimeRange';
 export const useSingleInputTimeRangeField = inProps => {
   const props = useDefaultizedTimeField(inProps);
@@ -7,11 +8,14 @@ export const useSingleInputTimeRangeField = inProps => {
     forwardedProps,
     internalProps
   } = splitFieldInternalAndForwardedProps(props, 'time');
+  const fieldValueManager = React.useMemo(() => getRangeFieldValueManager({
+    dateSeparator: internalProps.dateSeparator
+  }), [internalProps.dateSeparator]);
   return useField({
     forwardedProps,
     internalProps,
     valueManager: rangeValueManager,
-    fieldValueManager: rangeFieldValueManager,
+    fieldValueManager,
     validator: validateTimeRange,
     valueType: 'time'
   });

package/modern/StaticDateRangePicker/StaticDateRangePicker.js

@@ -217,7 +217,7 @@ StaticDateRangePicker.propTypes = {
   /**
    * Disable specific date.
    *
-   * Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
    *
    * @template TDate
    * @param {TDate} day The date to test.

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v7.0.0-beta.6
+ * @mui/x-date-pickers-pro v7.0.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the
@@ -24,6 +24,7 @@ export * from './SingleInputDateTimeRangeField';
 
 // Calendars
 export * from './DateRangeCalendar';
+export * from './PickersRangeCalendarHeader';
 
 // New pickers
 export * from './DateRangePicker';

package/modern/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTcwOTg1MjQwMDAwMA==";
+  const releaseInfo = "MTcxMTA1ODQwMDAwMA==";
   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

@@ -35,7 +35,9 @@ export const rangeValueManager = {
   },
   setTimezone: (utils, timezone, value) => [value[0] == null ? null : utils.setTimezone(value[0], timezone), value[1] == null ? null : utils.setTimezone(value[1], timezone)]
 };
-export const rangeFieldValueManager = {
+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]);
@@ -66,7 +68,7 @@ export const rangeFieldValueManager = {
           return _extends({}, section, {
             dateName: position,
             // TODO: Check if RTL still works
-            endSeparator: `${section.endSeparator} – `
+            endSeparator: `${section.endSeparator} ${dateSeparator} `
           });
         }
         return _extends({}, section, {
@@ -85,8 +87,8 @@ export const rangeFieldValueManager = {
     return createDateStrForV6InputFromSections([...dateRangeSections.startDate, ...dateRangeSections.endDate], localizedDigits, isRTL);
   },
   parseValueStr: (valueStr, referenceValue, parseDate) => {
-    // TODO: Improve because it would not work if the date format has `–` as a separator.
-    const [startStr, endStr] = valueStr.split('–');
+    // TODO: Improve because it would not work if some section have the same separator as the dateSeparator.
+    const [startStr, endStr] = valueStr.split(dateSeparator);
     return [startStr, endStr].map((dateStr, index) => {
       if (dateStr == null) {
         return null;
@@ -113,4 +115,4 @@ export const rangeFieldValueManager = {
       })
     };
   }
-};
+});

package/node/DateRangeCalendar/DateRangeCalendar.js

@@ -16,7 +16,6 @@ var _utils = require("@mui/base/utils");
 var _styles = require("@mui/material/styles");
 var _utils2 = require("@mui/utils");
 var _xLicense = require("@mui/x-license");
-var _PickersCalendarHeader = require("@mui/x-date-pickers/PickersCalendarHeader");
 var _internals = require("@mui/x-date-pickers/internals");
 var _releaseInfo = require("../internals/utils/releaseInfo");
 var _dateRangeCalendarClasses = require("./dateRangeCalendarClasses");
@@ -27,6 +26,7 @@ var _valueManagers = require("../internals/utils/valueManagers");
 var _useDragRange2 = require("./useDragRange");
 var _useRangePosition = require("../internals/hooks/useRangePosition");
 var _dimensions = require("../internals/constants/dimensions");
+var _PickersRangeCalendarHeader = require("../PickersRangeCalendarHeader");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["value", "defaultValue", "referenceDate", "onChange", "className", "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"],
   _excluded2 = ["isDragging", "rangeDragDay", "draggingDatePosition"];
@@ -52,12 +52,6 @@ const DateRangeCalendarMonthContainer = (0, _styles.styled)('div', {
     borderRight: `1px solid ${(theme.vars || theme).palette.divider}`
   }
 }));
-const DateRangeCalendarArrowSwitcher = (0, _styles.styled)(_internals.PickersArrowSwitcher)({
-  padding: '12px 16px 4px 16px',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between'
-});
 const weeksContainerHeight = (_dimensions.DAY_RANGE_SIZE + _dimensions.DAY_MARGIN * 2) * 6;
 const warnInvalidCurrentMonthCalendarPosition = (0, _internals.buildWarning)(['The `currentMonthCalendarPosition` prop must be an integer between `1` and the amount of calendars rendered.', 'For example if you have 2 calendars rendered, it should be equal to either 1 or 2.']);
 const DayCalendarForRange = (0, _styles.styled)(_internals.DayCalendar)(({
@@ -198,7 +192,6 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
     autoFocus
   });
   const utils = (0, _internals.useUtils)();
-  const localeText = (0, _internals.useLocaleText)();
   const now = (0, _internals.useNow)(timezone);
   const {
     rangePosition,
@@ -296,15 +289,12 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
     shouldDisableDate: wrappedShouldDisableDate,
     timezone
   });
-
-  // When disabled, limit the view to the selected date
-  const minDateWithDisabled = disabled && value[0] || minDate;
-  const maxDateWithDisabled = disabled && value[1] || maxDate;
-  const CalendarHeader = slots?.calendarHeader ?? _PickersCalendarHeader.PickersCalendarHeader;
+  const CalendarHeader = slots?.calendarHeader ?? _PickersRangeCalendarHeader.PickersRangeCalendarHeader;
   const calendarHeaderProps = (0, _utils.useSlotProps)({
     elementType: CalendarHeader,
     externalSlotProps: slotProps?.calendarHeader,
     additionalProps: {
+      calendars,
       views: ['day'],
       view: 'day',
       currentMonth: calendarState.currentMonth,
@@ -312,15 +302,15 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
         newMonth,
         direction
       }),
-      minDate: minDateWithDisabled,
-      maxDate: maxDateWithDisabled,
+      minDate,
+      maxDate,
       disabled,
       disablePast,
       disableFuture,
       reduceAnimations,
+      timezone,
       slots,
-      slotProps,
-      timezone
+      slotProps
     },
     ownerState: props
   });
@@ -349,22 +339,6 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
     }
   }, [rangePosition, value]); // eslint-disable-line
 
-  const selectNextMonth = React.useCallback(() => {
-    changeMonth(utils.addMonths(calendarState.currentMonth, 1));
-  }, [changeMonth, calendarState.currentMonth, utils]);
-  const selectPreviousMonth = React.useCallback(() => {
-    changeMonth(utils.addMonths(calendarState.currentMonth, -1));
-  }, [changeMonth, calendarState.currentMonth, utils]);
-  const isNextMonthDisabled = (0, _internals.useNextMonthDisabled)(calendarState.currentMonth, {
-    disableFuture,
-    maxDate,
-    timezone
-  });
-  const isPreviousMonthDisabled = (0, _internals.usePreviousMonthDisabled)(calendarState.currentMonth, {
-    disablePast,
-    minDate,
-    timezone
-  });
   const baseDateValidationProps = {
     disablePast,
     disableFuture,
@@ -470,43 +444,37 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
       packageName: "x-date-pickers-pro",
       releaseInfo: releaseInfo
-    }), calendarMonths.map((month, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateRangeCalendarMonthContainer, {
-      className: classes.monthContainer,
-      children: [calendars === 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(CalendarHeader, (0, _extends2.default)({}, calendarHeaderProps)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(DateRangeCalendarArrowSwitcher, {
-        onGoToPrevious: selectPreviousMonth,
-        onGoToNext: selectNextMonth,
-        isPreviousHidden: index !== 0,
-        isPreviousDisabled: isPreviousMonthDisabled,
-        previousLabel: localeText.previousMonth,
-        isNextHidden: index !== calendars - 1,
-        isNextDisabled: isNextMonthDisabled,
-        nextLabel: localeText.nextMonth,
-        slots: slots,
-        slotProps: slotProps,
-        children: utils.formatByString(visibleMonths[month], calendarHeaderProps.format ?? `${utils.formats.month} ${utils.formats.year}`)
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DayCalendarForRange, (0, _extends2.default)({
-        className: classes.dayCalendar
-      }, calendarState, baseDateValidationProps, commonViewProps, {
-        onMonthSwitchingAnimationEnd: onMonthSwitchingAnimationEnd,
-        onFocusedDayChange: changeFocusedDay,
-        reduceAnimations: reduceAnimations,
-        selectedDays: value,
-        onSelectedDaysChange: handleSelectedDayChange,
-        currentMonth: visibleMonths[month],
-        TransitionProps: CalendarTransitionProps,
-        shouldDisableDate: wrappedShouldDisableDate,
-        showDaysOutsideCurrentMonth: calendars === 1 && showDaysOutsideCurrentMonth,
-        dayOfWeekFormatter: dayOfWeekFormatter,
-        loading: loading,
-        renderLoading: renderLoading,
-        slots: slotsForDayCalendar,
-        slotProps: slotPropsForDayCalendar,
-        autoFocus: visibleMonths[month] === focusedMonth,
-        fixedWeekNumber: fixedWeekNumber,
-        displayWeekNumber: displayWeekNumber,
-        timezone: timezone
-      }), index)]
-    }, month))]
+    }), calendarMonths.map(monthIndex => {
+      const month = visibleMonths[monthIndex];
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateRangeCalendarMonthContainer, {
+        className: classes.monthContainer,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CalendarHeader, (0, _extends2.default)({}, calendarHeaderProps, {
+          month: month,
+          monthIndex: monthIndex
+        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(DayCalendarForRange, (0, _extends2.default)({
+          className: classes.dayCalendar
+        }, calendarState, baseDateValidationProps, commonViewProps, {
+          onMonthSwitchingAnimationEnd: onMonthSwitchingAnimationEnd,
+          onFocusedDayChange: changeFocusedDay,
+          reduceAnimations: reduceAnimations,
+          selectedDays: value,
+          onSelectedDaysChange: handleSelectedDayChange,
+          currentMonth: month,
+          TransitionProps: CalendarTransitionProps,
+          shouldDisableDate: wrappedShouldDisableDate,
+          showDaysOutsideCurrentMonth: calendars === 1 && showDaysOutsideCurrentMonth,
+          dayOfWeekFormatter: dayOfWeekFormatter,
+          loading: loading,
+          renderLoading: renderLoading,
+          slots: slotsForDayCalendar,
+          slotProps: slotPropsForDayCalendar,
+          autoFocus: month === focusedMonth,
+          fixedWeekNumber: fixedWeekNumber,
+          displayWeekNumber: displayWeekNumber,
+          timezone: timezone
+        }))]
+      }, monthIndex);
+    })]
   }));
 });
 process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
@@ -687,7 +655,7 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
   /**
    * Disable specific date.
    *
-   * Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
    *
    * @template TDate
    * @param {TDate} day The date to test.

package/node/DateRangePicker/DateRangePicker.js

@@ -286,7 +286,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
   /**
    * Disable specific date.
    *
-   * Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
    *
    * @template TDate
    * @param {TDate} day The date to test.

package/node/DateTimeRangePicker/DateTimeRangePicker.js

@@ -18,6 +18,16 @@ var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["desktopModeMediaQuery"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * Demos:
+ *
+ * - [DateTimeRangePicker](https://mui.com/x/react-date-pickers/date-time-range-picker/)
+ * - [Validation](https://mui.com/x/react-date-pickers/validation/)
+ *
+ * API:
+ *
+ * - [DateTimeRangePicker API](https://mui.com/x/api/date-pickers/date-time-range-picker/)
+ */
 const DateTimeRangePicker = exports.DateTimeRangePicker = /*#__PURE__*/React.forwardRef(function DateTimeRangePicker(inProps, ref) {
   const props = (0, _styles.useThemeProps)({
     props: inProps,
@@ -321,7 +331,7 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
   /**
    * Disable specific date.
    *
-   * Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
    *
    * @template TDate
    * @param {TDate} day The date to test.

package/node/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -291,7 +291,7 @@ DesktopDateRangePicker.propTypes = {
   /**
    * Disable specific date.
    *
-   * Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
    *
    * @template TDate
    * @param {TDate} day The date to test.

package/node/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js

@@ -16,6 +16,7 @@ var _timeViewRenderers = require("@mui/x-date-pickers/timeViewRenderers");
 var _MultiSectionDigitalClock = require("@mui/x-date-pickers/MultiSectionDigitalClock");
 var _Divider = _interopRequireDefault(require("@mui/material/Divider"));
 var _DigitalClock = require("@mui/x-date-pickers/DigitalClock");
+var _DesktopDateTimePicker = require("@mui/x-date-pickers/DesktopDateTimePicker");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _dateRangeViewRenderers = require("../dateRangeViewRenderers");
 var _useDesktopRangePicker = require("../internals/hooks/useDesktopRangePicker");
@@ -24,28 +25,27 @@ var _shared = require("../DateTimeRangePicker/shared");
 var _MultiInputDateTimeRangeField = require("../MultiInputDateTimeRangeField");
 var _DateTimeRangePickerTimeWrapper = require("../DateTimeRangePicker/DateTimeRangePickerTimeWrapper");
 var _dimensions = require("../internals/constants/dimensions");
-var _DesktopDateTimeRangePickerLayout = require("./DesktopDateTimeRangePickerLayout");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["openTo", "rangePosition", "sx"];
+const _excluded = ["openTo", "rangePosition"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const rendererInterceptor = function rendererInterceptor(inViewRenderers, popperView, rendererProps) {
   const {
       openTo,
-      rangePosition,
-      sx
+      rangePosition
     } = rendererProps,
     otherProps = (0, _objectWithoutPropertiesLoose2.default)(rendererProps, _excluded);
   const finalProps = (0, _extends2.default)({}, otherProps, {
     rangePosition,
     focusedView: null,
     sx: [{
-      borderBottom: 0,
-      width: 'auto',
+      [`&.${_MultiSectionDigitalClock.multiSectionDigitalClockClasses.root}`]: {
+        borderBottom: 0
+      },
       [`&.${_MultiSectionDigitalClock.multiSectionDigitalClockClasses.root}, .${_MultiSectionDigitalClock.multiSectionDigitalClockSectionClasses.root}, &.${_DigitalClock.digitalClockClasses.root}`]: {
         maxHeight: _dimensions.RANGE_VIEW_HEIGHT
       }
-    }, ...(Array.isArray(sx) ? sx : [sx])]
+    }]
   });
   const isTimeViewActive = (0, _internals.isInternalTimeView)(popperView);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
@@ -57,11 +57,22 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
       orientation: "vertical"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateTimeRangePickerTimeWrapper.DateTimeRangePickerTimeWrapper, (0, _extends2.default)({}, finalProps, {
       view: isTimeViewActive ? popperView : 'hours',
+      views: finalProps.views.filter(_internals.isInternalTimeView),
       openTo: (0, _internals.isInternalTimeView)(openTo) ? openTo : 'hours',
       viewRenderer: inViewRenderers[isTimeViewActive ? popperView : 'hours']
     }))]
   });
 };
+/**
+ * Demos:
+ *
+ * - [DateTimeRangePicker](https://mui.com/x/react-date-pickers/date-time-range-picker/)
+ * - [Validation](https://mui.com/x/react-date-pickers/validation/)
+ *
+ * API:
+ *
+ * - [DesktopDateTimeRangePicker API](https://mui.com/x/api/date-pickers/desktop-date-time-range-picker/)
+ */
 const DesktopDateTimeRangePicker = exports.DesktopDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function DesktopDateTimeRangePicker(inProps, ref) {
   // Props with the default values common to all date time range pickers
   const defaultizedProps = (0, _shared.useDateTimeRangePickerDefaultizedProps)(inProps, 'MuiDesktopDateTimeRangePicker');
@@ -86,7 +97,7 @@ const DesktopDateTimeRangePicker = exports.DesktopDateTimeRangePicker = /*#__PUR
     calendars: defaultizedProps.calendars ?? 1,
     slots: (0, _extends2.default)({
       field: _MultiInputDateTimeRangeField.MultiInputDateTimeRangeField,
-      layout: _DesktopDateTimeRangePickerLayout.DesktopDateTimeRangePickerLayout
+      layout: _DesktopDateTimePicker.DesktopDateTimePickerLayout
     }, defaultizedProps.slots),
     slotProps: (0, _extends2.default)({}, defaultizedProps.slotProps, {
       field: ownerState => (0, _extends2.default)({}, (0, _utils.resolveComponentProps)(defaultizedProps.slotProps?.field, ownerState), (0, _internals.extractValidationProps)(defaultizedProps), {
@@ -389,7 +400,7 @@ DesktopDateTimeRangePicker.propTypes = {
   /**
    * Disable specific date.
    *
-   * Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
    *
    * @template TDate
    * @param {TDate} day The date to test.