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

package/node/MobileDateRangePicker/MobileDateRangePicker.js

@@ -287,7 +287,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/node/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js

@@ -24,15 +24,14 @@ var _MultiInputDateTimeRangeField = require("../MultiInputDateTimeRangeField");
 var _DateTimeRangePickerTimeWrapper = require("../DateTimeRangePicker/DateTimeRangePickerTimeWrapper");
 var _dimensions = require("../internals/constants/dimensions");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["view", "openTo", "rangePosition", "sx"];
+const _excluded = ["view", "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 {
       view,
       openTo,
-      rangePosition,
-      sx
+      rangePosition
     } = rendererProps,
     otherRendererProps = (0, _objectWithoutPropertiesLoose2.default)(rendererProps, _excluded);
   const finalProps = (0, _extends2.default)({}, otherRendererProps, {
@@ -57,7 +56,7 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
       [`&.${_MultiSectionDigitalClock.multiSectionDigitalClockClasses.root}, .${_MultiSectionDigitalClock.multiSectionDigitalClockSectionClasses.root}`]: {
         maxHeight: _dimensions.RANGE_VIEW_HEIGHT - 1
       }
-    }, ...(Array.isArray(sx) ? sx : [sx])]
+    }]
   });
   const isTimeView = (0, _internals.isInternalTimeView)(popperView);
   const viewRenderer = inViewRenderers[popperView];
@@ -68,6 +67,7 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateTimeRangePickerTimeWrapper.DateTimeRangePickerTimeWrapper, (0, _extends2.default)({}, finalProps, {
       viewRenderer: viewRenderer,
       view: view && (0, _internals.isInternalTimeView)(view) ? view : 'hours',
+      views: finalProps.views,
       openTo: (0, _internals.isInternalTimeView)(openTo) ? openTo : 'hours'
     }));
   }
@@ -80,6 +80,16 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
     openTo: (0, _internals.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 = exports.MobileDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function MobileDateTimeRangePicker(inProps, ref) {
   // Props with the default values common to all date time range pickers
   const defaultizedProps = (0, _shared.useDateTimeRangePickerDefaultizedProps)(inProps, 'MuiMobileDateTimeRangePicker');
@@ -393,7 +403,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/node/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -40,19 +40,19 @@ const MultiInputDateRangeFieldRoot = (0, _styles.styled)( /*#__PURE__*/React.for
   ref: ref,
   spacing: 2,
   direction: "row",
-  alignItems: "baseline"
+  alignItems: "center"
 }, props))), {
   name: 'MuiMultiInputDateRangeField',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
 })({});
-const MultiInputDateRangeFieldSeparator = (0, _styles.styled)(props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, (0, _extends2.default)({}, props, {
-  children: props.children ?? ' – '
-})), {
+const MultiInputDateRangeFieldSeparator = (0, _styles.styled)(_Typography.default, {
   name: 'MuiMultiInputDateRangeField',
   slot: 'Separator',
   overridesResolver: (props, styles) => styles.separator
-})({});
+})({
+  lineHeight: '1.4375em' // 23px
+});
 /**
  * Demos:
  *
@@ -112,6 +112,9 @@ const MultiInputDateRangeField = exports.MultiInputDateRangeField = /*#__PURE__*
   const separatorProps = (0, _utils.useSlotProps)({
     elementType: Separator,
     externalSlotProps: slotProps?.separator,
+    additionalProps: {
+      children: ` ${internalProps.dateSeparator ?? '–'} `
+    },
     ownerState,
     className: classes.separator
   });
@@ -147,6 +150,11 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
   classes: _propTypes.default.object,
   className: _propTypes.default.string,
   component: _propTypes.default.elementType,
+  /**
+   * String displayed between the start and the end dates.
+   * @default "–"
+   */
+  dateSeparator: _propTypes.default.string,
   /**
    * The default value. Use when the component is not controlled.
    */
@@ -244,7 +252,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/node/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -40,19 +40,19 @@ const MultiInputDateTimeRangeFieldRoot = (0, _styles.styled)( /*#__PURE__*/React
   ref: ref,
   spacing: 2,
   direction: "row",
-  alignItems: "baseline"
+  alignItems: "center"
 }, props))), {
   name: 'MuiMultiInputDateTimeRangeField',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
 })({});
