@mui/x-date-pickers 6.0.4 → 6.2.0

package/modern/DateTimeField/DateTimeField.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["components", "componentsProps", "slots", "slotProps"],
+const _excluded = ["components", "componentsProps", "slots", "slotProps", "InputProps", "inputProps"],
   _excluded2 = ["inputRef"],
   _excluded3 = ["ref", "onPaste", "inputMode", "readOnly"];
 import * as React from 'react';
@@ -19,7 +19,9 @@ const DateTimeField = /*#__PURE__*/React.forwardRef(function DateTimeField(inPro
       components,
       componentsProps,
       slots,
-      slotProps
+      slotProps,
+      InputProps,
+      inputProps
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const ownerState = themeProps;
@@ -34,6 +36,10 @@ const DateTimeField = /*#__PURE__*/React.forwardRef(function DateTimeField(inPro
       inputRef: externalInputRef
     } = _useSlotProps,
     textFieldProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
+
+  // TODO: Remove when mui/material-ui#35088 will be merged
+  textFieldProps.inputProps = _extends({}, textFieldProps.inputProps, inputProps);
+  textFieldProps.InputProps = _extends({}, textFieldProps.InputProps, InputProps);
   const _useDateTimeField = useDateTimeField({
       props: textFieldProps,
       inputRef: externalInputRef
@@ -123,6 +129,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/modern/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';
@@ -31,6 +31,7 @@ export const useDateTimeField = ({
       value,
       defaultValue,
       format,
+      formatDensity,
       onChange,
       readOnly,
       onError,
@@ -60,6 +61,7 @@ export const useDateTimeField = ({
       value,
       defaultValue,
       format,
+      formatDensity,
       onChange,
       readOnly,
       onError,

package/modern/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/modern/DateTimePicker/shared.js

@@ -35,7 +35,9 @@ export function useDateTimePickerDefaultizedProps(props, name) {
     localeText,
     orientation: themeProps.orientation ?? 'portrait',
     // TODO: Remove from public API
-    disableIgnoringDatePartForTimeValidation: themeProps.disableIgnoringDatePartForTimeValidation ?? Boolean(themeProps.minDateTime || themeProps.maxDateTime),
+    disableIgnoringDatePartForTimeValidation: themeProps.disableIgnoringDatePartForTimeValidation ?? 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.disableFuture ?? false,
     disablePast: themeProps.disablePast ?? false,
     minDate: applyDefaultDate(utils, themeProps.minDateTime ?? themeProps.minDate, defaultDates.minDate),

package/modern/DesktopDatePicker/DesktopDatePicker.js

@@ -139,6 +139,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/modern/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -162,6 +162,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/modern/DesktopTimePicker/DesktopTimePicker.js

@@ -128,6 +128,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/modern/MobileDatePicker/MobileDatePicker.js

@@ -136,6 +136,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/modern/MobileDateTimePicker/MobileDateTimePicker.js

@@ -160,6 +160,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/modern/MobileTimePicker/MobileTimePicker.js

@@ -127,6 +127,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/modern/MonthCalendar/PickersMonth.js

@@ -92,6 +92,7 @@ export const PickersMonth = /*#__PURE__*/React.memo(function PickersMonth(inProp
       onFocus,
       onBlur,
       'aria-current': ariaCurrent
+      // We don't want to forward this prop to the root element
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ref = React.useRef(null);

package/modern/TimeClock/TimeClock.js

@@ -16,6 +16,7 @@ import { PickerViewRoot } from '../internals/components/PickerViewRoot';
 import { getTimeClockUtilityClass } from './timeClockClasses';
 import { Clock } from './Clock';
 import { getHourNumbers, getMinutesNumbers } from './ClockNumbers';
+import { uncapitalizeObjectKeys } from '../internals/utils/slots-migration';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -66,8 +67,8 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
       autoFocus,
       components,
       componentsProps,
-      slots,
-      slotProps,
+      slots: innerSlots,
+      slotProps: innerSlotProps,
       value: valueProp,
       disableIgnoringDatePartForTimeValidation = false,
       maxTime,
@@ -89,6 +90,8 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
       readOnly
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const slots = innerSlots ?? uncapitalizeObjectKeys(components);
+  const slotProps = innerSlotProps ?? componentsProps;
   const [value, setValue] = useControlled({
     name: 'DateCalendar',
     state: 'value',
@@ -282,8 +285,6 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
       readOnly: readOnly
     }, viewProps)), showViewSwitcher && /*#__PURE__*/_jsx(TimeClockArrowSwitcher, {
       className: classes.arrowSwitcher,
-      components: components,
-      componentsProps: componentsProps,
       slots: slots,
       slotProps: slotProps,
       onGoToPrevious: () => setView(previousView),

package/modern/TimeField/TimeField.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["slots", "slotProps", "components", "componentsProps"],
+const _excluded = ["slots", "slotProps", "components", "componentsProps", "InputProps", "inputProps"],
   _excluded2 = ["inputRef"],
   _excluded3 = ["ref", "onPaste", "inputMode", "readOnly"];
 import * as React from 'react';
@@ -19,7 +19,9 @@ const TimeField = /*#__PURE__*/React.forwardRef(function TimeField(inProps, ref)
       slots,
       slotProps,
       components,
-      componentsProps
+      componentsProps,
+      InputProps,
+      inputProps
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const ownerState = themeProps;
@@ -34,6 +36,10 @@ const TimeField = /*#__PURE__*/React.forwardRef(function TimeField(inProps, ref)
       inputRef: externalInputRef
     } = _useSlotProps,
     textFieldProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
+
+  // TODO: Remove when mui/material-ui#35088 will be merged
+  textFieldProps.inputProps = _extends({}, textFieldProps.inputProps, inputProps);
+  textFieldProps.InputProps = _extends({}, textFieldProps.InputProps, InputProps);
   const _useTimeField = useTimeField({
       props: textFieldProps,
       inputRef: externalInputRef
@@ -123,6 +129,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/modern/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';
@@ -24,6 +24,7 @@ export const useTimeField = ({
       value,
       defaultValue,
       format,
+      formatDensity,
       onChange,
       readOnly,
       onError,
@@ -48,6 +49,7 @@ export const useTimeField = ({
       value,
       defaultValue,
       format,
+      formatDensity,
       onChange,
       readOnly,
       onError,

package/modern/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/modern/YearCalendar/PickersYear.js

@@ -94,6 +94,7 @@ export const PickersYear = /*#__PURE__*/React.memo(function PickersYear(inProps)
       onFocus,
       onBlur,
       'aria-current': ariaCurrent
+      // We don't want to forward this prop to the root element
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ref = React.useRef(null);

package/modern/index.js

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

package/modern/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className", "components", "componentsProps", "slots", "slotProps", "isNextDisabled", "isNextHidden", "onGoToNext", "nextLabel", "isPreviousDisabled", "isPreviousHidden", "onGoToPrevious", "previousLabel"],
+const _excluded = ["children", "className", "slots", "slotProps", "isNextDisabled", "isNextHidden", "onGoToNext", "nextLabel", "isPreviousDisabled", "isPreviousHidden", "onGoToPrevious", "previousLabel"],
   _excluded2 = ["ownerState"],
   _excluded3 = ["ownerState"];
 import * as React from 'react';
@@ -60,8 +60,6 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
   const {
       children,
       className,
-      components,
-      componentsProps,
       slots,
       slotProps,
       isNextDisabled,
@@ -89,10 +87,10 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
     label: previousLabel
   };
   const [leftProps, rightProps] = isRTL ? [nextProps, previousProps] : [previousProps, nextProps];
-  const PreviousIconButton = slots?.previousIconButton ?? components?.PreviousIconButton ?? PickersArrowSwitcherButton;
+  const PreviousIconButton = slots?.previousIconButton ?? PickersArrowSwitcherButton;
   const previousIconButtonProps = useSlotProps({
     elementType: PreviousIconButton,
-    externalSlotProps: slotProps?.previousIconButton ?? componentsProps?.previousIconButton,
+    externalSlotProps: slotProps?.previousIconButton,
     additionalProps: {
       size: 'medium',
       title: leftProps.label,
@@ -106,10 +104,10 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
     }),
     className: classes.button
   });
-  const NextIconButton = slots?.nextIconButton ?? components?.NextIconButton ?? PickersArrowSwitcherButton;
+  const NextIconButton = slots?.nextIconButton ?? PickersArrowSwitcherButton;
   const nextIconButtonProps = useSlotProps({
     elementType: NextIconButton,
-    externalSlotProps: slotProps?.nextIconButton ?? componentsProps?.nextIconButton,
+    externalSlotProps: slotProps?.nextIconButton,
     additionalProps: {
       size: 'medium',
       title: rightProps.label,
@@ -123,22 +121,22 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
     }),
     className: classes.button
   });
-  const LeftArrowIcon = slots?.leftArrowIcon ?? components?.LeftArrowIcon ?? ArrowLeft;
+  const LeftArrowIcon = slots?.leftArrowIcon ?? ArrowLeft;
   // The spread is here to avoid this bug mui/material-ui#34056
   const _useSlotProps = useSlotProps({
       elementType: LeftArrowIcon,
-      externalSlotProps: slotProps?.leftArrowIcon ?? componentsProps?.leftArrowIcon,
+      externalSlotProps: slotProps?.leftArrowIcon,
       additionalProps: {
         fontSize: 'inherit'
       },
       ownerState: undefined
     }),
     leftArrowIconProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
-  const RightArrowIcon = slots?.rightArrowIcon ?? components?.RightArrowIcon ?? ArrowRight;
+  const RightArrowIcon = slots?.rightArrowIcon ?? ArrowRight;
   // The spread is here to avoid this bug mui/material-ui#34056
   const _useSlotProps2 = useSlotProps({
       elementType: RightArrowIcon,
-      externalSlotProps: slotProps?.rightArrowIcon ?? componentsProps?.rightArrowIcon,
+      externalSlotProps: slotProps?.rightArrowIcon,
       additionalProps: {
         fontSize: 'inherit'
       },

package/modern/internals/components/PickersModalDialog.js

@@ -25,21 +25,19 @@ export function PickersModalDialog(props) {
     children,
     onDismiss,
     open,
-    components,
-    componentsProps,
     slots,
     slotProps
   } = props;
-  const Dialog = slots?.dialog ?? components?.Dialog ?? PickersModalDialogRoot;
-  const Transition = slots?.mobileTransition ?? components?.MobileTransition ?? Fade;
+  const Dialog = slots?.dialog ?? PickersModalDialogRoot;
+  const Transition = slots?.mobileTransition ?? Fade;
   return /*#__PURE__*/_jsx(Dialog, _extends({
     open: open,
     onClose: onDismiss
-  }, componentsProps?.dialog, {
+  }, slotProps?.dialog, {
     TransitionComponent: Transition,
-    TransitionProps: slotProps?.mobileTransition ?? componentsProps?.mobileTransition,
-    PaperComponent: slots?.mobilePaper ?? components?.MobilePaper,
-    PaperProps: slotProps?.mobilePaper ?? componentsProps?.mobilePaper,
+    TransitionProps: slotProps?.mobileTransition,
+    PaperComponent: slots?.mobilePaper,
+    PaperProps: slotProps?.mobilePaper,
     children: /*#__PURE__*/_jsx(PickersModalDialogContent, {
       children: children
     })

package/modern/internals/components/PickersPopper.js

@@ -9,7 +9,6 @@ import { unstable_useForkRef as useForkRef, unstable_useEventCallback as useEven
 import { styled, useThemeProps } from '@mui/material/styles';
 import { getPickersPopperUtilityClass } from './pickersPopperClasses';
 import { getActiveElement } from '../utils/utils';
-import { uncapitalizeObjectKeys } from '../utils/slots-migration';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -172,13 +171,9 @@ export function PickersPopper(inProps) {
     open,
     role,
     placement,
-    components,
-    componentsProps,
-    slots: innerSlots,
-    slotProps: innerSlotProps
+    slots,
+    slotProps
   } = props;
-  const slots = innerSlots ?? uncapitalizeObjectKeys(components);
-  const slotProps = innerSlotProps ?? componentsProps;
   React.useEffect(() => {
     function handleKeyDown(nativeEvent) {
       // IE11, Edge (prior to using Blink?) use 'Esc'

package/modern/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -33,6 +33,7 @@ export const useDesktopPicker = ({
     className,
     sx,
     format,
+    formatDensity,
     label,
     inputRef,
     readOnly,
@@ -98,6 +99,7 @@ export const useDesktopPicker = ({
       className,
       sx,
       format,
+      formatDensity,
       label,
       autoFocus: autoFocus && !props.open
     }),

package/modern/internals/hooks/useField/useField.js

@@ -302,8 +302,8 @@ export const useField = params => {
     if (error !== undefined) {
       return error;
     }
-    return fieldValueManager.hasError(validationError);
-  }, [fieldValueManager, validationError, error]);
+    return valueManager.hasError(validationError);
+  }, [valueManager, validationError, error]);
   React.useEffect(() => {
     // Select the right section when focused on mount (`autoFocus = true` on the input)
     if (inputRef.current && inputRef.current === document.activeElement) {

package/modern/internals/hooks/useField/useField.utils.js

@@ -309,7 +309,7 @@ const getEscapedPartsFromFormat = (utils, format) => {
   }
   return escapedParts;
 };
-export const splitFormatIntoSections = (utils, localeText, format, date) => {
+export const splitFormatIntoSections = (utils, localeText, format, date, formatDensity) => {
   let startSeparator = '';
   const sections = [];
   const commitToken = token => {
@@ -380,8 +380,8 @@ export const splitFormatIntoSections = (utils, localeText, format, date) => {
       if (cleanedSeparator !== null && cleanedSeparator.includes(' ')) {
         cleanedSeparator = `\u2069${cleanedSeparator}\u2066`;
       }
-      if (cleanedSeparator === '/') {
-        cleanedSeparator = ' / ';
+      if (formatDensity === 'spacious' && ['/', '.', '-'].includes(cleanedSeparator)) {
+        cleanedSeparator = ` ${cleanedSeparator} `;
       }
       return cleanedSeparator;
     };
@@ -586,7 +586,19 @@ const transferDateSectionValue = (utils, section, dateToTransferFrom, dateToTran
       }
   }
 };
-export const mergeDateIntoReferenceDate = (utils, dateToTransferFrom, sections, referenceDate, shouldLimitToEditedSections) => sections.reduce((mergedDate, section) => {
+const reliableSectionModificationOrder = {
+  year: 1,
+  month: 2,
+  day: 3,
+  weekDay: 4,
+  hours: 5,
+  minutes: 6,
+  seconds: 7,
+  meridiem: 8
+};
+export const mergeDateIntoReferenceDate = (utils, dateToTransferFrom, sections, referenceDate, shouldLimitToEditedSections) =>
+// cloning sections before sort to avoid mutating it
+[...sections].sort((a, b) => reliableSectionModificationOrder[a.type] - reliableSectionModificationOrder[b.type]).reduce((mergedDate, section) => {
   if (!shouldLimitToEditedSections || section.modified) {
     return transferDateSectionValue(utils, section, dateToTransferFrom, mergedDate);
   }
@@ -666,7 +678,9 @@ export const getSectionOrder = (sections, isRTL) => {
   while (RTLIndex >= 0) {
     groupedSectionsEnd = sections.findIndex(
     // eslint-disable-next-line @typescript-eslint/no-loop-func
-    (section, index) => index >= groupedSectionsStart && section.endSeparator?.includes(' '));
+    (section, index) => index >= groupedSectionsStart && section.endSeparator?.includes(' ') &&
+    // Special case where the spaces were not there in the initial input
+    section.endSeparator !== ' / ');
     if (groupedSectionsEnd === -1) {
       groupedSectionsEnd = sections.length - 1;
     }

package/modern/internals/hooks/useField/useFieldCharacterEditing.js

@@ -3,6 +3,29 @@ import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { useUtils } from '../useUtils';
 import { changeSectionValueFormat, cleanDigitSectionValue, doesSectionHaveLeadingZeros, getDateSectionConfigFromFormatToken, getDaysInWeekStr, getLetterEditingOptions } from './useField.utils';
+
+/**
+ * The letter editing and the numeric editing each define a `CharacterEditingApplier`.
+ * This function decides what the new section value should be and if the focus should switch to the next section.
+ *
+ * If it returns `null`, then the section value is not updated and the focus does not move.
+ */
+
+/**
+ * Function called by `applyQuery` which decides:
+ * - what is the new section value ?
+ * - should the query used to get this value be stored for the next key press ?
+ *
+ * If it returns `{ sectionValue: string; shouldGoToNextSection: boolean }`,
+ * Then we store the query and update the section with the new value.
+ *
+ * If it returns `{ saveQuery: true` },
+ * Then we store the query and don't update the section.
+ *
+ * If it returns `{ saveQuery: false },
+ * Then we do nothing.
+ */
+
 const QUERY_LIFE_DURATION_MS = 5000;
 const isQueryResponseWithoutValue = response => response.saveQuery != null;
 

package/modern/internals/hooks/useField/useFieldState.js

@@ -21,6 +21,7 @@ export const useFieldState = params => {
       defaultValue,
       onChange,
       format,
+      formatDensity = 'dense',
       selectedSections: selectedSectionsProp,
       onSelectedSectionsChange
     }
@@ -28,7 +29,7 @@ export const useFieldState = params => {
   const firstDefaultValue = React.useRef(defaultValue);
   const valueFromTheOutside = valueProp ?? firstDefaultValue.current ?? valueManager.emptyValue;
   const sectionsValueBoundaries = React.useMemo(() => getSectionsBoundaries(utils), [utils]);
-  const getSectionsFromValue = React.useCallback((value, fallbackSections = null) => fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, isRTL, date => splitFormatIntoSections(utils, localeText, format, date)), [fieldValueManager, format, localeText, isRTL, utils]);
+  const getSectionsFromValue = React.useCallback((value, fallbackSections = null) => fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, isRTL, date => splitFormatIntoSections(utils, localeText, format, date, formatDensity)), [fieldValueManager, format, localeText, isRTL, utils, formatDensity]);
   const placeholder = React.useMemo(() => fieldValueManager.getValueStrFromSections(getSectionsFromValue(valueManager.emptyValue), isRTL), [fieldValueManager, getSectionsFromValue, valueManager.emptyValue, isRTL]);
   const [state, setState] = React.useState(() => {
     const sections = getSectionsFromValue(valueFromTheOutside);
@@ -152,7 +153,7 @@ export const useFieldState = params => {
       if (date == null || !utils.isValid(date)) {
         return null;
       }
-      const sections = splitFormatIntoSections(utils, localeText, format, date);
+      const sections = splitFormatIntoSections(utils, localeText, format, date, formatDensity);
       return mergeDateIntoReferenceDate(utils, date, sections, referenceDate, false);
     };
     const newValue = fieldValueManager.parseValueStr(valueStr, state.referenceValue, parseDateStr);

package/modern/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -29,6 +29,7 @@ export const useMobilePicker = ({
     className,
     sx,
     format,
+    formatDensity,
     label,
     inputRef,
     readOnly,
@@ -69,6 +70,7 @@ export const useMobilePicker = ({
       className,
       sx,
       format,
+      formatDensity,
       label
     }),
     ownerState: props

package/modern/internals/hooks/usePicker/usePickerLayoutProps.js

@@ -1,5 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { useIsLandscape } from '../useIsLandscape';
+
+/**
+ * Props used to create the layout of the views.
+ * Those props are exposed on all the pickers.
+ */
+
 /**
  * Prepare the props for the view layout (managed by `PickersLayout`)
  */