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

package/DateRangeCalendar/DateRangeCalendar.types.d.ts

@@ -3,13 +3,14 @@ import { SxProps } from '@mui/system';
 import { SlotComponentProps } from '@mui/base/utils';
 import { Theme } from '@mui/material/styles';
 import { PickerValidDate, TimezoneProps } from '@mui/x-date-pickers/models';
-import { PickersCalendarHeader, PickersCalendarHeaderProps, PickersCalendarHeaderSlots, PickersCalendarHeaderSlotProps } from '@mui/x-date-pickers/PickersCalendarHeader';
+import { PickersCalendarHeader, PickersCalendarHeaderSlots, PickersCalendarHeaderSlotProps } from '@mui/x-date-pickers/PickersCalendarHeader';
 import { BaseDateValidationProps, DefaultizedProps, ExportedDayCalendarProps, DayCalendarSlots, DayCalendarSlotProps, PickersArrowSwitcherSlots, PickersArrowSwitcherSlotProps, DayCalendarProps, ExportedUseViewsOptions } from '@mui/x-date-pickers/internals';
 import { DayRangeValidationProps } from '../internals/models';
 import { DateRange } from '../models';
 import { DateRangeCalendarClasses } from './dateRangeCalendarClasses';
 import { DateRangePickerDay, DateRangePickerDayProps } from '../DateRangePickerDay';
 import { UseRangePositionProps } from '../internals/hooks/useRangePosition';
