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

package/node/internals/hooks/useEnrichedRangePickerFieldProps.js

@@ -29,21 +29,37 @@ const useMultiInputFieldSlotProps = ({
   pickerSlotProps,
   pickerSlots,
   fieldProps,
-  anchorRef
+  anchorRef,
+  currentView,
+  initialView,
+  onViewChange
 }) => {
   const localeText = (0, _internals.useLocaleText)();
   const startRef = React.useRef(null);
   const endRef = React.useRef(null);
+  const startFieldRef = React.useRef(null);
+  const endFieldRef = React.useRef(null);
+  const handleStartFieldRef = (0, _useForkRef.default)(fieldProps.unstableStartFieldRef, startFieldRef);
+  const handleEndFieldRef = (0, _useForkRef.default)(fieldProps.unstableFieldRef, endFieldRef);
+  const previousRangePosition = React.useRef(rangePosition);
   React.useEffect(() => {
     if (!open) {
       return;
     }
-    if (rangePosition === 'start') {
-      startRef.current?.focus();
-    } else if (rangePosition === 'end') {
-      endRef.current?.focus();
+    const currentRef = rangePosition === 'start' ? startRef : endRef;
+    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');
@@ -61,11 +77,17 @@ const useMultiInputFieldSlotProps = ({
   const handleFocusStart = () => {
     if (open) {
       onRangePositionChange('start');
+      if (previousRangePosition.current !== 'start' && initialView) {
+        onViewChange?.(initialView);
+      }
     }
   };
   const handleFocusEnd = () => {
     if (open) {
       onRangePositionChange('end');
+      if (previousRangePosition.current !== 'end' && initialView) {
+        onViewChange?.(initialView);
+      }
     }
   };
   const slots = (0, _extends2.default)({
@@ -128,7 +150,9 @@ const useMultiInputFieldSlotProps = ({
   const restFieldProps = (0, _objectWithoutPropertiesLoose2.default)(fieldProps, _excluded);
   const enrichedFieldProps = (0, _extends2.default)({}, restFieldProps, {
     slots,
-    slotProps
+    slotProps,
+    unstableStartFieldRef: handleStartFieldRef,
+    unstableEndFieldRef: handleEndFieldRef
   });
   return enrichedFieldProps;
 };
@@ -148,7 +172,8 @@ const useSingleInputFieldSlotProps = ({
   pickerSlots,
   pickerSlotProps,
   fieldProps,
-  anchorRef
+  anchorRef,
+  currentView
 }) => {
   const inputRef = React.useRef(null);
   const handleInputRef = (0, _useForkRef.default)(inInputRef, inputRef);
@@ -158,7 +183,13 @@ const useSingleInputFieldSlotProps = ({
       return;
     }
     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 = () => {
     if (!singleInputFieldRef.current || inputRef.current !== (0, _internals.getActiveElement)(document)) {
       return;

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

@@ -104,6 +104,10 @@ const useMobileRangePicker = _ref => {
     fieldProps
   });
   const slotPropsForLayout = (0, _extends2.default)({}, innerSlotProps, {
+    tabs: (0, _extends2.default)({}, innerSlotProps?.tabs, {
+      rangePosition,
+      onRangePositionChange
+    }),
     toolbar: (0, _extends2.default)({}, innerSlotProps?.toolbar, {
       titleId: labelId,
       rangePosition,

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

@@ -5,14 +5,25 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.calculateRangeChange = calculateRangeChange;
 exports.calculateRangePreview = calculateRangePreview;
+var _internals = require("@mui/x-date-pickers/internals");
 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 = (0, _internals.mergeDateAndTime)(utils, selectedDate, start);
+    }
+    if (end && rangePosition === 'end') {
+      selectedDate = (0, _internals.mergeDateAndTime)(utils, selectedDate, end);
+    }
+  }
   if (rangePosition === 'start') {
     const truthyResult = allowRangeFlip ? {
       nextSelection: 'start',

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 = "MTcwNTYxODgwMDAwMA==";
+  const releaseInfo = "MTcwNjczODQwMDAwMA==";
   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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers-pro",
-  "version": "7.0.0-alpha.9",
+  "version": "7.0.0-beta.1",
   "description": "The commercial edition of the date picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -31,12 +31,12 @@
     "directory": "packages/x-date-pickers-pro"
   },
   "dependencies": {
-    "@babel/runtime": "^7.23.8",
-    "@mui/base": "^5.0.0-beta.32",
-    "@mui/system": "^5.15.5",
-    "@mui/utils": "^5.15.5",
-    "@mui/x-date-pickers": "7.0.0-alpha.9",
-    "@mui/x-license-pro": "7.0.0-alpha.9",
+    "@babel/runtime": "^7.23.9",
+    "@mui/base": "^5.0.0-beta.34",
+    "@mui/system": "^5.15.7",
+    "@mui/utils": "^5.15.7",
+    "@mui/x-date-pickers": "7.0.0-beta.1",
+    "@mui/x-license-pro": "7.0.0-beta.0",
     "clsx": "^2.1.0",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5"

package/themeAugmentation/components.d.ts

@@ -9,23 +9,31 @@ export interface PickersProComponents<Theme = unknown> {
     defaultProps?: ComponentsProps['MuiDateRangePickerDay'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiDateRangePickerDay'];
   };
+  MuiDateTimeRangePickerTabs?: {
+    defaultProps?: ComponentsProps['MuiDateTimeRangePickerTabs'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiDateTimeRangePickerTabs'];
+  };
   MuiDateRangePickerToolbar?: {
     defaultProps?: ComponentsProps['MuiDateRangePickerToolbar'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiDateRangePickerToolbar'];
   };
+  MuiDateTimeRangePickerToolbar?: {
+    defaultProps?: ComponentsProps['MuiDateTimeRangePickerToolbar'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiDateTimeRangePickerToolbar'];
+  };
 
   // Multi input range fields
   MuiMultiInputDateRangeField?: {
     defaultProps?: ComponentsProps['MuiMultiInputDateRangeField'];
-    styleOverrides?: ComponentsOverrides['MuiMultiInputDateRangeField'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiMultiInputDateRangeField'];
   };
   MuiMultiInputDateTimeRangeField?: {
     defaultProps?: ComponentsProps['MuiMultiInputDateTimeRangeField'];
-    styleOverrides?: ComponentsOverrides['MuiMultiInputDateTimeRangeField'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiMultiInputDateTimeRangeField'];
   };
   MuiMultiInputTimeRangeField?: {
     defaultProps?: ComponentsProps['MuiMultiInputTimeRangeField'];
-    styleOverrides?: ComponentsOverrides['MuiMultiInputTimeRangeField'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiMultiInputTimeRangeField'];
   };
 
   // Single input range fields
@@ -52,6 +60,17 @@ export interface PickersProComponents<Theme = unknown> {
   MuiStaticDateRangePicker?: {
     defaultProps?: ComponentsProps['MuiStaticDateRangePicker'];
   };
+
+  // Date Time Range Pickers
+  MuiDateTimeRangePicker?: {
+    defaultProps?: ComponentsProps['MuiDateTimeRangePicker'];
+  };
+  MuiDesktopDateTimeRangePicker?: {
+    defaultProps?: ComponentsProps['MuiDesktopDateTimeRangePicker'];
+  };
+  MuiMobileDateTimeRangePicker?: {
+    defaultProps?: ComponentsProps['MuiMobileDateTimeRangePicker'];
+  };
 }
 
 declare module '@mui/material/styles' {

package/themeAugmentation/overrides.d.ts

@@ -2,6 +2,10 @@ import { DateRangePickerDayClassKey } from '../DateRangePickerDay';
 import { DateRangeCalendarClassKey } from '../DateRangeCalendar';
 import { DateRangePickerToolbarClassKey } from '../DateRangePicker';
 import { MultiInputRangeFieldClassKey } from '../models';
+import {
+  DateTimeRangePickerTabsClassKey,
+  DateTimeRangePickerToolbarClassKey,
+} from '../DateTimeRangePicker';
 
 // prettier-ignore
 export interface PickersProComponentNameToClassKey {
@@ -9,6 +13,9 @@ export interface PickersProComponentNameToClassKey {
   MuiDateRangePickerDay: DateRangePickerDayClassKey;
   MuiDateRangePickerToolbar: DateRangePickerToolbarClassKey;
 
+  MuiDateTimeRangePickerTabs: DateTimeRangePickerTabsClassKey;
+  MuiDateTimeRangePickerToolbar: DateTimeRangePickerToolbarClassKey;
+
   // Multi input range fields
   MuiMultiInputDateRangeField: MultiInputRangeFieldClassKey;
   MuiMultiInputDateTimeRangeField: MultiInputRangeFieldClassKey;

package/themeAugmentation/props.d.ts

@@ -11,11 +11,18 @@ import { MultiInputDateTimeRangeFieldProps } from '../MultiInputDateTimeRangeFie
 import { MultiInputTimeRangeFieldProps } from '../MultiInputTimeRangeField';
 import { SingleInputDateTimeRangeFieldProps } from '../SingleInputDateTimeRangeField';
 import { SingleInputTimeRangeFieldProps } from '../SingleInputTimeRangeField';
+import { DateTimeRangePickerProps } from '../DateTimeRangePicker';
+import { DesktopDateTimeRangePickerProps } from '../DesktopDateTimeRangePicker';
+import { MobileDateTimeRangePickerProps } from '../MobileDateTimeRangePicker';
+import { ExportedDateTimeRangePickerTabsProps } from '../DateTimeRangePicker/DateTimeRangePickerTabs';
+import { ExportedDateTimeRangePickerToolbarProps } from '../DateTimeRangePicker/DateTimeRangePickerToolbar';
 
 export interface PickersProComponentsPropsList {
   MuiDateRangeCalendar: DateRangeCalendarProps<unknown>;
   MuiDateRangePickerDay: DateRangePickerDayProps<unknown>;
+  MuiDateTimeRangePickerTabs: ExportedDateTimeRangePickerTabsProps;
   MuiDateRangePickerToolbar: DateRangePickerToolbarProps<unknown>;
+  MuiDateTimeRangePickerToolbar: ExportedDateTimeRangePickerToolbarProps;
 
   // Multi input range fields
   MuiMultiInputDateRangeField: MultiInputDateRangeFieldProps<unknown>;
@@ -32,6 +39,11 @@ export interface PickersProComponentsPropsList {
   MuiDesktopDateRangePicker: DesktopDateRangePickerProps<unknown>;
   MuiMobileDateRangePicker: MobileDateRangePickerProps<unknown>;
   MuiStaticDateRangePicker: StaticDateRangePickerProps<unknown>;
+
+  // Date Time Range Pickers
+  MuiDateTimeRangePicker: DateTimeRangePickerProps<unknown>;
+  MuiDesktopDateTimeRangePicker: DesktopDateTimeRangePickerProps<unknown>;
+  MuiMobileDateTimeRangePicker: MobileDateTimeRangePickerProps<unknown>;
 }
 
 declare module '@mui/material/styles' {