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

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'),

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.
    */

package/modern/SingleInputDateRangeField/useSingleInputDateRangeField.js

@@ -1,9 +1,9 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["value", "defaultValue", "format", "formatDensity", "onChange", "readOnly", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
+const _excluded = ["value", "defaultValue", "format", "formatDensity", "shouldRespectLeadingZeros", "onChange", "readOnly", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
 import { useUtils, useDefaultDates, applyDefaultDate, useField } from '@mui/x-date-pickers/internals';
 import { rangeValueManager, rangeFieldValueManager } from '../internal/utils/valueManagers';
-import { validateDateRange } from '../internal/hooks/validation/useDateRangeValidation';
+import { validateDateRange } from '../internal/utils/validation/validateDateRange';
 export const useDefaultizedDateRangeFieldProps = props => {
   const utils = useUtils();
   const defaultDates = useDefaultDates();
@@ -25,6 +25,7 @@ export const useSingleInputDateRangeField = ({
       defaultValue,
       format,
       formatDensity,
+      shouldRespectLeadingZeros,
       onChange,
       readOnly,
       onError,
@@ -46,6 +47,7 @@ export const useSingleInputDateRangeField = ({
       defaultValue,
       format,
       formatDensity,
+      shouldRespectLeadingZeros,
       onChange,
       readOnly,
       onError,

package/modern/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -54,11 +54,13 @@ const SingleInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Sin
   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
     })
   }));
 });
@@ -292,11 +294,27 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.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 size of the component.
    */

package/modern/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.js

