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

package/MobileDateRangePicker/MobileDateRangePicker.js

@@ -21,7 +21,6 @@ import { validateDateRange } from '../internals/utils/validation/validateDateRan
  * - [MobileDateRangePicker API](https://mui.com/x/api/date-pickers/mobile-date-range-picker/)
  */
 const MobileDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileDateRangePicker(inProps, ref) {
-  var _defaultizedProps$slo2;
   // Props with the default values common to all date time pickers
   const defaultizedProps = useDateRangePickerDefaultizedProps(inProps, 'MuiMobileDateRangePicker');
   const viewRenderers = _extends({
@@ -37,15 +36,12 @@ const MobileDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileDateR
       field: MultiInputDateRangeField
     }, defaultizedProps.slots),
     slotProps: _extends({}, defaultizedProps.slotProps, {
-      field: ownerState => {
-        var _defaultizedProps$slo;
-        return _extends({}, resolveComponentProps((_defaultizedProps$slo = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo.field, ownerState), extractValidationProps(defaultizedProps), {
-          ref
-        });
-      },
+      field: ownerState => _extends({}, resolveComponentProps(defaultizedProps.slotProps?.field, ownerState), extractValidationProps(defaultizedProps), {
+        ref
+      }),
       toolbar: _extends({
         hidden: false
-      }, (_defaultizedProps$slo2 = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo2.toolbar)
+      }, defaultizedProps.slotProps?.toolbar)
     })
   });
   const {
@@ -282,7 +278,7 @@ MobileDateRangePicker.propTypes = {
   /**
    * Disable specific date.
    *
-   * Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
    *
    * @template TDate
    * @param {TDate} day The date to test.

package/MobileDateTimeRangePicker/MobileDateTimeRangePicker.d.ts

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

package/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["view", "openTo", "rangePosition", "sx"];
+const _excluded = ["view", "openTo", "rangePosition"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { refType } from '@mui/utils';
@@ -22,8 +22,7 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
   const {
       view,
       openTo,
-      rangePosition,
-      sx
+      rangePosition
     } = rendererProps,
     otherRendererProps = _objectWithoutPropertiesLoose(rendererProps, _excluded);
   const finalProps = _extends({}, otherRendererProps, {
@@ -48,7 +47,7 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
       [`&.${multiSectionDigitalClockClasses.root}, .${multiSectionDigitalClockSectionClasses.root}`]: {
         maxHeight: RANGE_VIEW_HEIGHT - 1
       }
-    }, ...(Array.isArray(sx) ? sx : [sx])]
+    }]
   });
   const isTimeView = isInternalTimeView(popperView);
   const viewRenderer = inViewRenderers[popperView];
@@ -59,6 +58,7 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
     return /*#__PURE__*/_jsx(DateTimeRangePickerTimeWrapper, _extends({}, finalProps, {
       viewRenderer: viewRenderer,
       view: view && isInternalTimeView(view) ? view : 'hours',
+      views: finalProps.views,
       openTo: isInternalTimeView(openTo) ? openTo : 'hours'
     }));
   }
@@ -71,8 +71,17 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
     openTo: isDatePickerView(openTo) ? openTo : 'day'
   }));
 };
