@mui/x-date-pickers 6.1.0 → 6.2.1

package/CHANGELOG.md

@@ -3,9 +3,109 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.2.1
+
+_Apr 20, 2023_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Add virtualization to row detail panels (#7969) @yaredtsy
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### `@mui/x-data-grid@v6.2.1` / `@mui/x-data-grid-pro@v6.2.1` / `@mui/x-data-grid-premium@v6.2.1`
+
+#### Changes
+
+- [DataGrid] Add `getTogglableColumns` to `Hide all` and `Show all` actions (#8496) @MBilalShafi
+- [DataGrid] Add Grid + Joy UI experiment page (#8067) @cherniavskii
+- [DataGrid] Fix print style when rendering inside Shadow DOM (#8656) @Bwatermelon
+- [DataGrid] Replace `GridAutoSizer` with `ResizeObserver` (#8091) @m4theushw
+- [DataGrid] Use stable ID for the placeholder filter item (#8603) @m4theushw
+- [DataGridPro] Virtualize row detail panels (#7969) @yaredtsy
+
+### `@mui/x-date-pickers@v6.2.1` / `@mui/x-date-pickers-pro@v6.2.1`
+
+#### Changes
+
+- [pickers] Do not include the time in date components when going to today (#8657) @flaviendelangle
+- [pickers] Sync internal state with controlled value (#8674) @alexfauquette
+
+### `@mui/x-codemod@v6.0.6`
+
+#### Changes
+
+- [codemod] Avoid filter failures on object prototype properties (#8647) @LukasTy
+
+### Docs
+
+- [docs] Add no-op service worker to fix stale cache issue (#8598) @cherniavskii
+- [docs] Clarify what `AdapterDayjs` is in the Getting Started page (#8219) @flaviendelangle
+- [docs] Fix typo on picker page description (#8611) @maxolasersquad
+- [docs] Improve section title in Getting Started page (#8648) @flaviendelangle
+- [docs] Inform about input format modification (#8458) @alexfauquette
+
+### Core
+
+- [core] Fix release date (#8618) @flaviendelangle
+- [core] Upgrade monorepo (#8668) @MBilalShafi
+- [charts] Support Tooltip (#8356) @alexfauquette
+
+## 6.2.0
+
+_Apr 14, 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/DateCalendar/DateCalendar.types.d.ts

@@ -5,7 +5,7 @@ import { PickersCalendarHeaderSlotsComponent, PickersCalendarHeaderSlotsComponen
 import { DayCalendarSlotsComponent, DayCalendarSlotsComponentsProps, ExportedDayCalendarProps } from './DayCalendar';
 import { DateCalendarClasses } from './dateCalendarClasses';
 import { BaseDateValidationProps, YearValidationProps, MonthValidationProps, DayValidationProps } from '../internals/hooks/validation/models';
-import { PickerSelectionState } from '../internals/hooks/usePicker/usePickerValue';
+import { PickerSelectionState } from '../internals/hooks/usePicker/usePickerValue.types';
 import { ExportedUseViewsOptions } from '../internals/hooks/useViews';
 import { DateView } from '../models';
 import { DefaultizedProps } from '../internals/models/helpers';

package/DateCalendar/DayCalendar.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SlotComponentProps } from '@mui/base';
+import { SlotComponentProps } from '@mui/base/utils';
 import { PickersDay, PickersDayProps, ExportedPickersDayProps } from '../PickersDay/PickersDay';
 import { PickerOnChangeFn } from '../internals/hooks/useViews';
 import { SlideDirection, SlideTransitionProps } from './PickersSlideTransition';

package/DateField/DateField.js

@@ -120,6 +120,12 @@ process.env.NODE_ENV !== "production" ? DateField.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/DateField/useDateField.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", "shouldDisableMonth", "shouldDisableYear", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
+const _excluded = ["value", "defaultValue", "format", "formatDensity", "onChange", "readOnly", "onError", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
 import { singleItemFieldValueManager, singleItemValueManager } from '../internals/utils/valueManagers';
 import { useField } from '../internals/hooks/useField';
 import { validateDate } from '../internals/hooks/validation/useDateValidation';
@@ -27,6 +27,7 @@ export const useDateField = ({
       value,
       defaultValue,
       format,
+      formatDensity,
       onChange,
       readOnly,
       onError,
@@ -49,6 +50,7 @@ export const useDateField = ({
       value,
       defaultValue,
       format,
+      formatDensity,
       onChange,
       readOnly,
       onError,

package/DatePicker/DatePicker.js

@@ -127,6 +127,12 @@ process.env.NODE_ENV !== "production" ? DatePicker.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.
    */

package/DateTimeField/DateTimeField.js

@@ -130,6 +130,12 @@ process.env.NODE_ENV !== "production" ? DateTimeField.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/DateTimeField/useDateTimeField.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", "shouldDisableMonth", "shouldDisableYear", "minDate", "maxDate", "disableFuture", "disablePast", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "disableIgnoringDatePartForTimeValidation", "shouldDisableClock", "shouldDisableTime", "selectedSections", "onSelectedSectionsChange", "ampm", "unstableFieldRef"];
+const _excluded = ["value", "defaultValue", "format", "formatDensity", "onChange", "readOnly", "onError", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "minDate", "maxDate", "disableFuture", "disablePast", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "disableIgnoringDatePartForTimeValidation", "shouldDisableClock", "shouldDisableTime", "selectedSections", "onSelectedSectionsChange", "ampm", "unstableFieldRef"];
 import { singleItemFieldValueManager, singleItemValueManager } from '../internals/utils/valueManagers';
 import { useField } from '../internals/hooks/useField';
 import { validateDateTime } from '../internals/hooks/validation/useDateTimeValidation';
@@ -32,6 +32,7 @@ export const useDateTimeField = ({
       value,
       defaultValue,
       format,
+      formatDensity,
       onChange,
       readOnly,
       onError,
@@ -61,6 +62,7 @@ export const useDateTimeField = ({
       value,
       defaultValue,
       format,
+      formatDensity,
       onChange,
       readOnly,
       onError,

package/DateTimePicker/DateTimePicker.js

@@ -142,6 +142,12 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.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.
    */

package/DateTimePicker/shared.js

@@ -37,7 +37,9 @@ export function useDateTimePickerDefaultizedProps(props, name) {
     localeText,
     orientation: (_themeProps$orientati = themeProps.orientation) != null ? _themeProps$orientati : 'portrait',
     // TODO: Remove from public API
-    disableIgnoringDatePartForTimeValidation: (_themeProps$disableIg = themeProps.disableIgnoringDatePartForTimeValidation) != null ? _themeProps$disableIg : Boolean(themeProps.minDateTime || themeProps.maxDateTime),
+    disableIgnoringDatePartForTimeValidation: (_themeProps$disableIg = themeProps.disableIgnoringDatePartForTimeValidation) != null ? _themeProps$disableIg : Boolean(themeProps.minDateTime || themeProps.maxDateTime ||
+    // allow time clock to correctly check time validity: https://github.com/mui/mui-x/issues/8520
+    themeProps.disablePast || themeProps.disableFuture),
     disableFuture: (_themeProps$disableFu = themeProps.disableFuture) != null ? _themeProps$disableFu : false,
     disablePast: (_themeProps$disablePa = themeProps.disablePast) != null ? _themeProps$disablePa : false,
     minDate: applyDefaultDate(utils, (_themeProps$minDateTi = themeProps.minDateTime) != null ? _themeProps$minDateTi : themeProps.minDate, defaultDates.minDate),

package/DesktopDatePicker/DesktopDatePicker.js

@@ -49,6 +49,7 @@ const DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePick
   } = useDesktopPicker({
     props,
     valueManager: singleItemValueManager,
+    valueType: 'date',
     getOpenDialogAriaText: localeText.openDatePickerDialogue,
     validator: validateDate
   });
@@ -143,6 +144,12 @@ DesktopDatePicker.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.
    */

package/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -57,6 +57,7 @@ const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDate
   } = useDesktopPicker({
     props,
     valueManager: singleItemValueManager,
+    valueType: 'date-time',
     getOpenDialogAriaText: localeText.openDatePickerDialogue,
     validator: validateDateTime
   });
@@ -166,6 +167,12 @@ DesktopDateTimePicker.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.
    */

package/DesktopTimePicker/DesktopTimePicker.js

@@ -49,6 +49,7 @@ const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePick
   } = useDesktopPicker({
     props,
     valueManager: singleItemValueManager,
+    valueType: 'time',
     getOpenDialogAriaText: localeText.openTimePickerDialogue,
     validator: validateTime
   });
@@ -132,6 +133,12 @@ DesktopTimePicker.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.
    */

package/LocalizationProvider/LocalizationProvider.d.ts

@@ -17,7 +17,7 @@ export interface LocalizationProviderProps<TDate> {
     children?: React.ReactNode;
     /**
      * Date library adapter class function.
-     * @see See the localization provider {@link https://mui.com/x/react-date-pickers/getting-started/#code-setup code setup section} for more details.
+     * @see See the localization provider {@link https://mui.com/x/react-date-pickers/getting-started/#setup-your-date-library-adapter date adapter setup section} for more details.
      */
     dateAdapter?: new (...args: any) => MuiPickersAdapter<TDate>;
     /** Formats that are used for any child pickers */

package/LocalizationProvider/LocalizationProvider.js

@@ -90,7 +90,7 @@ process.env.NODE_ENV !== "production" ? LocalizationProvider.propTypes = {
   children: PropTypes.node,
   /**
    * Date library adapter class function.
-   * @see See the localization provider {@link https://mui.com/x/react-date-pickers/getting-started/#code-setup code setup section} for more details.
+   * @see See the localization provider {@link https://mui.com/x/react-date-pickers/getting-started/#setup-your-date-library-adapter date adapter setup section} for more details.
    */
   dateAdapter: PropTypes.func,
   /**

package/MobileDatePicker/MobileDatePicker.js

@@ -46,6 +46,7 @@ const MobileDatePicker = /*#__PURE__*/React.forwardRef(function MobileDatePicker
   } = useMobilePicker({
     props,
     valueManager: singleItemValueManager,
+    valueType: 'date',
     getOpenDialogAriaText: localeText.openDatePickerDialogue,
     validator: validateDate
   });
@@ -140,6 +141,12 @@ MobileDatePicker.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.
    */

package/MobileDateTimePicker/MobileDateTimePicker.js

@@ -55,6 +55,7 @@ const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTi
   } = useMobilePicker({
     props,
     valueManager: singleItemValueManager,
+    valueType: 'date-time',
     getOpenDialogAriaText: localeText.openDatePickerDialogue,
     validator: validateDateTime
   });
@@ -164,6 +165,12 @@ MobileDateTimePicker.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.
    */

package/MobileTimePicker/MobileTimePicker.js

@@ -48,6 +48,7 @@ const MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker
   } = useMobilePicker({
     props,
     valueManager: singleItemValueManager,
+    valueType: 'time',
     getOpenDialogAriaText: localeText.openTimePickerDialogue,
     validator: validateTime
   });
@@ -131,6 +132,12 @@ MobileTimePicker.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.
    */

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/StaticDatePicker/StaticDatePicker.js

@@ -32,6 +32,7 @@ const StaticDatePicker = /*#__PURE__*/React.forwardRef(function StaticDatePicker
   } = useStaticPicker({
     props,
     valueManager: singleItemValueManager,
+    valueType: 'date',
     validator: validateDate,
     ref
   });

package/StaticDateTimePicker/StaticDateTimePicker.js

@@ -42,8 +42,9 @@ const StaticDateTimePicker = /*#__PURE__*/React.forwardRef(function StaticDateTi
   } = useStaticPicker({
     props,
     valueManager: singleItemValueManager,
-    ref,
-    validator: validateDateTime
+    valueType: 'date-time',
+    validator: validateDateTime,
+    ref
   });
   return renderPicker();
 });

package/StaticTimePicker/StaticTimePicker.js

@@ -34,8 +34,9 @@ const StaticTimePicker = /*#__PURE__*/React.forwardRef(function StaticTimePicker
   } = useStaticPicker({
     props,
     valueManager: singleItemValueManager,
-    ref,
-    validator: validateTime
+    valueType: 'time',
+    validator: validateTime,
+    ref
   });
   return renderPicker();
 });

package/TimeClock/TimeClock.types.d.ts

@@ -4,7 +4,7 @@ import { TimeClockClasses } from './timeClockClasses';
 import { TimeValidationProps, BaseTimeValidationProps } from '../internals/hooks/validation/models';
 import { PickersArrowSwitcherSlotsComponent, PickersArrowSwitcherSlotsComponentsProps } from '../internals/components/PickersArrowSwitcher';
 import { TimeView } from '../models';
-import { PickerSelectionState } from '../internals/hooks/usePicker/usePickerValue';
+import { PickerSelectionState } from '../internals/hooks/usePicker/usePickerValue.types';
 import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration';
 export interface ExportedTimeClockProps<TDate> extends TimeValidationProps<TDate>, BaseTimeValidationProps {
     /**

package/TimeField/TimeField.js

@@ -130,6 +130,12 @@ process.env.NODE_ENV !== "production" ? TimeField.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/TimeField/useTimeField.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", "disableFuture", "disablePast", "minTime", "maxTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableIgnoringDatePartForTimeValidation", "selectedSections", "onSelectedSectionsChange", "ampm", "unstableFieldRef"];
+const _excluded = ["value", "defaultValue", "format", "formatDensity", "onChange", "readOnly", "onError", "disableFuture", "disablePast", "minTime", "maxTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableIgnoringDatePartForTimeValidation", "selectedSections", "onSelectedSectionsChange", "ampm", "unstableFieldRef"];
 import { singleItemFieldValueManager, singleItemValueManager } from '../internals/utils/valueManagers';
 import { useField } from '../internals/hooks/useField';
 import { validateTime } from '../internals/hooks/validation/useTimeValidation';
@@ -25,6 +25,7 @@ export const useTimeField = ({
       value,
       defaultValue,
       format,
+      formatDensity,
       onChange,
       readOnly,
       onError,
@@ -49,6 +50,7 @@ export const useTimeField = ({
       value,
       defaultValue,
       format,
+      formatDensity,
       onChange,
       readOnly,
       onError,

package/TimePicker/TimePicker.js

@@ -116,6 +116,12 @@ process.env.NODE_ENV !== "production" ? TimePicker.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.
    */

package/index.js

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

package/internals/components/PickersModalDialog.d.ts

@@ -3,7 +3,7 @@ import { DialogProps as MuiDialogProps } from '@mui/material/Dialog';
 import { PaperProps as MuiPaperProps } from '@mui/material/Paper/Paper';
 import { TransitionProps as MuiTransitionProps } from '@mui/material/transitions/transition';
 import { UncapitalizeObjectKeys } from '../utils/slots-migration';
-import { UsePickerValueActions } from '../hooks/usePicker/usePickerValue';
+import { UsePickerValueActions } from '../hooks/usePicker/usePickerValue.types';
 export interface PickersModalDialogSlotsComponent {
     /**
      * Custom component for the dialog inside which the views are rendered on mobile.

package/internals/components/PickersPopper.d.ts

@@ -6,7 +6,7 @@ import { TrapFocusProps as MuiTrapFocusProps } from '@mui/material/Unstable_Trap
 import { TransitionProps as MuiTransitionProps } from '@mui/material/transitions';
 import { PickersPopperClasses } from './pickersPopperClasses';
 import { UncapitalizeObjectKeys } from '../utils/slots-migration';
-import { UsePickerValueActions } from '../hooks/usePicker/usePickerValue';
+import { UsePickerValueActions } from '../hooks/usePicker/usePickerValue.types';
 export interface PickersPopperSlotsComponent {
     /**
      * Custom component for the paper rendered inside the desktop picker's Popper.

package/internals/hooks/useDesktopPicker/useDesktopPicker.d.ts

@@ -7,6 +7,6 @@ import { DateOrTimeView } from '../../../models';
  * - DesktopDateTimePicker
  * - DesktopTimePicker
  */
-export declare const useDesktopPicker: <TDate, TView extends DateOrTimeView, TExternalProps extends UseDesktopPickerProps<TDate, TView, any, TExternalProps>>({ props, valueManager, getOpenDialogAriaText, validator, }: UseDesktopPickerParams<TDate, TView, TExternalProps>) => {
+export declare const useDesktopPicker: <TDate, TView extends DateOrTimeView, TExternalProps extends UseDesktopPickerProps<TDate, TView, any, TExternalProps>>({ props, getOpenDialogAriaText, ...pickerParams }: UseDesktopPickerParams<TDate, TView, TExternalProps>) => {
     renderPicker: () => JSX.Element;
 };

package/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["ownerState"],
-  _excluded2 = ["ownerState"];
+const _excluded = ["props", "getOpenDialogAriaText"],
+  _excluded2 = ["ownerState"],
+  _excluded3 = ["ownerState"];
 import * as React from 'react';
 import { useSlotProps } from '@mui/base/utils';
 import MuiInputAdornment from '@mui/material/InputAdornment';
@@ -21,19 +22,20 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
  * - DesktopDateTimePicker
  * - DesktopTimePicker
  */
-export const useDesktopPicker = ({
-  props,
-  valueManager,
-  getOpenDialogAriaText,
-  validator
-}) => {
+export const useDesktopPicker = _ref => {
   var _innerSlotProps$toolb, _innerSlotProps$toolb2, _slots$inputAdornment, _slots$openPickerButt, _slots$layout;
+  let {
+      props,
+      getOpenDialogAriaText
+    } = _ref,
+    pickerParams = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
     slots,
     slotProps: innerSlotProps,
     className,
     sx,
     format,
+    formatDensity,
     label,
     inputRef,
     readOnly,
@@ -54,15 +56,13 @@ export const useDesktopPicker = ({
     renderCurrentView,
     shouldRestoreFocus,
     fieldProps: pickerFieldProps
-  } = usePicker({
+  } = usePicker(_extends({}, pickerParams, {
     props,
     inputRef: internalInputRef,
-    valueManager,
-    validator,
     autoFocusView: true,
     additionalViewProps: {},
     wrapperVariant: 'desktop'
-  });
+  }));
   const InputAdornment = (_slots$inputAdornment = slots.inputAdornment) != null ? _slots$inputAdornment : MuiInputAdornment;
   const _useSlotProps = useSlotProps({
       elementType: InputAdornment,
@@ -72,7 +72,7 @@ export const useDesktopPicker = ({
       },
       ownerState: props
     }),
-    inputAdornmentProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded);
+    inputAdornmentProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
   const OpenPickerButton = (_slots$openPickerButt = slots.openPickerButton) != null ? _slots$openPickerButt : IconButton;
   const _useSlotProps2 = useSlotProps({
       elementType: OpenPickerButton,
@@ -85,7 +85,7 @@ export const useDesktopPicker = ({
       },
       ownerState: props
     }),
-    openPickerButtonProps = _objectWithoutPropertiesLoose(_useSlotProps2, _excluded2);
+    openPickerButtonProps = _objectWithoutPropertiesLoose(_useSlotProps2, _excluded3);
   const OpenPickerIcon = slots.openPickerIcon;
   const Field = slots.field;
   const fieldProps = useSlotProps({
@@ -99,6 +99,7 @@ export const useDesktopPicker = ({
       className,
       sx,
       format,
+      formatDensity,
       label,
       autoFocus: autoFocus && !props.open
     }),

package/internals/hooks/useDesktopPicker/useDesktopPicker.types.d.ts

@@ -8,7 +8,7 @@ import { PickersPopperSlotsComponent, PickersPopperSlotsComponentsProps } from '
 import { UsePickerParams, UsePickerProps } from '../usePicker';
 import { BaseSingleInputFieldProps, FieldSection, DateOrTimeView, MuiPickersAdapter } from '../../../models';
 import { ExportedPickersLayoutSlotsComponent, ExportedPickersLayoutSlotsComponentsProps, PickersLayoutSlotsComponentsProps } from '../../../PickersLayout/PickersLayout.types';
-import { UsePickerValueNonStaticProps } from '../usePicker/usePickerValue';
+import { UsePickerValueNonStaticProps } from '../usePicker/usePickerValue.types';
 import { UsePickerViewsNonStaticProps, UsePickerViewsProps } from '../usePicker/usePickerViews';
 import { UncapitalizeObjectKeys } from '../../utils/slots-migration';
 export interface UseDesktopPickerSlotsComponent<TDate, TView extends DateOrTimeView> extends Pick<PickersPopperSlotsComponent, 'DesktopPaper' | 'DesktopTransition' | 'DesktopTrapFocus' | 'Popper'>, ExportedPickersLayoutSlotsComponent<TDate | null, TDate, TView> {
@@ -64,7 +64,7 @@ export interface UseDesktopPickerProps<TDate, TView extends DateOrTimeView, TErr
      */
     slotProps?: UseDesktopPickerSlotsComponentsProps<TDate, TView>;
 }
-export interface UseDesktopPickerParams<TDate, TView extends DateOrTimeView, TExternalProps extends UseDesktopPickerProps<TDate, TView, any, TExternalProps>> extends Pick<UsePickerParams<TDate | null, TDate, TView, FieldSection, TExternalProps, {}>, 'valueManager' | 'validator'> {
+export interface UseDesktopPickerParams<TDate, TView extends DateOrTimeView, TExternalProps extends UseDesktopPickerProps<TDate, TView, any, TExternalProps>> extends Pick<UsePickerParams<TDate | null, TDate, TView, FieldSection, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator'> {
     props: TExternalProps;
     getOpenDialogAriaText: (date: TDate | null, utils: MuiPickersAdapter<TDate>) => string;
 }