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

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

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

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

@@ -6,7 +6,7 @@ import { unstable_useDateField as useDateField } from '@mui/x-date-pickers/DateF
 import { useLocalizationContext, useValidation } from '@mui/x-date-pickers/internals';
 import useControlled from '@mui/utils/useControlled';
 import { useDefaultizedDateRangeFieldProps } from '../../../SingleInputDateRangeField/useSingleInputDateRangeField';
-import { validateDateRange } from '../validation/useDateRangeValidation';
+import { validateDateRange } from '../../utils/validation/validateDateRange';
 import { rangeValueManager } from '../../utils/valueManagers';
 export var useMultiInputDateRangeField = function useMultiInputDateRangeField(_ref) {
   var _firstDefaultValue$cu;
@@ -23,6 +23,7 @@ export var useMultiInputDateRangeField = function useMultiInputDateRangeField(_r
     defaultValue = sharedProps.defaultValue,
     format = sharedProps.format,
     formatDensity = sharedProps.formatDensity,
+    shouldRespectLeadingZeros = sharedProps.shouldRespectLeadingZeros,
     onChange = sharedProps.onChange,
     disabled = sharedProps.disabled,
     readOnly = sharedProps.readOnly,
@@ -66,6 +67,7 @@ export var useMultiInputDateRangeField = function useMultiInputDateRangeField(_r
     readOnly: readOnly,
     format: format,
     formatDensity: formatDensity,
+    shouldRespectLeadingZeros: shouldRespectLeadingZeros,
     unstableFieldRef: unstableStartFieldRef,
     value: valueProp === undefined ? undefined : valueProp[0],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
@@ -78,6 +80,7 @@ export var useMultiInputDateRangeField = function useMultiInputDateRangeField(_r
   }, endTextFieldProps, {
     format: format,
     formatDensity: formatDensity,
+    shouldRespectLeadingZeros: shouldRespectLeadingZeros,
     disabled: disabled,
     readOnly: readOnly,
     unstableFieldRef: unstableEndFieldRef,

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

@@ -5,7 +5,7 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import { unstable_useDateTimeField as useDateTimeField } from '@mui/x-date-pickers/DateTimeField';
 import { applyDefaultDate, useDefaultDates, useLocalizationContext, useUtils, useValidation } from '@mui/x-date-pickers/internals';
 import useControlled from '@mui/utils/useControlled';
-import { validateDateTimeRange } from '../validation/useDateTimeRangeValidation';
+import { validateDateTimeRange } from '../../utils/validation/validateDateTimeRange';
 import { rangeValueManager } from '../../utils/valueManagers';
 export var useDefaultizedDateTimeRangeFieldProps = function useDefaultizedDateTimeRangeFieldProps(props) {
   var _props$ampm, _props$disablePast, _props$disableFuture, _props$format, _props$minDateTime, _props$maxDateTime, _props$minDateTime2, _props$maxDateTime2;
@@ -38,6 +38,7 @@ export var useMultiInputDateTimeRangeField = function useMultiInputDateTimeRange
   var valueProp = sharedProps.value,
     defaultValue = sharedProps.defaultValue,
     format = sharedProps.format,
+    shouldRespectLeadingZeros = sharedProps.shouldRespectLeadingZeros,
     onChange = sharedProps.onChange,
     disabled = sharedProps.disabled,
     readOnly = sharedProps.readOnly;
@@ -76,6 +77,7 @@ export var useMultiInputDateTimeRangeField = function useMultiInputDateTimeRange
     error: !!validationError[0]
   }, startTextFieldProps, {
     format: format,
+    shouldRespectLeadingZeros: shouldRespectLeadingZeros,
     disabled: disabled,
     readOnly: readOnly,
     unstableFieldRef: unstableStartFieldRef,
@@ -87,6 +89,7 @@ export var useMultiInputDateTimeRangeField = function useMultiInputDateTimeRange
     error: !!validationError[1]
   }, endTextFieldProps, {
     format: format,
+    shouldRespectLeadingZeros: shouldRespectLeadingZeros,
     disabled: disabled,
     readOnly: readOnly,
     unstableFieldRef: unstableEndFieldRef,

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

@@ -5,7 +5,7 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import { unstable_useTimeField as useTimeField } from '@mui/x-date-pickers/TimeField';
 import { useLocalizationContext, useUtils, useValidation } from '@mui/x-date-pickers/internals';
 import useControlled from '@mui/utils/useControlled';
-import { validateTimeRange } from '../validation/useTimeRangeValidation';
+import { validateTimeRange } from '../../utils/validation/validateTimeRange';
 import { rangeValueManager } from '../../utils/valueManagers';
 export var useDefaultizedTimeRangeFieldProps = function useDefaultizedTimeRangeFieldProps(props) {
   var _props$ampm, _props$disablePast, _props$disableFuture, _props$format;
@@ -32,6 +32,7 @@ export var useMultiInputTimeRangeField = function useMultiInputTimeRangeField(_r
   var valueProp = sharedProps.value,
     defaultValue = sharedProps.defaultValue,
     format = sharedProps.format,
+    shouldRespectLeadingZeros = sharedProps.shouldRespectLeadingZeros,
     onChange = sharedProps.onChange,
     disabled = sharedProps.disabled,
     readOnly = sharedProps.readOnly;
@@ -70,6 +71,7 @@ export var useMultiInputTimeRangeField = function useMultiInputTimeRangeField(_r
     error: !!validationError[0]
   }, startTextFieldProps, {
     format: format,
+    shouldRespectLeadingZeros: shouldRespectLeadingZeros,
     disabled: disabled,
     readOnly: readOnly,
     unstableFieldRef: unstableStartFieldRef,
@@ -81,6 +83,7 @@ export var useMultiInputTimeRangeField = function useMultiInputTimeRangeField(_r
     error: !!validationError[1]
   }, endTextFieldProps, {
     format: format,
+    shouldRespectLeadingZeros: shouldRespectLeadingZeros,
     disabled: disabled,
     readOnly: readOnly,
     unstableFieldRef: unstableEndFieldRef,

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

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

package/legacy/internal/utils/releaseInfo.js

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

package/legacy/internal/{hooks/validation/useDateRangeValidation.js → utils/validation/validateDateRange.js}

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 var _excluded = ["shouldDisableDate"];
 import { validateDate } from '@mui/x-date-pickers/internals';
-import { isRangeValid } from '../../utils/date-utils';
+import { isRangeValid } from '../date-utils';
 export var validateDateRange = function validateDateRange(_ref) {
   var props = _ref.props,
     value = _ref.value,

package/legacy/internal/{hooks/validation/useDateTimeRangeValidation.js → utils/validation/validateDateTimeRange.js}

@@ -2,9 +2,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 var _excluded = ["shouldDisableDate"];
-import { useValidation, validateDateTime } from '@mui/x-date-pickers/internals';
-import { isRangeValid } from '../../utils/date-utils';
-import { rangeValueManager } from '../../utils/valueManagers';
+import { validateDateTime } from '@mui/x-date-pickers/internals';
+import { isRangeValid } from '../date-utils';
 export var validateDateTimeRange = function validateDateTimeRange(_ref) {
   var props = _ref.props,
     value = _ref.value,
@@ -43,7 +42,4 @@ export var validateDateTimeRange = function validateDateTimeRange(_ref) {
     return ['invalidRange', 'invalidRange'];
   }
   return [null, null];
-};
-export var useDateRangeValidation = function useDateRangeValidation(props) {
-  return useValidation(props, validateDateTimeRange, rangeValueManager.isSameError, rangeValueManager.defaultErrorState);
 };

package/legacy/internal/{hooks/validation/useTimeRangeValidation.js → utils/validation/validateTimeRange.js}

@@ -1,7 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { useValidation, validateTime } from '@mui/x-date-pickers/internals';
-import { isRangeValid } from '../../utils/date-utils';
-import { rangeValueManager } from '../../utils/valueManagers';
+import { validateTime } from '@mui/x-date-pickers/internals';
+import { isRangeValid } from '../date-utils';
 export var validateTimeRange = function validateTimeRange(_ref) {
   var props = _ref.props,
     value = _ref.value,
@@ -30,7 +29,4 @@ export var validateTimeRange = function validateTimeRange(_ref) {
     return ['invalidRange', 'invalidRange'];
   }
   return [null, null];
-};
-export var useDateRangeValidation = function useDateRangeValidation(props) {
-  return useValidation(props, validateTimeRange, rangeValueManager.isSameError, rangeValueManager.defaultErrorState);
 };

package/legacy/internal/utils/valueManagers.js

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

package/legacy/models/index.js

@@ -0,0 +1 @@
+export * from './validation';

package/legacy/models/validation.js

@@ -0,0 +1 @@
+export {};

package/models/index.d.ts

@@ -0,0 +1 @@
+export * from './validation';

package/models/index.js

@@ -0,0 +1 @@
+export * from './validation';

package/models/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/models/index.js",
+  "types": "./index.d.ts"
+}

package/models/validation.d.ts

@@ -0,0 +1,9 @@
+import { DateTimeValidationError, DateValidationError, TimeValidationError } from '@mui/x-date-pickers/models';
+type RangeValidation<ItemError extends string | null> = [
+    ItemError | 'invalidRange',
+    ItemError | 'invalidRange'
+];
+export type DateRangeValidationError = RangeValidation<DateValidationError>;
+export type TimeRangeValidationError = RangeValidation<TimeValidationError>;
+export type DateTimeRangeValidationError = RangeValidation<DateTimeValidationError>;
+export {};

package/models/validation.js

@@ -0,0 +1 @@
+export {};

package/modern/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -8,7 +8,7 @@ import { useDateRangePickerDefaultizedProps } from '../DateRangePicker/shared';
 import { renderDateRangeViewCalendar } from '../dateRangeViewRenderers';
 import { MultiInputDateRangeField } from '../MultiInputDateRangeField';
 import { useDesktopRangePicker } from '../internal/hooks/useDesktopRangePicker';
-import { validateDateRange } from '../internal/hooks/validation/useDateRangeValidation';
+import { validateDateRange } from '../internal/utils/validation/validateDateRange';
 const DesktopDateRangePicker = /*#__PURE__*/React.forwardRef(function DesktopDateRangePicker(inProps, ref) {
   // Props with the default values common to all date time pickers
   const defaultizedProps = useDateRangePickerDefaultizedProps(inProps, 'MuiDesktopDateRangePicker');
@@ -37,6 +37,7 @@ const DesktopDateRangePicker = /*#__PURE__*/React.forwardRef(function DesktopDat
   } = useDesktopRangePicker({
     props,
     valueManager: rangeValueManager,
+    valueType: 'date',
     validator: validateDateRange
   });
   return renderPicker();

package/modern/MobileDateRangePicker/MobileDateRangePicker.js

@@ -10,7 +10,7 @@ import { useDateRangePickerDefaultizedProps } from '../DateRangePicker/shared';
 import { renderDateRangeViewCalendar } from '../dateRangeViewRenderers';
 import { MultiInputDateRangeField } from '../MultiInputDateRangeField';
 import { useMobileRangePicker } from '../internal/hooks/useMobileRangePicker';
-import { validateDateRange } from '../internal/hooks/validation/useDateRangeValidation';
+import { validateDateRange } from '../internal/utils/validation/validateDateRange';
 const MobileDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileDateRangePicker(inProps, ref) {
   // Props with the default values common to all date time pickers
   const _useDateRangePickerDe = useDateRangePickerDefaultizedProps(inProps, 'MuiMobileDateRangePicker'),
@@ -40,6 +40,7 @@ const MobileDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileDateR
   } = useMobileRangePicker({
     props,
     valueManager: rangeValueManager,
+    valueType: 'date',
     validator: validateDateRange
   });
   return renderPicker();

package/modern/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", "formatDensity", "onChange", "readOnly", "disabled", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "autoFocus"],
+const _excluded = ["slots", "slotProps", "components", "componentsProps", "value", "defaultValue", "format", "formatDensity", "shouldRespectLeadingZeros", "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';
@@ -25,7 +25,7 @@ const MultiInputDateRangeFieldRoot = styled( /*#__PURE__*/React.forwardRef((prop
   overridesResolver: (props, styles) => styles.root
 })({});
 const MultiInputDateRangeFieldSeparator = styled(props => /*#__PURE__*/_jsx(Typography, _extends({}, props, {
-  children: props.children ?? ' — '
+  children: props.children ?? ' – '
 })), {
   name: 'MuiMultiInputDateRangeField',
   slot: 'Separator',
@@ -45,6 +45,7 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
       defaultValue,
       format,
       formatDensity,
+      shouldRespectLeadingZeros,
       onChange,
       readOnly,
       disabled,
@@ -102,6 +103,7 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
         defaultValue,
         format,
         formatDensity,
+        shouldRespectLeadingZeros,
         onChange,
         readOnly,
         disabled,
@@ -139,15 +141,20 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
     children: [/*#__PURE__*/_jsx(TextField, _extends({
       fullWidth: true
     }, startDateProps, {
+      InputProps: _extends({}, startDateProps.InputProps, {
+        readOnly: startReadOnly
+      }),
       inputProps: _extends({}, startDateProps.inputProps, {
         ref: startInputRef,
-        readOnly: startReadOnly,
         inputMode: startInputMode,
         onKeyDown: onStartInputKeyDown
       })
     })), /*#__PURE__*/_jsx(Separator, _extends({}, separatorProps)), /*#__PURE__*/_jsx(TextField, _extends({
       fullWidth: true
     }, endDateProps, {
+      InputProps: _extends({}, endDateProps.InputProps, {
+        readOnly: endReadOnly
+      }),
       inputProps: _extends({}, endDateProps.inputProps, {
         ref: endInputRef,
         readOnly: endReadOnly,
@@ -271,6 +278,21 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
    * @returns {boolean} Returns `true` if the date should be disabled.
    */
   shouldDisableDate: PropTypes.func,
+  /**
+   * If `true`, the format will respect the leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+   *
+   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (e.g: "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+   *
+   * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
+   * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.
+   *
+   * Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.
+   * This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library.
+   *
+   * @default `false`
+   */
+  shouldRespectLeadingZeros: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}
@@ -296,7 +318,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
   /**
    * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
    *
-   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack#limitations),
+   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
    * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
    *
    * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.

package/modern/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", "formatDensity", "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", "shouldRespectLeadingZeros", "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';
@@ -25,7 +25,7 @@ const MultiInputDateTimeRangeFieldRoot = styled( /*#__PURE__*/React.forwardRef((
   overridesResolver: (props, styles) => styles.root
 })({});
 const MultiInputDateTimeRangeFieldSeparator = styled(props => /*#__PURE__*/_jsx(Typography, _extends({}, props, {
-  children: props.children ?? ' — '
+  children: props.children ?? ' – '
 })), {
   name: 'MuiMultiInputDateTimeRangeField',
   slot: 'Separator',
@@ -45,6 +45,7 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
       defaultValue,
       format,
       formatDensity,
+      shouldRespectLeadingZeros,
       onChange,
       readOnly,
       disabled,
@@ -111,6 +112,7 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
         defaultValue,
         format,
         formatDensity,
+        shouldRespectLeadingZeros,
         onChange,
         readOnly,
         disabled,
@@ -157,15 +159,20 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
     children: [/*#__PURE__*/_jsx(TextField, _extends({
       fullWidth: true
     }, startDateProps, {
+      InputProps: _extends({}, startDateProps.InputProps, {
+        readOnly: startReadOnly
+      }),
       inputProps: _extends({}, startDateProps.inputProps, {
         ref: startInputRef,
-        readOnly: startReadOnly,
         inputMode: startInputMode,
         onKeyDown: onStartInputKeyDown
       })
     })), /*#__PURE__*/_jsx(Separator, _extends({}, separatorProps)), /*#__PURE__*/_jsx(TextField, _extends({
       fullWidth: true
     }, endDateProps, {
+      InputProps: _extends({}, endDateProps.InputProps, {
+        readOnly: endReadOnly
+      }),
       inputProps: _extends({}, endDateProps.inputProps, {
         ref: endInputRef,
         readOnly: endReadOnly,
@@ -332,11 +339,27 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
   shouldDisableDate: PropTypes.func,
   /**
    * Disable specific time.
+   * @template TDate
    * @param {TDate} value The value to check.
    * @param {TimeView} view The clock type of the timeValue.
    * @returns {boolean} If `true` the time will be disabled.
    */
   shouldDisableTime: PropTypes.func,
+  /**
+   * If `true`, the format will respect the leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+   *
+   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (e.g: "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+   *
+   * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
+   * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.
+   *
+   * Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.
+   * This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library.
+   *
+   * @default `false`
+   */
+  shouldRespectLeadingZeros: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}
@@ -362,7 +385,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
   /**
    * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
    *
-   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack#limitations),
+   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
    * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
    *
    * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.

package/modern/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", "formatDensity", "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", "shouldRespectLeadingZeros", "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';
@@ -25,7 +25,7 @@ const MultiInputTimeRangeFieldRoot = styled( /*#__PURE__*/React.forwardRef((prop
   overridesResolver: (props, styles) => styles.root
 })({});
 const MultiInputTimeRangeFieldSeparator = styled(props => /*#__PURE__*/_jsx(Typography, _extends({}, props, {
-  children: props.children ?? ' — '
+  children: props.children ?? ' – '
 })), {
   name: 'MuiMultiInputTimeRangeField',
   slot: 'Separator',
@@ -45,6 +45,7 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
       defaultValue,
       format,
       formatDensity,
+      shouldRespectLeadingZeros,
       onChange,
       readOnly,
       disabled,
@@ -106,6 +107,7 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
         defaultValue,
         format,
         formatDensity,
+        shouldRespectLeadingZeros,
         onChange,
         readOnly,
         disabled,
@@ -147,15 +149,20 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
     children: [/*#__PURE__*/_jsx(TextField, _extends({
       fullWidth: true
     }, startDateProps, {
+      InputProps: _extends({}, startDateProps.InputProps, {
+        readOnly: startReadOnly
+      }),
       inputProps: _extends({}, startDateProps.inputProps, {
         ref: startInputRef,
-        readOnly: startReadOnly,
         inputMode: startInputMode,
         onKeyDown: onStartInputKeyDown
       })
     })), /*#__PURE__*/_jsx(Separator, _extends({}, separatorProps)), /*#__PURE__*/_jsx(TextField, _extends({
       fullWidth: true
     }, endDateProps, {
+      InputProps: _extends({}, endDateProps.InputProps, {
+        readOnly: endReadOnly
+      }),
       inputProps: _extends({}, endDateProps.inputProps, {
         ref: endInputRef,
         readOnly: endReadOnly,
@@ -298,11 +305,27 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.propTypes = {
   shouldDisableClock: PropTypes.func,
   /**
    * Disable specific time.
+   * @template TDate
    * @param {TDate} value The value to check.
    * @param {TimeView} view The clock type of the timeValue.
    * @returns {boolean} If `true` the time will be disabled.
    */
   shouldDisableTime: PropTypes.func,
+  /**
+   * If `true`, the format will respect the leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+   *
+   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (e.g: "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+   *
+   * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
+   * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.
+   *
+   * Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.
+   * This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library.
+   *
+   * @default `false`
+   */
+  shouldRespectLeadingZeros: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}
@@ -328,7 +351,7 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.propTypes = {
   /**
    * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
    *
-   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack#limitations),
+   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
    * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
    *
    * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.

package/modern/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -54,11 +54,13 @@ const SingleInputDateRangeField = /*#__PURE__*/React.forwardRef(function SingleI
   return /*#__PURE__*/_jsx(TextField, _extends({
     ref: ref
   }, fieldProps, {
+    InputProps: _extends({}, fieldProps.InputProps, {
+      readOnly
+    }),
     inputProps: _extends({}, fieldProps.inputProps, {
-      ref: inputRef,
-      onPaste,
       inputMode,
-      readOnly
+      onPaste,
+      ref: inputRef
     })
   }));
 });
@@ -249,6 +251,21 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    * @returns {boolean} Returns `true` if the date should be disabled.
    */
   shouldDisableDate: PropTypes.func,
+  /**
+   * If `true`, the format will respect the leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+   *
+   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (e.g: "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+   *
+   * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
+   * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.
+   *
+   * Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.
+   * This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library.
+   *
+   * @default `false`
+   */
+  shouldRespectLeadingZeros: PropTypes.bool,
   /**
    * The size of the component.
    */