+/**
+ * Demos:
+ *
+ * - [DateTimeRangePicker](https://mui.com/x/react-date-pickers/date-time-range-picker/)
+ * - [Validation](https://mui.com/x/react-date-pickers/validation/)
+ *
+ * API:
+ *
+ * - [MobileDateTimeRangePicker API](https://mui.com/x/api/date-pickers/mobile-date-time-range-picker/)
+ */
 const MobileDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function MobileDateTimeRangePicker(inProps, ref) {
-  var _defaultizedProps$slo2, _defaultizedProps$slo3;
   // Props with the default values common to all date time range pickers
   const defaultizedProps = useDateTimeRangePickerDefaultizedProps(inProps, 'MuiMobileDateTimeRangePicker');
   const renderTimeView = defaultizedProps.shouldRenderTimeInASingleColumn ? renderDigitalClockTimeView : renderMultiSectionDigitalClockTimeView;
@@ -93,19 +102,16 @@ const MobileDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function MobileD
       field: MultiInputDateTimeRangeField
     }, defaultizedProps.slots),
     slotProps: _extends({}, defaultizedProps.slotProps, {
-      field: ownerState => {
-        var _defaultizedProps$slo;
-        return _extends({}, resolveComponentProps((_defaultizedProps$slo = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo.field, ownerState), extractValidationProps(defaultizedProps), {
-          ref
-        });
-      },
+      field: ownerState => _extends({}, resolveComponentProps(defaultizedProps.slotProps?.field, ownerState), extractValidationProps(defaultizedProps), {
+        ref
+      }),
       tabs: _extends({
         hidden: false
-      }, (_defaultizedProps$slo2 = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo2.tabs),
+      }, defaultizedProps.slotProps?.tabs),
       toolbar: _extends({
         hidden: false,
         toolbarVariant: 'mobile'
-      }, (_defaultizedProps$slo3 = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo3.toolbar)
+      }, defaultizedProps.slotProps?.toolbar)
     })
   });
   const {
@@ -388,7 +394,7 @@ MobileDateTimeRangePicker.propTypes = {
   /**
    * Disable specific date.
    *
-   * Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
    *
    * @template TDate
    * @param {TDate} day The date to test.

package/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -37,12 +37,7 @@ const MultiInputDateRangeFieldRoot = styled( /*#__PURE__*/React.forwardRef((prop
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
 })({});
-const MultiInputDateRangeFieldSeparator = styled(props => {
-  var _props$children;
-  return /*#__PURE__*/_jsx(Typography, _extends({}, props, {
-    children: (_props$children = props.children) != null ? _props$children : ' – '
-  }));
-}, {
+const MultiInputDateRangeFieldSeparator = styled(Typography, {
   name: 'MuiMultiInputDateRangeField',
   slot: 'Separator',
   overridesResolver: (props, styles) => styles.separator
@@ -60,7 +55,6 @@ const MultiInputDateRangeFieldSeparator = styled(props => {
  * - [MultiInputDateRangeField API](https://mui.com/x/api/multi-input-date-range-field/)
  */
 const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInputDateRangeField(inProps, ref) {
-  var _slots$root, _slots$textField, _slots$separator;
   const themeProps = useThemeProps({
     props: inProps,
     name: 'MuiMultiInputDateRangeField'
@@ -79,10 +73,10 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
     otherForwardedProps = _objectWithoutPropertiesLoose(forwardedProps, _excluded);
   const ownerState = themeProps;
   const classes = useUtilityClasses(ownerState);
-  const Root = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : MultiInputDateRangeFieldRoot;
+  const Root = slots?.root ?? MultiInputDateRangeFieldRoot;
   const rootProps = useSlotProps({
     elementType: Root,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.root,
+    externalSlotProps: slotProps?.root,
     externalForwardedProps: otherForwardedProps,
     additionalProps: {
       ref
@@ -90,25 +84,28 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
     ownerState,
     className: clsx(className, classes.root)
   });
-  const TextField = (_slots$textField = slots == null ? void 0 : slots.textField) != null ? _slots$textField : inProps.enableAccessibleFieldDOMStructure ? PickersTextField : MuiTextField;
+  const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure ? PickersTextField : MuiTextField);
   const startTextFieldProps = useSlotProps({
     elementType: TextField,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.textField,
+    externalSlotProps: slotProps?.textField,
     ownerState: _extends({}, ownerState, {
       position: 'start'
     })
   });
   const endTextFieldProps = useSlotProps({
     elementType: TextField,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.textField,
+    externalSlotProps: slotProps?.textField,
     ownerState: _extends({}, ownerState, {
       position: 'end'
     })
   });
-  const Separator = (_slots$separator = slots == null ? void 0 : slots.separator) != null ? _slots$separator : MultiInputDateRangeFieldSeparator;
+  const Separator = slots?.separator ?? MultiInputDateRangeFieldSeparator;
   const separatorProps = useSlotProps({
     elementType: Separator,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.separator,
+    externalSlotProps: slotProps?.separator,
+    additionalProps: {
+      children: ` ${internalProps.dateSeparator ?? '–'} `
+    },
     ownerState,
     className: classes.separator
   });
@@ -144,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.
    */
@@ -241,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/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -37,12 +37,7 @@ const MultiInputDateTimeRangeFieldRoot = styled( /*#__PURE__*/React.forwardRef((
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
 })({});
-const MultiInputDateTimeRangeFieldSeparator = styled(props => {
-  var _props$children;
-  return /*#__PURE__*/_jsx(Typography, _extends({}, props, {
-    children: (_props$children = props.children) != null ? _props$children : ' – '
-  }));
-}, {
+const MultiInputDateTimeRangeFieldSeparator = styled(Typography, {
   name: 'MuiMultiInputDateTimeRangeField',
   slot: 'Separator',
   overridesResolver: (props, styles) => styles.separator
@@ -60,7 +55,6 @@ const MultiInputDateTimeRangeFieldSeparator = styled(props => {
  * - [MultiInputDateTimeRangeField API](https://mui.com/x/api/multi-input-date-time-range-field/)
  */
 const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInputDateTimeRangeField(inProps, ref) {
-  var _slots$root, _slots$textField, _slots$separator;
   const themeProps = useThemeProps({
     props: inProps,
     name: 'MuiMultiInputDateTimeRangeField'
@@ -79,10 +73,10 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
     otherForwardedProps = _objectWithoutPropertiesLoose(forwardedProps, _excluded);
   const ownerState = themeProps;
   const classes = useUtilityClasses(ownerState);
-  const Root = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : MultiInputDateTimeRangeFieldRoot;
+  const Root = slots?.root ?? MultiInputDateTimeRangeFieldRoot;
   const rootProps = useSlotProps({
     elementType: Root,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.root,
+    externalSlotProps: slotProps?.root,
     externalForwardedProps: otherForwardedProps,
     additionalProps: {
       ref
@@ -90,25 +84,28 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
     ownerState,
     className: clsx(className, classes.root)
   });
-  const TextField = (_slots$textField = slots == null ? void 0 : slots.textField) != null ? _slots$textField : inProps.enableAccessibleFieldDOMStructure ? PickersTextField : MuiTextField;
+  const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure ? PickersTextField : MuiTextField);
   const startTextFieldProps = useSlotProps({
     elementType: TextField,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.textField,
+    externalSlotProps: slotProps?.textField,
     ownerState: _extends({}, ownerState, {
       position: 'start'
     })
   });
   const endTextFieldProps = useSlotProps({
     elementType: TextField,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.textField,
+    externalSlotProps: slotProps?.textField,
     ownerState: _extends({}, ownerState, {
       position: 'end'
     })
   });
-  const Separator = (_slots$separator = slots == null ? void 0 : slots.separator) != null ? _slots$separator : MultiInputDateTimeRangeFieldSeparator;
+  const Separator = slots?.separator ?? MultiInputDateTimeRangeFieldSeparator;
   const separatorProps = useSlotProps({
     elementType: Separator,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.separator,
+    externalSlotProps: slotProps?.separator,
+    additionalProps: {
+      children: ` ${internalProps.dateSeparator ?? '–'} `
+    },
     ownerState,
     className: classes.separator
   });
@@ -149,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.
    */
@@ -274,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/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -37,12 +37,7 @@ const MultiInputTimeRangeFieldRoot = styled( /*#__PURE__*/React.forwardRef((prop
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
 })({});
-const MultiInputTimeRangeFieldSeparator = styled(props => {
-  var _props$children;
-  return /*#__PURE__*/_jsx(Typography, _extends({}, props, {
-    children: (_props$children = props.children) != null ? _props$children : ' – '
-  }));
-}, {
+const MultiInputTimeRangeFieldSeparator = styled(Typography, {
   name: 'MuiMultiInputTimeRangeField',
   slot: 'Separator',
   overridesResolver: (props, styles) => styles.separator
@@ -60,7 +55,6 @@ const MultiInputTimeRangeFieldSeparator = styled(props => {
  * - [MultiInputTimeRangeField API](https://mui.com/x/api/multi-input-time-range-field/)
  */
 const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInputTimeRangeField(inProps, ref) {
-  var _slots$root, _slots$textField, _slots$separator;
   const themeProps = useThemeProps({
     props: inProps,
     name: 'MuiMultiInputTimeRangeField'
@@ -79,10 +73,10 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
     otherForwardedProps = _objectWithoutPropertiesLoose(forwardedProps, _excluded);
   const ownerState = themeProps;
   const classes = useUtilityClasses(ownerState);
-  const Root = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : MultiInputTimeRangeFieldRoot;
+  const Root = slots?.root ?? MultiInputTimeRangeFieldRoot;
   const rootProps = useSlotProps({
     elementType: Root,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.root,
+    externalSlotProps: slotProps?.root,
     externalForwardedProps: otherForwardedProps,
     additionalProps: {
       ref
@@ -90,25 +84,28 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
     ownerState,
     className: clsx(className, classes.root)
   });
-  const TextField = (_slots$textField = slots == null ? void 0 : slots.textField) != null ? _slots$textField : inProps.enableAccessibleFieldDOMStructure ? PickersTextField : MuiTextField;
+  const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure ? PickersTextField : MuiTextField);
   const startTextFieldProps = useSlotProps({
     elementType: TextField,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.textField,
+    externalSlotProps: slotProps?.textField,
     ownerState: _extends({}, ownerState, {
       position: 'start'
     })
   });
   const endTextFieldProps = useSlotProps({
     elementType: TextField,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.textField,
+    externalSlotProps: slotProps?.textField,
     ownerState: _extends({}, ownerState, {
       position: 'end'
     })
   });
-  const Separator = (_slots$separator = slots == null ? void 0 : slots.separator) != null ? _slots$separator : MultiInputTimeRangeFieldSeparator;
+  const Separator = slots?.separator ?? MultiInputTimeRangeFieldSeparator;
   const separatorProps = useSlotProps({
     elementType: Separator,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.separator,
+    externalSlotProps: slotProps?.separator,
+    additionalProps: {
+      children: ` ${internalProps.dateSeparator ?? '–'} `
+    },
     ownerState,
     className: classes.separator
   });
@@ -149,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/PickersRangeCalendarHeader/PickersRangeCalendarHeader.js

@@ -63,7 +63,7 @@ const PickersRangeCalendarHeader = /*#__PURE__*/React.forwardRef(function Picker
     nextLabel: localeText.nextMonth,
     slots: slots,
     slotProps: slotProps,
-    children: utils.formatByString(month, format != null ? format : `${utils.formats.month} ${utils.formats.year}`)
+    children: utils.formatByString(month, format ?? `${utils.formats.month} ${utils.formats.year}`)
   });
 });
 process.env.NODE_ENV !== "production" ? PickersRangeCalendarHeader.propTypes = {

package/README.md

@@ -34,7 +34,7 @@ This component has the following peer dependencies that you will need to install
 
 ```json
 "peerDependencies": {
-  "@mui/material": "^5.15.0",
+  "@mui/material": "^5.15.14",
   "react": "^17.0.0 || ^18.0.0",
   "react-dom": "^17.0.0 || ^18.0.0"
 },

package/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -23,7 +23,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * - [SingleInputDateRangeField API](https://mui.com/x/api/single-input-date-range-field/)
  */
 const SingleInputDateRangeField = /*#__PURE__*/React.forwardRef(function SingleInputDateRangeField(inProps, inRef) {
-  var _slots$textField;
   const themeProps = useThemeProps({
     props: inProps,
     name: 'MuiSingleInputDateRangeField'
@@ -36,10 +35,10 @@ const SingleInputDateRangeField = /*#__PURE__*/React.forwardRef(function SingleI
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const ownerState = themeProps;
-  const TextField = (_slots$textField = slots == null ? void 0 : slots.textField) != null ? _slots$textField : inProps.enableAccessibleFieldDOMStructure ? PickersTextField : MuiTextField;
+  const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure ? PickersTextField : MuiTextField);
   const textFieldProps = useSlotProps({
     elementType: TextField,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.textField,
+    externalSlotProps: slotProps?.textField,
     externalForwardedProps: other,
     ownerState,
     additionalProps: {
@@ -83,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.
    */
@@ -243,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/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/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -23,7 +23,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * - [SingleInputDateTimeRangeField API](https://mui.com/x/api/single-input-date-time-range-field/)
  */
 const SingleInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function SingleInputDateTimeRangeField(inProps, inRef) {
-  var _slots$textField;
   const themeProps = useThemeProps({
     props: inProps,
     name: 'MuiSingleInputDateTimeRangeField'
@@ -36,10 +35,10 @@ const SingleInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Sin
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const ownerState = themeProps;
-  const TextField = (_slots$textField = slots == null ? void 0 : slots.textField) != null ? _slots$textField : inProps.enableAccessibleFieldDOMStructure ? PickersTextField : MuiTextField;
+  const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure ? PickersTextField : MuiTextField);
   const textFieldProps = useSlotProps({
     elementType: TextField,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.textField,
+    externalSlotProps: slotProps?.textField,
     externalForwardedProps: other,
     ownerState,
     additionalProps: {
@@ -88,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.
    */
@@ -276,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/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/SingleInputTimeRangeField/SingleInputTimeRangeField.js

@@ -23,7 +23,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * - [SingleInputTimeRangeField API](https://mui.com/x/api/single-input-time-range-field/)
  */
 const SingleInputTimeRangeField = /*#__PURE__*/React.forwardRef(function SingleInputTimeRangeField(inProps, inRef) {
-  var _slots$textField;
   const themeProps = useThemeProps({
     props: inProps,
     name: 'MuiSingleInputTimeRangeField'
@@ -36,10 +35,10 @@ const SingleInputTimeRangeField = /*#__PURE__*/React.forwardRef(function SingleI
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const ownerState = themeProps;
-  const TextField = (_slots$textField = slots == null ? void 0 : slots.textField) != null ? _slots$textField : inProps.enableAccessibleFieldDOMStructure ? PickersTextField : MuiTextField;
+  const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure ? PickersTextField : MuiTextField);
   const textFieldProps = useSlotProps({
     elementType: TextField,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.textField,
+    externalSlotProps: slotProps?.textField,
     externalForwardedProps: other,
     ownerState,
     additionalProps: {
@@ -88,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/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/StaticDateRangePicker/StaticDateRangePicker.js

@@ -17,9 +17,8 @@ import { validateDateRange } from '../internals/utils/validation/validateDateRan
  * - [StaticDateRangePicker API](https://mui.com/x/api/date-pickers/static-date-range-picker/)
  */
 const StaticDateRangePicker = /*#__PURE__*/React.forwardRef(function StaticDateRangePicker(inProps, ref) {
-  var _defaultizedProps$dis, _defaultizedProps$cal, _defaultizedProps$slo;
   const defaultizedProps = useDateRangePickerDefaultizedProps(inProps, 'MuiStaticDateRangePicker');
-  const displayStaticWrapperAs = (_defaultizedProps$dis = defaultizedProps.displayStaticWrapperAs) != null ? _defaultizedProps$dis : 'mobile';
+  const displayStaticWrapperAs = defaultizedProps.displayStaticWrapperAs ?? 'mobile';
   const viewRenderers = _extends({
     day: renderDateRangeViewCalendar
   }, defaultizedProps.viewRenderers);
@@ -30,11 +29,11 @@ const StaticDateRangePicker = /*#__PURE__*/React.forwardRef(function StaticDateR
     displayStaticWrapperAs,
     views: ['day'],
     openTo: 'day',
-    calendars: (_defaultizedProps$cal = defaultizedProps.calendars) != null ? _defaultizedProps$cal : displayStaticWrapperAs === 'mobile' ? 1 : 2,
+    calendars: defaultizedProps.calendars ?? (displayStaticWrapperAs === 'mobile' ? 1 : 2),
     slotProps: _extends({}, defaultizedProps.slotProps, {
       toolbar: _extends({
         hidden: displayStaticWrapperAs === 'desktop'
-      }, (_defaultizedProps$slo = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo.toolbar)
+      }, defaultizedProps.slotProps?.toolbar)
     })
   });
   const {
@@ -218,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/index.js

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