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

package/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -31,22 +31,19 @@ const MultiInputDateRangeFieldRoot = styled( /*#__PURE__*/React.forwardRef((prop
   ref: ref,
   spacing: 2,
   direction: "row",
-  alignItems: "baseline"
+  alignItems: "center"
 }, props))), {
   name: 'MuiMultiInputDateRangeField',
   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
-})({});
+})({
+  lineHeight: '1.4375em' // 23px
+});
 /**
  * Demos:
  *
@@ -58,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'
@@ -77,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
@@ -88,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
   });
@@ -142,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.
    */
@@ -239,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

@@ -31,22 +31,19 @@ const MultiInputDateTimeRangeFieldRoot = styled( /*#__PURE__*/React.forwardRef((
   ref: ref,
   spacing: 2,
   direction: "row",
-  alignItems: "baseline"
+  alignItems: "center"
 }, props))), {
   name: 'MuiMultiInputDateTimeRangeField',
   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
-})({});
+})({
+  lineHeight: '1.4375em' // 23px
+});
 /**
  * Demos:
  *
@@ -58,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'
@@ -77,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
@@ -88,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
   });
@@ -147,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.
    */
@@ -272,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

@@ -31,22 +31,19 @@ const MultiInputTimeRangeFieldRoot = styled( /*#__PURE__*/React.forwardRef((prop
   ref: ref,
   spacing: 2,
   direction: "row",
-  alignItems: "baseline"
+  alignItems: "center"
 }, props))), {
   name: 'MuiMultiInputTimeRangeField',
   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
-})({});
+})({
+  lineHeight: '1.4375em' // 23px
+});
 /**
  * Demos:
  *
@@ -58,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'
@@ -77,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
@@ -88,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
   });
@@ -147,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.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { PickerValidDate } from '@mui/x-date-pickers/models';
+import { PickersRangeCalendarHeaderProps } from './PickersRangeCalendarHeader.types';
+type PickersRangeCalendarHeaderComponent = (<TDate extends PickerValidDate>(props: PickersRangeCalendarHeaderProps<TDate> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+    propTypes?: any;
+};
+declare const PickersRangeCalendarHeader: PickersRangeCalendarHeaderComponent;
+export { PickersRangeCalendarHeader };

package/PickersRangeCalendarHeader/PickersRangeCalendarHeader.js

@@ -0,0 +1,124 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["calendars", "month", "monthIndex"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { PickersCalendarHeader } from '@mui/x-date-pickers/PickersCalendarHeader';
+import { PickersArrowSwitcher, useLocaleText, useNextMonthDisabled, usePreviousMonthDisabled, useUtils } from '@mui/x-date-pickers/internals';
+import { jsx as _jsx } from "react/jsx-runtime";
+const PickersRangeCalendarHeaderContentMultipleCalendars = styled(PickersArrowSwitcher)({
+  padding: '12px 16px 4px 16px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between'
+});
+const PickersRangeCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersRangeCalendarHeader(props, ref) {
+  const utils = useUtils();
+  const localeText = useLocaleText();
+  const {
+      calendars,
+      month,
+      monthIndex
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    format,
+    slots,
+    slotProps,
+    currentMonth,
+    onMonthChange,
+    disableFuture,
+    disablePast,
+    minDate,
+    maxDate,
+    timezone
+  } = props;
+  const isNextMonthDisabled = useNextMonthDisabled(currentMonth, {
+    disableFuture,
+    maxDate,
+    timezone
+  });
+  const isPreviousMonthDisabled = usePreviousMonthDisabled(currentMonth, {
+    disablePast,
+    minDate,
+    timezone
+  });
+  if (calendars === 1) {
+    return /*#__PURE__*/_jsx(PickersCalendarHeader, _extends({}, other, {
+      ref: ref
+    }));
+  }
+  const selectNextMonth = () => onMonthChange(utils.addMonths(currentMonth, 1), 'left');
+  const selectPreviousMonth = () => onMonthChange(utils.addMonths(currentMonth, -1), 'right');
+  return /*#__PURE__*/_jsx(PickersRangeCalendarHeaderContentMultipleCalendars, {
+    ref: ref,
+    onGoToPrevious: selectPreviousMonth,
+    onGoToNext: selectNextMonth,
+    isPreviousHidden: monthIndex !== 0,
+    isPreviousDisabled: isPreviousMonthDisabled,
+    previousLabel: localeText.previousMonth,
+    isNextHidden: monthIndex !== calendars - 1,
+    isNextDisabled: isNextMonthDisabled,
+    nextLabel: localeText.nextMonth,
+    slots: slots,
+    slotProps: slotProps,
+    children: utils.formatByString(month, format ?? `${utils.formats.month} ${utils.formats.year}`)
+  });
+});
+process.env.NODE_ENV !== "production" ? PickersRangeCalendarHeader.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The number of calendars rendered.
+   */
+  calendars: PropTypes.oneOf([1, 2, 3]).isRequired,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  className: PropTypes.string,
+  currentMonth: PropTypes.object.isRequired,
+  disabled: PropTypes.bool,
+  disableFuture: PropTypes.bool,
+  disablePast: PropTypes.bool,
+  /**
+   * Format used to display the date.
+   * @default `${adapter.formats.month} ${adapter.formats.year}`
+   */
+  format: PropTypes.string,
+  labelId: PropTypes.string,
+  maxDate: PropTypes.object.isRequired,
+  minDate: PropTypes.object.isRequired,
+  /**
+   * Month used for this header.
+   */
+  month: PropTypes.object.isRequired,
+  /**
+   * Index of the month used for this header.
+   */
+  monthIndex: PropTypes.number.isRequired,
+  onMonthChange: PropTypes.func.isRequired,
+  onViewChange: PropTypes.func,
+  reduceAnimations: PropTypes.bool.isRequired,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  timezone: PropTypes.string.isRequired,
+  view: PropTypes.oneOf(['day', 'month', 'year']).isRequired,
+  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired).isRequired
+} : void 0;
+export { PickersRangeCalendarHeader };

