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

package/modern/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.js

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

package/modern/SingleInputTimeRangeField/SingleInputTimeRangeField.js

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

package/modern/SingleInputTimeRangeField/useSingleInputTimeRangeField.js

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

package/modern/StaticDateRangePicker/StaticDateRangePicker.js

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

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v7.0.0-beta.7
+ * @mui/x-date-pickers-pro v7.0.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/modern/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/modern/internals/utils/valueManagers.js

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

package/node/DateRangeCalendar/DateRangeCalendar.js

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

package/node/DateRangePicker/DateRangePicker.js

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

package/node/DateTimeRangePicker/DateTimeRangePicker.js

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

package/node/DesktopDateRangePicker/DesktopDateRangePicker.js

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

package/node/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js

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

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

@@ -46,9 +46,7 @@ const MultiInputDateRangeFieldRoot = (0, _styles.styled)( /*#__PURE__*/React.for
   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
@@ -114,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
   });
@@ -149,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.
    */
@@ -246,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

@@ -46,9 +46,7 @@ const MultiInputDateTimeRangeFieldRoot = (0, _styles.styled)( /*#__PURE__*/React
   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
@@ -114,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
   });
@@ -154,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.
    */
@@ -279,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

@@ -46,9 +46,7 @@ const MultiInputTimeRangeFieldRoot = (0, _styles.styled)( /*#__PURE__*/React.for
   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
@@ -114,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
   });
@@ -154,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/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.7
+ * @mui/x-date-pickers-pro v7.0.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

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 = "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