@mui/x-date-pickers 6.1.0 → 6.2.1

package/legacy/DateTimeField/useDateTimeField.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", "shouldDisableMonth", "shouldDisableYear", "minDate", "maxDate", "disableFuture", "disablePast", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "disableIgnoringDatePartForTimeValidation", "shouldDisableClock", "shouldDisableTime", "selectedSections", "onSelectedSectionsChange", "ampm", "unstableFieldRef"];
+var _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';
@@ -30,6 +30,7 @@ export var useDateTimeField = function useDateTimeField(_ref) {
     value = _useDefaultizedDateTi.value,
     defaultValue = _useDefaultizedDateTi.defaultValue,
     format = _useDefaultizedDateTi.format,
+    formatDensity = _useDefaultizedDateTi.formatDensity,
     onChange = _useDefaultizedDateTi.onChange,
     readOnly = _useDefaultizedDateTi.readOnly,
     onError = _useDefaultizedDateTi.onError,
@@ -60,6 +61,7 @@ export var useDateTimeField = function useDateTimeField(_ref) {
       value: value,
       defaultValue: defaultValue,
       format: format,
+      formatDensity: formatDensity,
       onChange: onChange,
       readOnly: readOnly,
       onError: onError,

package/legacy/DateTimePicker/DateTimePicker.js

@@ -141,6 +141,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/legacy/DateTimePicker/shared.js

@@ -37,7 +37,9 @@ export function useDateTimePickerDefaultizedProps(props, name) {
     localeText: 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/legacy/DesktopDatePicker/DesktopDatePicker.js

@@ -47,6 +47,7 @@ var DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePicker
   var _useDesktopPicker = useDesktopPicker({
       props: props,
       valueManager: singleItemValueManager,
+      valueType: 'date',
       getOpenDialogAriaText: localeText.openDatePickerDialogue,
       validator: validateDate
     }),
@@ -142,6 +143,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/legacy/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -55,6 +55,7 @@ var DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDateTi
   var _useDesktopPicker = useDesktopPicker({
       props: props,
       valueManager: singleItemValueManager,
+      valueType: 'date-time',
       getOpenDialogAriaText: localeText.openDatePickerDialogue,
       validator: validateDateTime
     }),
@@ -165,6 +166,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/legacy/DesktopTimePicker/DesktopTimePicker.js

@@ -47,6 +47,7 @@ var DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePicker
   var _useDesktopPicker = useDesktopPicker({
       props: props,
       valueManager: singleItemValueManager,
+      valueType: 'time',
       getOpenDialogAriaText: localeText.openTimePickerDialogue,
       validator: validateTime
     }),
@@ -131,6 +132,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/legacy/LocalizationProvider/LocalizationProvider.js

@@ -87,7 +87,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/legacy/MobileDatePicker/MobileDatePicker.js

@@ -44,6 +44,7 @@ var MobileDatePicker = /*#__PURE__*/React.forwardRef(function MobileDatePicker(i
   var _useMobilePicker = useMobilePicker({
       props: props,
       valueManager: singleItemValueManager,
+      valueType: 'date',
       getOpenDialogAriaText: localeText.openDatePickerDialogue,
       validator: validateDate
     }),
@@ -139,6 +140,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/legacy/MobileDateTimePicker/MobileDateTimePicker.js

@@ -53,6 +53,7 @@ var MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTime
   var _useMobilePicker = useMobilePicker({
       props: props,
       valueManager: singleItemValueManager,
+      valueType: 'date-time',
       getOpenDialogAriaText: localeText.openDatePickerDialogue,
       validator: validateDateTime
     }),
@@ -163,6 +164,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/legacy/MobileTimePicker/MobileTimePicker.js

@@ -46,6 +46,7 @@ var MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker(i
   var _useMobilePicker = useMobilePicker({
       props: props,
       valueManager: singleItemValueManager,
+      valueType: 'time',
       getOpenDialogAriaText: localeText.openTimePickerDialogue,
       validator: validateTime
     }),
@@ -130,6 +131,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/legacy/StaticDatePicker/StaticDatePicker.js

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

package/legacy/StaticDateTimePicker/StaticDateTimePicker.js

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

package/legacy/StaticTimePicker/StaticTimePicker.js

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

package/legacy/TimeField/TimeField.js

@@ -124,6 +124,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/legacy/TimeField/useTimeField.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", "disableFuture", "disablePast", "minTime", "maxTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableIgnoringDatePartForTimeValidation", "selectedSections", "onSelectedSectionsChange", "ampm", "unstableFieldRef"];
+var _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';
@@ -23,6 +23,7 @@ export var useTimeField = function useTimeField(_ref) {
     value = _useDefaultizedTimeFi.value,
     defaultValue = _useDefaultizedTimeFi.defaultValue,
     format = _useDefaultizedTimeFi.format,
+    formatDensity = _useDefaultizedTimeFi.formatDensity,
     onChange = _useDefaultizedTimeFi.onChange,
     readOnly = _useDefaultizedTimeFi.readOnly,
     onError = _useDefaultizedTimeFi.onError,
@@ -46,6 +47,7 @@ export var useTimeField = function useTimeField(_ref) {
       value: value,
       defaultValue: defaultValue,
       format: format,
+      formatDensity: formatDensity,
       onChange: onChange,
       readOnly: readOnly,
       onError: onError,

package/legacy/TimePicker/TimePicker.js

@@ -115,6 +115,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/legacy/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/legacy/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -1,8 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["ownerState"],
-  _excluded2 = ["ownerState"];
+var _excluded = ["props", "getOpenDialogAriaText"],
+  _excluded2 = ["ownerState"],
+  _excluded3 = ["ownerState"];
 import * as React from 'react';
 import { useSlotProps } from '@mui/base/utils';
 import MuiInputAdornment from '@mui/material/InputAdornment';
@@ -25,14 +26,14 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 export var useDesktopPicker = function useDesktopPicker(_ref) {
   var _innerSlotProps$toolb, _innerSlotProps$toolb2, _slots$inputAdornment, _slots$openPickerButt, _slots$layout;
   var props = _ref.props,
-    valueManager = _ref.valueManager,
     getOpenDialogAriaText = _ref.getOpenDialogAriaText,
-    validator = _ref.validator;
+    pickerParams = _objectWithoutProperties(_ref, _excluded);
   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,
@@ -44,15 +45,13 @@ export var useDesktopPicker = function useDesktopPicker(_ref) {
   var containerRef = React.useRef(null);
   var labelId = useId();
   var isToolbarHidden = (_innerSlotProps$toolb = innerSlotProps == null ? void 0 : (_innerSlotProps$toolb2 = innerSlotProps.toolbar) == null ? void 0 : _innerSlotProps$toolb2.hidden) != null ? _innerSlotProps$toolb : false;
-  var _usePicker = usePicker({
+  var _usePicker = usePicker(_extends({}, pickerParams, {
       props: props,
       inputRef: internalInputRef,
-      valueManager: valueManager,
-      validator: validator,
       autoFocusView: true,
       additionalViewProps: {},
       wrapperVariant: 'desktop'
-    }),
+    })),
     open = _usePicker.open,
     actions = _usePicker.actions,
     hasUIView = _usePicker.hasUIView,
@@ -70,7 +69,7 @@ export var useDesktopPicker = function useDesktopPicker(_ref) {
       ownerState: props
     }),
     inputAdornmentOwnerState = _useSlotProps.ownerState,
-    inputAdornmentProps = _objectWithoutProperties(_useSlotProps, _excluded);
+    inputAdornmentProps = _objectWithoutProperties(_useSlotProps, _excluded2);
   var OpenPickerButton = (_slots$openPickerButt = slots.openPickerButton) != null ? _slots$openPickerButt : IconButton;
   var _useSlotProps2 = useSlotProps({
       elementType: OpenPickerButton,
@@ -84,7 +83,7 @@ export var useDesktopPicker = function useDesktopPicker(_ref) {
       ownerState: props
     }),
     openPickerButtonOwnerState = _useSlotProps2.ownerState,
-    openPickerButtonProps = _objectWithoutProperties(_useSlotProps2, _excluded2);
+    openPickerButtonProps = _objectWithoutProperties(_useSlotProps2, _excluded3);
   var OpenPickerIcon = slots.openPickerIcon;
   var Field = slots.field;
   var fieldProps = useSlotProps({
@@ -98,6 +97,7 @@ export var useDesktopPicker = function useDesktopPicker(_ref) {
       className: className,
       sx: sx,
       format: format,
+      formatDensity: formatDensity,
       label: label,
       autoFocus: autoFocus && !props.open
     }),

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

@@ -320,7 +320,7 @@ var getEscapedPartsFromFormat = function getEscapedPartsFromFormat(utils, format
   }
   return escapedParts;
 };
-export var splitFormatIntoSections = function splitFormatIntoSections(utils, localeText, format, date) {
+export var splitFormatIntoSections = function splitFormatIntoSections(utils, localeText, format, date, formatDensity) {
   var startSeparator = '';
   var sections = [];
   var commitToken = function commitToken(token) {
@@ -396,8 +396,8 @@ export var splitFormatIntoSections = function splitFormatIntoSections(utils, loc
       if (cleanedSeparator !== null && cleanedSeparator.includes(' ')) {
         cleanedSeparator = "\u2069".concat(cleanedSeparator, "\u2066");
       }
-      if (cleanedSeparator === '/') {
-        cleanedSeparator = ' / ';
+      if (formatDensity === 'spacious' && ['/', '.', '-'].includes(cleanedSeparator)) {
+        cleanedSeparator = " ".concat(cleanedSeparator, " ");
       }
       return cleanedSeparator;
     };
@@ -615,13 +615,28 @@ var transferDateSectionValue = function transferDateSectionValue(utils, section,
       }
   }
 };
+var reliableSectionModificationOrder = {
+  year: 1,
+  month: 2,
+  day: 3,
+  weekDay: 4,
+  hours: 5,
+  minutes: 6,
+  seconds: 7,
+  meridiem: 8
+};
 export var mergeDateIntoReferenceDate = function mergeDateIntoReferenceDate(utils, dateToTransferFrom, sections, referenceDate, shouldLimitToEditedSections) {
-  return sections.reduce(function (mergedDate, section) {
-    if (!shouldLimitToEditedSections || section.modified) {
-      return transferDateSectionValue(utils, section, dateToTransferFrom, mergedDate);
-    }
-    return mergedDate;
-  }, referenceDate);
+  return (
+    // cloning sections before sort to avoid mutating it
+    _toConsumableArray(sections).sort(function (a, b) {
+      return reliableSectionModificationOrder[a.type] - reliableSectionModificationOrder[b.type];
+    }).reduce(function (mergedDate, section) {
+      if (!shouldLimitToEditedSections || section.modified) {
+        return transferDateSectionValue(utils, section, dateToTransferFrom, mergedDate);
+      }
+      return mergedDate;
+    }, referenceDate)
+  );
 };
 export var isAndroid = function isAndroid() {
   return navigator.userAgent.toLowerCase().indexOf('android') > -1;

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

@@ -23,6 +23,8 @@ export var useFieldState = function useFieldState(params) {
     defaultValue = _params$internalProps.defaultValue,
     onChange = _params$internalProps.onChange,
     format = _params$internalProps.format,
+    _params$internalProps2 = _params$internalProps.formatDensity,
+    formatDensity = _params$internalProps2 === void 0 ? 'dense' : _params$internalProps2,
     selectedSectionsProp = _params$internalProps.selectedSections,
     onSelectedSectionsChange = _params$internalProps.onSelectedSectionsChange;
   var firstDefaultValue = React.useRef(defaultValue);
@@ -33,9 +35,9 @@ export var useFieldState = function useFieldState(params) {
   var getSectionsFromValue = React.useCallback(function (value) {
     var fallbackSections = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
     return fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, isRTL, function (date) {
-      return splitFormatIntoSections(utils, localeText, format, date);
+      return splitFormatIntoSections(utils, localeText, format, date, formatDensity);
     });
-  }, [fieldValueManager, format, localeText, isRTL, utils]);
+  }, [fieldValueManager, format, localeText, isRTL, utils, formatDensity]);
   var placeholder = React.useMemo(function () {
     return fieldValueManager.getValueStrFromSections(getSectionsFromValue(valueManager.emptyValue), isRTL);
   }, [fieldValueManager, getSectionsFromValue, valueManager.emptyValue, isRTL]);
@@ -45,7 +47,7 @@ export var useFieldState = function useFieldState(params) {
       return {
         sections: sections,
         value: valueFromTheOutside,
-        referenceValue: fieldValueManager.updateReferenceValue(utils, valueFromTheOutside, valueManager.getTodayValue(utils)),
+        referenceValue: fieldValueManager.updateReferenceValue(utils, valueFromTheOutside, valueManager.getTodayValue(utils, valueType)),
         tempValueStrAndroid: null
       };
     }),
@@ -176,7 +178,7 @@ export var useFieldState = function useFieldState(params) {
       if (date == null || !utils.isValid(date)) {
         return null;
       }
-      var sections = splitFormatIntoSections(utils, localeText, format, date);
+      var sections = splitFormatIntoSections(utils, localeText, format, date, formatDensity);
       return mergeDateIntoReferenceDate(utils, date, sections, referenceDate, false);
     };
     var newValue = fieldValueManager.parseValueStr(valueStr, state.referenceValue, parseDateStr);

package/legacy/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["props", "getOpenDialogAriaText"];
 import * as React from 'react';
 import { useSlotProps } from '@mui/base/utils';
 import useForkRef from '@mui/utils/useForkRef';
@@ -20,14 +22,14 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 export var useMobilePicker = function useMobilePicker(_ref) {
   var _innerSlotProps$toolb, _innerSlotProps$toolb2, _slots$layout;
   var props = _ref.props,
-    valueManager = _ref.valueManager,
     getOpenDialogAriaText = _ref.getOpenDialogAriaText,
-    validator = _ref.validator;
+    pickerParams = _objectWithoutProperties(_ref, _excluded);
   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,
@@ -37,15 +39,13 @@ export var useMobilePicker = function useMobilePicker(_ref) {
   var internalInputRef = React.useRef(null);
   var labelId = useId();
   var isToolbarHidden = (_innerSlotProps$toolb = innerSlotProps == null ? void 0 : (_innerSlotProps$toolb2 = innerSlotProps.toolbar) == null ? void 0 : _innerSlotProps$toolb2.hidden) != null ? _innerSlotProps$toolb : false;
-  var _usePicker = usePicker({
+  var _usePicker = usePicker(_extends({}, pickerParams, {
       props: props,
       inputRef: internalInputRef,
-      valueManager: valueManager,
-      validator: validator,
       autoFocusView: true,
       additionalViewProps: {},
       wrapperVariant: 'mobile'
-    }),
+    })),
     open = _usePicker.open,
     actions = _usePicker.actions,
     layoutProps = _usePicker.layoutProps,
@@ -66,6 +66,7 @@ export var useMobilePicker = function useMobilePicker(_ref) {
       className: className,
       sx: sx,
       format: format,
+      formatDensity: formatDensity,
       label: label
     }),
     ownerState: props

package/legacy/internals/hooks/usePicker/usePicker.js

@@ -6,6 +6,7 @@ var warnRenderInputIsDefined = buildWarning(['The `renderInput` prop has been re
 export var usePicker = function usePicker(_ref) {
   var props = _ref.props,
     valueManager = _ref.valueManager,
+    valueType = _ref.valueType,
     wrapperVariant = _ref.wrapperVariant,
     inputRef = _ref.inputRef,
     additionalViewProps = _ref.additionalViewProps,
@@ -19,6 +20,7 @@ export var usePicker = function usePicker(_ref) {
   var pickerValueResponse = usePickerValue({
     props: props,
     valueManager: valueManager,
+    valueType: valueType,
     wrapperVariant: wrapperVariant,
     validator: validator
   });