+import { PickersRangeCalendarHeaderProps } from '../PickersRangeCalendarHeader';
 export type DateRangePosition = 'start' | 'end';
 export interface DateRangeCalendarSlots<TDate extends PickerValidDate> extends PickersArrowSwitcherSlots, Omit<DayCalendarSlots<TDate>, 'day'>, PickersCalendarHeaderSlots {
     /**
@@ -17,7 +18,7 @@ export interface DateRangeCalendarSlots<TDate extends PickerValidDate> extends P
      * Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component.
      * @default PickersCalendarHeader
      */
-    calendarHeader?: React.ElementType<PickersCalendarHeaderProps<TDate>>;
+    calendarHeader?: React.ElementType<PickersRangeCalendarHeaderProps<TDate>>;
     /**
      * Custom component for day in range pickers.
      * Check the [DateRangePickersDay](https://mui.com/x/api/date-pickers/date-range-picker-day/) component.

package/DateRangeCalendar/useDragRange.js

@@ -27,9 +27,8 @@ const resolveButtonElement = element => {
   return element;
 };
 const resolveElementFromTouch = (event, ignoreTouchTarget) => {
-  var _event$changedTouches;
   // don't parse multi-touch result
-  if (((_event$changedTouches = event.changedTouches) == null ? void 0 : _event$changedTouches.length) === 1 && event.touches.length <= 1) {
+  if (event.changedTouches?.length === 1 && event.touches.length <= 1) {
     const element = document.elementFromPoint(event.changedTouches[0].clientX, event.changedTouches[0].clientY);
     // `elementFromPoint` could have resolved preview div or wrapping div
     // might need to recursively find the nested button

package/DateRangePicker/DateRangePicker.js

@@ -277,7 +277,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/DateRangePicker/shared.js

@@ -4,7 +4,6 @@ import { useThemeProps } from '@mui/material/styles';
 import { useDefaultDates, useUtils, applyDefaultDate } from '@mui/x-date-pickers/internals';
 import { DateRangePickerToolbar } from './DateRangePickerToolbar';
 export function useDateRangePickerDefaultizedProps(props, name) {
-  var _themeProps$disableFu, _themeProps$disablePa;
   const utils = useUtils();
   const defaultDates = useDefaultDates();
   const themeProps = useThemeProps({
@@ -12,8 +11,7 @@ export function useDateRangePickerDefaultizedProps(props, name) {
     name
   });
   const localeText = React.useMemo(() => {
-    var _themeProps$localeTex;
-    if (((_themeProps$localeTex = themeProps.localeText) == null ? void 0 : _themeProps$localeTex.toolbarTitle) == null) {
+    if (themeProps.localeText?.toolbarTitle == null) {
       return themeProps.localeText;
     }
     return _extends({}, themeProps.localeText, {
@@ -22,8 +20,8 @@ export function useDateRangePickerDefaultizedProps(props, name) {
   }, [themeProps.localeText]);
   return _extends({}, themeProps, {
     localeText,
-    disableFuture: (_themeProps$disableFu = themeProps.disableFuture) != null ? _themeProps$disableFu : false,
-    disablePast: (_themeProps$disablePa = themeProps.disablePast) != null ? _themeProps$disablePa : false,
+    disableFuture: themeProps.disableFuture ?? false,
+    disablePast: themeProps.disablePast ?? false,
     minDate: applyDefaultDate(utils, themeProps.minDate, defaultDates.minDate),
     maxDate: applyDefaultDate(utils, themeProps.maxDate, defaultDates.maxDate),
     slots: _extends({

package/DateTimeRangePicker/DateTimeRangePicker.d.ts

@@ -4,5 +4,15 @@ import { DateTimeRangePickerProps } from './DateTimeRangePicker.types';
 type DateTimeRangePickerComponent = (<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false>(props: DateTimeRangePickerProps<TDate, TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
+/**
+ * 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/)
+ */
 declare const DateTimeRangePicker: DateTimeRangePickerComponent;
 export { DateTimeRangePicker };

package/DateTimeRangePicker/DateTimeRangePicker.js

@@ -9,6 +9,16 @@ import { useThemeProps } from '@mui/material/styles';
 import { DesktopDateTimeRangePicker } from '../DesktopDateTimeRangePicker';
 import { MobileDateTimeRangePicker } from '../MobileDateTimeRangePicker';
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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 = /*#__PURE__*/React.forwardRef(function DateTimeRangePicker(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
@@ -312,7 +322,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/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.d.ts

@@ -1,21 +1,20 @@
 import * as React from 'react';
-import { PickerSelectionState, PickerViewRenderer, TimeViewWithMeridiem, BaseClockProps } from '@mui/x-date-pickers/internals';
+import { PickerSelectionState, PickerViewRenderer, TimeViewWithMeridiem, BaseClockProps, DefaultizedProps } from '@mui/x-date-pickers/internals';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
-import { DateTimeRangePickerView } from '../internals/models';
 import { DateRange } from '../models';
 import { UseRangePositionResponse } from '../internals/hooks/useRangePosition';
-export type DateTimeRangePickerTimeWrapperProps<TDate extends PickerValidDate, TView extends DateTimeRangePickerView, TComponentProps extends Omit<BaseClockProps<TDate, TimeViewWithMeridiem>, 'value' | 'defaultValue' | 'onChange'>> = Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'> & Omit<TComponentProps, 'views' | 'view' | 'onViewChange' | 'value' | 'defaultValue' | 'onChange'> & {
+export type DateTimeRangePickerTimeWrapperProps<TDate extends PickerValidDate, TView extends TimeViewWithMeridiem, TComponentProps extends DefaultizedProps<Omit<BaseClockProps<TDate, TView>, 'value' | 'defaultValue' | 'onChange'>, 'views'>> = Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'> & Omit<TComponentProps, 'views' | 'view' | 'onViewChange' | 'value' | 'defaultValue' | 'onChange'> & {
     view: TView;
     onViewChange?: (view: TView) => void;
     views: readonly TView[];
     value?: DateRange<TDate>;
     defaultValue?: DateRange<TDate>;
     onChange?: (value: DateRange<TDate>, selectionState: PickerSelectionState, selectedView: TView) => void;
-    viewRenderer?: PickerViewRenderer<DateRange<TDate>, TView, any, TComponentProps> | null;
+    viewRenderer?: PickerViewRenderer<DateRange<TDate>, TView, TComponentProps, any> | null;
     openTo?: TView;
 };
 /**
  * @ignore - internal component.
  */
-declare function DateTimeRangePickerTimeWrapper<TDate extends PickerValidDate, TView extends DateTimeRangePickerView, TComponentProps extends Omit<BaseClockProps<TDate, TimeViewWithMeridiem>, 'value' | 'defaultValue' | 'onChange'>>(props: DateTimeRangePickerTimeWrapperProps<TDate, TView, TComponentProps>, ref: React.Ref<HTMLDivElement>): React.ReactNode;
+declare function DateTimeRangePickerTimeWrapper<TDate extends PickerValidDate, TView extends TimeViewWithMeridiem, TComponentProps extends DefaultizedProps<Omit<BaseClockProps<TDate, TView>, 'value' | 'defaultValue' | 'onChange'>, 'views'>>(props: DateTimeRangePickerTimeWrapperProps<TDate, TView, TComponentProps>, ref: React.Ref<HTMLDivElement>): React.ReactNode;
 export { DateTimeRangePickerTimeWrapper };

package/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js

@@ -8,7 +8,6 @@ import { calculateRangeChange } from '../internals/utils/date-range-manager';
  * @ignore - internal component.
  */
 function DateTimeRangePickerTimeWrapper(props, ref) {
-  var _ref, _ref2;
   const utils = useUtils();
   const {
       rangePosition,
@@ -24,8 +23,8 @@ function DateTimeRangePickerTimeWrapper(props, ref) {
   if (!viewRenderer) {
     return null;
   }
-  const currentValue = (_ref = rangePosition === 'start' ? value == null ? void 0 : value[0] : value == null ? void 0 : value[1]) != null ? _ref : null;
-  const currentDefaultValue = (_ref2 = rangePosition === 'start' ? defaultValue == null ? void 0 : defaultValue[0] : defaultValue == null ? void 0 : defaultValue[1]) != null ? _ref2 : null;
+  const currentValue = (rangePosition === 'start' ? value?.[0] : value?.[1]) ?? null;
+  const currentDefaultValue = (rangePosition === 'start' ? defaultValue?.[0] : defaultValue?.[1]) ?? null;
   const handleOnChange = (newDate, selectionState, selectedView) => {
     if (!onChange || !value) {
       return;

package/DateTimeRangePicker/DateTimeRangePickerToolbar.js

@@ -39,7 +39,7 @@ const DateTimeRangePickerToolbarStart = styled(DateTimePickerToolbar, {
   ownerState
 }) => _extends({
   borderBottom: 'none'
-}, (ownerState == null ? void 0 : ownerState.toolbarVariant) !== 'desktop' ? {
+}, ownerState?.toolbarVariant !== 'desktop' ? {
   padding: '12px 8px 0 12px'
 } : {
   paddingBottom: 0
@@ -51,7 +51,7 @@ const DateTimeRangePickerToolbarEnd = styled(DateTimePickerToolbar, {
 })(({
   ownerState
 }) => ({
-  padding: (ownerState == null ? void 0 : ownerState.toolbarVariant) !== 'desktop' ? '12px 8px 12px 12px' : undefined
+  padding: ownerState?.toolbarVariant !== 'desktop' ? '12px 8px 12px 12px' : undefined
 }));
 const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTimeRangePickerToolbar(inProps, ref) {
   const props = useThemeProps({

package/DateTimeRangePicker/shared.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { LocalizedComponent } from '@mui/x-date-pickers/locales';
-import { DefaultizedProps, BaseDateValidationProps, BasePickerInputProps, PickerViewRendererLookup, BaseClockProps, DesktopOnlyTimePickerProps, TimeViewWithMeridiem, UseViewsOptions, DateTimeValidationProps } from '@mui/x-date-pickers/internals';
+import { DefaultizedProps, BaseDateValidationProps, BasePickerInputProps, PickerViewRendererLookup, BaseClockProps, DesktopOnlyTimePickerProps, TimeViewWithMeridiem, UseViewsOptions, DateTimeValidationProps, DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
 import { TimeViewRendererProps } from '@mui/x-date-pickers/timeViewRenderers';
 import { DigitalClockSlots, DigitalClockSlotProps } from '@mui/x-date-pickers/DigitalClock';
@@ -33,6 +33,9 @@ export interface BaseDateTimeRangePickerSlotProps<TDate extends PickerValidDate>
      */
     toolbar?: ExportedDateTimeRangePickerToolbarProps;
 }
+export type DateTimeRangePickerRenderers<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TAdditionalProps extends {} = {}> = PickerViewRendererLookup<DateRange<TDate>, TView, Omit<DateRangeViewRendererProps<TDate, 'day'>, 'view' | 'slots' | 'slotProps'> & Omit<TimeViewRendererProps<TimeViewWithMeridiem, BaseClockProps<TDate, TimeViewWithMeridiem>>, 'view' | 'slots' | 'slotProps'> & {
+    view: TView;
+}, TAdditionalProps>;
 export interface BaseDateTimeRangePickerProps<TDate extends PickerValidDate> extends Omit<BasePickerInputProps<DateRange<TDate>, TDate, DateTimeRangePickerView, DateTimeRangeValidationError>, 'orientation' | 'views' | 'openTo'>, ExportedDateRangeCalendarProps<TDate>, BaseDateValidationProps<TDate>, DesktopOnlyTimePickerProps<TDate>, Partial<Pick<UseViewsOptions<DateRange<TDate>, DateTimeRangePickerViewExternal>, 'openTo' | 'views'>>, DateTimeValidationProps<TDate> {
     /**
      * Overridable component slots.
@@ -49,9 +52,7 @@ export interface BaseDateTimeRangePickerProps<TDate extends PickerValidDate> ext
      * If `null`, the section will only have field editing.
      * If `undefined`, internally defined view will be the used.
      */
-    viewRenderers?: Partial<PickerViewRendererLookup<DateRange<TDate>, DateTimeRangePickerView, Omit<DateRangeViewRendererProps<TDate, 'day'>, 'view' | 'slots' | 'slotProps'> & Omit<TimeViewRendererProps<TimeViewWithMeridiem, BaseClockProps<TDate, TimeViewWithMeridiem>>, 'view' | 'slots' | 'slotProps'> & {
-        view: DateTimeRangePickerView;
-    }, {}>>;
+    viewRenderers?: Partial<DateTimeRangePickerRenderers<TDate, DateTimeRangePickerView>>;
 }
 type UseDateTimeRangePickerDefaultizedProps<TDate extends PickerValidDate, Props extends BaseDateTimeRangePickerProps<TDate>> = LocalizedComponent<TDate, Omit<DefaultizedProps<Props, 'openTo' | 'ampm' | keyof BaseDateValidationProps<TDate>>, 'views'>> & {
     shouldRenderTimeInASingleColumn: boolean;

package/DateTimeRangePicker/shared.js

@@ -4,14 +4,13 @@ import { useDefaultDates, useUtils, applyDefaultDate, applyDefaultViewProps, res
 import { DateTimeRangePickerToolbar } from './DateTimeRangePickerToolbar';
 import { DateTimeRangePickerTabs } from './DateTimeRangePickerTabs';
 export function useDateTimeRangePickerDefaultizedProps(props, name) {
-  var _themeProps$ampm, _themeProps$disableFu, _themeProps$disablePa, _themeProps$minDateTi, _themeProps$maxDateTi, _themeProps$minDateTi2, _themeProps$maxDateTi2, _themeProps$disableIg, _themeProps$slotProps;
   const utils = useUtils();
   const defaultDates = useDefaultDates();
   const themeProps = useThemeProps({
     props,
     name
   });
-  const ampm = (_themeProps$ampm = themeProps.ampm) != null ? _themeProps$ampm : utils.is12HourCycleInCurrentLocale();
+  const ampm = themeProps.ampm ?? utils.is12HourCycleInCurrentLocale();
   const {
     openTo,
     views: defaultViews
@@ -39,13 +38,13 @@ export function useDateTimeRangePickerDefaultizedProps(props, name) {
     thresholdToRenderTimeInASingleColumn,
     views,
     ampm,
-    disableFuture: (_themeProps$disableFu = themeProps.disableFuture) != null ? _themeProps$disableFu : false,
-    disablePast: (_themeProps$disablePa = themeProps.disablePast) != null ? _themeProps$disablePa : false,
-    minDate: applyDefaultDate(utils, (_themeProps$minDateTi = themeProps.minDateTime) != null ? _themeProps$minDateTi : themeProps.minDate, defaultDates.minDate),
-    maxDate: applyDefaultDate(utils, (_themeProps$maxDateTi = themeProps.maxDateTime) != null ? _themeProps$maxDateTi : themeProps.maxDate, defaultDates.maxDate),
-    minTime: (_themeProps$minDateTi2 = themeProps.minDateTime) != null ? _themeProps$minDateTi2 : themeProps.minTime,
-    maxTime: (_themeProps$maxDateTi2 = themeProps.maxDateTime) != null ? _themeProps$maxDateTi2 : themeProps.maxTime,
-    disableIgnoringDatePartForTimeValidation: (_themeProps$disableIg = themeProps.disableIgnoringDatePartForTimeValidation) != null ? _themeProps$disableIg : Boolean(themeProps.minDateTime || themeProps.maxDateTime ||
+    disableFuture: themeProps.disableFuture ?? false,
+    disablePast: themeProps.disablePast ?? false,
+    minDate: applyDefaultDate(utils, themeProps.minDateTime ?? themeProps.minDate, defaultDates.minDate),
+    maxDate: applyDefaultDate(utils, themeProps.maxDateTime ?? themeProps.maxDate, defaultDates.maxDate),
+    minTime: themeProps.minDateTime ?? themeProps.minTime,
+    maxTime: themeProps.maxDateTime ?? themeProps.maxTime,
+    disableIgnoringDatePartForTimeValidation: themeProps.disableIgnoringDatePartForTimeValidation ?? Boolean(themeProps.minDateTime || themeProps.maxDateTime ||
     // allow digital clocks to correctly check time validity: https://github.com/mui/mui-x/issues/12048
     themeProps.disablePast || themeProps.disableFuture),
     slots: _extends({
@@ -53,7 +52,7 @@ export function useDateTimeRangePickerDefaultizedProps(props, name) {
       toolbar: DateTimeRangePickerToolbar
     }, themeProps.slots),
     slotProps: _extends({}, themeProps.slotProps, {
-      toolbar: _extends({}, (_themeProps$slotProps = themeProps.slotProps) == null ? void 0 : _themeProps$slotProps.toolbar, {
+      toolbar: _extends({}, themeProps.slotProps?.toolbar, {
         ampm
       })
     })

package/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -21,7 +21,6 @@ import { validateDateRange } from '../internals/utils/validation/validateDateRan
  * - [DesktopDateRangePicker API](https://mui.com/x/api/date-pickers/desktop-date-range-picker/)
  */
 const DesktopDateRangePicker = /*#__PURE__*/React.forwardRef(function DesktopDateRangePicker(inProps, ref) {
-  var _defaultizedProps$cal, _defaultizedProps$slo2;
   // Props with the default values common to all date time pickers
   const defaultizedProps = useDateRangePickerDefaultizedProps(inProps, 'MuiDesktopDateRangePicker');
   const viewRenderers = _extends({
@@ -29,22 +28,19 @@ const DesktopDateRangePicker = /*#__PURE__*/React.forwardRef(function DesktopDat
   }, defaultizedProps.viewRenderers);
   const props = _extends({}, defaultizedProps, {
     viewRenderers,
-    calendars: (_defaultizedProps$cal = defaultizedProps.calendars) != null ? _defaultizedProps$cal : 2,
+    calendars: defaultizedProps.calendars ?? 2,
     views: ['day'],
     openTo: 'day',
     slots: _extends({
       field: MultiInputDateRangeField
     }, defaultizedProps.slots),
     slotProps: _extends({}, defaultizedProps.slotProps, {
-      field: ownerState => {
-        var _defaultizedProps$slo;
-        return _extends({}, resolveComponentProps((_defaultizedProps$slo = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo.field, ownerState), extractValidationProps(defaultizedProps), {
-          ref
-        });
-      },
+      field: ownerState => _extends({}, resolveComponentProps(defaultizedProps.slotProps?.field, ownerState), extractValidationProps(defaultizedProps), {
+        ref
+      }),
       toolbar: _extends({
         hidden: true
-      }, (_defaultizedProps$slo2 = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo2.toolbar)
+      }, defaultizedProps.slotProps?.toolbar)
     })
   });
   const {
@@ -286,7 +282,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/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.d.ts

@@ -4,5 +4,15 @@ import { DesktopDateTimeRangePickerProps } from './DesktopDateTimeRangePicker.ty
 type DesktopDateRangePickerComponent = (<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false>(props: DesktopDateTimeRangePickerProps<TDate, TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
+/**
+ * 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/)
+ */
 declare const DesktopDateTimeRangePicker: DesktopDateRangePickerComponent;
 export { DesktopDateTimeRangePicker };

package/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["openTo", "rangePosition", "sx"];
+const _excluded = ["openTo", "rangePosition"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { extractValidationProps, isDatePickerView, isInternalTimeView } from '@mui/x-date-pickers/internals';
@@ -10,6 +10,7 @@ import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } fr
 import { multiSectionDigitalClockClasses, multiSectionDigitalClockSectionClasses } from '@mui/x-date-pickers/MultiSectionDigitalClock';
 import Divider from '@mui/material/Divider';
 import { digitalClockClasses } from '@mui/x-date-pickers/DigitalClock';
+import { DesktopDateTimePickerLayout } from '@mui/x-date-pickers/DesktopDateTimePicker';
 import { rangeValueManager } from '../internals/utils/valueManagers';
 import { renderDateRangeViewCalendar } from '../dateRangeViewRenderers';
 import { useDesktopRangePicker } from '../internals/hooks/useDesktopRangePicker';
@@ -18,31 +19,29 @@ import { useDateTimeRangePickerDefaultizedProps } from '../DateTimeRangePicker/s
 import { MultiInputDateTimeRangeField } from '../MultiInputDateTimeRangeField';
 import { DateTimeRangePickerTimeWrapper } from '../DateTimeRangePicker/DateTimeRangePickerTimeWrapper';
 import { RANGE_VIEW_HEIGHT } from '../internals/constants/dimensions';
-import { DesktopDateTimeRangePickerLayout } from './DesktopDateTimeRangePickerLayout';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const rendererInterceptor = function rendererInterceptor(inViewRenderers, popperView, rendererProps) {
-  var _inViewRenderers$day;
   const {
       openTo,
-      rangePosition,
-      sx
+      rangePosition
     } = rendererProps,
     otherProps = _objectWithoutPropertiesLoose(rendererProps, _excluded);
   const finalProps = _extends({}, otherProps, {
     rangePosition,
     focusedView: null,
     sx: [{
-      borderBottom: 0,
-      width: 'auto',
+      [`&.${multiSectionDigitalClockClasses.root}`]: {
+        borderBottom: 0
+      },
       [`&.${multiSectionDigitalClockClasses.root}, .${multiSectionDigitalClockSectionClasses.root}, &.${digitalClockClasses.root}`]: {
         maxHeight: RANGE_VIEW_HEIGHT
       }
-    }, ...(Array.isArray(sx) ? sx : [sx])]
+    }]
   });
   const isTimeViewActive = isInternalTimeView(popperView);
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [(_inViewRenderers$day = inViewRenderers.day) == null ? void 0 : _inViewRenderers$day.call(inViewRenderers, _extends({}, rendererProps, {
+    children: [inViewRenderers.day?.(_extends({}, rendererProps, {
       availableRangePositions: [rangePosition],
       view: !isTimeViewActive ? popperView : 'day',
       views: rendererProps.views.filter(isDatePickerView)
@@ -50,13 +49,23 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
       orientation: "vertical"
     }), /*#__PURE__*/_jsx(DateTimeRangePickerTimeWrapper, _extends({}, finalProps, {
       view: isTimeViewActive ? popperView : 'hours',
+      views: finalProps.views.filter(isInternalTimeView),
       openTo: 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 = /*#__PURE__*/React.forwardRef(function DesktopDateTimeRangePicker(inProps, ref) {
-  var _viewRenderers$hours, _defaultizedProps$cal, _defaultizedProps$slo2, _defaultizedProps$slo3;
   // Props with the default values common to all date time range pickers
   const defaultizedProps = useDateTimeRangePickerDefaultizedProps(inProps, 'MuiDesktopDateTimeRangePicker');
   const renderTimeView = defaultizedProps.shouldRenderTimeInASingleColumn ? renderDigitalClockTimeView : renderMultiSectionDigitalClockTimeView;
@@ -69,7 +78,7 @@ const DesktopDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function Deskto
   }, defaultizedProps.viewRenderers);
 
   // Need to avoid adding the `meridiem` view when unexpected renderer is specified
-  const shouldHoursRendererContainMeridiemView = ((_viewRenderers$hours = viewRenderers.hours) == null ? void 0 : _viewRenderers$hours.name) === renderMultiSectionDigitalClockTimeView.name;
+  const shouldHoursRendererContainMeridiemView = viewRenderers.hours?.name === renderMultiSectionDigitalClockTimeView.name;
   const views = !shouldHoursRendererContainMeridiemView ? defaultizedProps.views.filter(view => view !== 'meridiem') : defaultizedProps.views;
   const actionBarActions = defaultizedProps.shouldRenderTimeInASingleColumn ? [] : ['accept'];
   const props = _extends({}, defaultizedProps, {
@@ -77,31 +86,25 @@ const DesktopDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function Deskto
     viewRenderers,
     // force true to correctly handle `renderTimeViewClock` as a renderer
     ampmInClock: true,
-    calendars: (_defaultizedProps$cal = defaultizedProps.calendars) != null ? _defaultizedProps$cal : 1,
+    calendars: defaultizedProps.calendars ?? 1,
     slots: _extends({
       field: MultiInputDateTimeRangeField,
-      layout: DesktopDateTimeRangePickerLayout
+      layout: DesktopDateTimePickerLayout
     }, defaultizedProps.slots),
     slotProps: _extends({}, defaultizedProps.slotProps, {
-      field: ownerState => {
-        var _defaultizedProps$slo;
-        return _extends({}, resolveComponentProps((_defaultizedProps$slo = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo.field, ownerState), extractValidationProps(defaultizedProps), {
-          ref
-        });
-      },
+      field: ownerState => _extends({}, resolveComponentProps(defaultizedProps.slotProps?.field, ownerState), extractValidationProps(defaultizedProps), {
+        ref
+      }),
       tabs: _extends({
         hidden: true
-      }, (_defaultizedProps$slo2 = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo2.tabs),
+      }, defaultizedProps.slotProps?.tabs),
       toolbar: _extends({
         hidden: true,
         toolbarVariant: 'desktop'
-      }, (_defaultizedProps$slo3 = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo3.toolbar),
-      actionBar: ownerState => {
-        var _defaultizedProps$slo4;
-        return _extends({
-          actions: actionBarActions
-        }, resolveComponentProps((_defaultizedProps$slo4 = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo4.actionBar, ownerState));
-      }
+      }, defaultizedProps.slotProps?.toolbar),
+      actionBar: ownerState => _extends({
+        actions: actionBarActions
+      }, resolveComponentProps(defaultizedProps.slotProps?.actionBar, ownerState))
     })
   });
   const {
@@ -389,7 +392,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.

package/MobileDateRangePicker/MobileDateRangePicker.js

@@ -21,7 +21,6 @@ import { validateDateRange } from '../internals/utils/validation/validateDateRan
  * - [MobileDateRangePicker API](https://mui.com/x/api/date-pickers/mobile-date-range-picker/)
  */
 const MobileDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileDateRangePicker(inProps, ref) {
-  var _defaultizedProps$slo2;
   // Props with the default values common to all date time pickers
   const defaultizedProps = useDateRangePickerDefaultizedProps(inProps, 'MuiMobileDateRangePicker');
   const viewRenderers = _extends({
@@ -37,15 +36,12 @@ const MobileDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileDateR
       field: MultiInputDateRangeField
     }, defaultizedProps.slots),
     slotProps: _extends({}, defaultizedProps.slotProps, {
-      field: ownerState => {
-        var _defaultizedProps$slo;
-        return _extends({}, resolveComponentProps((_defaultizedProps$slo = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo.field, ownerState), extractValidationProps(defaultizedProps), {
-          ref
-        });
-      },
+      field: ownerState => _extends({}, resolveComponentProps(defaultizedProps.slotProps?.field, ownerState), extractValidationProps(defaultizedProps), {
+        ref
+      }),
       toolbar: _extends({
         hidden: false
-      }, (_defaultizedProps$slo2 = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo2.toolbar)
+      }, defaultizedProps.slotProps?.toolbar)
     })
   });
   const {
@@ -282,7 +278,7 @@ MobileDateRangePicker.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/MobileDateTimeRangePicker/MobileDateTimeRangePicker.d.ts

@@ -4,5 +4,15 @@ import { MobileDateTimeRangePickerProps } from './MobileDateTimeRangePicker.type
 type MobileDateRangePickerComponent = (<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false>(props: MobileDateTimeRangePickerProps<TDate, TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
+/**
+ * Demos:
+ *
+ * - [DateTimeRangePicker](https://mui.com/x/react-date-pickers/date-time-range-picker/)
+ * - [Validation](https://mui.com/x/react-date-pickers/validation/)
+ *
+ * API:
+ *
+ * - [MobileDateTimeRangePicker API](https://mui.com/x/api/date-pickers/mobile-date-time-range-picker/)
+ */
 declare const MobileDateTimeRangePicker: MobileDateRangePickerComponent;
 export { MobileDateTimeRangePicker };

package/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["view", "openTo", "rangePosition", "sx"];
+const _excluded = ["view", "openTo", "rangePosition"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { refType } from '@mui/utils';
@@ -22,8 +22,7 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
   const {
       view,
       openTo,
-      rangePosition,
-      sx
+      rangePosition
     } = rendererProps,
     otherRendererProps = _objectWithoutPropertiesLoose(rendererProps, _excluded);
   const finalProps = _extends({}, otherRendererProps, {
@@ -48,7 +47,7 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
       [`&.${multiSectionDigitalClockClasses.root}, .${multiSectionDigitalClockSectionClasses.root}`]: {
         maxHeight: RANGE_VIEW_HEIGHT - 1
       }
-    }, ...(Array.isArray(sx) ? sx : [sx])]
+    }]
   });
   const isTimeView = isInternalTimeView(popperView);
   const viewRenderer = inViewRenderers[popperView];
@@ -59,6 +58,7 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
     return /*#__PURE__*/_jsx(DateTimeRangePickerTimeWrapper, _extends({}, finalProps, {
       viewRenderer: viewRenderer,
       view: view && isInternalTimeView(view) ? view : 'hours',
+      views: finalProps.views,
       openTo: isInternalTimeView(openTo) ? openTo : 'hours'
     }));
   }
@@ -71,8 +71,17 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
     openTo: isDatePickerView(openTo) ? openTo : 'day'
   }));
 };
+/**
+ * Demos:
+ *
+ * - [DateTimeRangePicker](https://mui.com/x/react-date-pickers/date-time-range-picker/)
+ * - [Validation](https://mui.com/x/react-date-pickers/validation/)
+ *
+ * API:
+ *
+ * - [MobileDateTimeRangePicker API](https://mui.com/x/api/date-pickers/mobile-date-time-range-picker/)
+ */
 const MobileDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function MobileDateTimeRangePicker(inProps, ref) {
-  var _defaultizedProps$slo2, _defaultizedProps$slo3;
   // Props with the default values common to all date time range pickers
   const defaultizedProps = useDateTimeRangePickerDefaultizedProps(inProps, 'MuiMobileDateTimeRangePicker');
   const renderTimeView = defaultizedProps.shouldRenderTimeInASingleColumn ? renderDigitalClockTimeView : renderMultiSectionDigitalClockTimeView;
@@ -93,19 +102,16 @@ const MobileDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function MobileD
       field: MultiInputDateTimeRangeField
     }, defaultizedProps.slots),
     slotProps: _extends({}, defaultizedProps.slotProps, {
-      field: ownerState => {
-        var _defaultizedProps$slo;
-        return _extends({}, resolveComponentProps((_defaultizedProps$slo = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo.field, ownerState), extractValidationProps(defaultizedProps), {
-          ref
-        });
-      },
+      field: ownerState => _extends({}, resolveComponentProps(defaultizedProps.slotProps?.field, ownerState), extractValidationProps(defaultizedProps), {
+        ref
+      }),
       tabs: _extends({
         hidden: false
-      }, (_defaultizedProps$slo2 = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo2.tabs),
+      }, defaultizedProps.slotProps?.tabs),
       toolbar: _extends({
         hidden: false,
         toolbarVariant: 'mobile'
-      }, (_defaultizedProps$slo3 = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo3.toolbar)
+      }, defaultizedProps.slotProps?.toolbar)
     })
   });
   const {
@@ -388,7 +394,7 @@ MobileDateTimeRangePicker.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.