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

package/internal/utils/valueManagers.d.ts

@@ -1,8 +1,6 @@
 import { PickerValueManager, FieldValueManager } from '@mui/x-date-pickers/internals';
 import { DateRange } from '../models/range';
-import type { DateRangeValidationError } from '../hooks/validation/useDateRangeValidation';
-import type { TimeRangeValidationError } from '../hooks/validation/useTimeRangeValidation';
-import type { DateTimeRangeValidationError } from '../hooks/validation/useDateTimeRangeValidation';
+import type { DateRangeValidationError, DateTimeRangeValidationError, TimeRangeValidationError } from '../../models';
 import { RangeFieldSection } from '../models/fields';
 export type RangePickerValueManager<TValue = [any, any], TDate = any, TError extends DateRangeValidationError | TimeRangeValidationError | DateTimeRangeValidationError = any> = PickerValueManager<TValue, TDate, TError>;
 export declare const rangeValueManager: RangePickerValueManager;

package/internal/utils/valueManagers.js

@@ -3,7 +3,7 @@ import { replaceInvalidDateByNull, addPositionPropertiesToSections, createDateSt
 import { splitDateRangeSections, removeLastSeparator } from './date-fields-utils';
 export const rangeValueManager = {
   emptyValue: [null, null],
-  getTodayValue: utils => [utils.date(), utils.date()],
+  getTodayValue: (utils, valueType) => valueType === 'date' ? [utils.startOfDay(utils.date()), utils.startOfDay(utils.date())] : [utils.date(), utils.date()],
   cleanValue: (utils, value) => value.map(date => replaceInvalidDateByNull(utils, date)),
   areValuesEqual: (utils, a, b) => areDatesEqual(utils, a[0], b[0]) && areDatesEqual(utils, a[1], b[1]),
   isSameError: (a, b) => b !== null && a[1] === b[1] && a[0] === b[0],

package/legacy/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';
 var DesktopDateRangePicker = /*#__PURE__*/React.forwardRef(function DesktopDateRangePicker(inProps, ref) {
   var _defaultizedProps$cal, _defaultizedProps$slo2;
   // Props with the default values common to all date time pickers
@@ -39,6 +39,7 @@ var DesktopDateRangePicker = /*#__PURE__*/React.forwardRef(function DesktopDateR
   var _useDesktopRangePicke = useDesktopRangePicker({
       props: props,
       valueManager: rangeValueManager,
+      valueType: 'date',
       validator: validateDateRange
     }),
     renderPicker = _useDesktopRangePicke.renderPicker;

package/legacy/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';
 var MobileDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileDateRangePicker(inProps, ref) {
   var _defaultizedProps$slo2;
   // Props with the default values common to all date time pickers
@@ -44,6 +44,7 @@ var MobileDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileDateRan
   var _useMobileRangePicker = useMobileRangePicker({
       props: props,
       valueManager: rangeValueManager,
+      valueType: 'date',
       validator: validateDateRange
     }),
     renderPicker = _useMobileRangePicker.renderPicker;

package/legacy/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["slots", "slotProps", "components", "componentsProps", "value", "defaultValue", "format", "formatDensity", "onChange", "readOnly", "disabled", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "autoFocus"],
+var _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';
@@ -31,7 +31,7 @@ var MultiInputDateRangeFieldRoot = styled( /*#__PURE__*/React.forwardRef(functio
 var MultiInputDateRangeFieldSeparator = styled(function (props) {
   var _props$children;
   return /*#__PURE__*/_jsx(Typography, _extends({}, props, {
-    children: (_props$children = props.children) != null ? _props$children : ' — '
+    children: (_props$children = props.children) != null ? _props$children : ' – '
   }));
 }, {
   name: 'MuiMultiInputDateRangeField',
@@ -54,6 +54,7 @@ var MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInput
     defaultValue = themeProps.defaultValue,
     format = themeProps.format,
     formatDensity = themeProps.formatDensity,
+    shouldRespectLeadingZeros = themeProps.shouldRespectLeadingZeros,
     onChange = themeProps.onChange,
     readOnly = themeProps.readOnly,
     disabled = themeProps.disabled,
@@ -110,6 +111,7 @@ var MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInput
         defaultValue: defaultValue,
         format: format,
         formatDensity: formatDensity,
+        shouldRespectLeadingZeros: shouldRespectLeadingZeros,
         onChange: onChange,
         readOnly: readOnly,
         disabled: disabled,
@@ -143,15 +145,20 @@ var MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInput
     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,
@@ -275,6 +282,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 {}
@@ -300,7 +322,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/legacy/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _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"],
+var _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';
@@ -31,7 +31,7 @@ var MultiInputDateTimeRangeFieldRoot = styled( /*#__PURE__*/React.forwardRef(fun
 var MultiInputDateTimeRangeFieldSeparator = styled(function (props) {
   var _props$children;
   return /*#__PURE__*/_jsx(Typography, _extends({}, props, {
-    children: (_props$children = props.children) != null ? _props$children : ' — '
+    children: (_props$children = props.children) != null ? _props$children : ' – '
   }));
 }, {
   name: 'MuiMultiInputDateTimeRangeField',
@@ -54,6 +54,7 @@ var MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiI
     defaultValue = themeProps.defaultValue,
     format = themeProps.format,
     formatDensity = themeProps.formatDensity,
+    shouldRespectLeadingZeros = themeProps.shouldRespectLeadingZeros,
     onChange = themeProps.onChange,
     readOnly = themeProps.readOnly,
     disabled = themeProps.disabled,
@@ -119,6 +120,7 @@ var MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiI
         defaultValue: defaultValue,
         format: format,
         formatDensity: formatDensity,
+        shouldRespectLeadingZeros: shouldRespectLeadingZeros,
         onChange: onChange,
         readOnly: readOnly,
         disabled: disabled,
@@ -161,15 +163,20 @@ var MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiI
     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,
@@ -336,11 +343,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 {}
@@ -366,7 +389,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/legacy/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _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"],
+var _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';
@@ -31,7 +31,7 @@ var MultiInputTimeRangeFieldRoot = styled( /*#__PURE__*/React.forwardRef(functio
 var MultiInputTimeRangeFieldSeparator = styled(function (props) {
   var _props$children;
   return /*#__PURE__*/_jsx(Typography, _extends({}, props, {
-    children: (_props$children = props.children) != null ? _props$children : ' — '
+    children: (_props$children = props.children) != null ? _props$children : ' – '
   }));
 }, {
   name: 'MuiMultiInputTimeRangeField',
@@ -54,6 +54,7 @@ var MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInput
     defaultValue = themeProps.defaultValue,
     format = themeProps.format,
     formatDensity = themeProps.formatDensity,
+    shouldRespectLeadingZeros = themeProps.shouldRespectLeadingZeros,
     onChange = themeProps.onChange,
     readOnly = themeProps.readOnly,
     disabled = themeProps.disabled,
@@ -114,6 +115,7 @@ var MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInput
         defaultValue: defaultValue,
         format: format,
         formatDensity: formatDensity,
+        shouldRespectLeadingZeros: shouldRespectLeadingZeros,
         onChange: onChange,
         readOnly: readOnly,
         disabled: disabled,
@@ -151,15 +153,20 @@ var MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInput
     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,
@@ -302,11 +309,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 {}
@@ -332,7 +355,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/legacy/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -49,11 +49,13 @@ var SingleInputDateRangeField = /*#__PURE__*/React.forwardRef(function SingleInp
   return /*#__PURE__*/_jsx(TextField, _extends({
     ref: ref
   }, fieldProps, {
+    InputProps: _extends({}, fieldProps.InputProps, {
+      readOnly: readOnly
+    }),
     inputProps: _extends({}, fieldProps.inputProps, {
-      ref: inputRef,
-      onPaste: onPaste,
       inputMode: inputMode,
-      readOnly: readOnly
+      onPaste: onPaste,
+      ref: inputRef
     })
   }));
 });
@@ -244,6 +246,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/legacy/SingleInputDateRangeField/useSingleInputDateRangeField.js

@@ -1,9 +1,9 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["value", "defaultValue", "format", "formatDensity", "onChange", "readOnly", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
+var _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 var useDefaultizedDateRangeFieldProps = function useDefaultizedDateRangeFieldProps(props) {
   var _props$disablePast, _props$disableFuture, _props$format;
   var utils = useUtils();
@@ -24,6 +24,7 @@ export var useSingleInputDateRangeField = function useSingleInputDateRangeField(
     defaultValue = _useDefaultizedDateRa.defaultValue,
     format = _useDefaultizedDateRa.format,
     formatDensity = _useDefaultizedDateRa.formatDensity,
+    shouldRespectLeadingZeros = _useDefaultizedDateRa.shouldRespectLeadingZeros,
     onChange = _useDefaultizedDateRa.onChange,
     readOnly = _useDefaultizedDateRa.readOnly,
     onError = _useDefaultizedDateRa.onError,
@@ -44,6 +45,7 @@ export var useSingleInputDateRangeField = function useSingleInputDateRangeField(
       defaultValue: defaultValue,
       format: format,
       formatDensity: formatDensity,
+      shouldRespectLeadingZeros: shouldRespectLeadingZeros,
       onChange: onChange,
       readOnly: readOnly,
       onError: onError,

package/legacy/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -49,11 +49,13 @@ var SingleInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Singl
   return /*#__PURE__*/_jsx(TextField, _extends({
     ref: ref
   }, fieldProps, {
+    InputProps: _extends({}, fieldProps.InputProps, {
+      readOnly: readOnly
+    }),
     inputProps: _extends({}, fieldProps.inputProps, {
-      ref: inputRef,
-      onPaste: onPaste,
       inputMode: inputMode,
-      readOnly: readOnly
+      onPaste: onPaste,
+      ref: inputRef
     })
   }));
 });
@@ -287,11 +289,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/legacy/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.js

@@ -1,9 +1,9 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["value", "defaultValue", "format", "formatDensity", "onChange", "readOnly", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "shouldDisableTime", "disableIgnoringDatePartForTimeValidation", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
+var _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 var useDefaultizedTimeRangeFieldProps = function useDefaultizedTimeRangeFieldProps(props) {
   var _props$ampm, _props$disablePast, _props$disableFuture, _props$format, _props$minDateTime, _props$maxDateTime, _props$minDateTime2, _props$maxDateTime2;
   var utils = useUtils();
@@ -29,6 +29,7 @@ export var useSingleInputDateTimeRangeField = function useSingleInputDateTimeRan
     defaultValue = _useDefaultizedTimeRa.defaultValue,
     format = _useDefaultizedTimeRa.format,
     formatDensity = _useDefaultizedTimeRa.formatDensity,
+    shouldRespectLeadingZeros = _useDefaultizedTimeRa.shouldRespectLeadingZeros,
     onChange = _useDefaultizedTimeRa.onChange,
     readOnly = _useDefaultizedTimeRa.readOnly,
     onError = _useDefaultizedTimeRa.onError,
@@ -56,6 +57,7 @@ export var useSingleInputDateTimeRangeField = function useSingleInputDateTimeRan
       defaultValue: defaultValue,
       format: format,
       formatDensity: formatDensity,
+      shouldRespectLeadingZeros: shouldRespectLeadingZeros,
       onChange: onChange,
       readOnly: readOnly,
       onError: onError,

package/legacy/SingleInputTimeRangeField/SingleInputTimeRangeField.js

@@ -49,11 +49,13 @@ var SingleInputTimeRangeField = /*#__PURE__*/React.forwardRef(function SingleInp
   return /*#__PURE__*/_jsx(TextField, _extends({
     ref: ref
   }, fieldProps, {
+    InputProps: _extends({}, fieldProps.InputProps, {
+      readOnly: readOnly
+    }),
     inputProps: _extends({}, fieldProps.inputProps, {
-      ref: inputRef,
-      onPaste: onPaste,
       inputMode: inputMode,
-      readOnly: readOnly
+      onPaste: onPaste,
+      ref: inputRef
     })
   }));
 });
@@ -263,11 +265,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/legacy/SingleInputTimeRangeField/useSingleInputTimeRangeField.js

@@ -1,9 +1,9 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["value", "defaultValue", "format", "formatDensity", "onChange", "readOnly", "onError", "minTime", "maxTime", "minutesStep", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
+var _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 var useDefaultizedTimeRangeFieldProps = function useDefaultizedTimeRangeFieldProps(props) {
   var _props$ampm, _props$disablePast, _props$disableFuture, _props$format;
   var utils = useUtils();
@@ -23,6 +23,7 @@ export var useSingleInputTimeRangeField = function useSingleInputTimeRangeField(
     defaultValue = _useDefaultizedTimeRa.defaultValue,
     format = _useDefaultizedTimeRa.format,
     formatDensity = _useDefaultizedTimeRa.formatDensity,
+    shouldRespectLeadingZeros = _useDefaultizedTimeRa.shouldRespectLeadingZeros,
     onChange = _useDefaultizedTimeRa.onChange,
     readOnly = _useDefaultizedTimeRa.readOnly,
     onError = _useDefaultizedTimeRa.onError,
@@ -44,6 +45,7 @@ export var useSingleInputTimeRangeField = function useSingleInputTimeRangeField(
       defaultValue: defaultValue,
       format: format,
       formatDensity: formatDensity,
+      shouldRespectLeadingZeros: shouldRespectLeadingZeros,
       onChange: onChange,
       readOnly: readOnly,
       onError: onError,

package/legacy/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';
 var StaticDateRangePicker = /*#__PURE__*/React.forwardRef(function StaticDateRangePicker(inProps, ref) {
   var _defaultizedProps$dis, _defaultizedProps$cal, _defaultizedProps$slo;
   var defaultizedProps = useDateRangePickerDefaultizedProps(inProps, 'MuiStaticDateRangePicker');
@@ -30,6 +30,7 @@ var StaticDateRangePicker = /*#__PURE__*/React.forwardRef(function StaticDateRan
   var _useStaticRangePicker = useStaticRangePicker({
       props: props,
       valueManager: rangeValueManager,
+      valueType: 'date',
       validator: validateDateRange,
       ref: ref
     }),

package/legacy/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
@@ -26,4 +26,5 @@ export * from './MobileDateRangePicker';
 export * from './StaticDateRangePicker';
 
 // View renderers
-export * from './dateRangeViewRenderers';
+export * from './dateRangeViewRenderers';
+export * from './models';

package/legacy/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.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';
@@ -14,8 +16,7 @@ var releaseInfo = getReleaseInfo();
 export var useDesktopRangePicker = function useDesktopRangePicker(_ref) {
   var _fieldType, _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,
     slotProps = props.slotProps,
@@ -36,17 +37,15 @@ export var useDesktopRangePicker = function useDesktopRangePicker(_ref) {
     rangePosition = _useRangePosition.rangePosition,
     onRangePositionChange = _useRangePosition.onRangePositionChange,
     singleInputFieldRef = _useRangePosition.singleInputFieldRef;
-  var _usePicker = usePicker({
+  var _usePicker = usePicker(_extends({}, pickerParams, {
       props: props,
-      valueManager: valueManager,
       wrapperVariant: 'desktop',
-      validator: validator,
       autoFocusView: true,
       additionalViewProps: {
         rangePosition: rangePosition,
         onRangePositionChange: onRangePositionChange
       }
-    }),
+    })),
     open = _usePicker.open,
     actions = _usePicker.actions,
     layoutProps = _usePicker.layoutProps,