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

package/node/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -17,7 +17,7 @@ var _utils = require("@mui/base/utils");
 var _internals = require("@mui/x-date-pickers/internals");
 var _useMultiInputDateRangeField = require("../internal/hooks/useMultiInputRangeField/useMultiInputDateRangeField");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -33,7 +33,7 @@ const MultiInputDateRangeFieldRoot = (0, _styles.styled)( /*#__PURE__*/React.for
   overridesResolver: (props, styles) => styles.root
 })({});
 const MultiInputDateRangeFieldSeparator = (0, _styles.styled)(props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, (0, _extends2.default)({}, props, {
-  children: props.children ?? ' — '
+  children: props.children ?? ' – '
 })), {
   name: 'MuiMultiInputDateRangeField',
   slot: 'Separator',
@@ -53,6 +53,7 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
       defaultValue,
       format,
       formatDensity,
+      shouldRespectLeadingZeros,
       onChange,
       readOnly,
       disabled,
@@ -110,6 +111,7 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
         defaultValue,
         format,
         formatDensity,
+        shouldRespectLeadingZeros,
         onChange,
         readOnly,
         disabled,
@@ -147,15 +149,20 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TextField, (0, _extends2.default)({
       fullWidth: true
     }, startDateProps, {
+      InputProps: (0, _extends2.default)({}, startDateProps.InputProps, {
+        readOnly: startReadOnly
+      }),
       inputProps: (0, _extends2.default)({}, startDateProps.inputProps, {
         ref: startInputRef,
-        readOnly: startReadOnly,
         inputMode: startInputMode,
         onKeyDown: onStartInputKeyDown
       })
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Separator, (0, _extends2.default)({}, separatorProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(TextField, (0, _extends2.default)({
       fullWidth: true
     }, endDateProps, {
+      InputProps: (0, _extends2.default)({}, endDateProps.InputProps, {
+        readOnly: endReadOnly
+      }),
       inputProps: (0, _extends2.default)({}, endDateProps.inputProps, {
         ref: endInputRef,
         readOnly: endReadOnly,
@@ -280,6 +287,21 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
    * @returns {boolean} Returns `true` if the date should be disabled.
    */
   shouldDisableDate: _propTypes.default.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.default.bool,
   /**
    * The props used for each component slot.
    * @default {}
@@ -305,7 +327,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/node/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -17,7 +17,7 @@ var _utils = require("@mui/base/utils");
 var _internals = require("@mui/x-date-pickers/internals");
 var _useMultiInputDateTimeRangeField = require("../internal/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -33,7 +33,7 @@ const MultiInputDateTimeRangeFieldRoot = (0, _styles.styled)( /*#__PURE__*/React
   overridesResolver: (props, styles) => styles.root
 })({});
 const MultiInputDateTimeRangeFieldSeparator = (0, _styles.styled)(props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, (0, _extends2.default)({}, props, {
-  children: props.children ?? ' — '
+  children: props.children ?? ' – '
 })), {
   name: 'MuiMultiInputDateTimeRangeField',
   slot: 'Separator',
@@ -53,6 +53,7 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
       defaultValue,
       format,
       formatDensity,
+      shouldRespectLeadingZeros,
       onChange,
       readOnly,
       disabled,
@@ -119,6 +120,7 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
         defaultValue,
         format,
         formatDensity,
+        shouldRespectLeadingZeros,
         onChange,
         readOnly,
         disabled,
@@ -165,15 +167,20 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TextField, (0, _extends2.default)({
       fullWidth: true
     }, startDateProps, {
+      InputProps: (0, _extends2.default)({}, startDateProps.InputProps, {
+        readOnly: startReadOnly
+      }),
       inputProps: (0, _extends2.default)({}, startDateProps.inputProps, {
         ref: startInputRef,
-        readOnly: startReadOnly,
         inputMode: startInputMode,
         onKeyDown: onStartInputKeyDown
       })
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Separator, (0, _extends2.default)({}, separatorProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(TextField, (0, _extends2.default)({
       fullWidth: true
     }, endDateProps, {
+      InputProps: (0, _extends2.default)({}, endDateProps.InputProps, {
+        readOnly: endReadOnly
+      }),
       inputProps: (0, _extends2.default)({}, endDateProps.inputProps, {
         ref: endInputRef,
         readOnly: endReadOnly,
@@ -341,11 +348,27 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
   shouldDisableDate: _propTypes.default.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.default.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.default.bool,
   /**
    * The props used for each component slot.
    * @default {}
@@ -371,7 +394,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/node/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -17,7 +17,7 @@ var _utils = require("@mui/base/utils");
 var _internals = require("@mui/x-date-pickers/internals");
 var _useMultiInputTimeRangeField = require("../internal/hooks/useMultiInputRangeField/useMultiInputTimeRangeField");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -33,7 +33,7 @@ const MultiInputTimeRangeFieldRoot = (0, _styles.styled)( /*#__PURE__*/React.for
   overridesResolver: (props, styles) => styles.root
 })({});
 const MultiInputTimeRangeFieldSeparator = (0, _styles.styled)(props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, (0, _extends2.default)({}, props, {
-  children: props.children ?? ' — '
+  children: props.children ?? ' – '
 })), {
   name: 'MuiMultiInputTimeRangeField',
   slot: 'Separator',
@@ -53,6 +53,7 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
       defaultValue,
       format,
       formatDensity,
+      shouldRespectLeadingZeros,
       onChange,
       readOnly,
       disabled,
@@ -114,6 +115,7 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
         defaultValue,
         format,
         formatDensity,
+        shouldRespectLeadingZeros,
         onChange,
         readOnly,
         disabled,
@@ -155,15 +157,20 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TextField, (0, _extends2.default)({
       fullWidth: true
     }, startDateProps, {
+      InputProps: (0, _extends2.default)({}, startDateProps.InputProps, {
+        readOnly: startReadOnly
+      }),
       inputProps: (0, _extends2.default)({}, startDateProps.inputProps, {
         ref: startInputRef,
-        readOnly: startReadOnly,
         inputMode: startInputMode,
         onKeyDown: onStartInputKeyDown
       })
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Separator, (0, _extends2.default)({}, separatorProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(TextField, (0, _extends2.default)({
       fullWidth: true
     }, endDateProps, {
+      InputProps: (0, _extends2.default)({}, endDateProps.InputProps, {
+        readOnly: endReadOnly
+      }),
       inputProps: (0, _extends2.default)({}, endDateProps.inputProps, {
         ref: endInputRef,
         readOnly: endReadOnly,
@@ -307,11 +314,27 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.propTypes = {
   shouldDisableClock: _propTypes.default.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.default.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.default.bool,
   /**
    * The props used for each component slot.
    * @default {}
@@ -337,7 +360,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/node/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -63,11 +63,13 @@ const SingleInputDateRangeField = /*#__PURE__*/React.forwardRef(function SingleI
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(TextField, (0, _extends2.default)({
     ref: ref
   }, fieldProps, {
+    InputProps: (0, _extends2.default)({}, fieldProps.InputProps, {
+      readOnly
+    }),
     inputProps: (0, _extends2.default)({}, fieldProps.inputProps, {
-      ref: inputRef,
-      onPaste,
       inputMode,
-      readOnly
+      onPaste,
+      ref: inputRef
     })
   }));
 });
@@ -259,6 +261,21 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    * @returns {boolean} Returns `true` if the date should be disabled.
    */
   shouldDisableDate: _propTypes.default.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.default.bool,
   /**
    * The size of the component.
    */

package/node/SingleInputDateRangeField/useSingleInputDateRangeField.js

@@ -9,8 +9,8 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _internals = require("@mui/x-date-pickers/internals");
 var _valueManagers = require("../internal/utils/valueManagers");
-var _useDateRangeValidation = require("../internal/hooks/validation/useDateRangeValidation");
-const _excluded = ["value", "defaultValue", "format", "formatDensity", "onChange", "readOnly", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
+var _validateDateRange = require("../internal/utils/validation/validateDateRange");
+const _excluded = ["value", "defaultValue", "format", "formatDensity", "shouldRespectLeadingZeros", "onChange", "readOnly", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
 const useDefaultizedDateRangeFieldProps = props => {
   const utils = (0, _internals.useUtils)();
   const defaultDates = (0, _internals.useDefaultDates)();
@@ -33,6 +33,7 @@ const useSingleInputDateRangeField = ({
       defaultValue,
       format,
       formatDensity,
+      shouldRespectLeadingZeros,
       onChange,
       readOnly,
       onError,
@@ -54,6 +55,7 @@ const useSingleInputDateRangeField = ({
       defaultValue,
       format,
       formatDensity,
+      shouldRespectLeadingZeros,
       onChange,
       readOnly,
       onError,
@@ -68,7 +70,7 @@ const useSingleInputDateRangeField = ({
     },
     valueManager: _valueManagers.rangeValueManager,
     fieldValueManager: _valueManagers.rangeFieldValueManager,
-    validator: _useDateRangeValidation.validateDateRange,
+    validator: _validateDateRange.validateDateRange,
     valueType: 'date'
   });
 };

package/node/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -63,11 +63,13 @@ const SingleInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Sin
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(TextField, (0, _extends2.default)({
     ref: ref
   }, fieldProps, {
+    InputProps: (0, _extends2.default)({}, fieldProps.InputProps, {
+      readOnly
+    }),
     inputProps: (0, _extends2.default)({}, fieldProps.inputProps, {
-      ref: inputRef,
-      onPaste,
       inputMode,
-      readOnly
+      onPaste,
+      ref: inputRef
     })
   }));
 });
@@ -302,11 +304,27 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.propTypes
   shouldDisableDate: _propTypes.default.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.default.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.default.bool,
   /**
    * The size of the component.
    */

package/node/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.js

@@ -9,8 +9,8 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _internals = require("@mui/x-date-pickers/internals");
 var _valueManagers = require("../internal/utils/valueManagers");
-var _useDateTimeRangeValidation = require("../internal/hooks/validation/useDateTimeRangeValidation");
-const _excluded = ["value", "defaultValue", "format", "formatDensity", "onChange", "readOnly", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "shouldDisableTime", "disableIgnoringDatePartForTimeValidation", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
+var _validateDateTimeRange = require("../internal/utils/validation/validateDateTimeRange");
+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"];
 const useDefaultizedTimeRangeFieldProps = props => {
   const utils = (0, _internals.useUtils)();
   const defaultDates = (0, _internals.useDefaultDates)();
@@ -38,6 +38,7 @@ const useSingleInputDateTimeRangeField = ({
       defaultValue,
       format,
       formatDensity,
+      shouldRespectLeadingZeros,
       onChange,
       readOnly,
       onError,
@@ -64,6 +65,7 @@ const useSingleInputDateTimeRangeField = ({
       defaultValue,
       format,
       formatDensity,
+      shouldRespectLeadingZeros,
       onChange,
       readOnly,
       onError,
@@ -83,7 +85,7 @@ const useSingleInputDateTimeRangeField = ({
     },
     valueManager: _valueManagers.rangeValueManager,
     fieldValueManager: _valueManagers.rangeFieldValueManager,
-    validator: _useDateTimeRangeValidation.validateDateTimeRange,
+    validator: _validateDateTimeRange.validateDateTimeRange,
     valueType: 'date-time'
   });
 };

package/node/SingleInputTimeRangeField/SingleInputTimeRangeField.js

@@ -63,11 +63,13 @@ const SingleInputTimeRangeField = /*#__PURE__*/React.forwardRef(function SingleI
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(TextField, (0, _extends2.default)({
     ref: ref
   }, fieldProps, {
+    InputProps: (0, _extends2.default)({}, fieldProps.InputProps, {
+      readOnly
+    }),
     inputProps: (0, _extends2.default)({}, fieldProps.inputProps, {
-      ref: inputRef,
-      onPaste,
       inputMode,
-      readOnly
+      onPaste,
+      ref: inputRef
     })
   }));
 });
@@ -278,11 +280,27 @@ process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.propTypes = {
   shouldDisableClock: _propTypes.default.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.default.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.default.bool,
   /**
    * The size of the component.
    */

package/node/SingleInputTimeRangeField/useSingleInputTimeRangeField.js

@@ -9,8 +9,8 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _internals = require("@mui/x-date-pickers/internals");
 var _valueManagers = require("../internal/utils/valueManagers");
-var _useTimeRangeValidation = require("../internal/hooks/validation/useTimeRangeValidation");
-const _excluded = ["value", "defaultValue", "format", "formatDensity", "onChange", "readOnly", "onError", "minTime", "maxTime", "minutesStep", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
+var _validateTimeRange = require("../internal/utils/validation/validateTimeRange");
+const _excluded = ["value", "defaultValue", "format", "formatDensity", "shouldRespectLeadingZeros", "onChange", "readOnly", "onError", "minTime", "maxTime", "minutesStep", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
 const useDefaultizedTimeRangeFieldProps = props => {
   const utils = (0, _internals.useUtils)();
   const ampm = props.ampm ?? utils.is12HourCycleInCurrentLocale();
@@ -32,6 +32,7 @@ const useSingleInputTimeRangeField = ({
       defaultValue,
       format,
       formatDensity,
+      shouldRespectLeadingZeros,
       onChange,
       readOnly,
       onError,
@@ -54,6 +55,7 @@ const useSingleInputTimeRangeField = ({
       defaultValue,
       format,
       formatDensity,
+      shouldRespectLeadingZeros,
       onChange,
       readOnly,
       onError,
@@ -69,7 +71,7 @@ const useSingleInputTimeRangeField = ({
     },
     valueManager: _valueManagers.rangeValueManager,
     fieldValueManager: _valueManagers.rangeFieldValueManager,
-    validator: _useTimeRangeValidation.validateTimeRange,
+    validator: _validateTimeRange.validateTimeRange,
     valueType: 'time'
   });
 };

package/node/StaticDateRangePicker/StaticDateRangePicker.js

@@ -12,7 +12,7 @@ var _useStaticRangePicker = require("../internal/hooks/useStaticRangePicker");
 var _shared = require("../DateRangePicker/shared");
 var _dateRangeViewRenderers = require("../dateRangeViewRenderers");
 var _valueManagers = require("../internal/utils/valueManagers");
-var _useDateRangeValidation = require("../internal/hooks/validation/useDateRangeValidation");
+var _validateDateRange = require("../internal/utils/validation/validateDateRange");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const StaticDateRangePicker = /*#__PURE__*/React.forwardRef(function StaticDateRangePicker(inProps, ref) {
@@ -40,7 +40,8 @@ const StaticDateRangePicker = /*#__PURE__*/React.forwardRef(function StaticDateR
   } = (0, _useStaticRangePicker.useStaticRangePicker)({
     props,
     valueManager: _valueManagers.rangeValueManager,
-    validator: _useDateRangeValidation.validateDateRange,
+    valueType: 'date',
+    validator: _validateDateRange.validateDateRange,
     ref
   });
   return renderPicker();

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v6.2.0
+ * @mui/x-date-pickers-pro v6.3.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the
@@ -187,4 +187,16 @@ Object.keys(_dateRangeViewRenderers).forEach(function (key) {
       return _dateRangeViewRenderers[key];
     }
   });
+});
+var _models = require("./models");
+Object.keys(_models).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _models[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _models[key];
+    }
+  });
 });

package/node/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useDesktopRangePicker = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _utils = require("@mui/base/utils");
 var _xLicensePro = require("@mui/x-license-pro");
@@ -16,14 +17,15 @@ var _useEnrichedRangePickerFieldProps = require("../useEnrichedRangePickerFieldP
 var _releaseInfo = require("../../utils/releaseInfo");
 var _useRangePosition = require("../useRangePosition");
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["props"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const releaseInfo = (0, _releaseInfo.getReleaseInfo)();
-const useDesktopRangePicker = ({
-  props,
-  valueManager,
-  validator
-}) => {
+const useDesktopRangePicker = _ref => {
+  let {
+      props
+    } = _ref,
+    pickerParams = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   (0, _xLicensePro.useLicenseVerifier)('x-date-pickers-pro', releaseInfo);
   const {
     slots,
@@ -54,17 +56,15 @@ const useDesktopRangePicker = ({
     renderCurrentView,
     shouldRestoreFocus,
     fieldProps: pickerFieldProps
-  } = (0, _internals.usePicker)({
+  } = (0, _internals.usePicker)((0, _extends2.default)({}, pickerParams, {
     props,
-    valueManager,
     wrapperVariant: 'desktop',
-    validator,
     autoFocusView: true,
     additionalViewProps: {
       rangePosition,
       onRangePositionChange
     }
-  });
+  }));
   const handleBlur = () => {
     (0, _internals.executeInTheNextEventLoopTick)(() => {
       if (fieldContainerRef.current?.contains((0, _internals.getActiveElement)(document)) || popperRef.current?.contains((0, _internals.getActiveElement)(document))) {