@mui/x-date-pickers-pro 8.0.0-alpha.0 → 8.0.0-alpha.2

package/node/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -23,14 +23,11 @@ var _hooks = require("@mui/x-date-pickers/hooks");
 var _PickersTextField = require("@mui/x-date-pickers/PickersTextField");
 var _useMultiInputDateTimeRangeField = require("../internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["slots", "slotProps", "unstableStartFieldRef", "unstableEndFieldRef", "className"];
+const _excluded = ["slots", "slotProps", "unstableStartFieldRef", "unstableEndFieldRef", "className", "classes"];
 const multiInputDateTimeRangeFieldClasses = exports.multiInputDateTimeRangeFieldClasses = (0, _utils.unstable_generateUtilityClasses)('MuiMultiInputDateTimeRangeField', ['root', 'separator']);
 const getMultiInputDateTimeRangeFieldUtilityClass = slot => (0, _utils.unstable_generateUtilityClass)('MuiMultiInputDateTimeRangeField', slot);
 exports.getMultiInputDateTimeRangeFieldUtilityClass = getMultiInputDateTimeRangeFieldUtilityClass;
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     separator: ['separator']
@@ -78,11 +75,12 @@ const MultiInputDateTimeRangeField = exports.MultiInputDateTimeRangeField = /*#_
       slotProps,
       unstableStartFieldRef,
       unstableEndFieldRef,
-      className
+      className,
+      classes: classesProp
     } = forwardedProps,
     otherForwardedProps = (0, _objectWithoutPropertiesLoose2.default)(forwardedProps, _excluded);
-  const ownerState = themeProps;
-  const classes = useUtilityClasses(ownerState);
+  const ownerState = (0, _internals.useFieldOwnerState)(themeProps);
+  const classes = useUtilityClasses(classesProp);
   const Root = slots?.root ?? MultiInputDateTimeRangeFieldRoot;
   const rootProps = (0, _useSlotProps.default)({
     elementType: Root,
@@ -306,10 +304,10 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
    */
   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`)
+   * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (for example 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°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "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, '')`.

package/node/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -23,14 +23,11 @@ var _hooks = require("@mui/x-date-pickers/hooks");
 var _PickersTextField = require("@mui/x-date-pickers/PickersTextField");
 var _useMultiInputTimeRangeField = require("../internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["slots", "slotProps", "unstableStartFieldRef", "unstableEndFieldRef", "className"];
+const _excluded = ["slots", "slotProps", "unstableStartFieldRef", "unstableEndFieldRef", "className", "classes"];
 const multiInputTimeRangeFieldClasses = exports.multiInputTimeRangeFieldClasses = (0, _utils.unstable_generateUtilityClasses)('MuiMultiInputTimeRangeField', ['root', 'separator']);
 const getMultiInputTimeRangeFieldUtilityClass = slot => (0, _utils.unstable_generateUtilityClass)('MuiMultiInputTimeRangeField', slot);
 exports.getMultiInputTimeRangeFieldUtilityClass = getMultiInputTimeRangeFieldUtilityClass;
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     separator: ['separator']
@@ -78,11 +75,12 @@ const MultiInputTimeRangeField = exports.MultiInputTimeRangeField = /*#__PURE__*
       slotProps,
       unstableStartFieldRef,
       unstableEndFieldRef,
-      className
+      className,
+      classes: classesProp
     } = forwardedProps,
     otherForwardedProps = (0, _objectWithoutPropertiesLoose2.default)(forwardedProps, _excluded);
-  const ownerState = themeProps;
-  const classes = useUtilityClasses(ownerState);
+  const ownerState = (0, _internals.useFieldOwnerState)(themeProps);
+  const classes = useUtilityClasses(classesProp);
   const Root = slots?.root ?? MultiInputTimeRangeFieldRoot;
   const rootProps = (0, _useSlotProps.default)({
     elementType: Root,
@@ -278,10 +276,10 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.propTypes = {
    */
   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`)
+   * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (for example 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°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "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, '')`.

package/node/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -43,7 +43,7 @@ const SingleInputDateRangeField = exports.SingleInputDateRangeField = /*#__PURE_
       inputProps
     } = themeProps,
     other = (0, _objectWithoutPropertiesLoose2.default)(themeProps, _excluded);
-  const ownerState = themeProps;
+  const ownerState = (0, _internals.useFieldOwnerState)(themeProps);
   const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure === false ? _TextField.default : _PickersTextField.PickersTextField);
   const textFieldProps = (0, _useSlotProps.default)({
     elementType: TextField,
@@ -269,10 +269,10 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    */
   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`)
+   * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (for example 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°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "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, '')`.

package/node/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -43,7 +43,7 @@ const SingleInputDateTimeRangeField = exports.SingleInputDateTimeRangeField = /*
       inputProps
     } = themeProps,
     other = (0, _objectWithoutPropertiesLoose2.default)(themeProps, _excluded);
-  const ownerState = themeProps;
+  const ownerState = (0, _internals.useFieldOwnerState)(themeProps);
   const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure === false ? _TextField.default : _PickersTextField.PickersTextField);
   const textFieldProps = (0, _useSlotProps.default)({
     elementType: TextField,
@@ -309,10 +309,10 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.propTypes
    */
   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`)
+   * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (for example 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°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "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, '')`.

package/node/SingleInputTimeRangeField/SingleInputTimeRangeField.js

@@ -43,7 +43,7 @@ const SingleInputTimeRangeField = exports.SingleInputTimeRangeField = /*#__PURE_
       inputProps
     } = themeProps,
     other = (0, _objectWithoutPropertiesLoose2.default)(themeProps, _excluded);
-  const ownerState = themeProps;
+  const ownerState = (0, _internals.useFieldOwnerState)(themeProps);
   const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure === false ? _TextField.default : _PickersTextField.PickersTextField);
   const textFieldProps = (0, _useSlotProps.default)({
     elementType: TextField,
@@ -281,10 +281,10 @@ process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.propTypes = {
    */
   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`)
+   * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (for example 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°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "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, '')`.

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v8.0.0-alpha.0
+ * @mui/x-date-pickers-pro v8.0.0-alpha.2
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/node/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -51,12 +51,21 @@ const useDesktopRangePicker = _ref => {
   const popperRef = React.useRef(null);
   const startFieldRef = React.useRef(null);
   const endFieldRef = React.useRef(null);
+  const singleInputFieldRef = React.useRef(null);
   const initialView = React.useRef(props.openTo ?? null);
   const fieldType = slots.field.fieldType ?? 'multi-input';
   const {
     rangePosition,
     onRangePositionChange
-  } = (0, _useRangePosition.useRangePosition)(props, fieldType === 'single-input' ? startFieldRef : undefined);
+  } = (0, _useRangePosition.useRangePosition)(props, fieldType === 'single-input' ? singleInputFieldRef : undefined);
+  let fieldRef;
+  if (fieldType === 'single-input') {
+    fieldRef = singleInputFieldRef;
+  } else if (rangePosition === 'start') {
+    fieldRef = startFieldRef;
+  } else {
+    fieldRef = endFieldRef;
+  }
   const {
     open,
     actions,
@@ -68,9 +77,9 @@ const useDesktopRangePicker = _ref => {
     ownerState
   } = (0, _internals.usePicker)((0, _extends2.default)({}, pickerParams, {
     props,
-    wrapperVariant: 'desktop',
+    variant: 'desktop',
     autoFocusView: false,
-    fieldRef: rangePosition === 'start' ? startFieldRef : endFieldRef,
+    fieldRef,
     localeText,
     additionalViewProps: {
       rangePosition,
@@ -121,7 +130,7 @@ const useDesktopRangePicker = _ref => {
     ownerState
   });
   const enrichedFieldProps = (0, _useEnrichedRangePickerFieldProps.useEnrichedRangePickerFieldProps)({
-    wrapperVariant: 'desktop',
+    variant: 'desktop',
     fieldType,
     open,
     actions,
@@ -138,6 +147,7 @@ const useDesktopRangePicker = _ref => {
     anchorRef,
     startFieldRef,
     endFieldRef,
+    singleInputFieldRef,
     currentView: layoutProps.view !== props.openTo ? layoutProps.view : undefined,
     initialView: initialView.current ?? undefined,
     onViewChange: layoutProps.onViewChange

package/node/internals/hooks/useEnrichedRangePickerFieldProps.js

@@ -16,7 +16,7 @@ var _hooks = require("@mui/x-date-pickers/hooks");
 var _internals = require("@mui/x-date-pickers/internals");
 const _excluded = ["clearable", "onClear"];
 const useMultiInputFieldSlotProps = ({
-  wrapperVariant,
+  variant,
   open,
   actions,
   readOnly,
@@ -41,7 +41,7 @@ const useMultiInputFieldSlotProps = ({
   const handleEndFieldRef = (0, _useForkRef.default)(fieldProps.unstableEndFieldRef, endFieldRef);
   const previousRangePosition = React.useRef(rangePosition);
   React.useEffect(() => {
-    if (!open) {
+    if (!open || variant === 'mobile') {
       return;
     }
     const currentFieldRef = rangePosition === 'start' ? startFieldRef : endFieldRef;
@@ -57,7 +57,7 @@ const useMultiInputFieldSlotProps = ({
     // use the current view or `0` when the range position has just been swapped
     previousRangePosition.current === rangePosition ? currentView : 0);
     previousRangePosition.current = rangePosition;
-  }, [rangePosition, open, currentView, startFieldRef, endFieldRef]);
+  }, [rangePosition, open, currentView, startFieldRef, endFieldRef, variant]);
   const openRangeStartSelection = event => {
     event.stopPropagation();
     onRangePositionChange('start');
@@ -106,7 +106,7 @@ const useMultiInputFieldSlotProps = ({
           focused: open ? rangePosition === 'start' : undefined
         }, !readOnly && !fieldProps.disabled && {
           onClick: openRangeStartSelection
-        }, wrapperVariant === 'mobile' && {
+        }, variant === 'mobile' && {
           readOnly: true
         });
         if (anchorRef) {
@@ -122,7 +122,7 @@ const useMultiInputFieldSlotProps = ({
           focused: open ? rangePosition === 'end' : undefined
         }, !readOnly && !fieldProps.disabled && {
           onClick: openRangeEndSelection
-        }, wrapperVariant === 'mobile' && {
+        }, variant === 'mobile' && {
           readOnly: true
         });
         InputProps = resolvedComponentProps?.InputProps;
@@ -154,7 +154,7 @@ const useMultiInputFieldSlotProps = ({
   return enrichedFieldProps;
 };
 const useSingleInputFieldSlotProps = ({
-  wrapperVariant,
+  variant,
   open,
   actions,
   readOnly,
@@ -164,36 +164,35 @@ const useSingleInputFieldSlotProps = ({
   onBlur,
   rangePosition,
   onRangePositionChange,
-  startFieldRef,
-  endFieldRef,
+  singleInputFieldRef,
   pickerSlots,
   pickerSlotProps,
   fieldProps,
   anchorRef,
   currentView
 }) => {
-  const handleFieldRef = (0, _useForkRef.default)(fieldProps.unstableFieldRef, startFieldRef, endFieldRef);
+  const handleFieldRef = (0, _useForkRef.default)(fieldProps.unstableFieldRef, singleInputFieldRef);
   React.useEffect(() => {
-    if (!open || !startFieldRef.current) {
+    if (!open || !singleInputFieldRef.current || variant === 'mobile') {
       return;
     }
-    if (startFieldRef.current.isFieldFocused()) {
+    if (singleInputFieldRef.current.isFieldFocused()) {
       return;
     }
 
     // bring back focus to the field with the current view section selected
     if (currentView) {
-      const sections = startFieldRef.current.getSections().map(section => section.type);
+      const sections = singleInputFieldRef.current.getSections().map(section => section.type);
       const newSelectedSection = rangePosition === 'start' ? sections.indexOf(currentView) : sections.lastIndexOf(currentView);
-      startFieldRef.current?.focusField(newSelectedSection);
+      singleInputFieldRef.current?.focusField(newSelectedSection);
     }
-  }, [rangePosition, open, currentView, startFieldRef]);
+  }, [rangePosition, open, currentView, singleInputFieldRef, variant]);
   const updateRangePosition = () => {
-    if (!startFieldRef.current?.isFieldFocused()) {
+    if (!singleInputFieldRef.current?.isFieldFocused()) {
       return;
     }
-    const sections = startFieldRef.current.getSections();
-    const activeSectionIndex = startFieldRef.current?.getActiveSectionIndex();
+    const sections = singleInputFieldRef.current.getSections();
+    const activeSectionIndex = singleInputFieldRef.current?.getActiveSectionIndex();
     const domRangePosition = activeSectionIndex == null || activeSectionIndex < sections.length / 2 ? 'start' : 'end';
     if (domRangePosition != null && domRangePosition !== rangePosition) {
       onRangePositionChange(domRangePosition);
@@ -233,7 +232,7 @@ const useSingleInputFieldSlotProps = ({
     focused: open ? true : undefined
   }, labelId != null && {
     id: labelId
-  }, wrapperVariant === 'mobile' && {
+  }, variant === 'mobile' && {
     readOnly: true
   }, !readOnly && !fieldProps.disabled && {
     onClick: openPicker

package/node/internals/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -48,13 +48,22 @@ const useMobileRangePicker = _ref => {
   } = props;
   const startFieldRef = React.useRef(null);
   const endFieldRef = React.useRef(null);
+  const singleInputFieldRef = React.useRef(null);
   const fieldType = slots.field.fieldType ?? 'multi-input';
   const {
     rangePosition,
     onRangePositionChange
-  } = (0, _useRangePosition.useRangePosition)(props, fieldType === 'single-input' ? startFieldRef : undefined);
+  } = (0, _useRangePosition.useRangePosition)(props, fieldType === 'single-input' ? singleInputFieldRef : undefined);
   const labelId = (0, _useId.default)();
   const contextTranslations = (0, _hooks.usePickerTranslations)();
+  let fieldRef;
+  if (fieldType === 'single-input') {
+    fieldRef = singleInputFieldRef;
+  } else if (rangePosition === 'start') {
+    fieldRef = startFieldRef;
+  } else {
+    fieldRef = endFieldRef;
+  }
   const {
     open,
     actions,
@@ -65,9 +74,9 @@ const useMobileRangePicker = _ref => {
     ownerState
   } = (0, _internals.usePicker)((0, _extends2.default)({}, pickerParams, {
     props,
-    wrapperVariant: 'mobile',
+    variant: 'mobile',
     autoFocusView: true,
-    fieldRef: rangePosition === 'start' ? startFieldRef : endFieldRef,
+    fieldRef,
     localeText,
     additionalViewProps: {
       rangePosition,
@@ -103,7 +112,7 @@ const useMobileRangePicker = _ref => {
   });
   const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const enrichedFieldProps = (0, _useEnrichedRangePickerFieldProps.useEnrichedRangePickerFieldProps)({
-    wrapperVariant: 'mobile',
+    variant: 'mobile',
     fieldType,
     open,
     actions,
@@ -118,7 +127,8 @@ const useMobileRangePicker = _ref => {
     pickerSlotProps: innerSlotProps,
     fieldProps,
     startFieldRef,
-    endFieldRef
+    endFieldRef,
+    singleInputFieldRef
   });
   const slotPropsForLayout = (0, _extends2.default)({}, innerSlotProps, {
     tabs: (0, _extends2.default)({}, innerSlotProps?.tabs, {

package/node/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js

@@ -25,6 +25,7 @@ const useMultiInputDateRangeField = ({
   const {
     value: valueProp,
     defaultValue,
+    referenceDate,
     format,
     formatDensity,
     shouldRespectLeadingZeros,
@@ -46,6 +47,7 @@ const useMultiInputDateRangeField = ({
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate,
     onChange,
     valueManager: _valueManagers.rangeValueManager
   });

package/node/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js

@@ -25,6 +25,7 @@ const useMultiInputDateTimeRangeField = ({
   const {
     value: valueProp,
     defaultValue,
+    referenceDate,
     format,
     formatDensity,
     shouldRespectLeadingZeros,
@@ -46,6 +47,7 @@ const useMultiInputDateTimeRangeField = ({
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate,
     onChange,
     valueManager: _valueManagers.rangeValueManager
   });

package/node/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.js

@@ -25,6 +25,7 @@ const useMultiInputTimeRangeField = ({
   const {
     value: valueProp,
     defaultValue,
+    referenceDate,
     format,
     formatDensity,
     shouldRespectLeadingZeros,
@@ -47,7 +48,8 @@ const useMultiInputTimeRangeField = ({
     value: valueProp,
     defaultValue,
     onChange,
-    valueManager: _valueManagers.rangeValueManager
+    valueManager: _valueManagers.rangeValueManager,
+    referenceDate
   });
   const {
     validationError,

package/node/internals/hooks/useStaticRangePicker/useStaticRangePicker.js

@@ -60,7 +60,7 @@ const useStaticRangePicker = _ref => {
       rangePosition,
       onRangePositionChange
     },
-    wrapperVariant: displayStaticWrapperAs
+    variant: displayStaticWrapperAs
   }));
   const Layout = slots?.layout ?? PickerStaticLayout;
   const slotPropsForLayout = (0, _extends2.default)({}, slotProps, {

package/node/internals/utils/date-range-manager.js

@@ -12,7 +12,8 @@ function calculateRangeChange({
   newDate: selectedDate,
   rangePosition,
   allowRangeFlip = false,
-  shouldMergeDateAndTime = false
+  shouldMergeDateAndTime = false,
+  referenceDate
 }) {
   const [start, end] = range;
   if (shouldMergeDateAndTime && selectedDate) {
@@ -24,29 +25,30 @@ function calculateRangeChange({
       selectedDate = (0, _internals.mergeDateAndTime)(utils, selectedDate, end);
     }
   }
+  const newSelectedDate = referenceDate && selectedDate && shouldMergeDateAndTime ? (0, _internals.mergeDateAndTime)(utils, selectedDate, referenceDate) : selectedDate;
   if (rangePosition === 'start') {
     const truthyResult = allowRangeFlip ? {
       nextSelection: 'start',
-      newRange: [end, selectedDate]
+      newRange: [end, newSelectedDate]
     } : {
       nextSelection: 'end',
-      newRange: [selectedDate, null]
+      newRange: [newSelectedDate, null]
     };
-    return Boolean(end) && utils.isAfter(selectedDate, end) ? truthyResult : {
+    return Boolean(end) && utils.isAfter(newSelectedDate, end) ? truthyResult : {
       nextSelection: 'end',
-      newRange: [selectedDate, end]
+      newRange: [newSelectedDate, end]
     };
   }
   const truthyResult = allowRangeFlip ? {
     nextSelection: 'end',
-    newRange: [selectedDate, start]
+    newRange: [newSelectedDate, start]
   } : {
     nextSelection: 'end',
-    newRange: [selectedDate, null]
+    newRange: [newSelectedDate, null]
   };
-  return Boolean(start) && utils.isBeforeDay(selectedDate, start) ? truthyResult : {
+  return Boolean(start) && utils.isBeforeDay(newSelectedDate, start) ? truthyResult : {
     nextSelection: 'start',
-    newRange: [start, selectedDate]
+    newRange: [start, newSelectedDate]
   };
 }
 function calculateRangePreview(options) {

package/node/internals/utils/releaseInfo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 const getReleaseInfo = () => {
-  const releaseInfo = "MTczMTUzODgwMDAwMA==";
+  const releaseInfo = "MTczMjgzNDgwMDAwMA==";
   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/node/validation/validateDateRange.js

@@ -15,6 +15,14 @@ const _excluded = ["shouldDisableDate"];
  * Validation props used by the Date Range Picker, Date Range Field and Date Range Calendar components.
  */
 
+/**
+ * Validation props as received by the validateDateRange method.
+ */
+
+/**
+ * Name of the props that should be defaulted before being passed to the validateDateRange method.
+ */
+
 const validateDateRange = ({
   adapter,
   value,

package/node/validation/validateDateTimeRange.js

@@ -15,6 +15,10 @@ const _excluded = ["shouldDisableDate"];
  * Validation props used by the Date Time Range Picker and Date Time Range Field.
  */
 
+/**
+ * Validation props as received by the validateDateTimeRange method.
+ */
+
 const validateDateTimeRange = ({
   adapter,
   value,

package/node/validation/validateTimeRange.js

@@ -11,6 +11,14 @@ var _valueManagers = require("../internals/utils/valueManagers");
  * Validation props used by the Time Range Picker and Time Range Field.
  */
 
+/**
+ * Validation props as received by the validateTimeRange method.
+ */
+
+/**
+ * Name of the props that should be defaulted before being passed to the validateTimeRange method.
+ */
+
 const validateTimeRange = ({
   adapter,
   value,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers-pro",
-  "version": "8.0.0-alpha.0",
+  "version": "8.0.0-alpha.2",
   "description": "The Pro plan edition of the Date and Time Picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -37,9 +37,9 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-date-pickers": "8.0.0-alpha.0",
-    "@mui/x-license": "8.0.0-alpha.0",
-    "@mui/x-internals": "8.0.0-alpha.0"
+    "@mui/x-date-pickers": "8.0.0-alpha.2",
+    "@mui/x-internals": "8.0.0-alpha.2",
+    "@mui/x-license": "8.0.0-alpha.2"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
@@ -53,8 +53,8 @@
     "moment": "^2.29.4",
     "moment-hijri": "^2.1.2 || ^3.0.0",
     "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
     "@emotion/react": {

package/validation/validateDateRange.d.ts

@@ -1,3 +1,4 @@
+import type { MakeRequired } from '@mui/x-internals/types';
 import { Validator } from '@mui/x-date-pickers/validation';
 import { BaseDateValidationProps, PickerRangeValue } from '@mui/x-date-pickers/internals';
 import { DayRangeValidationProps } from '../internals/models/dateRange';
@@ -7,6 +8,13 @@ import { DateRangeValidationError } from '../models';
  */
 export interface ExportedValidateDateRangeProps extends DayRangeValidationProps, BaseDateValidationProps {
 }
-export interface ValidateDateRangeProps extends DayRangeValidationProps, Required<BaseDateValidationProps> {
+/**
+ * Validation props as received by the validateDateRange method.
+ */
+export interface ValidateDateRangeProps extends MakeRequired<ExportedValidateDateRangeProps, ValidateDateRangePropsToDefault> {
 }
+/**
+ * Name of the props that should be defaulted before being passed to the validateDateRange method.
+ */
+export type ValidateDateRangePropsToDefault = keyof BaseDateValidationProps;
 export declare const validateDateRange: Validator<PickerRangeValue, DateRangeValidationError, ValidateDateRangeProps>;

package/validation/validateDateRange.js

@@ -9,6 +9,14 @@ import { rangeValueManager } from "../internals/utils/valueManagers.js";
  * Validation props used by the Date Range Picker, Date Range Field and Date Range Calendar components.
  */
 
+/**
+ * Validation props as received by the validateDateRange method.
+ */
+
+/**
+ * Name of the props that should be defaulted before being passed to the validateDateRange method.
+ */
+
 export const validateDateRange = ({
   adapter,
   value,

package/validation/validateDateTimeRange.d.ts

@@ -1,13 +1,17 @@
 import { DateTimeValidationProps, PickerRangeValue } from '@mui/x-date-pickers/internals';
 import { Validator } from '@mui/x-date-pickers/validation';
 import { DateTimeRangeValidationError } from '../models';
-import { ExportedValidateDateRangeProps, ValidateDateRangeProps } from './validateDateRange';
-import { ExportedValidateTimeRangeProps, ValidateTimeRangeProps } from './validateTimeRange';
+import { ExportedValidateDateRangeProps, ValidateDateRangeProps, ValidateDateRangePropsToDefault } from './validateDateRange';
+import { ExportedValidateTimeRangeProps, ValidateTimeRangeProps, ValidateTimeRangePropsToDefault } from './validateTimeRange';
 /**
  * Validation props used by the Date Time Range Picker and Date Time Range Field.
  */
 export interface ExportedValidateDateTimeRangeProps extends ExportedValidateDateRangeProps, ExportedValidateTimeRangeProps, DateTimeValidationProps {
 }
+/**
+ * Validation props as received by the validateDateTimeRange method.
+ */
 export interface ValidateDateTimeRangeProps extends ValidateDateRangeProps, ValidateTimeRangeProps {
 }
+export type ValidateDateTimeRangePropsToDefault = ValidateDateRangePropsToDefault | ValidateTimeRangePropsToDefault;
 export declare const validateDateTimeRange: Validator<PickerRangeValue, DateTimeRangeValidationError, ValidateDateTimeRangeProps>;