-const MultiInputDateTimeRangeFieldSeparator = (0, _styles.styled)(props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, (0, _extends2.default)({}, props, {
-  children: props.children ?? ' – '
-})), {
+const MultiInputDateTimeRangeFieldSeparator = (0, _styles.styled)(_Typography.default, {
   name: 'MuiMultiInputDateTimeRangeField',
   slot: 'Separator',
   overridesResolver: (props, styles) => styles.separator
-})({});
+})({
+  lineHeight: '1.4375em' // 23px
+});
 /**
  * Demos:
  *
@@ -112,6 +112,9 @@ const MultiInputDateTimeRangeField = exports.MultiInputDateTimeRangeField = /*#_
   const separatorProps = (0, _utils.useSlotProps)({
     elementType: Separator,
     externalSlotProps: slotProps?.separator,
+    additionalProps: {
+      children: ` ${internalProps.dateSeparator ?? '–'} `
+    },
     ownerState,
     className: classes.separator
   });
@@ -152,6 +155,11 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
   classes: _propTypes.default.object,
   className: _propTypes.default.string,
   component: _propTypes.default.elementType,
+  /**
+   * String displayed between the start and the end dates.
+   * @default "–"
+   */
+  dateSeparator: _propTypes.default.string,
   /**
    * The default value. Use when the component is not controlled.
    */
@@ -277,7 +285,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/node/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -40,19 +40,19 @@ const MultiInputTimeRangeFieldRoot = (0, _styles.styled)( /*#__PURE__*/React.for
   ref: ref,
   spacing: 2,
   direction: "row",
-  alignItems: "baseline"
+  alignItems: "center"
 }, props))), {
   name: 'MuiMultiInputTimeRangeField',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
 })({});
-const MultiInputTimeRangeFieldSeparator = (0, _styles.styled)(props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, (0, _extends2.default)({}, props, {
-  children: props.children ?? ' – '
-})), {
+const MultiInputTimeRangeFieldSeparator = (0, _styles.styled)(_Typography.default, {
   name: 'MuiMultiInputTimeRangeField',
   slot: 'Separator',
   overridesResolver: (props, styles) => styles.separator
-})({});
+})({
+  lineHeight: '1.4375em' // 23px
+});
 /**
  * Demos:
  *
@@ -112,6 +112,9 @@ const MultiInputTimeRangeField = exports.MultiInputTimeRangeField = /*#__PURE__*
   const separatorProps = (0, _utils.useSlotProps)({
     elementType: Separator,
     externalSlotProps: slotProps?.separator,
+    additionalProps: {
+      children: ` ${internalProps.dateSeparator ?? '–'} `
+    },
     ownerState,
     className: classes.separator
   });
@@ -152,6 +155,11 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.propTypes = {
   classes: _propTypes.default.object,
   className: _propTypes.default.string,
   component: _propTypes.default.elementType,
+  /**
+   * String displayed between the start and the end dates.
+   * @default "–"
+   */
+  dateSeparator: _propTypes.default.string,
   /**
    * The default value. Use when the component is not controlled.
    */

package/node/PickersRangeCalendarHeader/PickersRangeCalendarHeader.js

@@ -0,0 +1,132 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PickersRangeCalendarHeader = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _PickersCalendarHeader = require("@mui/x-date-pickers/PickersCalendarHeader");
+var _internals = require("@mui/x-date-pickers/internals");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["calendars", "month", "monthIndex"];
+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 PickersRangeCalendarHeaderContentMultipleCalendars = (0, _styles.styled)(_internals.PickersArrowSwitcher)({
+  padding: '12px 16px 4px 16px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between'
+});
+const PickersRangeCalendarHeader = exports.PickersRangeCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersRangeCalendarHeader(props, ref) {
+  const utils = (0, _internals.useUtils)();
+  const localeText = (0, _internals.useLocaleText)();
+  const {
+      calendars,
+      month,
+      monthIndex
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    format,
+    slots,
+    slotProps,
+    currentMonth,
+    onMonthChange,
+    disableFuture,
+    disablePast,
+    minDate,
+    maxDate,
+    timezone
+  } = props;
+  const isNextMonthDisabled = (0, _internals.useNextMonthDisabled)(currentMonth, {
+    disableFuture,
+    maxDate,
+    timezone
+  });
+  const isPreviousMonthDisabled = (0, _internals.usePreviousMonthDisabled)(currentMonth, {
+    disablePast,
+    minDate,
+    timezone
+  });
+  if (calendars === 1) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersCalendarHeader.PickersCalendarHeader, (0, _extends2.default)({}, other, {
+      ref: ref
+    }));
+  }
+  const selectNextMonth = () => onMonthChange(utils.addMonths(currentMonth, 1), 'left');
+  const selectPreviousMonth = () => onMonthChange(utils.addMonths(currentMonth, -1), 'right');
+  return /*#__PURE__*/(0, _jsxRuntime.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.default.oneOf([1, 2, 3]).isRequired,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: _propTypes.default.object,
+  className: _propTypes.default.string,
+  currentMonth: _propTypes.default.object.isRequired,
+  disabled: _propTypes.default.bool,
+  disableFuture: _propTypes.default.bool,
+  disablePast: _propTypes.default.bool,
+  /**
+   * Format used to display the date.
+   * @default `${adapter.formats.month} ${adapter.formats.year}`
+   */
+  format: _propTypes.default.string,
+  labelId: _propTypes.default.string,
+  maxDate: _propTypes.default.object.isRequired,
+  minDate: _propTypes.default.object.isRequired,
+  /**
+   * Month used for this header.
+   */
+  month: _propTypes.default.object.isRequired,
+  /**
+   * Index of the month used for this header.
+   */
+  monthIndex: _propTypes.default.number.isRequired,
+  onMonthChange: _propTypes.default.func.isRequired,
+  onViewChange: _propTypes.default.func,
+  reduceAnimations: _propTypes.default.bool.isRequired,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: _propTypes.default.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  timezone: _propTypes.default.string.isRequired,
+  view: _propTypes.default.oneOf(['day', 'month', 'year']).isRequired,
+  views: _propTypes.default.arrayOf(_propTypes.default.oneOf(['day', 'month', 'year']).isRequired).isRequired
+} : void 0;

