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

package/modern/DateRangePickerDay/DateRangePickerDay.js

@@ -68,26 +68,56 @@ const DateRangePickerDayRoot = styled('div', {
     [`&.${dateRangePickerDayClasses.hiddenDayFiller}`]: styles.hiddenDayFiller
   }, styles.root]
 })(({
-  theme,
-  ownerState
-}) => ownerState.isHiddenDayFiller ? {} : _extends({
-  [`&:first-of-type .${dateRangePickerDayClasses.rangeIntervalDayPreview}`]: _extends({}, startBorderStyle, {
-    borderLeftColor: (theme.vars || theme).palette.divider
-  }),
-  [`&:last-of-type .${dateRangePickerDayClasses.rangeIntervalDayPreview}`]: _extends({}, endBorderStyle, {
-    borderRightColor: (theme.vars || theme).palette.divider
-  })
-}, ownerState.isHighlighting && {
-  borderRadius: 0,
-  color: (theme.vars || theme).palette.primary.contrastText,
-  backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.focusOpacity),
-  '&:first-of-type': startBorderStyle,
-  '&:last-of-type': endBorderStyle
-}, (ownerState.isStartOfHighlighting || ownerState.isFirstVisibleCell) && _extends({}, startBorderStyle, {
-  paddingLeft: 0
-}), (ownerState.isEndOfHighlighting || ownerState.isLastVisibleCell) && _extends({}, endBorderStyle, {
-  paddingRight: 0
-})));
+  theme
+}) => ({
+  variants: [{
+    props: {
+      isHiddenDayFiller: false
+    },
+    style: {
+      [`&:first-of-type .${dateRangePickerDayClasses.rangeIntervalDayPreview}`]: _extends({}, startBorderStyle, {
+        borderLeftColor: (theme.vars || theme).palette.divider
+      }),
+      [`&:last-of-type .${dateRangePickerDayClasses.rangeIntervalDayPreview}`]: _extends({}, endBorderStyle, {
+        borderRightColor: (theme.vars || theme).palette.divider
+      })
+    }
+  }, {
+    props: {
+      isHiddenDayFiller: false,
+      isHighlighting: true
+    },
+    style: {
+      borderRadius: 0,
+      color: (theme.vars || theme).palette.primary.contrastText,
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.focusOpacity),
+      '&:first-of-type': startBorderStyle,
+      '&:last-of-type': endBorderStyle
+    }
+  }, {
+    props: ({
+      ownerState: {
+        isHiddenDayFiller,
+        isStartOfHighlighting,
+        isFirstVisibleCell
+      }
+    }) => !isHiddenDayFiller && (isStartOfHighlighting || isFirstVisibleCell),
+    style: _extends({}, startBorderStyle, {
+      paddingLeft: 0
+    })
+  }, {
+    props: ({
+      ownerState: {
+        isHiddenDayFiller,
+        isEndOfHighlighting,
+        isLastVisibleCell
+      }
+    }) => !isHiddenDayFiller && (isEndOfHighlighting || isLastVisibleCell),
+    style: _extends({}, endBorderStyle, {
+      paddingRight: 0
+    })
+  }]
+}));
 DateRangePickerDayRoot.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -106,21 +136,47 @@ const DateRangePickerDayRangeIntervalPreview = styled('div', {
     [`&.${dateRangePickerDayClasses.rangeIntervalDayPreviewEnd}`]: styles.rangeIntervalDayPreviewEnd
   }, styles.rangeIntervalPreview]
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   // replace default day component margin with transparent border to avoid jumping on preview
-  border: '2px solid transparent'
-}, ownerState.isPreviewing && !ownerState.isHiddenDayFiller && _extends({
-  borderRadius: 0,
-  border: `2px dashed ${(theme.vars || theme).palette.divider}`,
-  borderLeftColor: 'transparent',
-  borderRightColor: 'transparent'
-}, (ownerState.isStartOfPreviewing || ownerState.isFirstVisibleCell) && _extends({
-  borderLeftColor: (theme.vars || theme).palette.divider
-}, startBorderStyle), (ownerState.isEndOfPreviewing || ownerState.isLastVisibleCell) && _extends({
-  borderRightColor: (theme.vars || theme).palette.divider
-}, endBorderStyle))));
+  border: '2px solid transparent',
+  variants: [{
+    props: {
+      isPreviewing: true,
+      isHiddenDayFiller: false
+    },
+    style: {
+      borderRadius: 0,
+      border: `2px dashed ${(theme.vars || theme).palette.divider}`,
+      borderLeftColor: 'transparent',
+      borderRightColor: 'transparent'
+    }
+  }, {
+    props: ({
+      ownerState: {
+        isPreviewing,
+        isHiddenDayFiller,
+        isStartOfPreviewing,
+        isFirstVisibleCell
+      }
+    }) => isPreviewing && !isHiddenDayFiller && (isStartOfPreviewing || isFirstVisibleCell),
+    style: _extends({
+      borderLeftColor: (theme.vars || theme).palette.divider
+    }, startBorderStyle)
+  }, {
+    props: ({
+      ownerState: {
+        isPreviewing,
+        isHiddenDayFiller,
+        isEndOfPreviewing,
+        isLastVisibleCell
+      }
+    }) => isPreviewing && !isHiddenDayFiller && (isEndOfPreviewing || isLastVisibleCell),
+    style: _extends({
+      borderRightColor: (theme.vars || theme).palette.divider
+    }, endBorderStyle)
+  }]
+}));
 DateRangePickerDayRangeIntervalPreview.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -138,19 +194,22 @@ const DateRangePickerDayDay = styled(PickersDay, {
   }, {
     [`&.${dateRangePickerDayClasses.notSelectedDate}`]: styles.notSelectedDate
   }, styles.day]
