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

package/internals/hooks/useStaticRangePicker/useStaticRangePicker.js

@@ -22,7 +22,6 @@ const PickerStaticLayout = styled(PickersLayout)(({
  * - StaticDateRangePicker
  */
 export const useStaticRangePicker = _ref => {
-  var _slots$layout;
   let {
       props,
       ref
@@ -46,7 +45,7 @@ export const useStaticRangePicker = _ref => {
     renderCurrentView
   } = usePicker(_extends({}, pickerParams, {
     props,
-    autoFocusView: autoFocus != null ? autoFocus : false,
+    autoFocusView: autoFocus ?? false,
     fieldRef: undefined,
     additionalViewProps: {
       rangePosition,
@@ -54,27 +53,24 @@ export const useStaticRangePicker = _ref => {
     },
     wrapperVariant: displayStaticWrapperAs
   }));
-  const Layout = (_slots$layout = slots == null ? void 0 : slots.layout) != null ? _slots$layout : PickerStaticLayout;
+  const Layout = slots?.layout ?? PickerStaticLayout;
   const slotPropsForLayout = _extends({}, slotProps, {
-    toolbar: _extends({}, slotProps == null ? void 0 : slotProps.toolbar, {
+    toolbar: _extends({}, slotProps?.toolbar, {
       rangePosition,
       onRangePositionChange
     })
   });
-  const renderPicker = () => {
-    var _slotProps$layout, _slotProps$layout2, _slotProps$layout3;
-    return /*#__PURE__*/_jsx(LocalizationProvider, {
-      localeText: localeText,
-      children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps == null ? void 0 : slotProps.layout, {
-        slots: slots,
-        slotProps: slotPropsForLayout,
-        sx: [...(Array.isArray(sx) ? sx : [sx]), ...(Array.isArray(slotProps == null || (_slotProps$layout = slotProps.layout) == null ? void 0 : _slotProps$layout.sx) ? slotProps.layout.sx : [slotProps == null || (_slotProps$layout2 = slotProps.layout) == null ? void 0 : _slotProps$layout2.sx])],
-        className: clsx(className, slotProps == null || (_slotProps$layout3 = slotProps.layout) == null ? void 0 : _slotProps$layout3.className),
-        ref: ref,
-        children: renderCurrentView()
-      }))
-    });
-  };
+  const renderPicker = () => /*#__PURE__*/_jsx(LocalizationProvider, {
+    localeText: localeText,
+    children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps?.layout, {
+      slots: slots,
+      slotProps: slotPropsForLayout,
+      sx: [...(Array.isArray(sx) ? sx : [sx]), ...(Array.isArray(slotProps?.layout?.sx) ? slotProps.layout.sx : [slotProps?.layout?.sx])],
+      className: clsx(className, slotProps?.layout?.className),
+      ref: ref,
+      children: renderCurrentView()
+    }))
+  });
   return {
     renderPicker
   };

package/internals/models/dateRange.d.ts

@@ -1,6 +1,6 @@
 import { BaseDateValidationProps, MakeOptional, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
-import type { DateRangeValidationError, RangeFieldSection, DateRange } from '../../models';
+import { DateRangeValidationError, RangeFieldSection, DateRange, RangeFieldSeparatorProps } from '../../models';
 /**
  * Props used to validate a day value in range pickers.
  */
@@ -8,7 +8,7 @@ export interface DayRangeValidationProps<TDate extends PickerValidDate> {
     /**
      * 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.
@@ -17,5 +17,5 @@ export interface DayRangeValidationProps<TDate extends PickerValidDate> {
      */
     shouldDisableDate?: (day: TDate, position: 'start' | 'end') => boolean;
 }
-export interface UseDateRangeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<Omit<UseFieldInternalProps<DateRange<TDate>, TDate, RangeFieldSection, TEnableAccessibleFieldDOMStructure, DateRangeValidationError>, 'unstableFieldRef'>, 'format'>, DayRangeValidationProps<TDate>, BaseDateValidationProps<TDate> {
+export interface UseDateRangeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<Omit<UseFieldInternalProps<DateRange<TDate>, TDate, RangeFieldSection, TEnableAccessibleFieldDOMStructure, DateRangeValidationError>, 'unstableFieldRef'>, 'format'>, RangeFieldSeparatorProps, DayRangeValidationProps<TDate>, BaseDateValidationProps<TDate> {
 }

package/internals/models/dateTimeRange.d.ts

@@ -1,8 +1,8 @@
 import { BaseDateValidationProps, TimeValidationProps, MakeOptional, UseFieldInternalProps, DateTimeValidationProps, DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
 import { DayRangeValidationProps } from './dateRange';
-import { DateTimeRangeValidationError, RangeFieldSection, DateRange } from '../../models';
-export interface UseDateTimeRangeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<Omit<UseFieldInternalProps<DateRange<TDate>, TDate, RangeFieldSection, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError>, 'unstableFieldRef'>, 'format'>, DayRangeValidationProps<TDate>, TimeValidationProps<TDate>, BaseDateValidationProps<TDate>, DateTimeValidationProps<TDate> {
+import { DateTimeRangeValidationError, RangeFieldSection, DateRange, RangeFieldSeparatorProps } from '../../models';
+export interface UseDateTimeRangeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<Omit<UseFieldInternalProps<DateRange<TDate>, TDate, RangeFieldSection, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError>, 'unstableFieldRef'>, 'format'>, RangeFieldSeparatorProps, DayRangeValidationProps<TDate>, TimeValidationProps<TDate>, BaseDateValidationProps<TDate>, DateTimeValidationProps<TDate> {
     /**
      * 12h/24h view for hour selection clock.
      * @default `utils.is12HourCycleInCurrentLocale()`

package/internals/models/timeRange.d.ts

@@ -1,7 +1,7 @@
 import { BaseTimeValidationProps, TimeValidationProps, MakeOptional, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
-import { TimeRangeValidationError, RangeFieldSection, DateRange } from '../../models';
-export interface UseTimeRangeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<Omit<UseFieldInternalProps<DateRange<TDate>, TDate, RangeFieldSection, TEnableAccessibleFieldDOMStructure, TimeRangeValidationError>, 'unstableFieldRef'>, 'format'>, TimeValidationProps<TDate>, BaseTimeValidationProps {
+import { TimeRangeValidationError, RangeFieldSection, DateRange, RangeFieldSeparatorProps } from '../../models';
+export interface UseTimeRangeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<Omit<UseFieldInternalProps<DateRange<TDate>, TDate, RangeFieldSection, TEnableAccessibleFieldDOMStructure, TimeRangeValidationError>, 'unstableFieldRef'>, 'format'>, RangeFieldSeparatorProps, TimeValidationProps<TDate>, BaseTimeValidationProps {
     /**
      * 12h/24h view for hour selection clock.
      * @default `utils.is12HourCycleInCurrentLocale()`

package/internals/utils/releaseInfo.js

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

@@ -17,13 +17,13 @@ export const validateDateRange = ({
     adapter,
     value: start,
     props: _extends({}, otherProps, {
-      shouldDisableDate: day => !!(shouldDisableDate != null && shouldDisableDate(day, 'start'))
+      shouldDisableDate: day => !!shouldDisableDate?.(day, 'start')
     })
   }), validateDate({
     adapter,
     value: end,
     props: _extends({}, otherProps, {
-      shouldDisableDate: day => !!(shouldDisableDate != null && shouldDisableDate(day, 'end'))
+      shouldDisableDate: day => !!shouldDisableDate?.(day, 'end')
     })
   })];
   if (dateValidations[0] || dateValidations[1]) {

package/internals/utils/validation/validateDateTimeRange.js

@@ -17,13 +17,13 @@ export const validateDateTimeRange = ({
     adapter,
     value: start,
     props: _extends({}, otherProps, {
-      shouldDisableDate: day => !!(shouldDisableDate != null && shouldDisableDate(day, 'start'))
+      shouldDisableDate: day => !!shouldDisableDate?.(day, 'start')
     })
   }), validateDateTime({
     adapter,
     value: end,
     props: _extends({}, otherProps, {
-      shouldDisableDate: day => !!(shouldDisableDate != null && shouldDisableDate(day, 'end'))
+      shouldDisableDate: day => !!shouldDisableDate?.(day, 'end')
     })
   })];
   if (dateTimeValidations[0] || dateTimeValidations[1]) {

package/internals/utils/valueManagers.d.ts

@@ -3,4 +3,6 @@ import { PickerValidDate } from '@mui/x-date-pickers/models';
 import type { DateRangeValidationError, DateTimeRangeValidationError, TimeRangeValidationError, RangeFieldSection, DateRange } from '../../models';
 export type RangePickerValueManager<TValue = [any, any], TDate extends PickerValidDate = any, TError extends DateRangeValidationError | TimeRangeValidationError | DateTimeRangeValidationError = any> = PickerValueManager<TValue, TDate, TError>;
 export declare const rangeValueManager: RangePickerValueManager;
-export declare const rangeFieldValueManager: FieldValueManager<DateRange<any>, any, RangeFieldSection>;
+export declare const getRangeFieldValueManager: <TDate extends PickerValidDate>({ dateSeparator, }: {
+    dateSeparator: string | undefined;
+}) => FieldValueManager<DateRange<TDate>, TDate, RangeFieldSection>;

package/internals/utils/valueManagers.js

@@ -17,7 +17,7 @@ export const rangeValueManager = {
     if (shouldKeepStartDate && shouldKeepEndDate) {
       return value;
     }
-    const referenceDate = referenceDateProp != null ? referenceDateProp : getDefaultReferenceDate(params);
+    const referenceDate = referenceDateProp ?? getDefaultReferenceDate(params);
     return [shouldKeepStartDate ? value[0] : referenceDate, shouldKeepEndDate ? value[1] : referenceDate];
   },
   cleanValue: (utils, value) => value.map(date => replaceInvalidDateByNull(utils, date)),
@@ -31,11 +31,13 @@ export const rangeValueManager = {
     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.');
     }
-    return timezoneStart != null ? timezoneStart : timezoneEnd;
+    return timezoneStart ?? timezoneEnd;
   },
   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/models/fields.d.ts

@@ -36,12 +36,19 @@ export interface MultiInputFieldRefs {
     unstableStartFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
     unstableEndFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
 }
+export interface RangeFieldSeparatorProps {
+    /**
+     * String displayed between the start and the end dates.
+     * @default "–"
+     */
+    dateSeparator?: string;
+}
 /**
  * Props the multi input field can receive when used inside a picker.
  * Only contains what the MUI components are passing to the field,
  * not what users can pass using the `props.slotProps.field`.
  */
-export interface BaseMultiInputFieldProps<TValue, TDate extends PickerValidDate, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TError> extends Omit<BaseFieldProps<TValue, TDate, TSection, TEnableAccessibleFieldDOMStructure, TError>, 'unstableFieldRef'> {
+export interface BaseMultiInputFieldProps<TValue, TDate extends PickerValidDate, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TError> extends Omit<BaseFieldProps<TValue, TDate, TSection, TEnableAccessibleFieldDOMStructure, TError>, 'unstableFieldRef'>, RangeFieldSeparatorProps {
     sx?: SxProps<any>;
     unstableStartFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
     unstableEndFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;

package/modern/DateRangeCalendar/DateRangeCalendar.js

@@ -647,7 +647,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/modern/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/modern/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/modern/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -282,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/modern/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,26 +19,25 @@ 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) {
   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, {
@@ -49,11 +49,22 @@ 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) {
   // Props with the default values common to all date time range pickers
   const defaultizedProps = useDateTimeRangePickerDefaultizedProps(inProps, 'MuiDesktopDateTimeRangePicker');
@@ -78,7 +89,7 @@ const DesktopDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function Deskto
     calendars: defaultizedProps.calendars ?? 1,
     slots: _extends({
       field: MultiInputDateTimeRangeField,
-      layout: DesktopDateTimeRangePickerLayout
+      layout: DesktopDateTimePickerLayout
     }, defaultizedProps.slots),
     slotProps: _extends({}, defaultizedProps.slotProps, {
       field: ownerState => _extends({}, resolveComponentProps(defaultizedProps.slotProps?.field, ownerState), extractValidationProps(defaultizedProps), {
@@ -381,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/modern/MobileDateRangePicker/MobileDateRangePicker.js

@@ -278,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/modern/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,6 +71,16 @@ 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) {
   // Props with the default values common to all date time range pickers
   const defaultizedProps = useDateTimeRangePickerDefaultizedProps(inProps, 'MuiMobileDateTimeRangePicker');
@@ -384,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.

package/modern/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -37,9 +37,7 @@ const MultiInputDateRangeFieldRoot = styled( /*#__PURE__*/React.forwardRef((prop
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
 })({});
-const MultiInputDateRangeFieldSeparator = styled(props => /*#__PURE__*/_jsx(Typography, _extends({}, props, {
-  children: props.children ?? ' – '
-})), {
+const MultiInputDateRangeFieldSeparator = styled(Typography, {
   name: 'MuiMultiInputDateRangeField',
   slot: 'Separator',
   overridesResolver: (props, styles) => styles.separator
@@ -105,6 +103,9 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
   const separatorProps = useSlotProps({
     elementType: Separator,
     externalSlotProps: slotProps?.separator,
+    additionalProps: {
+      children: ` ${internalProps.dateSeparator ?? '–'} `
+    },
     ownerState,
     className: classes.separator
   });
@@ -140,6 +141,11 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
   classes: PropTypes.object,
   className: PropTypes.string,
   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.
    */
@@ -237,7 +243,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.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/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -37,9 +37,7 @@ const MultiInputDateTimeRangeFieldRoot = styled( /*#__PURE__*/React.forwardRef((
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
 })({});
-const MultiInputDateTimeRangeFieldSeparator = styled(props => /*#__PURE__*/_jsx(Typography, _extends({}, props, {
-  children: props.children ?? ' – '
-})), {
+const MultiInputDateTimeRangeFieldSeparator = styled(Typography, {
   name: 'MuiMultiInputDateTimeRangeField',
   slot: 'Separator',
   overridesResolver: (props, styles) => styles.separator
@@ -105,6 +103,9 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
   const separatorProps = useSlotProps({
     elementType: Separator,
     externalSlotProps: slotProps?.separator,
+    additionalProps: {
+      children: ` ${internalProps.dateSeparator ?? '–'} `
+    },
     ownerState,
     className: classes.separator
   });
@@ -145,6 +146,11 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
   classes: PropTypes.object,
   className: PropTypes.string,
   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.
    */
@@ -270,7 +276,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.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/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -37,9 +37,7 @@ const MultiInputTimeRangeFieldRoot = styled( /*#__PURE__*/React.forwardRef((prop
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
 })({});
-const MultiInputTimeRangeFieldSeparator = styled(props => /*#__PURE__*/_jsx(Typography, _extends({}, props, {
-  children: props.children ?? ' – '
-})), {
+const MultiInputTimeRangeFieldSeparator = styled(Typography, {
   name: 'MuiMultiInputTimeRangeField',
   slot: 'Separator',
   overridesResolver: (props, styles) => styles.separator
@@ -105,6 +103,9 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
   const separatorProps = useSlotProps({
     elementType: Separator,
     externalSlotProps: slotProps?.separator,
+    additionalProps: {
+      children: ` ${internalProps.dateSeparator ?? '–'} `
+    },
     ownerState,
     className: classes.separator
   });
@@ -145,6 +146,11 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.propTypes = {
   classes: PropTypes.object,
   className: PropTypes.string,
   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/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.