@mui/x-date-pickers-pro 7.0.0-alpha.9 → 7.0.0-beta.0

package/dateRangeViewRenderers/dateRangeViewRenderers.d.ts

@@ -1,13 +1,11 @@
 import * as React from 'react';
 import { DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
 import { DateRangeCalendarProps } from '../DateRangeCalendar';
-export interface DateRangeViewRendererProps<TDate, TView extends DateOrTimeViewWithMeridiem> extends DateRangeCalendarProps<TDate> {
-    view: TView;
-    onViewChange?: (view: TView) => void;
+export interface DateRangeViewRendererProps<TDate, TView extends DateOrTimeViewWithMeridiem> extends Omit<DateRangeCalendarProps<TDate>, 'views'> {
     views: readonly TView[];
 }
 /**
  * We don't pass all the props down to `DateRangeCalendar`,
  * because otherwise some unwanted props would be passed to the HTML element.
  */
-export declare const renderDateRangeViewCalendar: <TDate extends unknown>({ value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minDate, maxDate, shouldDisableDate, reduceAnimations, onMonthChange, rangePosition, defaultRangePosition, onRangePositionChange, calendars, currentMonthCalendarPosition, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, disableAutoMonthSwitching, sx, autoFocus, fixedWeekNumber, disableDragEditing, displayWeekNumber, timezone, }: DateRangeViewRendererProps<TDate, any>) => React.JSX.Element;
+export declare const renderDateRangeViewCalendar: <TDate extends unknown>({ value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minDate, maxDate, shouldDisableDate, reduceAnimations, onMonthChange, rangePosition, defaultRangePosition, onRangePositionChange, calendars, currentMonthCalendarPosition, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, disableAutoMonthSwitching, sx, autoFocus, fixedWeekNumber, disableDragEditing, displayWeekNumber, timezone, availableRangePositions, views, view, onViewChange, }: DateRangeViewRendererProps<TDate, "day">) => React.JSX.Element;

package/dateRangeViewRenderers/dateRangeViewRenderers.js

@@ -39,7 +39,11 @@ export const renderDateRangeViewCalendar = ({
   fixedWeekNumber,
   disableDragEditing,
   displayWeekNumber,
-  timezone
+  timezone,
+  availableRangePositions,
+  views,
+  view,
+  onViewChange
 }) => /*#__PURE__*/_jsx(DateRangeCalendar, {
   value: value,
   defaultValue: defaultValue,
@@ -74,5 +78,9 @@ export const renderDateRangeViewCalendar = ({
   fixedWeekNumber: fixedWeekNumber,
   disableDragEditing: disableDragEditing,
   displayWeekNumber: displayWeekNumber,
-  timezone: timezone
+  timezone: timezone,
+  availableRangePositions: availableRangePositions,
+  view: view,
+  views: views,
+  onViewChange: onViewChange
 });

package/index.d.ts

@@ -13,6 +13,9 @@ export * from './DateRangePicker';
 export * from './DesktopDateRangePicker';
 export * from './MobileDateRangePicker';
 export * from './StaticDateRangePicker';
+export * from './DateTimeRangePicker';
+export * from './DesktopDateTimeRangePicker';
+export * from './MobileDateTimeRangePicker';
 export * from './dateRangeViewRenderers';
 export type { UseDateRangeFieldProps } from './internals/models/dateRange';
 export * from './models';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v7.0.0-alpha.9
+ * @mui/x-date-pickers-pro v7.0.0-beta.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the
@@ -24,6 +24,9 @@ export * from './DateRangePicker';
 export * from './DesktopDateRangePicker';
 export * from './MobileDateRangePicker';
 export * from './StaticDateRangePicker';
+export * from './DateTimeRangePicker';
+export * from './DesktopDateTimeRangePicker';
+export * from './MobileDateTimeRangePicker';
 
 // View renderers
 export * from './dateRangeViewRenderers';

package/internals/constants/dimensions.d.ts

@@ -0,0 +1,3 @@
+export { DAY_MARGIN } from '@mui/x-date-pickers/internals';
+export declare const DAY_RANGE_SIZE = 40;
+export declare const RANGE_VIEW_HEIGHT: number;

package/internals/constants/dimensions.js

@@ -0,0 +1,5 @@
+import { DAY_MARGIN, VIEW_HEIGHT } from '@mui/x-date-pickers/internals';
+export { DAY_MARGIN } from '@mui/x-date-pickers/internals';
+export const DAY_RANGE_SIZE = 40;
+// adding the extra height of the range day element height difference (40px vs 36px)
+export const RANGE_VIEW_HEIGHT = VIEW_HEIGHT + 6 * 2 * DAY_MARGIN;

package/internals/hooks/models/index.d.ts

@@ -0,0 +1 @@
+export type { UseRangePickerSlots, UseRangePickerSlotProps, RangeOnlyPickerProps, RangePickerAdditionalViewProps, UseRangePickerProps, UseRangePickerParams, } from './useRangePicker';

package/internals/hooks/models/index.js

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

package/internals/hooks/models/useRangePicker.d.ts

@@ -0,0 +1,21 @@
+import { UsePickerParams, BasePickerProps, ExportedBaseToolbarProps, UsePickerViewsProps, BaseNonStaticPickerProps, UsePickerValueNonStaticProps, UsePickerViewsNonStaticProps, DateOrTimeViewWithMeridiem, ExportedBaseTabsProps } from '@mui/x-date-pickers/internals';
+import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps } from '@mui/x-date-pickers/PickersLayout';
+import { RangeFieldSection, BaseRangeNonStaticPickerProps } from '../../models';
+import { UseRangePositionProps, UseRangePositionResponse } from '../useRangePosition';
+import { RangePickerFieldSlots, RangePickerFieldSlotProps } from '../useEnrichedRangePickerFieldProps';
+import { DateRange } from '../../../models';
+export interface UseRangePickerSlots<TDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlots<DateRange<TDate>, TDate, TView>, RangePickerFieldSlots {
+}
+export interface UseRangePickerSlotProps<TDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlotProps<DateRange<TDate>, TDate, TView>, RangePickerFieldSlotProps<TDate> {
+    tabs?: ExportedBaseTabsProps;
+    toolbar?: ExportedBaseToolbarProps;
+}
+export interface RangeOnlyPickerProps<TDate> extends BaseNonStaticPickerProps, UsePickerValueNonStaticProps<TDate | null, RangeFieldSection>, UsePickerViewsNonStaticProps, BaseRangeNonStaticPickerProps, UseRangePositionProps {
+}
+export interface UseRangePickerProps<TDate, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<any, any, TView, any, any>, TAdditionalViewProps extends {}> extends RangeOnlyPickerProps<TDate>, BasePickerProps<DateRange<TDate>, TDate, TView, TError, TExternalProps, TAdditionalViewProps> {
+}
+export interface RangePickerAdditionalViewProps extends Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'> {
+}
+export interface UseRangePickerParams<TDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseRangePickerProps<TDate, TView, any, TExternalProps, TAdditionalViewProps>, TAdditionalViewProps extends {}> extends Pick<UsePickerParams<DateRange<TDate>, TDate, TView, RangeFieldSection, TExternalProps, TAdditionalViewProps>, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor'> {
+    props: TExternalProps;
+}

package/internals/hooks/models/useRangePicker.js

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

package/internals/hooks/useDesktopRangePicker/index.d.ts

@@ -1,2 +1,2 @@
 export { useDesktopRangePicker } from './useDesktopRangePicker';
-export type { UseDesktopRangePickerSlots, UseDesktopRangePickerSlotProps, DesktopRangeOnlyPickerProps, } from './useDesktopRangePicker.types';
+export type { UseDesktopRangePickerSlots, UseDesktopRangePickerSlotProps, DesktopRangeOnlyPickerProps, UseDesktopRangePickerProps, } from './useDesktopRangePicker.types';

package/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -14,7 +14,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const releaseInfo = getReleaseInfo();
 export const useDesktopRangePicker = _ref => {
-  var _fieldType, _slots$layout;
+  var _props$openTo, _fieldType, _initialView$current, _slots$layout;
   let {
       props
     } = _ref,
@@ -41,6 +41,7 @@ export const useDesktopRangePicker = _ref => {
   const fieldContainerRef = React.useRef(null);
   const anchorRef = React.useRef(null);
   const popperRef = React.useRef(null);
+  const initialView = React.useRef((_props$openTo = props.openTo) != null ? _props$openTo : null);
   const {
     rangePosition,
     onRangePositionChange,
@@ -56,12 +57,18 @@ export const useDesktopRangePicker = _ref => {
   } = usePicker(_extends({}, pickerParams, {
     props,
     wrapperVariant: 'desktop',
-    autoFocusView: true,
+    autoFocusView: false,
     additionalViewProps: {
       rangePosition,
       onRangePositionChange
     }
   }));
+  React.useEffect(() => {
+    if (layoutProps.view) {
+      initialView.current = layoutProps.view;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   const handleBlur = () => {
     executeInTheNextEventLoopTick(() => {
       var _fieldContainerRef$cu, _popperRef$current;
@@ -108,9 +115,16 @@ export const useDesktopRangePicker = _ref => {
     pickerSlotProps: slotProps,
     pickerSlots: slots,
     fieldProps,
-    anchorRef
+    anchorRef,
+    currentView: layoutProps.view !== props.openTo ? layoutProps.view : undefined,
+    initialView: (_initialView$current = initialView.current) != null ? _initialView$current : undefined,
+    onViewChange: layoutProps.onViewChange
   });
   const slotPropsForLayout = _extends({}, slotProps, {
+    tabs: _extends({}, slotProps == null ? void 0 : slotProps.tabs, {
+      rangePosition,
+      onRangePositionChange
+    }),
     toolbar: _extends({}, slotProps == null ? void 0 : slotProps.toolbar, {
       rangePosition,
       onRangePositionChange

package/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.types.d.ts

@@ -1,21 +1,16 @@
-import { UsePickerParams, BasePickerProps, PickersPopperSlots, PickersPopperSlotProps, ExportedBaseToolbarProps, UsePickerViewsProps, BaseNonStaticPickerProps, UsePickerValueNonStaticProps, UsePickerViewsNonStaticProps, DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
-import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps } from '@mui/x-date-pickers/PickersLayout';
-import { RangeFieldSection, BaseRangeNonStaticPickerProps } from '../../models';
-import { DateRange } from '../../../models';
-import { UseRangePositionProps, UseRangePositionResponse } from '../useRangePosition';
-import { RangePickerFieldSlots, RangePickerFieldSlotProps } from '../useEnrichedRangePickerFieldProps';
-export interface UseDesktopRangePickerSlots<TDate, TView extends DateOrTimeViewWithMeridiem> extends PickersPopperSlots, ExportedPickersLayoutSlots<DateRange<TDate>, TDate, TView>, RangePickerFieldSlots {
+import { PickersPopperSlots, PickersPopperSlotProps, UsePickerViewsProps, DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
+import { RangeOnlyPickerProps, RangePickerAdditionalViewProps, UseRangePickerParams, UseRangePickerProps, UseRangePickerSlotProps, UseRangePickerSlots } from '../models/useRangePicker';
+export interface UseDesktopRangePickerSlots<TDate, TView extends DateOrTimeViewWithMeridiem> extends UseRangePickerSlots<TDate, TView>, PickersPopperSlots {
 }
-export interface UseDesktopRangePickerSlotProps<TDate, TView extends DateOrTimeViewWithMeridiem> extends PickersPopperSlotProps, ExportedPickersLayoutSlotProps<DateRange<TDate>, TDate, TView>, RangePickerFieldSlotProps<TDate> {
-    toolbar?: ExportedBaseToolbarProps;
+export interface UseDesktopRangePickerSlotProps<TDate, TView extends DateOrTimeViewWithMeridiem> extends UseRangePickerSlotProps<TDate, TView>, PickersPopperSlotProps {
 }
-export interface DesktopRangeOnlyPickerProps<TDate> extends BaseNonStaticPickerProps, UsePickerValueNonStaticProps<TDate | null, RangeFieldSection>, UsePickerViewsNonStaticProps, BaseRangeNonStaticPickerProps, UseRangePositionProps {
+export interface DesktopRangeOnlyPickerProps<TDate> extends RangeOnlyPickerProps<TDate> {
     /**
      * If `true`, the start `input` element is focused during the first mount.
      */
     autoFocus?: boolean;
 }
-export interface UseDesktopRangePickerProps<TDate, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<any, any, TView, any, any>> extends DesktopRangeOnlyPickerProps<TDate>, BasePickerProps<DateRange<TDate>, TDate, TView, TError, TExternalProps, DesktopRangePickerAdditionalViewProps> {
+export interface UseDesktopRangePickerProps<TDate, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<any, any, TView, any, any>> extends UseRangePickerProps<TDate, TView, TError, TExternalProps, DesktopRangePickerAdditionalViewProps> {
     /**
      * Overridable component slots.
      * @default {}
@@ -27,8 +22,7 @@ export interface UseDesktopRangePickerProps<TDate, TView extends DateOrTimeViewW
      */
     slotProps?: UseDesktopRangePickerSlotProps<TDate, TView>;
 }
-export interface DesktopRangePickerAdditionalViewProps extends Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'> {
+export interface DesktopRangePickerAdditionalViewProps extends RangePickerAdditionalViewProps {
 }
-export interface UseDesktopRangePickerParams<TDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseDesktopRangePickerProps<TDate, TView, any, TExternalProps>> extends Pick<UsePickerParams<DateRange<TDate>, TDate, TView, RangeFieldSection, TExternalProps, DesktopRangePickerAdditionalViewProps>, 'valueManager' | 'valueType' | 'validator'> {
-    props: TExternalProps;
+export interface UseDesktopRangePickerParams<TDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseDesktopRangePickerProps<TDate, TView, any, TExternalProps>> extends UseRangePickerParams<TDate, TView, TExternalProps, DesktopRangePickerAdditionalViewProps> {
 }

package/internals/hooks/useEnrichedRangePickerFieldProps.d.ts

@@ -7,7 +7,7 @@ import { BaseSingleInputFieldProps } from '@mui/x-date-pickers/models';
 import { UseClearableFieldSlots, UseClearableFieldSlotProps } from '@mui/x-date-pickers/hooks';
 import { PickersInputLocaleText } from '@mui/x-date-pickers/locales';
 import { BaseFieldProps, UsePickerResponse, WrapperVariant, UsePickerProps, DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
-import { BaseMultiInputFieldProps, RangeFieldSection, UseDateRangeFieldProps } from '../models';
+import { BaseMultiInputFieldProps, RangeFieldSection, UseDateRangeFieldProps, FieldType } from '../models';
 import { DateRange, RangePosition } from '../../models';
 import { UseRangePositionResponse } from './useRangePosition';
 export interface RangePickerFieldSlots extends UseClearableFieldSlots {
@@ -40,7 +40,7 @@ export interface RangePickerFieldSlotProps<TDate> extends UseClearableFieldSlotP
 }
 export interface UseEnrichedRangePickerFieldPropsParams<TDate, TView extends DateOrTimeViewWithMeridiem, TError, FieldProps extends BaseFieldProps<DateRange<TDate>, TDate, RangeFieldSection, TError> = BaseFieldProps<DateRange<TDate>, TDate, RangeFieldSection, TError>> extends Pick<UsePickerResponse<DateRange<TDate>, TView, RangeFieldSection, any>, 'open' | 'actions'>, UseRangePositionResponse {
     wrapperVariant: WrapperVariant;
-    fieldType: 'single-input' | 'multi-input';
+    fieldType: FieldType;
     readOnly?: boolean;
     labelId?: string;
     disableOpenPicker?: boolean;
@@ -52,5 +52,8 @@ export interface UseEnrichedRangePickerFieldPropsParams<TDate, TView extends Dat
     pickerSlots: RangePickerFieldSlots | undefined;
     fieldProps: FieldProps;
     anchorRef?: React.Ref<HTMLDivElement>;
+    currentView?: TView | null;
+    initialView?: TView;
+    onViewChange?: (view: TView) => void;
 }
 export declare const useEnrichedRangePickerFieldProps: <TDate, TView extends DateOrTimeViewWithMeridiem, TError>(params: UseEnrichedRangePickerFieldPropsParams<TDate, TView, TError, BaseFieldProps<DateRange<TDate>, TDate, RangeFieldSection, TError>>) => BaseMultiInputFieldProps<DateRange<TDate>, TDate, RangeFieldSection, TError> | BaseSingleInputFieldProps<DateRange<TDate>, TDate, RangeFieldSection, TError>;

package/internals/hooks/useEnrichedRangePickerFieldProps.js

@@ -20,23 +20,38 @@ const useMultiInputFieldSlotProps = ({
   pickerSlotProps,
   pickerSlots,
   fieldProps,
-  anchorRef
+  anchorRef,
+  currentView,
+  initialView,
+  onViewChange
 }) => {
   const localeText = useLocaleText();
   const startRef = React.useRef(null);
   const endRef = React.useRef(null);
+  const startFieldRef = React.useRef(null);
+  const endFieldRef = React.useRef(null);
+  const handleStartFieldRef = useForkRef(fieldProps.unstableStartFieldRef, startFieldRef);
+  const handleEndFieldRef = useForkRef(fieldProps.unstableFieldRef, endFieldRef);
+  const previousRangePosition = React.useRef(rangePosition);
   React.useEffect(() => {
+    var _currentRef$current;
     if (!open) {
       return;
     }
-    if (rangePosition === 'start') {
-      var _startRef$current;
-      (_startRef$current = startRef.current) == null || _startRef$current.focus();
-    } else if (rangePosition === 'end') {
-      var _endRef$current;
-      (_endRef$current = endRef.current) == null || _endRef$current.focus();
+    const currentRef = rangePosition === 'start' ? startRef : endRef;
+    (_currentRef$current = currentRef.current) == null || _currentRef$current.focus();
+    const currentFieldRef = rangePosition === 'start' ? startFieldRef : endFieldRef;
+    if (!currentFieldRef.current || !currentView) {
+      // could happen when the user is switching between the inputs
+      previousRangePosition.current = rangePosition;
+      return;
     }
-  }, [rangePosition, open]);
+    // bring back focus to the field
+    currentFieldRef.current.setSelectedSections(
+    // 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]);
   const openRangeStartSelection = event => {
     event.stopPropagation();
     onRangePositionChange('start');
@@ -54,11 +69,17 @@ const useMultiInputFieldSlotProps = ({
   const handleFocusStart = () => {
     if (open) {
       onRangePositionChange('start');
+      if (previousRangePosition.current !== 'start' && initialView) {
+        onViewChange == null || onViewChange(initialView);
+      }
     }
   };
   const handleFocusEnd = () => {
     if (open) {
       onRangePositionChange('end');
+      if (previousRangePosition.current !== 'end' && initialView) {
+        onViewChange == null || onViewChange(initialView);
+      }
     }
   };
   const slots = _extends({
@@ -123,7 +144,9 @@ const useMultiInputFieldSlotProps = ({
   const restFieldProps = _objectWithoutPropertiesLoose(fieldProps, _excluded);
   const enrichedFieldProps = _extends({}, restFieldProps, {
     slots,
-    slotProps
+    slotProps,
+    unstableStartFieldRef: handleStartFieldRef,
+    unstableEndFieldRef: handleEndFieldRef
   });
   return enrichedFieldProps;
 };
@@ -143,7 +166,8 @@ const useSingleInputFieldSlotProps = ({
   pickerSlots,
   pickerSlotProps,
   fieldProps,
-  anchorRef
+  anchorRef,
+  currentView
 }) => {
   const inputRef = React.useRef(null);
   const handleInputRef = useForkRef(inInputRef, inputRef);
@@ -154,7 +178,13 @@ const useSingleInputFieldSlotProps = ({
       return;
     }
     (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
-  }, [rangePosition, open]);
+    if (!singleInputFieldRef.current || !currentView) {
+      return;
+    }
+    const sections = singleInputFieldRef.current.getSections().map(section => section.type);
+    // bring back focus to the field with the current view section selected
+    singleInputFieldRef.current.setSelectedSections(rangePosition === 'start' ? sections.indexOf(currentView) : sections.lastIndexOf(currentView));
+  }, [rangePosition, open, currentView, singleInputFieldRef]);
   const updateRangePosition = () => {
     var _singleInputFieldRef$;
     if (!singleInputFieldRef.current || inputRef.current !== getActiveElement(document)) {

package/internals/hooks/useMobileRangePicker/index.d.ts

@@ -1,2 +1,2 @@
 export { useMobileRangePicker } from './useMobileRangePicker';
-export type { UseMobileRangePickerSlots, UseMobileRangePickerSlotProps, MobileRangeOnlyPickerProps, } from './useMobileRangePicker.types';
+export type { UseMobileRangePickerSlots, UseMobileRangePickerSlotProps, MobileRangeOnlyPickerProps, UseMobileRangePickerProps, } from './useMobileRangePicker.types';

package/internals/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -97,6 +97,10 @@ export const useMobileRangePicker = _ref => {
     fieldProps
   });
   const slotPropsForLayout = _extends({}, innerSlotProps, {
+    tabs: _extends({}, innerSlotProps == null ? void 0 : innerSlotProps.tabs, {
+      rangePosition,
+      onRangePositionChange
+    }),
     toolbar: _extends({}, innerSlotProps == null ? void 0 : innerSlotProps.toolbar, {
       titleId: labelId,
       rangePosition,

package/internals/hooks/useMobileRangePicker/useMobileRangePicker.types.d.ts

@@ -1,17 +1,12 @@
-import { UsePickerParams, BasePickerProps, PickersModalDialogSlots, PickersModalDialogSlotProps, ExportedBaseToolbarProps, UsePickerViewsProps, BaseNonStaticPickerProps, UsePickerValueNonStaticProps, UsePickerViewsNonStaticProps, DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
-import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps } from '@mui/x-date-pickers/PickersLayout';
-import { RangeFieldSection, BaseRangeNonStaticPickerProps } from '../../models';
-import { DateRange } from '../../../models';
-import { UseRangePositionProps, UseRangePositionResponse } from '../useRangePosition';
-import { RangePickerFieldSlots, RangePickerFieldSlotProps } from '../useEnrichedRangePickerFieldProps';
-export interface UseMobileRangePickerSlots<TDate, TView extends DateOrTimeViewWithMeridiem> extends PickersModalDialogSlots, ExportedPickersLayoutSlots<DateRange<TDate>, TDate, TView>, RangePickerFieldSlots {
+import { PickersModalDialogSlots, PickersModalDialogSlotProps, UsePickerViewsProps, DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
+import { RangeOnlyPickerProps, RangePickerAdditionalViewProps, UseRangePickerParams, UseRangePickerProps, UseRangePickerSlotProps, UseRangePickerSlots } from '../models/useRangePicker';
+export interface UseMobileRangePickerSlots<TDate, TView extends DateOrTimeViewWithMeridiem> extends UseRangePickerSlots<TDate, TView>, PickersModalDialogSlots {
 }
-export interface UseMobileRangePickerSlotProps<TDate, TView extends DateOrTimeViewWithMeridiem> extends PickersModalDialogSlotProps, ExportedPickersLayoutSlotProps<DateRange<TDate>, TDate, TView>, RangePickerFieldSlotProps<TDate> {
-    toolbar?: ExportedBaseToolbarProps;
+export interface UseMobileRangePickerSlotProps<TDate, TView extends DateOrTimeViewWithMeridiem> extends UseRangePickerSlotProps<TDate, TView>, PickersModalDialogSlotProps {
 }
-export interface MobileRangeOnlyPickerProps<TDate> extends BaseNonStaticPickerProps, UsePickerValueNonStaticProps<TDate | null, RangeFieldSection>, UsePickerViewsNonStaticProps, BaseRangeNonStaticPickerProps, UseRangePositionProps {
+export interface MobileRangeOnlyPickerProps<TDate> extends RangeOnlyPickerProps<TDate> {
 }
-export interface UseMobileRangePickerProps<TDate, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<any, any, TView, any, any>> extends MobileRangeOnlyPickerProps<TDate>, BasePickerProps<DateRange<TDate>, TDate, TView, TError, TExternalProps, MobileRangePickerAdditionalViewProps> {
+export interface UseMobileRangePickerProps<TDate, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<any, any, TView, any, any>> extends UseRangePickerProps<TDate, TView, TError, TExternalProps, MobileRangePickerAdditionalViewProps> {
     /**
      * Overridable component slots.
      * @default {}
@@ -23,8 +18,7 @@ export interface UseMobileRangePickerProps<TDate, TView extends DateOrTimeViewWi
      */
     slotProps?: UseMobileRangePickerSlotProps<TDate, TView>;
 }
-export interface MobileRangePickerAdditionalViewProps extends Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'> {
+export interface MobileRangePickerAdditionalViewProps extends RangePickerAdditionalViewProps {
 }
-export interface UseMobileRangePickerParams<TDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseMobileRangePickerProps<TDate, TView, any, TExternalProps>> extends Pick<UsePickerParams<DateRange<TDate>, TDate, TView, RangeFieldSection, TExternalProps, MobileRangePickerAdditionalViewProps>, 'valueManager' | 'valueType' | 'validator'> {
-    props: TExternalProps;
+export interface UseMobileRangePickerParams<TDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseMobileRangePickerProps<TDate, TView, any, TExternalProps>> extends UseRangePickerParams<TDate, TView, TExternalProps, MobileRangePickerAdditionalViewProps> {
 }

package/internals/hooks/useMultiInputRangeField/useMultiInputRangeField.types.d.ts

@@ -1,13 +1,9 @@
-import * as React from 'react';
-import { FieldRef } from '@mui/x-date-pickers/models';
 import { UseFieldResponse } from '@mui/x-date-pickers/internals';
-import { RangeFieldSection } from '../../models/fields';
-export interface UseMultiInputRangeFieldParams<TSharedProps extends {}, TTextFieldSlotProps extends {}> {
+import { MultiInputFieldRefs } from '../../models/fields';
+export interface UseMultiInputRangeFieldParams<TSharedProps extends {}, TTextFieldSlotProps extends {}> extends MultiInputFieldRefs {
     sharedProps: TSharedProps;
     startTextFieldProps: TTextFieldSlotProps;
-    unstableStartFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
     endTextFieldProps: TTextFieldSlotProps;
-    unstableEndFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
 }
 export interface UseMultiInputRangeFieldResponse<TForwardedProps extends {}> {
     startDate: UseFieldResponse<TForwardedProps>;

package/internals/models/dateTimeRange.d.ts

@@ -1,4 +1,4 @@
-import { BaseDateValidationProps, TimeValidationProps, DefaultizedProps, MakeOptional, UseFieldInternalProps, DateTimeValidationProps } from '@mui/x-date-pickers/internals';
+import { BaseDateValidationProps, TimeValidationProps, DefaultizedProps, MakeOptional, UseFieldInternalProps, DateTimeValidationProps, DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
 import { BaseRangeProps, DayRangeValidationProps } from './dateRange';
 import { DateTimeRangeValidationError, DateRange } from '../../models';
 import { RangeFieldSection } from './fields';
@@ -10,3 +10,5 @@ export interface UseDateTimeRangeFieldProps<TDate> extends MakeOptional<UseField
     ampm?: boolean;
 }
 export type UseDateTimeRangeFieldDefaultizedProps<TDate> = DefaultizedProps<UseDateTimeRangeFieldProps<TDate>, keyof BaseDateValidationProps<TDate> | 'format' | 'disableIgnoringDatePartForTimeValidation'>;
+export type DateTimeRangePickerView = Exclude<DateOrTimeViewWithMeridiem, 'month' | 'year'>;
+export type DateTimeRangePickerViewExternal = Exclude<DateTimeRangePickerView, 'meridiem'>;

package/internals/models/fields.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { SlotComponentProps } from '@mui/base/utils';
 import { BaseFieldProps, FieldsTextFieldProps } from '@mui/x-date-pickers/internals';
-import { FieldSection } from '@mui/x-date-pickers/models';
+import { FieldSection, FieldRef } from '@mui/x-date-pickers/models';
 export interface RangeFieldSection extends FieldSection {
     dateName: 'start' | 'end';
 }
+export type FieldType = 'single-input' | 'multi-input';
 /**
  * Props the `textField` slot of the multi input field can receive when used inside a picker.
  */
@@ -25,11 +26,15 @@ export interface MultiInputFieldSlotTextFieldProps {
 export interface MultiInputFieldSlotRootProps {
     onBlur?: React.FocusEventHandler;
 }
+export interface MultiInputFieldRefs {
+    unstableStartFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
+    unstableEndFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
+}
 /**
  * Props the multi input field can receive when used inside a picker.
  * Only contains what the MUI component are passing to the field, not what users can pass using the `props.slotProps.field`.
  */
-export interface BaseMultiInputFieldProps<TValue, TDate, TSection extends FieldSection, TError> extends BaseFieldProps<TValue, TDate, TSection, TError> {
+export interface BaseMultiInputFieldProps<TValue, TDate, TSection extends FieldSection, TError> extends BaseFieldProps<TValue, TDate, TSection, TError>, MultiInputFieldRefs {
     slots?: {
         root?: React.ElementType;
         separator?: React.ElementType;

package/internals/utils/date-range-manager.d.ts

@@ -11,11 +11,12 @@ interface CalculateRangeChangeOptions<TDate> {
      * It is used to allow dragging range `start` date past `end` date essentially becoming the new `end` date and vice versa.
      */
     allowRangeFlip?: boolean;
+    shouldMergeDateAndTime?: boolean;
 }
 interface CalculateRangeChangeResponse<TDate> {
     nextSelection: RangePosition;
     newRange: DateRange<TDate>;
 }
-export declare function calculateRangeChange<TDate>({ utils, range, newDate: selectedDate, rangePosition, allowRangeFlip, }: CalculateRangeChangeOptions<TDate>): CalculateRangeChangeResponse<TDate>;
+export declare function calculateRangeChange<TDate>({ utils, range, newDate: selectedDate, rangePosition, allowRangeFlip, shouldMergeDateAndTime, }: CalculateRangeChangeOptions<TDate>): CalculateRangeChangeResponse<TDate>;
 export declare function calculateRangePreview<TDate>(options: CalculateRangeChangeOptions<TDate>): DateRange<TDate>;
 export {};

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

@@ -1,11 +1,22 @@
+import { mergeDateAndTime } from '@mui/x-date-pickers/internals';
 export function calculateRangeChange({
   utils,
   range,
   newDate: selectedDate,
   rangePosition,
-  allowRangeFlip = false
+  allowRangeFlip = false,
+  shouldMergeDateAndTime = false
 }) {
   const [start, end] = range;
+  if (shouldMergeDateAndTime && selectedDate) {
+    // If there is a date already selected, then we want to keep its time
+    if (start && rangePosition === 'start') {
+      selectedDate = mergeDateAndTime(utils, selectedDate, start);
+    }
+    if (end && rangePosition === 'end') {
+      selectedDate = mergeDateAndTime(utils, selectedDate, end);
+    }
+  }
   if (rangePosition === 'start') {
     const truthyResult = allowRangeFlip ? {
       nextSelection: 'start',

package/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTcwNTYxODgwMDAwMA==";
+  const releaseInfo = "MTcwNjIyMDAwMDAwMA==";
   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