@@ -1,9 +1,9 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["value", "defaultValue", "format", "formatDensity", "onChange", "readOnly", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "shouldDisableTime", "disableIgnoringDatePartForTimeValidation", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
+const _excluded = ["value", "defaultValue", "format", "formatDensity", "shouldRespectLeadingZeros", "onChange", "readOnly", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "shouldDisableTime", "disableIgnoringDatePartForTimeValidation", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
 import { useUtils, useField, applyDefaultDate, useDefaultDates } from '@mui/x-date-pickers/internals';
 import { rangeValueManager, rangeFieldValueManager } from '../internal/utils/valueManagers';
-import { validateDateTimeRange } from '../internal/hooks/validation/useDateTimeRangeValidation';
+import { validateDateTimeRange } from '../internal/utils/validation/validateDateTimeRange';
 export const useDefaultizedTimeRangeFieldProps = props => {
   const utils = useUtils();
   const defaultDates = useDefaultDates();
@@ -30,6 +30,7 @@ export const useSingleInputDateTimeRangeField = ({
       defaultValue,
       format,
       formatDensity,
+      shouldRespectLeadingZeros,
       onChange,
       readOnly,
       onError,
@@ -56,6 +57,7 @@ export const useSingleInputDateTimeRangeField = ({
       defaultValue,
       format,
       formatDensity,
+      shouldRespectLeadingZeros,
       onChange,
       readOnly,
       onError,

package/modern/SingleInputTimeRangeField/SingleInputTimeRangeField.js

@@ -54,11 +54,13 @@ const SingleInputTimeRangeField = /*#__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
     })
   }));
 });
@@ -268,11 +270,27 @@ process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.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 size of the component.
    */

package/modern/SingleInputTimeRangeField/useSingleInputTimeRangeField.js

@@ -1,9 +1,9 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["value", "defaultValue", "format", "formatDensity", "onChange", "readOnly", "onError", "minTime", "maxTime", "minutesStep", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
+const _excluded = ["value", "defaultValue", "format", "formatDensity", "shouldRespectLeadingZeros", "onChange", "readOnly", "onError", "minTime", "maxTime", "minutesStep", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
 import { useUtils, useField } from '@mui/x-date-pickers/internals';
 import { rangeValueManager, rangeFieldValueManager } from '../internal/utils/valueManagers';
-import { validateTimeRange } from '../internal/hooks/validation/useTimeRangeValidation';
+import { validateTimeRange } from '../internal/utils/validation/validateTimeRange';
 export const useDefaultizedTimeRangeFieldProps = props => {
   const utils = useUtils();
   const ampm = props.ampm ?? utils.is12HourCycleInCurrentLocale();
@@ -24,6 +24,7 @@ export const useSingleInputTimeRangeField = ({
       defaultValue,
       format,
       formatDensity,
+      shouldRespectLeadingZeros,
       onChange,
       readOnly,
       onError,
@@ -46,6 +47,7 @@ export const useSingleInputTimeRangeField = ({
       defaultValue,
       format,
       formatDensity,
+      shouldRespectLeadingZeros,
       onChange,
       readOnly,
       onError,

package/modern/StaticDateRangePicker/StaticDateRangePicker.js

@@ -5,7 +5,7 @@ import { useStaticRangePicker } from '../internal/hooks/useStaticRangePicker';
 import { useDateRangePickerDefaultizedProps } from '../DateRangePicker/shared';
 import { renderDateRangeViewCalendar } from '../dateRangeViewRenderers';
 import { rangeValueManager } from '../internal/utils/valueManagers';
-import { validateDateRange } from '../internal/hooks/validation/useDateRangeValidation';
+import { validateDateRange } from '../internal/utils/validation/validateDateRange';
 const StaticDateRangePicker = /*#__PURE__*/React.forwardRef(function StaticDateRangePicker(inProps, ref) {
   const defaultizedProps = useDateRangePickerDefaultizedProps(inProps, 'MuiStaticDateRangePicker');
   const displayStaticWrapperAs = defaultizedProps.displayStaticWrapperAs ?? 'mobile';

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v6.2.1
+ * @mui/x-date-pickers-pro v6.3.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the
@@ -26,4 +26,5 @@ export * from './MobileDateRangePicker';
 export * from './StaticDateRangePicker';
 
 // View renderers
-export * from './dateRangeViewRenderers';
+export * from './dateRangeViewRenderers';
+export * from './models';

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

@@ -5,7 +5,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 const useMultiInputDateRangeField = ({
   sharedProps: inSharedProps,
@@ -23,6 +23,7 @@ export const useMultiInputDateRangeField = ({
     defaultValue,
     format,
     formatDensity,
+    shouldRespectLeadingZeros,
     onChange,
     disabled,
     readOnly,
@@ -64,6 +65,7 @@ export const useMultiInputDateRangeField = ({
     readOnly,
     format,
     formatDensity,
+    shouldRespectLeadingZeros,
     unstableFieldRef: unstableStartFieldRef,
     value: valueProp === undefined ? undefined : valueProp[0],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
@@ -76,6 +78,7 @@ export const useMultiInputDateRangeField = ({
   }, endTextFieldProps, {
     format,
     formatDensity,
+    shouldRespectLeadingZeros,
     disabled,
     readOnly,
     unstableFieldRef: unstableEndFieldRef,

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

@@ -4,7 +4,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 const useDefaultizedDateTimeRangeFieldProps = props => {
   const utils = useUtils();
@@ -37,6 +37,7 @@ export const useMultiInputDateTimeRangeField = ({
     value: valueProp,
     defaultValue,
     format,
+    shouldRespectLeadingZeros,
     onChange,
     disabled,
     readOnly
@@ -73,6 +74,7 @@ export const useMultiInputDateTimeRangeField = ({
     error: !!validationError[0]
   }, startTextFieldProps, {
     format,
+    shouldRespectLeadingZeros,
     disabled,
     readOnly,
     unstableFieldRef: unstableStartFieldRef,
@@ -84,6 +86,7 @@ export const useMultiInputDateTimeRangeField = ({
     error: !!validationError[1]
   }, endTextFieldProps, {
     format,
+    shouldRespectLeadingZeros,
     disabled,
     readOnly,
     unstableFieldRef: unstableEndFieldRef,

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

@@ -4,7 +4,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 const useDefaultizedTimeRangeFieldProps = props => {
   const utils = useUtils();
@@ -31,6 +31,7 @@ export const useMultiInputTimeRangeField = ({
     value: valueProp,
     defaultValue,
     format,
+    shouldRespectLeadingZeros,
     onChange,
     disabled,
     readOnly
@@ -67,6 +68,7 @@ export const useMultiInputTimeRangeField = ({
     error: !!validationError[0]
   }, startTextFieldProps, {
     format,
+    shouldRespectLeadingZeros,
     disabled,
     readOnly,
     unstableFieldRef: unstableStartFieldRef,
@@ -78,6 +80,7 @@ export const useMultiInputTimeRangeField = ({
     error: !!validationError[1]
   }, endTextFieldProps, {
     format,
+    shouldRespectLeadingZeros,
     disabled,
     readOnly,
     unstableFieldRef: unstableEndFieldRef,

package/modern/internal/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY4MTkzMDgwMDAwMA==";
+  const 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/modern/internal/{hooks/validation/useDateRangeValidation.js → utils/validation/validateDateRange.js}

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["shouldDisableDate"];
 import { validateDate } from '@mui/x-date-pickers/internals';
-import { isRangeValid } from '../../utils/date-utils';
+import { isRangeValid } from '../date-utils';
 export const validateDateRange = ({
   props,
   value,