@mui/x-date-pickers-pro 6.1.0 → 6.2.1

package/internal/hooks/useStaticRangePicker/useStaticRangePicker.js

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["props", "ref"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
@@ -19,13 +21,13 @@ const PickerStaticLayout = styled(PickersLayout)(({
  * Hook managing all the range static pickers:
  * - StaticDateRangePicker
  */
-export const useStaticRangePicker = ({
-  props,
-  valueManager,
-  validator,
-  ref
-}) => {
+export const useStaticRangePicker = _ref => {
   var _slots$layout;
+  let {
+      props,
+      ref
+    } = _ref,
+    pickerParams = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
     localeText,
     slots,
@@ -42,17 +44,15 @@ export const useStaticRangePicker = ({
   const {
     layoutProps,
     renderCurrentView
-  } = usePicker({
+  } = usePicker(_extends({}, pickerParams, {
     props,
-    valueManager,
-    validator,
     autoFocusView: autoFocus != null ? autoFocus : false,
     additionalViewProps: {
       rangePosition,
       onRangePositionChange
     },
     wrapperVariant: displayStaticWrapperAs
-  });
+  }));
   const Layout = (_slots$layout = slots == null ? void 0 : slots.layout) != null ? _slots$layout : PickerStaticLayout;
   const slotPropsForLayout = _extends({}, slotProps, {
     toolbar: _extends({}, slotProps == null ? void 0 : slotProps.toolbar, {

package/internal/hooks/useStaticRangePicker/useStaticRangePicker.types.d.ts

@@ -24,7 +24,7 @@ export interface UseStaticRangePickerProps<TDate, TView extends DateOrTimeView,
      */
     slotProps?: UseStaticRangePickerSlotsComponentsProps<TDate, TView>;
 }
-export interface UseStaticRangePickerParams<TDate, TView extends DateOrTimeView, TExternalProps extends UseStaticRangePickerProps<TDate, TView, any, TExternalProps>> extends Pick<UsePickerParams<DateRange<TDate>, TDate, TView, RangeFieldSection, TExternalProps, {}>, 'valueManager' | 'validator'> {
+export interface UseStaticRangePickerParams<TDate, TView extends DateOrTimeView, TExternalProps extends UseStaticRangePickerProps<TDate, TView, any, TExternalProps>> extends Pick<UsePickerParams<DateRange<TDate>, TDate, TView, RangeFieldSection, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator'> {
     props: TExternalProps;
     /**
      * Ref to pass to the root element

package/internal/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY4MTA3NDAwMDAwMA==";
+  const releaseInfo = "MTY4MTkzMDgwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/internal/utils/valueManagers.js

@@ -3,7 +3,7 @@ import { replaceInvalidDateByNull, addPositionPropertiesToSections, createDateSt
 import { splitDateRangeSections, removeLastSeparator } from './date-fields-utils';
 export const rangeValueManager = {
   emptyValue: [null, null],
-  getTodayValue: utils => [utils.date(), utils.date()],
+  getTodayValue: (utils, valueType) => valueType === 'date' ? [utils.startOfDay(utils.date()), utils.startOfDay(utils.date())] : [utils.date(), utils.date()],
   cleanValue: (utils, value) => value.map(date => replaceInvalidDateByNull(utils, date)),
   areValuesEqual: (utils, a, b) => areDatesEqual(utils, a[0], b[0]) && areDatesEqual(utils, a[1], b[1]),
   isSameError: (a, b) => b !== null && a[1] === b[1] && a[0] === b[0],

package/legacy/DateRangePicker/DateRangePicker.js

@@ -146,6 +146,12 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * Defaults to localized format based on the used `views`.
    */
   format: PropTypes.string,
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Pass a ref to the `input` element.
    * Ignored if the field has several inputs.

package/legacy/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -39,6 +39,7 @@ var DesktopDateRangePicker = /*#__PURE__*/React.forwardRef(function DesktopDateR
   var _useDesktopRangePicke = useDesktopRangePicker({
       props: props,
       valueManager: rangeValueManager,
+      valueType: 'date',
       validator: validateDateRange
     }),
     renderPicker = _useDesktopRangePicke.renderPicker;
@@ -154,6 +155,12 @@ DesktopDateRangePicker.propTypes = {
    * Defaults to localized format based on the used `views`.
    */
   format: PropTypes.string,
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Pass a ref to the `input` element.
    * Ignored if the field has several inputs.

package/legacy/MobileDateRangePicker/MobileDateRangePicker.js

@@ -44,6 +44,7 @@ var MobileDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileDateRan
   var _useMobileRangePicker = useMobileRangePicker({
       props: props,
       valueManager: rangeValueManager,
+      valueType: 'date',
       validator: validateDateRange
     }),
     renderPicker = _useMobileRangePicker.renderPicker;
@@ -159,6 +160,12 @@ MobileDateRangePicker.propTypes = {
    * Defaults to localized format based on the used `views`.
    */
   format: PropTypes.string,
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Pass a ref to the `input` element.
    * Ignored if the field has several inputs.

package/legacy/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["slots", "slotProps", "components", "componentsProps", "value", "defaultValue", "format", "onChange", "readOnly", "disabled", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "autoFocus"],
+var _excluded = ["slots", "slotProps", "components", "componentsProps", "value", "defaultValue", "format", "formatDensity", "onChange", "readOnly", "disabled", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "autoFocus"],
   _excluded2 = ["onKeyDown", "ref", "readOnly", "inputMode"],
   _excluded3 = ["onKeyDown", "ref", "readOnly", "inputMode"];
 import * as React from 'react';
@@ -53,6 +53,7 @@ var MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInput
     value = themeProps.value,
     defaultValue = themeProps.defaultValue,
     format = themeProps.format,
+    formatDensity = themeProps.formatDensity,
     onChange = themeProps.onChange,
     readOnly = themeProps.readOnly,
     disabled = themeProps.disabled,
@@ -108,6 +109,7 @@ var MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInput
         value: value,
         defaultValue: defaultValue,
         format: format,
+        formatDensity: formatDensity,
         onChange: onChange,
         readOnly: readOnly,
         disabled: disabled,
@@ -211,6 +213,12 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
    * Format of the date when rendered in the input(s).
    */
   format: PropTypes.string,
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Maximal selectable date.
    */

package/legacy/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["slots", "slotProps", "components", "componentsProps", "value", "defaultValue", "format", "onChange", "readOnly", "disabled", "onError", "shouldDisableDate", "minDate", "maxDate", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableStartFieldRef", "unstableEndFieldRef", "autoFocus"],
+var _excluded = ["slots", "slotProps", "components", "componentsProps", "value", "defaultValue", "format", "formatDensity", "onChange", "readOnly", "disabled", "onError", "shouldDisableDate", "minDate", "maxDate", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableStartFieldRef", "unstableEndFieldRef", "autoFocus"],
   _excluded2 = ["onKeyDown", "ref", "readOnly", "inputMode"],
   _excluded3 = ["onKeyDown", "ref", "readOnly", "inputMode"];
 import * as React from 'react';
@@ -53,6 +53,7 @@ var MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiI
     value = themeProps.value,
     defaultValue = themeProps.defaultValue,
     format = themeProps.format,
+    formatDensity = themeProps.formatDensity,
     onChange = themeProps.onChange,
     readOnly = themeProps.readOnly,
     disabled = themeProps.disabled,
@@ -117,6 +118,7 @@ var MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiI
         value: value,
         defaultValue: defaultValue,
         format: format,
+        formatDensity: formatDensity,
         onChange: onChange,
         readOnly: readOnly,
         disabled: disabled,
@@ -239,6 +241,12 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
    * Format of the date when rendered in the input(s).
    */
   format: PropTypes.string,
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Maximal selectable date.
    */

package/legacy/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["slots", "slotProps", "components", "componentsProps", "value", "defaultValue", "format", "onChange", "readOnly", "disabled", "onError", "minTime", "maxTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableStartFieldRef", "unstableEndFieldRef", "autoFocus"],
+var _excluded = ["slots", "slotProps", "components", "componentsProps", "value", "defaultValue", "format", "formatDensity", "onChange", "readOnly", "disabled", "onError", "minTime", "maxTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableStartFieldRef", "unstableEndFieldRef", "autoFocus"],
   _excluded2 = ["onKeyDown", "ref", "readOnly", "inputMode"],
   _excluded3 = ["onKeyDown", "ref", "readOnly", "inputMode"];
 import * as React from 'react';
@@ -53,6 +53,7 @@ var MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInput
     value = themeProps.value,
     defaultValue = themeProps.defaultValue,
     format = themeProps.format,
+    formatDensity = themeProps.formatDensity,
     onChange = themeProps.onChange,
     readOnly = themeProps.readOnly,
     disabled = themeProps.disabled,
@@ -112,6 +113,7 @@ var MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInput
         value: value,
         defaultValue: defaultValue,
         format: format,
+        formatDensity: formatDensity,
         onChange: onChange,
         readOnly: readOnly,
         disabled: disabled,
@@ -229,6 +231,12 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.propTypes = {
    * Format of the date when rendered in the input(s).
    */
   format: PropTypes.string,
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Maximal selectable time.
    * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.

package/legacy/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -115,6 +115,12 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    * Format of the date when rendered in the input(s).
    */
   format: PropTypes.string,
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Props applied to the [`FormHelperText`](/material-ui/api/form-helper-text/) element.
    */

package/legacy/SingleInputDateRangeField/useSingleInputDateRangeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["value", "defaultValue", "format", "onChange", "readOnly", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
+var _excluded = ["value", "defaultValue", "format", "formatDensity", "onChange", "readOnly", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
 import { useUtils, useDefaultDates, applyDefaultDate, useField } from '@mui/x-date-pickers/internals';
 import { rangeValueManager, rangeFieldValueManager } from '../internal/utils/valueManagers';
 import { validateDateRange } from '../internal/hooks/validation/useDateRangeValidation';
@@ -23,6 +23,7 @@ export var useSingleInputDateRangeField = function useSingleInputDateRangeField(
     value = _useDefaultizedDateRa.value,
     defaultValue = _useDefaultizedDateRa.defaultValue,
     format = _useDefaultizedDateRa.format,
+    formatDensity = _useDefaultizedDateRa.formatDensity,
     onChange = _useDefaultizedDateRa.onChange,
     readOnly = _useDefaultizedDateRa.readOnly,
     onError = _useDefaultizedDateRa.onError,
@@ -42,6 +43,7 @@ export var useSingleInputDateRangeField = function useSingleInputDateRangeField(
       value: value,
       defaultValue: defaultValue,
       format: format,
+      formatDensity: formatDensity,
       onChange: onChange,
       readOnly: readOnly,
       onError: onError,

package/legacy/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -125,6 +125,12 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.propTypes
    * Format of the date when rendered in the input(s).
    */
   format: PropTypes.string,
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Props applied to the [`FormHelperText`](/material-ui/api/form-helper-text/) element.
    */

package/legacy/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["value", "defaultValue", "format", "onChange", "readOnly", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "shouldDisableTime", "disableIgnoringDatePartForTimeValidation", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
+var _excluded = ["value", "defaultValue", "format", "formatDensity", "onChange", "readOnly", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "shouldDisableTime", "disableIgnoringDatePartForTimeValidation", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
 import { useUtils, useField, applyDefaultDate, useDefaultDates } from '@mui/x-date-pickers/internals';
 import { rangeValueManager, rangeFieldValueManager } from '../internal/utils/valueManagers';
 import { validateDateTimeRange } from '../internal/hooks/validation/useDateTimeRangeValidation';
@@ -28,6 +28,7 @@ export var useSingleInputDateTimeRangeField = function useSingleInputDateTimeRan
     value = _useDefaultizedTimeRa.value,
     defaultValue = _useDefaultizedTimeRa.defaultValue,
     format = _useDefaultizedTimeRa.format,
+    formatDensity = _useDefaultizedTimeRa.formatDensity,
     onChange = _useDefaultizedTimeRa.onChange,
     readOnly = _useDefaultizedTimeRa.readOnly,
     onError = _useDefaultizedTimeRa.onError,
@@ -54,6 +55,7 @@ export var useSingleInputDateTimeRangeField = function useSingleInputDateTimeRan
       value: value,
       defaultValue: defaultValue,
       format: format,
+      formatDensity: formatDensity,
       onChange: onChange,
       readOnly: readOnly,
       onError: onError,

package/legacy/SingleInputTimeRangeField/SingleInputTimeRangeField.js

@@ -125,6 +125,12 @@ process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.propTypes = {
    * Format of the date when rendered in the input(s).
    */
   format: PropTypes.string,
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Props applied to the [`FormHelperText`](/material-ui/api/form-helper-text/) element.
    */

package/legacy/SingleInputTimeRangeField/useSingleInputTimeRangeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["value", "defaultValue", "format", "onChange", "readOnly", "onError", "minTime", "maxTime", "minutesStep", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
+var _excluded = ["value", "defaultValue", "format", "formatDensity", "onChange", "readOnly", "onError", "minTime", "maxTime", "minutesStep", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
 import { useUtils, useField } from '@mui/x-date-pickers/internals';
 import { rangeValueManager, rangeFieldValueManager } from '../internal/utils/valueManagers';
 import { validateTimeRange } from '../internal/hooks/validation/useTimeRangeValidation';
@@ -22,6 +22,7 @@ export var useSingleInputTimeRangeField = function useSingleInputTimeRangeField(
     value = _useDefaultizedTimeRa.value,
     defaultValue = _useDefaultizedTimeRa.defaultValue,
     format = _useDefaultizedTimeRa.format,
+    formatDensity = _useDefaultizedTimeRa.formatDensity,
     onChange = _useDefaultizedTimeRa.onChange,
     readOnly = _useDefaultizedTimeRa.readOnly,
     onError = _useDefaultizedTimeRa.onError,
@@ -42,6 +43,7 @@ export var useSingleInputTimeRangeField = function useSingleInputTimeRangeField(
       value: value,
       defaultValue: defaultValue,
       format: format,
+      formatDensity: formatDensity,
       onChange: onChange,
       readOnly: readOnly,
       onError: onError,

package/legacy/StaticDateRangePicker/StaticDateRangePicker.js

@@ -30,6 +30,7 @@ var StaticDateRangePicker = /*#__PURE__*/React.forwardRef(function StaticDateRan
   var _useStaticRangePicker = useStaticRangePicker({
       props: props,
       valueManager: rangeValueManager,
+      valueType: 'date',
       validator: validateDateRange,
       ref: ref
     }),

package/legacy/index.js

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

package/legacy/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["props"];
 import * as React from 'react';
 import { useSlotProps } from '@mui/base/utils';
 import { useLicenseVerifier } from '@mui/x-license-pro';
@@ -14,14 +16,14 @@ var releaseInfo = getReleaseInfo();
 export var useDesktopRangePicker = function useDesktopRangePicker(_ref) {
   var _fieldType, _slots$layout;
   var props = _ref.props,
-    valueManager = _ref.valueManager,
-    validator = _ref.validator;
+    pickerParams = _objectWithoutProperties(_ref, _excluded);
   useLicenseVerifier('x-date-pickers-pro', releaseInfo);
   var slots = props.slots,
     slotProps = props.slotProps,
     className = props.className,
     sx = props.sx,
     format = props.format,
+    formatDensity = props.formatDensity,
     label = props.label,
     inputRef = props.inputRef,
     readOnly = props.readOnly,
@@ -35,17 +37,15 @@ export var useDesktopRangePicker = function useDesktopRangePicker(_ref) {
     rangePosition = _useRangePosition.rangePosition,
     onRangePositionChange = _useRangePosition.onRangePositionChange,
     singleInputFieldRef = _useRangePosition.singleInputFieldRef;
-  var _usePicker = usePicker({
+  var _usePicker = usePicker(_extends({}, pickerParams, {
       props: props,
-      valueManager: valueManager,
       wrapperVariant: 'desktop',
-      validator: validator,
       autoFocusView: true,
       additionalViewProps: {
         rangePosition: rangePosition,
         onRangePositionChange: onRangePositionChange
       }
-    }),
+    })),
     open = _usePicker.open,
     actions = _usePicker.actions,
     layoutProps = _usePicker.layoutProps,
@@ -72,6 +72,7 @@ export var useDesktopRangePicker = function useDesktopRangePicker(_ref) {
       className: className,
       sx: sx,
       format: format,
+      formatDensity: formatDensity,
       autoFocus: autoFocus && !props.open,
       ref: fieldContainerRef
     }, fieldType === 'single-input' && {

package/legacy/internal/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["props"];
 import * as React from 'react';
 import { useSlotProps } from '@mui/base/utils';
 import { useLicenseVerifier } from '@mui/x-license-pro';
@@ -15,14 +17,14 @@ var releaseInfo = getReleaseInfo();
 export var useMobileRangePicker = function useMobileRangePicker(_ref) {
   var _fieldType, _innerSlotProps$toolb, _innerSlotProps$toolb2, _slots$layout;
   var props = _ref.props,
-    valueManager = _ref.valueManager,
-    validator = _ref.validator;
+    pickerParams = _objectWithoutProperties(_ref, _excluded);
   useLicenseVerifier('x-date-pickers-pro', releaseInfo);
   var slots = props.slots,
     innerSlotProps = props.slotProps,
     className = props.className,
     sx = props.sx,
     format = props.format,
+    formatDensity = props.formatDensity,
     label = props.label,
     inputRef = props.inputRef,
     readOnly = props.readOnly,
@@ -35,17 +37,15 @@ export var useMobileRangePicker = function useMobileRangePicker(_ref) {
     singleInputFieldRef = _useRangePosition.singleInputFieldRef;
   var labelId = useId();
   var contextLocaleText = useLocaleText();
-  var _usePicker = usePicker({
+  var _usePicker = usePicker(_extends({}, pickerParams, {
       props: props,
-      valueManager: valueManager,
       wrapperVariant: 'mobile',
-      validator: validator,
       autoFocusView: true,
       additionalViewProps: {
         rangePosition: rangePosition,
         onRangePositionChange: onRangePositionChange
       }
-    }),
+    })),
     open = _usePicker.open,
     actions = _usePicker.actions,
     layoutProps = _usePicker.layoutProps,
@@ -61,7 +61,8 @@ export var useMobileRangePicker = function useMobileRangePicker(_ref) {
       disabled: disabled,
       className: className,
       sx: sx,
-      format: format
+      format: format,
+      formatDensity: formatDensity
     }, fieldType === 'single-input' && {
       inputRef: inputRef
     }),

package/legacy/internal/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js

@@ -22,6 +22,7 @@ export var useMultiInputDateRangeField = function useMultiInputDateRangeField(_r
   var valueProp = sharedProps.value,
     defaultValue = sharedProps.defaultValue,
     format = sharedProps.format,
+    formatDensity = sharedProps.formatDensity,
     onChange = sharedProps.onChange,
     disabled = sharedProps.disabled,
     readOnly = sharedProps.readOnly,
@@ -64,6 +65,7 @@ export var useMultiInputDateRangeField = function useMultiInputDateRangeField(_r
     disabled: disabled,
     readOnly: readOnly,
     format: format,
+    formatDensity: formatDensity,
     unstableFieldRef: unstableStartFieldRef,
     value: valueProp === undefined ? undefined : valueProp[0],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
@@ -75,6 +77,7 @@ export var useMultiInputDateRangeField = function useMultiInputDateRangeField(_r
     error: !!validationError[1]
   }, endTextFieldProps, {
     format: format,
+    formatDensity: formatDensity,
     disabled: disabled,
     readOnly: readOnly,
     unstableFieldRef: unstableEndFieldRef,

package/legacy/internal/hooks/useStaticRangePicker/useStaticRangePicker.js

@@ -1,5 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["props", "ref"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
@@ -24,9 +26,8 @@ var PickerStaticLayout = styled(PickersLayout)(function (_ref) {
 export var useStaticRangePicker = function useStaticRangePicker(_ref2) {
   var _slots$layout;
   var props = _ref2.props,
-    valueManager = _ref2.valueManager,
-    validator = _ref2.validator,
-    ref = _ref2.ref;
+    ref = _ref2.ref,
+    pickerParams = _objectWithoutProperties(_ref2, _excluded);
   var localeText = props.localeText,
     slots = props.slots,
     slotProps = props.slotProps,
@@ -37,17 +38,15 @@ export var useStaticRangePicker = function useStaticRangePicker(_ref2) {
   var _useRangePosition = useRangePosition(props),
     rangePosition = _useRangePosition.rangePosition,
     onRangePositionChange = _useRangePosition.onRangePositionChange;
-  var _usePicker = usePicker({
+  var _usePicker = usePicker(_extends({}, pickerParams, {
       props: props,
-      valueManager: valueManager,
-      validator: validator,
       autoFocusView: autoFocus != null ? autoFocus : false,
       additionalViewProps: {
         rangePosition: rangePosition,
         onRangePositionChange: onRangePositionChange
       },
       wrapperVariant: displayStaticWrapperAs
-    }),
+    })),
     layoutProps = _usePicker.layoutProps,
     renderCurrentView = _usePicker.renderCurrentView;
   var Layout = (_slots$layout = slots == null ? void 0 : slots.layout) != null ? _slots$layout : PickerStaticLayout;

package/legacy/internal/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export var getReleaseInfo = function getReleaseInfo() {
-  var releaseInfo = "MTY4MTA3NDAwMDAwMA==";
+  var releaseInfo = "MTY4MTkzMDgwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/legacy/internal/utils/valueManagers.js

@@ -5,8 +5,8 @@ import { replaceInvalidDateByNull, addPositionPropertiesToSections, createDateSt
 import { splitDateRangeSections, removeLastSeparator } from './date-fields-utils';
 export var rangeValueManager = {
   emptyValue: [null, null],
-  getTodayValue: function getTodayValue(utils) {
-    return [utils.date(), utils.date()];
+  getTodayValue: function getTodayValue(utils, valueType) {
+    return valueType === 'date' ? [utils.startOfDay(utils.date()), utils.startOfDay(utils.date())] : [utils.date(), utils.date()];
   },
   cleanValue: function cleanValue(utils, value) {
     return value.map(function (date) {

package/modern/DateRangePicker/DateRangePicker.js

@@ -147,6 +147,12 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * Defaults to localized format based on the used `views`.
    */
   format: PropTypes.string,
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Pass a ref to the `input` element.
    * Ignored if the field has several inputs.

package/modern/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -37,6 +37,7 @@ const DesktopDateRangePicker = /*#__PURE__*/React.forwardRef(function DesktopDat
   } = useDesktopRangePicker({
     props,
     valueManager: rangeValueManager,
+    valueType: 'date',
     validator: validateDateRange
   });
   return renderPicker();
@@ -151,6 +152,12 @@ DesktopDateRangePicker.propTypes = {
    * Defaults to localized format based on the used `views`.
    */
   format: PropTypes.string,
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Pass a ref to the `input` element.
    * Ignored if the field has several inputs.

package/modern/MobileDateRangePicker/MobileDateRangePicker.js

@@ -40,6 +40,7 @@ const MobileDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileDateR
   } = useMobileRangePicker({
     props,
     valueManager: rangeValueManager,
+    valueType: 'date',
     validator: validateDateRange
   });
   return renderPicker();
@@ -154,6 +155,12 @@ MobileDateRangePicker.propTypes = {
    * Defaults to localized format based on the used `views`.
    */
   format: PropTypes.string,
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Pass a ref to the `input` element.
    * Ignored if the field has several inputs.