@mui/x-date-pickers-pro 5.0.0-alpha.0

package/modern/DateRangePicker/DateRangePickerView.js

@@ -0,0 +1,179 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["calendars", "className", "currentlySelectingRangeEnd", "date", "DateInputProps", "defaultCalendarMonth", "disableAutoMonthSwitching", "disableFuture", "disableHighlightToday", "disablePast", "endText", "isMobileKeyboardViewOpen", "maxDate", "minDate", "onDateChange", "onMonthChange", "open", "reduceAnimations", "setCurrentlySelectingRangeEnd", "shouldDisableDate", "showToolbar", "startText", "toggleMobileKeyboardView", "toolbarFormat", "toolbarTitle"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { Watermark } from '@mui/x-license-pro';
+import { useUtils, WrapperVariantContext, MobileKeyboardInputView, defaultReduceAnimations, useCalendarState } from '@mui/x-date-pickers/internals';
+import { isRangeValid } from '../internal/utils/date-utils';
+import { calculateRangeChange } from './date-range-manager';
+import { DateRangePickerToolbar } from './DateRangePickerToolbar';
+import { DateRangePickerViewMobile } from './DateRangePickerViewMobile';
+import { DateRangePickerInput } from './DateRangePickerInput';
+import { DateRangePickerViewDesktop } from './DateRangePickerViewDesktop';
+import { getReleaseInfo } from '../internal/utils/releaseInfo';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const releaseInfo = getReleaseInfo();
+
+/**
+ * @ignore - internal component.
+ */
+export function DateRangePickerView(props) {
+  const {
+    calendars,
+    className,
+    currentlySelectingRangeEnd,
+    date,
+    DateInputProps,
+    defaultCalendarMonth,
+    disableAutoMonthSwitching = false,
+    disableFuture,
+    disableHighlightToday,
+    disablePast,
+    endText,
+    isMobileKeyboardViewOpen,
+    maxDate,
+    minDate,
+    onDateChange,
+    onMonthChange,
+    open,
+    reduceAnimations = defaultReduceAnimations,
+    setCurrentlySelectingRangeEnd,
+    shouldDisableDate,
+    showToolbar,
+    startText,
+    toggleMobileKeyboardView,
+    toolbarFormat,
+    toolbarTitle
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const utils = useUtils();
+  const wrapperVariant = React.useContext(WrapperVariantContext);
+  const [start, end] = date;
+  const {
+    changeMonth,
+    calendarState,
+    isDateDisabled,
+    onMonthSwitchingAnimationEnd,
+    changeFocusedDay
+  } = useCalendarState({
+    date: start || end,
+    defaultCalendarMonth,
+    disableFuture,
+    disablePast,
+    disableSwitchToMonthOnDayFocus: true,
+    maxDate,
+    minDate,
+    onMonthChange,
+    reduceAnimations,
+    shouldDisableDate
+  });
+  const toShowToolbar = showToolbar ?? wrapperVariant !== 'desktop';
+
+  const scrollToDayIfNeeded = day => {
+    if (!day || !utils.isValid(day) || isDateDisabled(day)) {
+      return;
+    }
+
+    const currentlySelectedDate = currentlySelectingRangeEnd === 'start' ? start : end;
+
+    if (currentlySelectedDate === null) {
+      // do not scroll if one of ages is not selected
+      return;
+    }
+
+    const displayingMonthRange = wrapperVariant === 'mobile' ? 0 : calendars - 1;
+    const currentMonthNumber = utils.getMonth(calendarState.currentMonth);
+    const requestedMonthNumber = utils.getMonth(day);
+
+    if (!utils.isSameYear(calendarState.currentMonth, day) || requestedMonthNumber < currentMonthNumber || requestedMonthNumber > currentMonthNumber + displayingMonthRange) {
+      const newMonth = currentlySelectingRangeEnd === 'start' ? currentlySelectedDate : // If need to focus end, scroll to the state when "end" is displaying in the last calendar
+      utils.addMonths(currentlySelectedDate, -displayingMonthRange);
+      changeMonth(newMonth);
+    }
+  };
+
+  React.useEffect(() => {
+    if (disableAutoMonthSwitching || !open) {
+      return;
+    }
+
+    scrollToDayIfNeeded(currentlySelectingRangeEnd === 'start' ? start : end);
+  }, [currentlySelectingRangeEnd, date]); // eslint-disable-line
+
+  const handleChange = React.useCallback(newDate => {
+    const {
+      nextSelection,
+      newRange
+    } = calculateRangeChange({
+      newDate,
+      utils,
+      range: date,
+      currentlySelectingRangeEnd
+    });
+    setCurrentlySelectingRangeEnd(nextSelection);
+    const isFullRangeSelected = currentlySelectingRangeEnd === 'end' && isRangeValid(utils, newRange);
+    onDateChange(newRange, wrapperVariant, isFullRangeSelected ? 'finish' : 'partial');
+  }, [currentlySelectingRangeEnd, date, onDateChange, setCurrentlySelectingRangeEnd, utils, wrapperVariant]);
+
+  const renderView = () => {
+    const sharedCalendarProps = _extends({
+      date,
+      isDateDisabled,
+      changeFocusedDay,
+      onChange: handleChange,
+      reduceAnimations,
+      disableHighlightToday,
+      onMonthSwitchingAnimationEnd,
+      changeMonth,
+      currentlySelectingRangeEnd,
+      disableFuture,
+      disablePast,
+      minDate,
+      maxDate
+    }, calendarState, other);
+
+    switch (wrapperVariant) {
+      case 'desktop':
+        {
+          return /*#__PURE__*/_jsx(DateRangePickerViewDesktop, _extends({
+            calendars: calendars
+          }, sharedCalendarProps));
+        }
+
+      default:
+        {
+          return /*#__PURE__*/_jsx(DateRangePickerViewMobile, _extends({}, sharedCalendarProps));
+        }
+    }
+  };
+
+  return /*#__PURE__*/_jsxs("div", {
+    className: className,
+    children: [/*#__PURE__*/_jsx(Watermark, {
+      packageName: "x-date-pickers-pro",
+      releaseInfo: releaseInfo
+    }), toShowToolbar && /*#__PURE__*/_jsx(DateRangePickerToolbar, {
+      date: date,
+      isMobileKeyboardViewOpen: isMobileKeyboardViewOpen,
+      toggleMobileKeyboardView: toggleMobileKeyboardView,
+      currentlySelectingRangeEnd: currentlySelectingRangeEnd,
+      setCurrentlySelectingRangeEnd: setCurrentlySelectingRangeEnd,
+      startText: startText,
+      endText: endText,
+      toolbarTitle: toolbarTitle,
+      toolbarFormat: toolbarFormat
+    }), isMobileKeyboardViewOpen ? /*#__PURE__*/_jsx(MobileKeyboardInputView, {
+      children: /*#__PURE__*/_jsx(DateRangePickerInput, _extends({
+        disableOpenPicker: true,
+        ignoreInvalidInputs: true
+      }, DateInputProps))
+    }) : renderView()]
+  });
+}
+process.env.NODE_ENV !== "production" ? DateRangePickerView.propTypes = {
+  calendars: PropTypes.oneOf([1, 2, 3]),
+  disableAutoMonthSwitching: PropTypes.bool
+} : void 0;

package/modern/DateRangePicker/DateRangePickerViewDesktop.js

@@ -0,0 +1,154 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["calendars", "changeMonth", "components", "componentsProps", "currentlySelectingRangeEnd", "currentMonth", "date", "disableFuture", "disablePast", "leftArrowButtonText", "maxDate", "minDate", "onChange", "renderDay", "rightArrowButtonText"];
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { useDefaultDates, useUtils, PickersArrowSwitcher, usePreviousMonthDisabled, useNextMonthDisabled, DayPicker } from '@mui/x-date-pickers/internals';
+import { calculateRangePreview } from './date-range-manager';
+import { DateRangePickerDay } from '../DateRangePickerDay';
+import { isWithinRange, isStartOfRange, isEndOfRange } from '../internal/utils/date-utils';
+import { doNothing } from '../internal/utils/utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const DateRangePickerViewDesktopRoot = styled('div')({
+  display: 'flex',
+  flexDirection: 'row'
+});
+const DateRangePickerViewDesktopContainer = styled('div')(({
+  theme
+}) => ({
+  '&:not(:last-of-type)': {
+    borderRight: `2px solid ${theme.palette.divider}`
+  }
+}));
+const DateRangePickerViewDesktopCalendar = styled(DayPicker)({
+  minWidth: 312,
+  minHeight: 288
+});
+const DateRangePickerViewDesktopArrowSwitcher = styled(PickersArrowSwitcher)({
+  padding: '16px 16px 8px 16px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between'
+});
+
+function getCalendarsArray(calendars) {
+  switch (calendars) {
+    case 1:
+      return [0];
+
+    case 2:
+      return [0, 0];
+
+    case 3:
+      return [0, 0, 0];
+    // this will not work in IE11, but allows to support any amount of calendars
+
+    default:
+      return new Array(calendars).fill(0);
+  }
+}
+/**
+ * @ignore - internal component.
+ */
+
+
+export function DateRangePickerViewDesktop(props) {
+  const {
+    calendars,
+    changeMonth,
+    components,
+    componentsProps,
+    currentlySelectingRangeEnd,
+    currentMonth,
+    date,
+    disableFuture,
+    disablePast,
+    leftArrowButtonText = 'Previous month',
+    maxDate: maxDateProp,
+    minDate: minDateProp,
+    onChange,
+    renderDay = (_, dateRangeProps) => /*#__PURE__*/_jsx(DateRangePickerDay, _extends({}, dateRangeProps)),
+    rightArrowButtonText = 'Next month'
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const utils = useUtils();
+  const defaultDates = useDefaultDates();
+  const minDate = minDateProp ?? defaultDates.minDate;
+  const maxDate = maxDateProp ?? defaultDates.maxDate;
+  const [rangePreviewDay, setRangePreviewDay] = React.useState(null);
+  const isNextMonthDisabled = useNextMonthDisabled(currentMonth, {
+    disableFuture,
+    maxDate
+  });
+  const isPreviousMonthDisabled = usePreviousMonthDisabled(currentMonth, {
+    disablePast,
+    minDate
+  });
+  const previewingRange = calculateRangePreview({
+    utils,
+    range: date,
+    newDate: rangePreviewDay,
+    currentlySelectingRangeEnd
+  });
+  const handleDayChange = React.useCallback(day => {
+    setRangePreviewDay(null);
+    onChange(day);
+  }, [onChange]);
+
+  const handlePreviewDayChange = newPreviewRequest => {
+    if (!isWithinRange(utils, newPreviewRequest, date)) {
+      setRangePreviewDay(newPreviewRequest);
+    } else {
+      setRangePreviewDay(null);
+    }
+  };
+
+  const CalendarTransitionProps = React.useMemo(() => ({
+    onMouseLeave: () => setRangePreviewDay(null)
+  }), []);
+  const selectNextMonth = React.useCallback(() => {
+    changeMonth(utils.getNextMonth(currentMonth));
+  }, [changeMonth, currentMonth, utils]);
+  const selectPreviousMonth = React.useCallback(() => {
+    changeMonth(utils.getPreviousMonth(currentMonth));
+  }, [changeMonth, currentMonth, utils]);
+  return /*#__PURE__*/_jsx(DateRangePickerViewDesktopRoot, {
+    children: getCalendarsArray(calendars).map((_, index) => {
+      const monthOnIteration = utils.setMonth(currentMonth, utils.getMonth(currentMonth) + index);
+      return /*#__PURE__*/_jsxs(DateRangePickerViewDesktopContainer, {
+        children: [/*#__PURE__*/_jsx(DateRangePickerViewDesktopArrowSwitcher, {
+          onLeftClick: selectPreviousMonth,
+          onRightClick: selectNextMonth,
+          isLeftHidden: index !== 0,
+          isRightHidden: index !== calendars - 1,
+          isLeftDisabled: isPreviousMonthDisabled,
+          isRightDisabled: isNextMonthDisabled,
+          leftArrowButtonText: leftArrowButtonText,
+          components: components,
+          componentsProps: componentsProps,
+          rightArrowButtonText: rightArrowButtonText,
+          children: utils.format(monthOnIteration, 'monthAndYear')
+        }), /*#__PURE__*/_createElement(DateRangePickerViewDesktopCalendar, _extends({}, other, {
+          key: index,
+          date: date,
+          onFocusedDayChange: doNothing,
+          onChange: handleDayChange,
+          currentMonth: monthOnIteration,
+          TransitionProps: CalendarTransitionProps,
+          renderDay: (day, __, DayProps) => renderDay(day, _extends({
+            isPreviewing: isWithinRange(utils, day, previewingRange),
+            isStartOfPreviewing: isStartOfRange(utils, day, previewingRange),
+            isEndOfPreviewing: isEndOfRange(utils, day, previewingRange),
+            isHighlighting: isWithinRange(utils, day, date),
+            isStartOfHighlighting: isStartOfRange(utils, day, date),
+            isEndOfHighlighting: isEndOfRange(utils, day, date),
+            onMouseEnter: () => handlePreviewDayChange(day)
+          }, DayProps))
+        }))]
+      }, index);
+    })
+  });
+}

package/modern/DateRangePicker/DateRangePickerViewMobile.js

@@ -0,0 +1,60 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["changeMonth", "components", "componentsProps", "date", "leftArrowButtonText", "maxDate", "minDate", "onChange", "renderDay", "rightArrowButtonText"];
+import * as React from 'react';
+import { PickersCalendarHeader, useDefaultDates, useUtils, DayPicker } from '@mui/x-date-pickers/internals';
+import { doNothing } from '../internal/utils/utils';
+import { DateRangePickerDay } from '../DateRangePickerDay';
+import { isWithinRange, isStartOfRange, isEndOfRange } from '../internal/utils/date-utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const onlyDayView = ['day'];
+/**
+ * @ignore - internal component.
+ */
+
+export function DateRangePickerViewMobile(props) {
+  const {
+    changeMonth,
+    components,
+    componentsProps,
+    date,
+    leftArrowButtonText,
+    maxDate: maxDateProp,
+    minDate: minDateProp,
+    onChange,
+    renderDay = (_, dayProps) => /*#__PURE__*/_jsx(DateRangePickerDay, _extends({}, dayProps)),
+    rightArrowButtonText
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const utils = useUtils();
+  const defaultDates = useDefaultDates();
+  const minDate = minDateProp ?? defaultDates.minDate;
+  const maxDate = maxDateProp ?? defaultDates.maxDate;
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(PickersCalendarHeader, _extends({
+      components: components,
+      componentsProps: componentsProps,
+      leftArrowButtonText: leftArrowButtonText,
+      maxDate: maxDate,
+      minDate: minDate,
+      onMonthChange: changeMonth,
+      openView: "day",
+      rightArrowButtonText: rightArrowButtonText,
+      views: onlyDayView
+    }, other)), /*#__PURE__*/_jsx(DayPicker, _extends({}, other, {
+      date: date,
+      onChange: onChange,
+      onFocusedDayChange: doNothing,
+      renderDay: (day, _, DayProps) => renderDay(day, _extends({
+        isPreviewing: false,
+        isStartOfPreviewing: false,
+        isEndOfPreviewing: false,
+        isHighlighting: isWithinRange(utils, day, date),
+        isStartOfHighlighting: isStartOfRange(utils, day, date),
+        isEndOfHighlighting: isEndOfRange(utils, day, date)
+      }, DayProps))
+    }))]
+  });
+}

