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

package/CHANGELOG.md

@@ -3,9 +3,61 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.2.0
+
+_Apr 13, 2023_
+
+We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- Add `@mui/base` as a `peerDependency` of `@mui/x-date-pickers` and `@mui/x-date-pickers-pro` (#8590) @LukasTy
+
+  Both libraries were not working correctly if used without `@mui/base`.
+  Most package manager should automatically use the `@mui/base` version installed for `@mui/material`.
+
+- The value rendered in the picker or field input no longer has spaces around the `/` characters (#8425) @flaviendelangle
+
+  You can use the `formatDensity='spacious'` prop to add it back.
+  More information on [the dedicated doc section](https://mui.com/x/react-date-pickers/custom-field/#change-the-format-density)
+
+- 🌍 Improve French (fr-FR) and Urdu (ur-PK) and locales.
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### `@mui/x-data-grid@v6.2.0` / `@mui/x-data-grid-pro@v6.2.0` / `@mui/x-data-grid-premium@v6.2.0`
+
+#### Changes
+
+- [DataGrid] Reset selection state on `checkboxSelection` toggle (#8522) @MBilalShafi
+- [DataGrid] Use `baseSelect` slot instead of `baseTextField` with `select={true}` (#8110) @cherniavskii
+- [l10n] Improve French (fr-FR) locale (#8537) @vallereaugabriel
+- [l10n] Improve Urdu (ur-PK) locale (#8513) @SFARPak
+
+### `@mui/x-date-pickers@v6.2.0` / `@mui/x-date-pickers-pro@v6.2.0`
+
+#### Changes
+
+- [DateTimePicker] Fix `TimeClock` validation ignoring date by default (#8570) @LukasTy
+- [fields] Fix reliance on section order (#8545) @LukasTy
+- [fields] Make the space between format separators controllable (#8425) @flaviendelangle
+- [pickers] Add `@mui/base` to `peerDependencies` (#8590) @LukasTy
+- [pickers] Fix JSDoc for `formatDensity` prop (#8601) @flaviendelangle
+- [pickers] Improve value lifecycle on non-controlled pickers (#8312) @flaviendelangle
+- [pickers] Migrate `AdapterDayjs` to our repository (#8487) @flaviendelangle
+
+### Docs
+
+- [docs] Fix "Custom day rendering" demo alignment (#8541) @LukasTy
+- [docs] Fix **below** typo (#8576) @alexfauquette
+
+### Core
+
+- [core] Optimize `renovate` rules (#8575) @LukasTy
+- [core] Upgrade monorepo (#8578) @cherniavskii
+- [core] Update last release date (#8569) @DanailH
+
 ## 6.1.0
 
-_Apr 7, 2023_
+_Apr 10, 2023_
 
 We'd like to offer a big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
 

package/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/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -155,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/MobileDateRangePicker/MobileDateRangePicker.js

@@ -158,6 +158,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/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["slots", "slotProps", "components", "componentsProps", "value", "defaultValue", "format", "onChange", "readOnly", "disabled", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "autoFocus"],
+const _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';
@@ -48,6 +48,7 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
       value,
       defaultValue,
       format,
+      formatDensity,
       onChange,
       readOnly,
       disabled,
@@ -104,6 +105,7 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
         value,
         defaultValue,
         format,
+        formatDensity,
         onChange,
         readOnly,
         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/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _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"],
+const _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';
@@ -48,6 +48,7 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
       value,
       defaultValue,
       format,
+      formatDensity,
       onChange,
       readOnly,
       disabled,
@@ -113,6 +114,7 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
         value,
         defaultValue,
         format,
+        formatDensity,
         onChange,
         readOnly,
         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/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["slots", "slotProps", "components", "componentsProps", "value", "defaultValue", "format", "onChange", "readOnly", "disabled", "onError", "minTime", "maxTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableStartFieldRef", "unstableEndFieldRef", "autoFocus"],
+const _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';
@@ -48,6 +48,7 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
       value,
       defaultValue,
       format,
+      formatDensity,
       onChange,
       readOnly,
       disabled,
@@ -108,6 +109,7 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
         value,
         defaultValue,
         format,
+        formatDensity,
         onChange,
         readOnly,
         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/README.md

@@ -34,6 +34,7 @@ This component has the following peer dependencies that you will need to install
 
 ```json
 "peerDependencies": {
+  "@mui/base": "^5.0.0-alpha.87",
   "@mui/material": "^5.8.6",
   "@mui/system": "^5.8.0",
   "react": "^17.0.2 || ^18.0.0",

package/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -121,6 +121,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/SingleInputDateRangeField/useSingleInputDateRangeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["value", "defaultValue", "format", "onChange", "readOnly", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
+const _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';
@@ -25,6 +25,7 @@ export const useSingleInputDateRangeField = ({
       value,
       defaultValue,
       format,
+      formatDensity,
       onChange,
       readOnly,
       onError,
@@ -45,6 +46,7 @@ export const useSingleInputDateRangeField = ({
       value,
       defaultValue,
       format,
+      formatDensity,
       onChange,
       readOnly,
       onError,

package/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -131,6 +131,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/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["value", "defaultValue", "format", "onChange", "readOnly", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "shouldDisableTime", "disableIgnoringDatePartForTimeValidation", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
+const _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';
@@ -30,6 +30,7 @@ export const useSingleInputDateTimeRangeField = ({
       value,
       defaultValue,
       format,
+      formatDensity,
       onChange,
       readOnly,
       onError,
@@ -55,6 +56,7 @@ export const useSingleInputDateTimeRangeField = ({
       value,
       defaultValue,
       format,
+      formatDensity,
       onChange,
       readOnly,
       onError,

package/SingleInputTimeRangeField/SingleInputTimeRangeField.js

@@ -131,6 +131,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/SingleInputTimeRangeField/useSingleInputTimeRangeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["value", "defaultValue", "format", "onChange", "readOnly", "onError", "minTime", "maxTime", "minutesStep", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
+const _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';
@@ -24,6 +24,7 @@ export const useSingleInputTimeRangeField = ({
       value,
       defaultValue,
       format,
+      formatDensity,
       onChange,
       readOnly,
       onError,
@@ -45,6 +46,7 @@ export const useSingleInputTimeRangeField = ({
       value,
       defaultValue,
       format,
+      formatDensity,
       onChange,
       readOnly,
       onError,

package/index.js

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

package/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -24,6 +24,7 @@ export const useDesktopRangePicker = ({
     className,
     sx,
     format,
+    formatDensity,
     label,
     inputRef,
     readOnly,
@@ -77,6 +78,7 @@ export const useDesktopRangePicker = ({
       className,
       sx,
       format,
+      formatDensity,
       autoFocus: autoFocus && !props.open,
       ref: fieldContainerRef
     }, fieldType === 'single-input' && {

package/internal/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -25,6 +25,7 @@ export const useMobileRangePicker = ({
     className,
     sx,
     format,
+    formatDensity,
     label,
     inputRef,
     readOnly,
@@ -66,7 +67,8 @@ export const useMobileRangePicker = ({
       disabled,
       className,
       sx,
-      format
+      format,
+      formatDensity
     }, fieldType === 'single-input' && {
       inputRef
     }),

package/internal/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js

@@ -23,6 +23,7 @@ export const useMultiInputDateRangeField = ({
     value: valueProp,
     defaultValue,
     format,
+    formatDensity,
     onChange,
     disabled,
     readOnly,
@@ -63,6 +64,7 @@ export const useMultiInputDateRangeField = ({
     disabled,
     readOnly,
     format,
+    formatDensity,
     unstableFieldRef: unstableStartFieldRef,
     value: valueProp === undefined ? undefined : valueProp[0],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
@@ -74,6 +76,7 @@ export const useMultiInputDateRangeField = ({
     error: !!validationError[1]
   }, endTextFieldProps, {
     format,
+    formatDensity,
     disabled,
     readOnly,
     unstableFieldRef: unstableEndFieldRef,

package/internal/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY4MTA3NDAwMDAwMA==";
+  const releaseInfo = "MTY4MTQyMzIwMDAwMA==";
   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/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

@@ -154,6 +154,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

@@ -159,6 +159,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.
    */