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

package/modern/internals/hooks/useEnrichedRangePickerFieldProps.js

@@ -20,21 +20,37 @@ 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(() => {
     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');
@@ -52,11 +68,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 = _extends({
@@ -119,7 +141,9 @@ const useMultiInputFieldSlotProps = ({
   const restFieldProps = _objectWithoutPropertiesLoose(fieldProps, _excluded);
   const enrichedFieldProps = _extends({}, restFieldProps, {
     slots,
-    slotProps
+    slotProps,
+    unstableStartFieldRef: handleStartFieldRef,
+    unstableEndFieldRef: handleEndFieldRef
   });
   return enrichedFieldProps;
 };
@@ -139,7 +163,8 @@ const useSingleInputFieldSlotProps = ({
   pickerSlots,
   pickerSlotProps,
   fieldProps,
-  anchorRef
+  anchorRef,
+  currentView
 }) => {
   const inputRef = React.useRef(null);
   const handleInputRef = useForkRef(inInputRef, inputRef);
@@ -149,7 +174,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 !== getActiveElement(document)) {
       return;

package/modern/internals/hooks/useMobileRangePicker/useMobileRangePicker.js

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

package/modern/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/modern/internals/utils/releaseInfo.js

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

package/modern/internals/utils/valueManagers.js

@@ -50,7 +50,7 @@ export const rangeFieldValueManager = {
     }
     return [prevReferenceValue[1], value[1]];
   },
-  getSectionsFromValue: (utils, [start, end], fallbackSections, isRTL, getSectionsFromDate) => {
+  getSectionsFromValue: (utils, [start, end], fallbackSections, localizedDigits, isRTL, getSectionsFromDate) => {
     const separatedFallbackSections = fallbackSections == null ? {
       startDate: null,
       endDate: null
@@ -73,11 +73,11 @@ export const rangeFieldValueManager = {
         });
       });
     };
-    return addPositionPropertiesToSections([...getSections(start, separatedFallbackSections.startDate, 'start'), ...getSections(end, separatedFallbackSections.endDate, 'end')], isRTL);
+    return addPositionPropertiesToSections([...getSections(start, separatedFallbackSections.startDate, 'start'), ...getSections(end, separatedFallbackSections.endDate, 'end')], localizedDigits, isRTL);
   },
-  getValueStrFromSections: (sections, isRTL) => {
+  getValueStrFromSections: (sections, localizedDigits, isRTL) => {
     const dateRangeSections = splitDateRangeSections(sections);
-    return createDateStrForInputFromSections([...dateRangeSections.startDate, ...dateRangeSections.endDate], isRTL);
+    return createDateStrForInputFromSections([...dateRangeSections.startDate, ...dateRangeSections.endDate], localizedDigits, isRTL);
   },
   parseValueStr: (valueStr, referenceValue, parseDate) => {
     // TODO: Improve because it would not work if the date format has `–` as a separator.

package/modern/locales/index.js

@@ -0,0 +1 @@
+export * from '@mui/x-date-pickers/locales';

package/node/DateRangeCalendar/DateRangeCalendar.js

@@ -26,8 +26,9 @@ var _DateRangePickerDay = require("../DateRangePickerDay");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _useDragRange2 = require("./useDragRange");
 var _useRangePosition = require("../internals/hooks/useRangePosition");
+var _dimensions = require("../internals/constants/dimensions");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["value", "defaultValue", "referenceDate", "onChange", "className", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "rangePosition", "defaultRangePosition", "onRangePositionChange", "calendars", "currentMonthCalendarPosition", "slots", "slotProps", "loading", "renderLoading", "disableHighlightToday", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber", "timezone"],
+const _excluded = ["value", "defaultValue", "referenceDate", "onChange", "className", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "rangePosition", "defaultRangePosition", "onRangePositionChange", "calendars", "currentMonthCalendarPosition", "slots", "slotProps", "loading", "renderLoading", "disableHighlightToday", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber", "timezone", "availableRangePositions", "views", "view", "openTo", "onViewChange"],
   _excluded2 = ["isDragging", "rangeDragDay", "draggingDatePosition"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -57,8 +58,7 @@ const DateRangeCalendarArrowSwitcher = (0, _styles.styled)(_internals.PickersArr
   alignItems: 'center',
   justifyContent: 'space-between'
 });
-const DAY_RANGE_SIZE = 40;
-const weeksContainerHeight = (DAY_RANGE_SIZE + _internals.DAY_MARGIN * 2) * 6;
+const weeksContainerHeight = (_dimensions.DAY_RANGE_SIZE + _dimensions.DAY_MARGIN * 2) * 6;
 const warnInvalidCurrentMonthCalendarPosition = (0, _internals.buildWarning)(['The `currentMonthCalendarPosition` prop must be an integer between `1` and the amount of calendars rendered.', 'For example if you have 2 calendars rendered, it should be equal to either 1 or 2.']);
 const DayCalendarForRange = (0, _styles.styled)(_internals.DayCalendar)(({
   theme
@@ -98,10 +98,13 @@ function useDateRangeCalendarDefaultizedProps(props, name) {
     loading: props.loading ?? false,
     disablePast: props.disablePast ?? false,
     disableFuture: props.disableFuture ?? false,
+    openTo: themeProps.openTo ?? 'day',
+    views: themeProps.views ?? ['day'],
     minDate: (0, _internals.applyDefaultDate)(utils, themeProps.minDate, defaultDates.minDate),
     maxDate: (0, _internals.applyDefaultDate)(utils, themeProps.maxDate, defaultDates.maxDate),
     calendars: themeProps.calendars ?? 2,
-    disableDragEditing: themeProps.disableDragEditing ?? false
+    disableDragEditing: themeProps.disableDragEditing ?? false,
+    availableRangePositions: themeProps.availableRangePositions ?? ['start', 'end']
   });
 }
 const useUtilityClasses = ownerState => {
@@ -163,7 +166,12 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
       fixedWeekNumber,
       disableDragEditing,
       displayWeekNumber,
-      timezone: timezoneProp
+      timezone: timezoneProp,
+      availableRangePositions,
+      views,
+      view: inView,
+      openTo,
+      onViewChange
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
@@ -178,6 +186,17 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
     onChange,
     valueManager: _valueManagers.rangeValueManager
   });
+  const {
+    setValueAndGoToNextView,
+    view
+  } = (0, _internals.useViews)({
+    view: inView,
+    views,
+    openTo,
+    onChange: handleValueChange,
+    onViewChange,
+    autoFocus
+  });
   const utils = (0, _internals.useUtils)();
   const localeText = (0, _internals.useLocaleText)();
   const now = (0, _internals.useNow)(timezone);
@@ -203,11 +222,15 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
       utils,
       range: value,
       rangePosition,
-      allowRangeFlip
+      allowRangeFlip,
+      shouldMergeDateAndTime: true
     });
-    onRangePositionChange(nextSelection);
+    const isNextSectionAvailable = availableRangePositions.includes(nextSelection);
+    if (isNextSectionAvailable) {
+      onRangePositionChange(nextSelection);
+    }
     const isFullRangeSelected = rangePosition === 'end' && (0, _dateUtils.isRangeValid)(utils, newRange);
-    handleValueChange(newRange, isFullRangeSelected ? 'finish' : 'partial');
+    setValueAndGoToNextView(newRange, isFullRangeSelected || !isNextSectionAvailable ? 'finish' : 'partial', view);
   });
   const handleDrop = (0, _useEventCallback.default)(newDate => {
     handleSelectedDayChange(newDate, undefined, true);
@@ -498,6 +521,14 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: _propTypes.default.bool,
+  /**
+   * Range positions available for selection.
+   * This list is checked against when checking if a next range position can be selected.
+   *
+   * Used on Date Time Range pickers with current `rangePosition` to force a `finish` selection after just one range position selection.
+   * @default ['start', 'end']
+   */
+  availableRangePositions: _propTypes.default.arrayOf(_propTypes.default.oneOf(['end', 'start']).isRequired),
   /**
    * The number of calendars to render.
    * @default 2
@@ -568,6 +599,10 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    * @default undefined
    */
   fixedWeekNumber: _propTypes.default.number,
+  /**
+   * Controlled focused view.
+   */
+  focusedView: _propTypes.default.oneOf(['day']),
   /**
    * If `true`, calls `renderLoading` instead of rendering the day calendar.
    * Can be used to preload information and show it in calendar.
@@ -584,11 +619,20 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
   minDate: _propTypes.default.any,
   /**
    * Callback fired when the value changes.
-   * @template TDate
-   * @param {DateRange<TDate>} value The new value.
-   * @param {PickerSelectionState | undefined} selectionState Indicates if the date range selection is complete.
+   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TView The view type. Will be one of date or time views.
+   * @param {TValue} value The new value.
+   * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
+   * @param {TView | undefined} selectedView Indicates the view in which the selection has been made.
    */
   onChange: _propTypes.default.func,
+  /**
+   * Callback fired on focused view change.
+   * @template TView
+   * @param {TView} view The new view to focus or not.
+   * @param {boolean} hasFocus `true` if the view should be focused.
+   */
+  onFocusedViewChange: _propTypes.default.func,
   /**
    * Callback fired on month change.
    * @template TDate
@@ -600,6 +644,18 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    * @param {RangePosition} rangePosition The new range position.
    */
   onRangePositionChange: _propTypes.default.func,
+  /**
+   * Callback fired on view change.
+   * @template TView
+   * @param {TView} view The new view.
+   */
+  onViewChange: _propTypes.default.func,
+  /**
+   * The default visible view.
+   * Used when the component view is not controlled.
+   * Must be a valid option from `views` list.
+   */
+  openTo: _propTypes.default.oneOf(['day']),
   /**
    * The position in the currently edited date range.
    * Used when the component position is controlled.
@@ -674,5 +730,15 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    * The selected value.
    * Used when the component is controlled.
    */
-  value: _propTypes.default.arrayOf(_propTypes.default.any)
+  value: _propTypes.default.arrayOf(_propTypes.default.any),
+  /**
+   * The visible view.
+   * Used when the component view is controlled.
+   * Must be a valid option from `views` list.
+   */
+  view: _propTypes.default.oneOf(['day']),
+  /**
+   * Available views.
+   */
+  views: _propTypes.default.arrayOf(_propTypes.default.oneOf(['day']))
 } : void 0;

package/node/DateRangePicker/DateRangePicker.js

@@ -68,9 +68,6 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * @default 2
    */
   calendars: _propTypes.default.oneOf([1, 2, 3]),
-  /**
-   * Class name applied to the root element.
-   */
   className: _propTypes.default.string,
   /**
    * If `true`, the popover or modal will close after submitting the full date.

package/node/DateRangePicker/DateRangePickerToolbar.js

@@ -102,9 +102,6 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   classes: _propTypes.default.object,
-  /**
-   * className applied to the root component.
-   */
   className: _propTypes.default.string,
   disabled: _propTypes.default.bool,
   /**