package/modern/DateRangePicker/date-range-manager.js

@@ -0,0 +1,43 @@
+export function calculateRangeChange({
+  utils,
+  range,
+  newDate: selectedDate,
+  currentlySelectingRangeEnd
+}) {
+  const [start, end] = range;
+
+  if (currentlySelectingRangeEnd === 'start') {
+    return Boolean(end) && utils.isAfter(selectedDate, end) ? {
+      nextSelection: 'end',
+      newRange: [selectedDate, null]
+    } : {
+      nextSelection: 'end',
+      newRange: [selectedDate, end]
+    };
+  }
+
+  return Boolean(start) && utils.isBefore(selectedDate, start) ? {
+    nextSelection: 'end',
+    newRange: [selectedDate, null]
+  } : {
+    nextSelection: 'start',
+    newRange: [start, selectedDate]
+  };
+}
+export function calculateRangePreview(options) {
+  if (!options.newDate) {
+    return [null, null];
+  }
+
+  const [start, end] = options.range;
+  const {
+    newRange
+  } = calculateRangeChange(options);
+
+  if (!start || !end) {
+    return newRange;
+  }
+
+  const [previewStart, previewEnd] = newRange;
+  return options.currentlySelectingRangeEnd === 'end' ? [end, previewEnd] : [previewStart, start];
+}

package/modern/DateRangePicker/index.js

@@ -0,0 +1 @@
+export { DateRangePicker } from './DateRangePicker';