package/PickersRangeCalendarHeader/PickersRangeCalendarHeader.types.d.ts

@@ -0,0 +1,18 @@
+import { PickerValidDate } from '@mui/x-date-pickers/models';
+import { ExportedPickersCalendarHeaderProps, PickersCalendarHeaderProps } from '@mui/x-date-pickers/PickersCalendarHeader';
+export interface PickersRangeCalendarHeaderProps<TDate extends PickerValidDate> extends PickersCalendarHeaderProps<TDate> {
+    /**
+     * The number of calendars rendered.
+     */
+    calendars: 1 | 2 | 3;
+    /**
+     * Month used for this header.
+     */
+    month: TDate;
+    /**
+     * Index of the month used for this header.
+     */
+    monthIndex: number;
+}
+export interface ExportedPickersRangeCalendarHeaderProps<TDate extends PickerValidDate> extends ExportedPickersCalendarHeaderProps<TDate> {
+}

package/PickersRangeCalendarHeader/PickersRangeCalendarHeader.types.js

@@ -0,0 +1 @@
+export {};

package/PickersRangeCalendarHeader/index.d.ts

@@ -0,0 +1,2 @@
+export { PickersRangeCalendarHeader } from './PickersRangeCalendarHeader';
+export type { PickersRangeCalendarHeaderProps, ExportedPickersRangeCalendarHeaderProps, } from './PickersRangeCalendarHeader.types';

package/PickersRangeCalendarHeader/index.js

@@ -0,0 +1 @@
+export { PickersRangeCalendarHeader } from './PickersRangeCalendarHeader';

package/PickersRangeCalendarHeader/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/PickersRangeCalendarHeader/index.js",
+  "types": "./index.d.ts"
+}

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.
    */