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

package/legacy/internals/hooks/useEnrichedRangePickerFieldProps.js

@@ -20,22 +20,37 @@ var useMultiInputFieldSlotProps = function useMultiInputFieldSlotProps(_ref) {
     pickerSlotProps = _ref.pickerSlotProps,
     pickerSlots = _ref.pickerSlots,
     fieldProps = _ref.fieldProps,
-    anchorRef = _ref.anchorRef;
+    anchorRef = _ref.anchorRef,
+    currentView = _ref.currentView,
+    initialView = _ref.initialView,
+    onViewChange = _ref.onViewChange;
   var localeText = useLocaleText();
   var startRef = React.useRef(null);
   var endRef = React.useRef(null);
+  var startFieldRef = React.useRef(null);
+  var endFieldRef = React.useRef(null);
+  var handleStartFieldRef = useForkRef(fieldProps.unstableStartFieldRef, startFieldRef);
+  var handleEndFieldRef = useForkRef(fieldProps.unstableFieldRef, endFieldRef);
+  var previousRangePosition = React.useRef(rangePosition);
   React.useEffect(function () {
+    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();
+    var currentRef = rangePosition === 'start' ? startRef : endRef;
+    (_currentRef$current = currentRef.current) == null || _currentRef$current.focus();
+    var 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]);
   var openRangeStartSelection = function openRangeStartSelection(event) {
     event.stopPropagation();
     onRangePositionChange('start');
@@ -53,11 +68,17 @@ var useMultiInputFieldSlotProps = function useMultiInputFieldSlotProps(_ref) {
   var handleFocusStart = function handleFocusStart() {
     if (open) {
       onRangePositionChange('start');
+      if (previousRangePosition.current !== 'start' && initialView) {
+        onViewChange == null || onViewChange(initialView);
+      }
     }
   };
   var handleFocusEnd = function handleFocusEnd() {
     if (open) {
       onRangePositionChange('end');
+      if (previousRangePosition.current !== 'end' && initialView) {
+        onViewChange == null || onViewChange(initialView);
+      }
     }
   };
   var slots = _extends({
@@ -124,7 +145,9 @@ var useMultiInputFieldSlotProps = function useMultiInputFieldSlotProps(_ref) {
     restFieldProps = _objectWithoutProperties(fieldProps, _excluded);
   var enrichedFieldProps = _extends({}, restFieldProps, {
     slots: slots,
-    slotProps: slotProps
+    slotProps: slotProps,
+    unstableStartFieldRef: handleStartFieldRef,
+    unstableEndFieldRef: handleEndFieldRef
   });
   return enrichedFieldProps;
 };
@@ -144,7 +167,8 @@ var useSingleInputFieldSlotProps = function useSingleInputFieldSlotProps(_ref2)
     pickerSlots = _ref2.pickerSlots,
     pickerSlotProps = _ref2.pickerSlotProps,
     fieldProps = _ref2.fieldProps,
-    anchorRef = _ref2.anchorRef;
+    anchorRef = _ref2.anchorRef,
+    currentView = _ref2.currentView;
   var inputRef = React.useRef(null);
   var handleInputRef = useForkRef(inInputRef, inputRef);
   var handleFieldRef = useForkRef(fieldProps.unstableFieldRef, singleInputFieldRef);
@@ -154,7 +178,15 @@ var useSingleInputFieldSlotProps = function useSingleInputFieldSlotProps(_ref2)
       return;
     }
     (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
-  }, [rangePosition, open]);
+    if (!singleInputFieldRef.current || !currentView) {
+      return;
+    }
+    var sections = singleInputFieldRef.current.getSections().map(function (section) {
+      return 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]);
   var updateRangePosition = function updateRangePosition() {
     var _singleInputFieldRef$;
     if (!singleInputFieldRef.current || inputRef.current !== getActiveElement(document)) {

package/legacy/internals/hooks/useMobileRangePicker/useMobileRangePicker.js

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

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

@@ -1,14 +1,26 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { mergeDateAndTime } from '@mui/x-date-pickers/internals';
 export function calculateRangeChange(_ref) {
   var utils = _ref.utils,
     range = _ref.range,
     selectedDate = _ref.newDate,
     rangePosition = _ref.rangePosition,
     _ref$allowRangeFlip = _ref.allowRangeFlip,
-    allowRangeFlip = _ref$allowRangeFlip === void 0 ? false : _ref$allowRangeFlip;
+    allowRangeFlip = _ref$allowRangeFlip === void 0 ? false : _ref$allowRangeFlip,
+    _ref$shouldMergeDateA = _ref.shouldMergeDateAndTime,
+    shouldMergeDateAndTime = _ref$shouldMergeDateA === void 0 ? false : _ref$shouldMergeDateA;
   var _range = _slicedToArray(range, 2),
     start = _range[0],
     end = _range[1];
+  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') {
     var _truthyResult = allowRangeFlip ? {
       nextSelection: 'start',

package/legacy/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export var getReleaseInfo = function getReleaseInfo() {
-  var releaseInfo = "MTcwNDkyNzYwMDAwMA==";
+  var 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/legacy/internals/utils/valueManagers.js

@@ -64,7 +64,7 @@ export var rangeFieldValueManager = {
     }
     return [prevReferenceValue[1], value[1]];
   },
-  getSectionsFromValue: function getSectionsFromValue(utils, _ref2, fallbackSections, isRTL, getSectionsFromDate) {
+  getSectionsFromValue: function getSectionsFromValue(utils, _ref2, fallbackSections, localizedDigits, isRTL, getSectionsFromDate) {
     var _ref3 = _slicedToArray(_ref2, 2),
       start = _ref3[0],
       end = _ref3[1];
@@ -90,11 +90,11 @@ export var rangeFieldValueManager = {
         });
       });
     };
-    return addPositionPropertiesToSections([].concat(_toConsumableArray(getSections(start, separatedFallbackSections.startDate, 'start')), _toConsumableArray(getSections(end, separatedFallbackSections.endDate, 'end'))), isRTL);
+    return addPositionPropertiesToSections([].concat(_toConsumableArray(getSections(start, separatedFallbackSections.startDate, 'start')), _toConsumableArray(getSections(end, separatedFallbackSections.endDate, 'end'))), localizedDigits, isRTL);
   },
-  getValueStrFromSections: function getValueStrFromSections(sections, isRTL) {
+  getValueStrFromSections: function getValueStrFromSections(sections, localizedDigits, isRTL) {
     var dateRangeSections = splitDateRangeSections(sections);
-    return createDateStrForInputFromSections([].concat(_toConsumableArray(dateRangeSections.startDate), _toConsumableArray(dateRangeSections.endDate)), isRTL);
+    return createDateStrForInputFromSections([].concat(_toConsumableArray(dateRangeSections.startDate), _toConsumableArray(dateRangeSections.endDate)), localizedDigits, isRTL);
   },
   parseValueStr: function parseValueStr(valueStr, referenceValue, parseDate) {
     // TODO: Improve because it would not work if the date format has `–` as a separator.

package/legacy/locales/index.js

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

package/locales/index.d.ts

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

package/locales/index.js

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

package/locales/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/locales/index.js",
+  "types": "./index.d.ts"
+}

package/modern/DateRangeCalendar/DateRangeCalendar.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -12,7 +12,7 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { Watermark } from '@mui/x-license-pro';
 import { PickersCalendarHeader } from '@mui/x-date-pickers/PickersCalendarHeader';
-import { applyDefaultDate, DAY_MARGIN, DayCalendar, useDefaultReduceAnimations, PickersArrowSwitcher, useCalendarState, useDefaultDates, useLocaleText, useNextMonthDisabled, usePreviousMonthDisabled, useUtils, useNow, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, buildWarning, useControlledValueWithTimezone } from '@mui/x-date-pickers/internals';
+import { applyDefaultDate, DayCalendar, useDefaultReduceAnimations, PickersArrowSwitcher, useCalendarState, useDefaultDates, useLocaleText, useNextMonthDisabled, usePreviousMonthDisabled, useUtils, useNow, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, buildWarning, useControlledValueWithTimezone, useViews } from '@mui/x-date-pickers/internals';
 import { getReleaseInfo } from '../internals/utils/releaseInfo';
 import { dateRangeCalendarClasses, getDateRangeCalendarUtilityClass } from './dateRangeCalendarClasses';
 import { isEndOfRange, isRangeValid, isStartOfRange, isWithinRange } from '../internals/utils/date-utils';
@@ -21,6 +21,7 @@ import { DateRangePickerDay, dateRangePickerDayClasses as dayClasses } from '../
 import { rangeValueManager } from '../internals/utils/valueManagers';
 import { useDragRange } from './useDragRange';
 import { useRangePosition } from '../internals/hooks/useRangePosition';
+import { DAY_RANGE_SIZE, DAY_MARGIN } from '../internals/constants/dimensions';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const releaseInfo = getReleaseInfo();
@@ -49,7 +50,6 @@ const DateRangeCalendarArrowSwitcher = styled(PickersArrowSwitcher)({
   alignItems: 'center',
   justifyContent: 'space-between'
 });
-const DAY_RANGE_SIZE = 40;
 const weeksContainerHeight = (DAY_RANGE_SIZE + DAY_MARGIN * 2) * 6;
 const warnInvalidCurrentMonthCalendarPosition = 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 = styled(DayCalendar)(({
@@ -90,10 +90,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: applyDefaultDate(utils, themeProps.minDate, defaultDates.minDate),
     maxDate: 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 => {
@@ -155,7 +158,12 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       fixedWeekNumber,
       disableDragEditing,
       displayWeekNumber,
-      timezone: timezoneProp
+      timezone: timezoneProp,
+      availableRangePositions,
+      views,
+      view: inView,
+      openTo,
+      onViewChange
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
@@ -170,6 +178,17 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     onChange,
     valueManager: rangeValueManager
   });
+  const {
+    setValueAndGoToNextView,
+    view
+  } = useViews({
+    view: inView,
+    views,
+    openTo,
+    onChange: handleValueChange,
+    onViewChange,
+    autoFocus
+  });
   const utils = useUtils();
   const localeText = useLocaleText();
   const now = useNow(timezone);
@@ -195,11 +214,15 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       utils,
       range: value,
       rangePosition,
-      allowRangeFlip
+      allowRangeFlip,
+      shouldMergeDateAndTime: true
     });
-    onRangePositionChange(nextSelection);
+    const isNextSectionAvailable = availableRangePositions.includes(nextSelection);
+    if (isNextSectionAvailable) {
+      onRangePositionChange(nextSelection);
+    }
     const isFullRangeSelected = rangePosition === 'end' && isRangeValid(utils, newRange);
-    handleValueChange(newRange, isFullRangeSelected ? 'finish' : 'partial');
+    setValueAndGoToNextView(newRange, isFullRangeSelected || !isNextSectionAvailable ? 'finish' : 'partial', view);
   });
   const handleDrop = useEventCallback(newDate => {
     handleSelectedDayChange(newDate, undefined, true);
@@ -490,6 +513,14 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: PropTypes.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.arrayOf(PropTypes.oneOf(['end', 'start']).isRequired),
   /**
    * The number of calendars to render.
    * @default 2
@@ -560,6 +591,10 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    * @default undefined
    */
   fixedWeekNumber: PropTypes.number,
+  /**
+   * Controlled focused view.
+   */
+  focusedView: PropTypes.oneOf(['day']),
   /**
    * If `true`, calls `renderLoading` instead of rendering the day calendar.
    * Can be used to preload information and show it in calendar.
@@ -576,11 +611,20 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
   minDate: PropTypes.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.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.func,
   /**
    * Callback fired on month change.
    * @template TDate
@@ -592,6 +636,18 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    * @param {RangePosition} rangePosition The new range position.
    */
   onRangePositionChange: PropTypes.func,
+  /**
+   * Callback fired on view change.
+   * @template TView
+   * @param {TView} view The new view.
+   */
+  onViewChange: PropTypes.func,
+  /**
+   * The default visible view.
+   * Used when the component view is not controlled.
+   * Must be a valid option from `views` list.
+   */
+  openTo: PropTypes.oneOf(['day']),
   /**
    * The position in the currently edited date range.
    * Used when the component position is controlled.
@@ -666,6 +722,16 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    * The selected value.
    * Used when the component is controlled.
    */
-  value: PropTypes.arrayOf(PropTypes.any)
+  value: PropTypes.arrayOf(PropTypes.any),
+  /**
+   * The visible view.
+   * Used when the component view is controlled.
+   * Must be a valid option from `views` list.
+   */
+  view: PropTypes.oneOf(['day']),
+  /**
+   * Available views.
+   */
+  views: PropTypes.arrayOf(PropTypes.oneOf(['day']))
 } : void 0;
 export { DateRangeCalendar };

package/modern/DateRangePicker/DateRangePicker.js

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

package/modern/DateRangePicker/DateRangePickerToolbar.js

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