package/node/PickersRangeCalendarHeader/PickersRangeCalendarHeader.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/PickersRangeCalendarHeader/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "PickersRangeCalendarHeader", {
+  enumerable: true,
+  get: function () {
+    return _PickersRangeCalendarHeader.PickersRangeCalendarHeader;
+  }
+});
+var _PickersRangeCalendarHeader = require("./PickersRangeCalendarHeader");

package/node/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -91,6 +91,11 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    */
   color: _propTypes.default.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
   component: _propTypes.default.elementType,
+  /**
+   * String displayed between the start and the end dates.
+   * @default "–"
+   */
+  dateSeparator: _propTypes.default.string,
   /**
    * The default value. Use when the component is not controlled.
    */
@@ -251,7 +256,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/node/SingleInputDateRangeField/useSingleInputDateRangeField.js

@@ -4,20 +4,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useSingleInputDateRangeField = void 0;
+var React = _interopRequireWildcard(require("react"));
 var _internals = require("@mui/x-date-pickers/internals");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _validateDateRange = require("../internals/utils/validation/validateDateRange");
+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 useSingleInputDateRangeField = inProps => {
   const props = (0, _internals.useDefaultizedDateField)(inProps);
   const {
     forwardedProps,
     internalProps
   } = (0, _internals.splitFieldInternalAndForwardedProps)(props, 'date');
+  const fieldValueManager = React.useMemo(() => (0, _valueManagers.getRangeFieldValueManager)({
+    dateSeparator: internalProps.dateSeparator
+  }), [internalProps.dateSeparator]);
   return (0, _internals.useField)({
     forwardedProps,
     internalProps,
     valueManager: _valueManagers.rangeValueManager,
-    fieldValueManager: _valueManagers.rangeFieldValueManager,
+    fieldValueManager,
     validator: _validateDateRange.validateDateRange,
     valueType: 'date'
   });

package/node/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -96,6 +96,11 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.propTypes
    */
   color: _propTypes.default.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
   component: _propTypes.default.elementType,
+  /**
+   * String displayed between the start and the end dates.
+   * @default "–"
+   */
+  dateSeparator: _propTypes.default.string,
   /**
    * The default value. Use when the component is not controlled.
    */
@@ -284,7 +289,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/node/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.js

@@ -4,20 +4,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useSingleInputDateTimeRangeField = void 0;
+var React = _interopRequireWildcard(require("react"));
 var _internals = require("@mui/x-date-pickers/internals");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _validateDateTimeRange = require("../internals/utils/validation/validateDateTimeRange");
+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 useSingleInputDateTimeRangeField = inProps => {
   const props = (0, _internals.useDefaultizedDateTimeField)(inProps);
   const {
     forwardedProps,
     internalProps
   } = (0, _internals.splitFieldInternalAndForwardedProps)(props, 'date-time');
+  const fieldValueManager = React.useMemo(() => (0, _valueManagers.getRangeFieldValueManager)({
+    dateSeparator: internalProps.dateSeparator
+  }), [internalProps.dateSeparator]);
   return (0, _internals.useField)({
     forwardedProps,
     internalProps,
     valueManager: _valueManagers.rangeValueManager,
-    fieldValueManager: _valueManagers.rangeFieldValueManager,
+    fieldValueManager,
     validator: _validateDateTimeRange.validateDateTimeRange,
     valueType: 'date-time'
   });

package/node/SingleInputTimeRangeField/SingleInputTimeRangeField.js

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

package/node/SingleInputTimeRangeField/useSingleInputTimeRangeField.js

@@ -4,20 +4,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useSingleInputTimeRangeField = void 0;
+var React = _interopRequireWildcard(require("react"));
 var _internals = require("@mui/x-date-pickers/internals");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _validateTimeRange = require("../internals/utils/validation/validateTimeRange");
+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 useSingleInputTimeRangeField = inProps => {
   const props = (0, _internals.useDefaultizedTimeField)(inProps);
   const {
     forwardedProps,
     internalProps
   } = (0, _internals.splitFieldInternalAndForwardedProps)(props, 'time');
+  const fieldValueManager = React.useMemo(() => (0, _valueManagers.getRangeFieldValueManager)({
+    dateSeparator: internalProps.dateSeparator
+  }), [internalProps.dateSeparator]);
   return (0, _internals.useField)({
     forwardedProps,
     internalProps,
     valueManager: _valueManagers.rangeValueManager,
-    fieldValueManager: _valueManagers.rangeFieldValueManager,
+    fieldValueManager,
     validator: _validateTimeRange.validateTimeRange,
     valueType: 'time'
   });

package/node/StaticDateRangePicker/StaticDateRangePicker.js

@@ -226,7 +226,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/node/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
@@ -123,6 +123,18 @@ Object.keys(_DateRangeCalendar).forEach(function (key) {
     }
   });
 });