-})(({
-  ownerState
-}) => _extends({
+})({
   // Required to overlap preview border
   transform: 'scale(1.1)',
   '& > *': {
     transform: 'scale(0.9)'
-  }
-}, ownerState.draggable && {
-  cursor: 'grab'
-}, ownerState.draggable && {
-  touchAction: 'none'
-}));
+  },
+  variants: [{
+    props: {
+      draggable: true
+    },
+    style: {
+      cursor: 'grab',
+      touchAction: 'none'
+    }
+  }]
+});
 const DateRangePickerDayRaw = /*#__PURE__*/React.forwardRef(function DateRangePickerDay(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
@@ -266,6 +325,11 @@ process.env.NODE_ENV !== "production" ? DateRangePickerDayRaw.propTypes = {
    * @default false
    */
   disableTouchRipple: PropTypes.bool,
+  /**
+   * If `true`, the day can be dragged to change the current date range.
+   * @default false
+   */
+  draggable: PropTypes.bool,
   /**
    * If `true`, the base button will have a keyboard focus ripple.
    * @default false

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/DateTimeRangePicker/DateTimeRangePickerToolbar.js

@@ -1,5 +1,5 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["value", "rangePosition", "onRangePositionChange", "className", "onViewChange", "toolbarVariant", "onChange", "classes", "view", "isLandscape", "views", "ampm", "disabled", "readOnly", "hidden", "toolbarFormat", "toolbarPlaceholder", "titleId", "sx"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -35,24 +35,40 @@ const DateTimeRangePickerToolbarStart = styled(DateTimePickerToolbar, {
   name: 'MuiDateTimeRangePickerToolbar',
   slot: 'StartToolbar',
   overridesResolver: (_, styles) => styles.startToolbar
-})(({
-  ownerState
-}) => _extends({
-  borderBottom: 'none'
-}, ownerState?.toolbarVariant !== 'desktop' ? {
-  padding: '12px 8px 0 12px'
-} : {
-  paddingBottom: 0
-}));
+})({
+  borderBottom: 'none',
+  variants: [{
+    props: ({
+      toolbarVariant
+    }) => toolbarVariant !== 'desktop',
+    style: {
+      padding: '12px 8px 0 12px'
+    }
+  }, {
+    props: {
+      toolbarVariant: 'desktop'
+    },
+    style: {
+      paddingBottom: 0
+    }
+  }]
+});
 const DateTimeRangePickerToolbarEnd = styled(DateTimePickerToolbar, {
   name: 'MuiDateTimeRangePickerToolbar',
   slot: 'EndToolbar',
   overridesResolver: (_, styles) => styles.endToolbar
-})(({
-  ownerState
-}) => ({
-  padding: ownerState?.toolbarVariant !== 'desktop' ? '12px 8px 12px 12px' : undefined
-}));
+})({
+  variants: [{
+    props: ({
+      ownerState: {
+        toolbarVariant
+      }
+    }) => toolbarVariant !== 'desktop',
+    style: {
+      padding: '12px 8px 12px 12px'
+    }
+  }]
+});
 const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTimeRangePickerToolbar(inProps, ref) {
   const props = useThemeProps({
     props: inProps,

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.

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'
   });