+var _PickersRangeCalendarHeader = require("./PickersRangeCalendarHeader");
+Object.keys(_PickersRangeCalendarHeader).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _PickersRangeCalendarHeader[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PickersRangeCalendarHeader[key];
+    }
+  });
+});
 var _DateRangePicker = require("./DateRangePicker");
 Object.keys(_DateRangePicker).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/node/internals/utils/releaseInfo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 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/node/internals/utils/valueManagers.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.rangeValueManager = exports.rangeFieldValueManager = void 0;
+exports.rangeValueManager = exports.getRangeFieldValueManager = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _internals = require("@mui/x-date-pickers/internals");
@@ -42,7 +42,9 @@ const rangeValueManager = exports.rangeValueManager = {
   },
   setTimezone: (utils, timezone, value) => [value[0] == null ? null : utils.setTimezone(value[0], timezone), value[1] == null ? null : utils.setTimezone(value[1], timezone)]
 };
-const rangeFieldValueManager = exports.rangeFieldValueManager = {
+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]);
@@ -73,7 +75,7 @@ const rangeFieldValueManager = exports.rangeFieldValueManager = {
           return (0, _extends2.default)({}, section, {
             dateName: position,
             // TODO: Check if RTL still works
-            endSeparator: `${section.endSeparator} – `
+            endSeparator: `${section.endSeparator} ${dateSeparator} `
           });
         }
         return (0, _extends2.default)({}, section, {
@@ -92,8 +94,8 @@ const rangeFieldValueManager = exports.rangeFieldValueManager = {
     return (0, _internals.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;
@@ -120,4 +122,5 @@ const rangeFieldValueManager = exports.rangeFieldValueManager = {
       })
     };
   }
-};
+});
+exports.getRangeFieldValueManager = getRangeFieldValueManager;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers-pro",
-  "version": "7.0.0-beta.6",
+  "version": "7.0.0",
   "description": "The commercial edition of the date picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -32,11 +32,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.0",
-    "@mui/base": "^5.0.0-beta.36",
-    "@mui/system": "^5.15.9",
-    "@mui/utils": "^5.15.9",
-    "@mui/x-date-pickers": "7.0.0-beta.6",
-    "@mui/x-license": "7.0.0-beta.6",
+    "@mui/base": "^5.0.0-beta.40",
+    "@mui/system": "^5.15.14",
+    "@mui/utils": "^5.15.14",
+    "@mui/x-date-pickers": "7.0.0",
+    "@mui/x-license": "7.0.0",
     "clsx": "^2.1.0",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5"
@@ -44,7 +44,7 @@
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.15.0",
+    "@mui/material": "^5.15.14",
     "date-fns": "^2.25.0 || ^3.2.0",
     "date-fns-jalali": "^2.13.0-0",
     "dayjs": "^1.10.7",