@birdnet/advanced-react-dates 0.0.0-stage → 1.0.0

package/lib/components/DayPicker.js

@@ -0,0 +1,1175 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = exports["default"] = exports.PureDayPicker = void 0;
+var _enzymeShallowEqual = _interopRequireDefault(require("enzyme-shallow-equal"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _airbnbPropTypes = require("airbnb-prop-types");
+var _reactWithStyles = require("react-with-styles");
+var _moment = _interopRequireDefault(require("moment"));
+var _throttle = _interopRequireDefault(require("lodash/throttle"));
+var _isTouchDevice = _interopRequireDefault(require("is-touch-device"));
+var _reactOutsideClickHandler = _interopRequireDefault(require("react-outside-click-handler"));
+var _defaultPhrases = require("../defaultPhrases");
+var _getPhrasePropTypes = _interopRequireDefault(require("../utils/getPhrasePropTypes"));
+var _noflip = _interopRequireDefault(require("../utils/noflip"));
+var _CalendarMonthGrid = _interopRequireDefault(require("./CalendarMonthGrid"));
+var _DayPickerNavigation = _interopRequireDefault(require("./DayPickerNavigation"));
+var _DayPickerKeyboardShortcuts = _interopRequireWildcard(require("./DayPickerKeyboardShortcuts"));
+var _getNumberOfCalendarMonthWeeks = _interopRequireDefault(require("../utils/getNumberOfCalendarMonthWeeks"));
+var _getCalendarMonthWidth = _interopRequireDefault(require("../utils/getCalendarMonthWidth"));
+var _calculateDimension = _interopRequireDefault(require("../utils/calculateDimension"));
+var _getActiveElement = _interopRequireDefault(require("../utils/getActiveElement"));
+var _isDayVisible = _interopRequireDefault(require("../utils/isDayVisible"));
+var _isSameMonth = _interopRequireDefault(require("../utils/isSameMonth"));
+var _ModifiersShape = _interopRequireDefault(require("../shapes/ModifiersShape"));
+var _NavPositionShape = _interopRequireDefault(require("../shapes/NavPositionShape"));
+var _ScrollableOrientationShape = _interopRequireDefault(require("../shapes/ScrollableOrientationShape"));
+var _DayOfWeekShape = _interopRequireDefault(require("../shapes/DayOfWeekShape"));
+var _CalendarInfoPositionShape = _interopRequireDefault(require("../shapes/CalendarInfoPositionShape"));
+var _constants = require("../constants");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var MONTH_PADDING = 23;
+var PREV_TRANSITION = 'prev';
+var NEXT_TRANSITION = 'next';
+var MONTH_SELECTION_TRANSITION = 'month_selection';
+var YEAR_SELECTION_TRANSITION = 'year_selection';
+var PREV_NAV = 'prev_nav';
+var NEXT_NAV = 'next_nav';
+var propTypes = process.env.NODE_ENV !== "production" ? (0, _airbnbPropTypes.forbidExtraProps)(_objectSpread(_objectSpread({}, _reactWithStyles.withStylesPropTypes), {}, {
+  // calendar presentation props
+  enableOutsideDays: _propTypes["default"].bool,
+  numberOfMonths: _propTypes["default"].number,
+  orientation: _ScrollableOrientationShape["default"],
+  withPortal: _propTypes["default"].bool,
+  onOutsideClick: _propTypes["default"].func,
+  hidden: _propTypes["default"].bool,
+  initialVisibleMonth: _propTypes["default"].func,
+  firstDayOfWeek: _DayOfWeekShape["default"],
+  renderCalendarInfo: _propTypes["default"].func,
+  calendarInfoPosition: _CalendarInfoPositionShape["default"],
+  hideKeyboardShortcutsPanel: _propTypes["default"].bool,
+  daySize: _airbnbPropTypes.nonNegativeInteger,
+  isRTL: _propTypes["default"].bool,
+  verticalHeight: _airbnbPropTypes.nonNegativeInteger,
+  noBorder: _propTypes["default"].bool,
+  transitionDuration: _airbnbPropTypes.nonNegativeInteger,
+  verticalBorderSpacing: _airbnbPropTypes.nonNegativeInteger,
+  horizontalMonthPadding: _airbnbPropTypes.nonNegativeInteger,
+  renderKeyboardShortcutsButton: _propTypes["default"].func,
+  renderKeyboardShortcutsPanel: _propTypes["default"].func,
+  // navigation props
+  dayPickerNavigationInlineStyles: _propTypes["default"].object,
+  disablePrev: _propTypes["default"].bool,
+  disableNext: _propTypes["default"].bool,
+  navPosition: _NavPositionShape["default"],
+  navPrev: _propTypes["default"].node,
+  navNext: _propTypes["default"].node,
+  renderNavPrevButton: _propTypes["default"].func,
+  renderNavNextButton: _propTypes["default"].func,
+  noNavButtons: _propTypes["default"].bool,
+  noNavNextButton: _propTypes["default"].bool,
+  noNavPrevButton: _propTypes["default"].bool,
+  onPrevMonthClick: _propTypes["default"].func,
+  onNextMonthClick: _propTypes["default"].func,
+  onMonthChange: _propTypes["default"].func,
+  onYearChange: _propTypes["default"].func,
+  onGetNextScrollableMonths: _propTypes["default"].func,
+  // VERTICAL_SCROLLABLE daypickers only
+  onGetPrevScrollableMonths: _propTypes["default"].func,
+  // VERTICAL_SCROLLABLE daypickers only
+
+  // month props
+  renderMonthText: (0, _airbnbPropTypes.mutuallyExclusiveProps)(_propTypes["default"].func, 'renderMonthText', 'renderMonthElement'),
+  renderMonthElement: (0, _airbnbPropTypes.mutuallyExclusiveProps)(_propTypes["default"].func, 'renderMonthText', 'renderMonthElement'),
+  renderWeekHeaderElement: _propTypes["default"].func,
+  // day props
+  modifiers: _propTypes["default"].objectOf(_propTypes["default"].objectOf(_ModifiersShape["default"])),
+  renderCalendarDay: _propTypes["default"].func,
+  renderDayContents: _propTypes["default"].func,
+  onDayClick: _propTypes["default"].func,
+  onDayMouseEnter: _propTypes["default"].func,
+  onDayMouseLeave: _propTypes["default"].func,
+  // accessibility props
+  isFocused: _propTypes["default"].bool,
+  getFirstFocusableDay: _propTypes["default"].func,
+  onBlur: _propTypes["default"].func,
+  showKeyboardShortcuts: _propTypes["default"].bool,
+  onTab: _propTypes["default"].func,
+  onShiftTab: _propTypes["default"].func,
+  // internationalization
+  monthFormat: _propTypes["default"].string,
+  weekDayFormat: _propTypes["default"].string,
+  phrases: _propTypes["default"].shape((0, _getPhrasePropTypes["default"])(_defaultPhrases.DayPickerPhrases)),
+  dayAriaLabelFormat: _propTypes["default"].string
+})) : {};
+var defaultProps = exports.defaultProps = {
+  // calendar presentation props
+  enableOutsideDays: false,
+  numberOfMonths: 2,
+  orientation: _constants.HORIZONTAL_ORIENTATION,
+  withPortal: false,
+  onOutsideClick: function onOutsideClick() {},
+  hidden: false,
+  initialVisibleMonth: function initialVisibleMonth() {
+    return (0, _moment["default"])();
+  },
+  firstDayOfWeek: null,
+  renderCalendarInfo: null,
+  calendarInfoPosition: _constants.INFO_POSITION_BOTTOM,
+  hideKeyboardShortcutsPanel: false,
+  daySize: _constants.DAY_SIZE,
+  isRTL: false,
+  verticalHeight: null,
+  noBorder: false,
+  transitionDuration: undefined,
+  verticalBorderSpacing: undefined,
+  horizontalMonthPadding: 13,
+  renderKeyboardShortcutsButton: undefined,
+  renderKeyboardShortcutsPanel: undefined,
+  // navigation props
+  dayPickerNavigationInlineStyles: null,
+  disablePrev: false,
+  disableNext: false,
+  navPosition: _constants.NAV_POSITION_TOP,
+  navPrev: null,
+  navNext: null,
+  renderNavPrevButton: null,
+  renderNavNextButton: null,
+  noNavButtons: false,
+  noNavNextButton: false,
+  noNavPrevButton: false,
+  onPrevMonthClick: function onPrevMonthClick() {},
+  onNextMonthClick: function onNextMonthClick() {},
+  onMonthChange: function onMonthChange() {},
+  onYearChange: function onYearChange() {},
+  onGetNextScrollableMonths: function onGetNextScrollableMonths() {},
+  onGetPrevScrollableMonths: function onGetPrevScrollableMonths() {},
+  // month props
+  renderMonthText: null,
+  renderMonthElement: null,
+  renderWeekHeaderElement: null,
+  // day props
+  modifiers: {},
+  renderCalendarDay: undefined,
+  renderDayContents: null,
+  onDayClick: function onDayClick() {},
+  onDayMouseEnter: function onDayMouseEnter() {},
+  onDayMouseLeave: function onDayMouseLeave() {},
+  // accessibility props
+  isFocused: false,
+  getFirstFocusableDay: null,
+  onBlur: function onBlur() {},
+  showKeyboardShortcuts: false,
+  onTab: function onTab() {},
+  onShiftTab: function onShiftTab() {},
+  // internationalization
+  monthFormat: 'MMMM YYYY',
+  weekDayFormat: 'dd',
+  phrases: _defaultPhrases.DayPickerPhrases,
+  dayAriaLabelFormat: undefined
+};
+var DayPicker = exports.PureDayPicker = /*#__PURE__*/function (_ref2, _ref) {
+  function DayPicker(props) {
+    var _this;
+    _this = _ref2.call(this, props) || this;
+    var currentMonth = props.hidden ? (0, _moment["default"])() : props.initialVisibleMonth();
+    var focusedDate = currentMonth.clone().startOf('month').hour(12);
+    if (props.getFirstFocusableDay) {
+      focusedDate = props.getFirstFocusableDay(currentMonth);
+    }
+    var horizontalMonthPadding = props.horizontalMonthPadding;
+    var translationValue = props.isRTL && _this.isHorizontal() ? -(0, _getCalendarMonthWidth["default"])(props.daySize, horizontalMonthPadding) : 0;
+    _this.hasSetInitialVisibleMonth = !props.hidden;
+    _this.state = {
+      currentMonth: currentMonth,
+      monthTransition: null,
+      translationValue: translationValue,
+      scrollableMonthMultiple: 1,
+      calendarMonthWidth: (0, _getCalendarMonthWidth["default"])(props.daySize, horizontalMonthPadding),
+      focusedDate: !props.hidden || props.isFocused ? focusedDate : null,
+      nextFocusedDate: null,
+      showKeyboardShortcuts: props.showKeyboardShortcuts,
+      onKeyboardShortcutsPanelClose: function onKeyboardShortcutsPanelClose() {},
+      isTouchDevice: (0, _isTouchDevice["default"])(),
+      withMouseInteractions: true,
+      calendarInfoWidth: 0,
+      monthTitleHeight: null,
+      hasSetHeight: false
+    };
+    _this.setCalendarMonthWeeks(currentMonth);
+    _this.calendarMonthGridHeight = 0;
+    _this.setCalendarInfoWidthTimeout = null;
+    _this.setCalendarMonthGridHeightTimeout = null;
+    _this.onKeyDown = _this.onKeyDown.bind(_this);
+    _this.throttledKeyDown = (0, _throttle["default"])(_this.onFinalKeyDown, 200, {
+      trailing: false
+    });
+    _this.onPrevMonthClick = _this.onPrevMonthClick.bind(_this);
+    _this.onPrevMonthTransition = _this.onPrevMonthTransition.bind(_this);
+    _this.onNextMonthClick = _this.onNextMonthClick.bind(_this);
+    _this.onNextMonthTransition = _this.onNextMonthTransition.bind(_this);
+    _this.onMonthChange = _this.onMonthChange.bind(_this);
+    _this.onYearChange = _this.onYearChange.bind(_this);
+    _this.getNextScrollableMonths = _this.getNextScrollableMonths.bind(_this);
+    _this.getPrevScrollableMonths = _this.getPrevScrollableMonths.bind(_this);
+    _this.updateStateAfterMonthTransition = _this.updateStateAfterMonthTransition.bind(_this);
+    _this.openKeyboardShortcutsPanel = _this.openKeyboardShortcutsPanel.bind(_this);
+    _this.closeKeyboardShortcutsPanel = _this.closeKeyboardShortcutsPanel.bind(_this);
+    _this.setCalendarInfoRef = _this.setCalendarInfoRef.bind(_this);
+    _this.setContainerRef = _this.setContainerRef.bind(_this);
+    _this.setTransitionContainerRef = _this.setTransitionContainerRef.bind(_this);
+    _this.setMonthTitleHeight = _this.setMonthTitleHeight.bind(_this);
+    return _this;
+  }
+  (0, _inheritsLoose2["default"])(DayPicker, _ref2);
+  var _proto = DayPicker.prototype;
+  _proto[_ref] = function (nextProps, nextState) {
+    return !(0, _enzymeShallowEqual["default"])(this.props, nextProps) || !(0, _enzymeShallowEqual["default"])(this.state, nextState);
+  };
+  _proto.componentDidMount = function componentDidMount() {
+    var currentMonth = this.state.currentMonth;
+    var calendarInfoWidth = this.calendarInfo ? (0, _calculateDimension["default"])(this.calendarInfo, 'width', true, true) : 0;
+    this.setState({
+      isTouchDevice: (0, _isTouchDevice["default"])(),
+      calendarInfoWidth: calendarInfoWidth
+    });
+    this.setCalendarMonthWeeks(currentMonth);
+  };
+  _proto.getSnapshotBeforeUpdate = function getSnapshotBeforeUpdate(prevProps, prevState) {
+    var orientation = this.props.orientation;
+    var currentMonth = this.state.currentMonth;
+
+    // Capture the scroll position before the DOM is updated so that, when previous
+    // months are rendered above the current month, we can restore scroll afterwards
+    // (in componentDidUpdate) and keep the previous current month in view. This used
+    // to live in componentWillReceiveProps; getSnapshotBeforeUpdate is the supported
+    // place to read layout right before a commit.
+    if (orientation === _constants.VERTICAL_SCROLLABLE && this.transitionContainer && !(0, _isSameMonth["default"])(prevState.currentMonth, currentMonth)) {
+      return this.transitionContainer.scrollHeight - this.transitionContainer.scrollTop;
+    }
+    return null;
+  };
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState, snapshot) {
+    var _this2 = this;
+    var _this$props = this.props,
+      hidden = _this$props.hidden,
+      isFocused = _this$props.isFocused,
+      showKeyboardShortcuts = _this$props.showKeyboardShortcuts,
+      onBlur = _this$props.onBlur,
+      orientation = _this$props.orientation,
+      renderMonthText = _this$props.renderMonthText,
+      horizontalMonthPadding = _this$props.horizontalMonthPadding,
+      daySize = _this$props.daySize,
+      numberOfMonths = _this$props.numberOfMonths,
+      transitionDuration = _this$props.transitionDuration,
+      initialVisibleMonth = _this$props.initialVisibleMonth;
+    var _this$state = this.state,
+      currentMonth = _this$state.currentMonth,
+      focusedDate = _this$state.focusedDate,
+      monthTitleHeight = _this$state.monthTitleHeight;
+
+    // ----- migrated from componentWillReceiveProps -----
+    // Only re-sync the visible month in response to a props change (a new props
+    // object from the parent), never on our own setState-driven updates, otherwise
+    // internal state changes (e.g. hover) would call initialVisibleMonth() and could
+    // snap the calendar back to that month.
+    if (prevProps !== this.props && !hidden) {
+      if (!this.hasSetInitialVisibleMonth) {
+        this.hasSetInitialVisibleMonth = true;
+        this.setState({
+          currentMonth: initialVisibleMonth()
+        });
+      } else {
+        var newDate = initialVisibleMonth();
+        if (!(0, _isDayVisible["default"])(newDate, currentMonth, numberOfMonths)) {
+          this.onMonthChange(newDate);
+        }
+      }
+    }
+    if (daySize !== prevProps.daySize) {
+      this.setState({
+        calendarMonthWidth: (0, _getCalendarMonthWidth["default"])(daySize, horizontalMonthPadding)
+      });
+    }
+
+    // Track the focusedDate that this update produces so the container-focus check
+    // below sees the same value componentWillReceiveProps used to set before render.
+    var focusedDateAfterUpdate = focusedDate;
+    if (isFocused !== prevProps.isFocused) {
+      if (isFocused) {
+        var newFocusedDate = this.getFocusedDay(currentMonth);
+        var onKeyboardShortcutsPanelClose = this.state.onKeyboardShortcutsPanelClose;
+        if (showKeyboardShortcuts) {
+          // the ? shortcut came from the input and we should return input there once it is close
+          onKeyboardShortcutsPanelClose = onBlur;
+        }
+        this.setState({
+          showKeyboardShortcuts: showKeyboardShortcuts,
+          onKeyboardShortcutsPanelClose: onKeyboardShortcutsPanelClose,
+          focusedDate: newFocusedDate,
+          withMouseInteractions: false
+        });
+        focusedDateAfterUpdate = newFocusedDate;
+      } else {
+        this.setState({
+          focusedDate: null
+        });
+        focusedDateAfterUpdate = null;
+      }
+    }
+    if (renderMonthText !== null && prevProps.renderMonthText !== null && renderMonthText(currentMonth) !== prevProps.renderMonthText(currentMonth)) {
+      this.setState({
+        monthTitleHeight: null
+      });
+    }
+
+    // ----- migrated from componentWillUpdate -----
+    // Calculating the dimensions triggers a DOM repaint which breaks the CSS
+    // transition. The setTimeout waits until the transition ends.
+    if (this.calendarInfo) {
+      this.setCalendarInfoWidthTimeout = setTimeout(function () {
+        var calendarInfoWidth = _this2.state.calendarInfoWidth;
+        var calendarInfoPanelWidth = (0, _calculateDimension["default"])(_this2.calendarInfo, 'width', true, true);
+        if (calendarInfoWidth !== calendarInfoPanelWidth) {
+          _this2.setState({
+            calendarInfoWidth: calendarInfoPanelWidth
+          });
+        }
+      }, transitionDuration);
+    }
+
+    // ----- existing componentDidUpdate behaviour -----
+    var shouldAdjustHeight = false;
+    if (numberOfMonths !== prevProps.numberOfMonths) {
+      this.setCalendarMonthWeeks(currentMonth);
+      shouldAdjustHeight = true;
+    }
+    if (this.isHorizontal() && (orientation !== prevProps.orientation || daySize !== prevProps.daySize)) {
+      shouldAdjustHeight = true;
+    }
+    if (shouldAdjustHeight) {
+      var visibleCalendarWeeks = this.calendarMonthWeeks.slice(1, numberOfMonths + 1);
+      var calendarMonthWeeksHeight = Math.max.apply(Math, [0].concat((0, _toConsumableArray2["default"])(visibleCalendarWeeks))) * (daySize - 1);
+      var newMonthHeight = monthTitleHeight + calendarMonthWeeksHeight + 1;
+      this.adjustDayPickerHeight(newMonthHeight);
+    }
+    if (!prevProps.isFocused && isFocused && !focusedDateAfterUpdate) {
+      this.container.focus();
+    }
+
+    // If orientation is VERTICAL_SCROLLABLE and currentMonth has changed adjust scrollTop so the
+    // new months rendered above the current month don't push the current month out of view.
+    if (orientation === _constants.VERTICAL_SCROLLABLE && snapshot != null && this.transitionContainer) {
+      this.transitionContainer.scrollTop = this.transitionContainer.scrollHeight - snapshot;
+    }
+  };
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    clearTimeout(this.setCalendarInfoWidthTimeout);
+    clearTimeout(this.setCalendarMonthGridHeightTimeout);
+  };
+  _proto.onKeyDown = function onKeyDown(e) {
+    e.stopPropagation();
+    if (!_constants.MODIFIER_KEY_NAMES.has(e.key)) {
+      this.throttledKeyDown(e);
+    }
+  };
+  _proto.onFinalKeyDown = function onFinalKeyDown(e) {
+    this.setState({
+      withMouseInteractions: false
+    });
+    var _this$props2 = this.props,
+      onBlur = _this$props2.onBlur,
+      onTab = _this$props2.onTab,
+      onShiftTab = _this$props2.onShiftTab,
+      isRTL = _this$props2.isRTL;
+    var _this$state2 = this.state,
+      focusedDate = _this$state2.focusedDate,
+      showKeyboardShortcuts = _this$state2.showKeyboardShortcuts;
+    if (!focusedDate) return;
+    var newFocusedDate = focusedDate.clone();
+    var didTransitionMonth = false;
+
+    // focus might be anywhere when the keyboard shortcuts panel is opened so we want to
+    // return it to wherever it was before when the panel was opened
+    var activeElement = (0, _getActiveElement["default"])();
+    var onKeyboardShortcutsPanelClose = function onKeyboardShortcutsPanelClose() {
+      if (activeElement) activeElement.focus();
+    };
+    switch (e.key) {
+      case 'ArrowUp':
+        e.preventDefault();
+        newFocusedDate.subtract(1, 'week');
+        didTransitionMonth = this.maybeTransitionPrevMonth(newFocusedDate);
+        break;
+      case 'ArrowLeft':
+        e.preventDefault();
+        if (isRTL) {
+          newFocusedDate.add(1, 'day');
+          didTransitionMonth = this.maybeTransitionNextMonth(newFocusedDate);
+        } else {
+          newFocusedDate.subtract(1, 'day');
+          didTransitionMonth = this.maybeTransitionPrevMonth(newFocusedDate);
+        }
+        break;
+      case 'Home':
+        e.preventDefault();
+        newFocusedDate.startOf('week').hour(12);
+        didTransitionMonth = this.maybeTransitionPrevMonth(newFocusedDate);
+        break;
+      case 'PageUp':
+        e.preventDefault();
+        newFocusedDate.subtract(1, 'month');
+        didTransitionMonth = this.maybeTransitionPrevMonth(newFocusedDate);
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        newFocusedDate.add(1, 'week');
+        didTransitionMonth = this.maybeTransitionNextMonth(newFocusedDate);
+        break;
+      case 'ArrowRight':
+        e.preventDefault();
+        if (isRTL) {
+          newFocusedDate.subtract(1, 'day');
+          didTransitionMonth = this.maybeTransitionPrevMonth(newFocusedDate);
+        } else {
+          newFocusedDate.add(1, 'day');
+          didTransitionMonth = this.maybeTransitionNextMonth(newFocusedDate);
+        }
+        break;
+      case 'End':
+        e.preventDefault();
+        newFocusedDate.endOf('week');
+        didTransitionMonth = this.maybeTransitionNextMonth(newFocusedDate);
+        break;
+      case 'PageDown':
+        e.preventDefault();
+        newFocusedDate.add(1, 'month');
+        didTransitionMonth = this.maybeTransitionNextMonth(newFocusedDate);
+        break;
+      case '?':
+        this.openKeyboardShortcutsPanel(onKeyboardShortcutsPanelClose);
+        break;
+      case 'Escape':
+        if (showKeyboardShortcuts) {
+          this.closeKeyboardShortcutsPanel();
+        } else {
+          onBlur(e);
+        }
+        break;
+      case 'Tab':
+        if (e.shiftKey) {
+          onShiftTab();
+        } else {
+          onTab(e);
+        }
+        break;
+      default:
+        break;
+    }
+
+    // If there was a month transition, do not update the focused date until the transition has
+    // completed. Otherwise, attempting to focus on a DOM node may interrupt the CSS animation. If
+    // didTransitionMonth is true, the focusedDate gets updated in #updateStateAfterMonthTransition
+    if (!didTransitionMonth) {
+      this.setState({
+        focusedDate: newFocusedDate
+      });
+    }
+  };
+  _proto.onPrevMonthClick = function onPrevMonthClick(e) {
+    if (e) e.preventDefault();
+    this.onPrevMonthTransition();
+  };
+  _proto.onPrevMonthTransition = function onPrevMonthTransition(nextFocusedDate) {
+    var _this$props3 = this.props,
+      daySize = _this$props3.daySize,
+      isRTL = _this$props3.isRTL,
+      numberOfMonths = _this$props3.numberOfMonths;
+    var _this$state3 = this.state,
+      calendarMonthWidth = _this$state3.calendarMonthWidth,
+      monthTitleHeight = _this$state3.monthTitleHeight;
+    var translationValue;
+    if (this.isVertical()) {
+      var calendarMonthWeeksHeight = this.calendarMonthWeeks[0] * (daySize - 1);
+      translationValue = monthTitleHeight + calendarMonthWeeksHeight + 1;
+    } else if (this.isHorizontal()) {
+      translationValue = calendarMonthWidth;
+      if (isRTL) {
+        translationValue = -2 * calendarMonthWidth;
+      }
+      var visibleCalendarWeeks = this.calendarMonthWeeks.slice(0, numberOfMonths);
+      var _calendarMonthWeeksHeight = Math.max.apply(Math, [0].concat((0, _toConsumableArray2["default"])(visibleCalendarWeeks))) * (daySize - 1);
+      var newMonthHeight = monthTitleHeight + _calendarMonthWeeksHeight + 1;
+      this.adjustDayPickerHeight(newMonthHeight);
+    }
+    this.setState({
+      monthTransition: PREV_TRANSITION,
+      translationValue: translationValue,
+      focusedDate: null,
+      nextFocusedDate: nextFocusedDate
+    });
+  };
+  _proto.onMonthChange = function onMonthChange(currentMonth) {
+    this.setCalendarMonthWeeks(currentMonth);
+    this.calculateAndSetDayPickerHeight();
+
+    // Translation value is a hack to force an invisible transition that
+    // properly rerenders the CalendarMonthGrid
+    this.setState({
+      monthTransition: MONTH_SELECTION_TRANSITION,
+      translationValue: 0.00001,
+      focusedDate: null,
+      nextFocusedDate: currentMonth,
+      currentMonth: currentMonth
+    });
+  };
+  _proto.onYearChange = function onYearChange(currentMonth) {
+    this.setCalendarMonthWeeks(currentMonth);
+    this.calculateAndSetDayPickerHeight();
+
+    // Translation value is a hack to force an invisible transition that
+    // properly rerenders the CalendarMonthGrid
+    this.setState({
+      monthTransition: YEAR_SELECTION_TRANSITION,
+      translationValue: 0.0001,
+      focusedDate: null,
+      nextFocusedDate: currentMonth,
+      currentMonth: currentMonth
+    });
+  };
+  _proto.onNextMonthClick = function onNextMonthClick(e) {
+    if (e) e.preventDefault();
+    this.onNextMonthTransition();
+  };
+  _proto.onNextMonthTransition = function onNextMonthTransition(nextFocusedDate) {
+    var _this$props4 = this.props,
+      isRTL = _this$props4.isRTL,
+      numberOfMonths = _this$props4.numberOfMonths,
+      daySize = _this$props4.daySize;
+    var _this$state4 = this.state,
+      calendarMonthWidth = _this$state4.calendarMonthWidth,
+      monthTitleHeight = _this$state4.monthTitleHeight;
+    var translationValue;
+    if (this.isVertical()) {
+      var firstVisibleMonthWeeks = this.calendarMonthWeeks[1];
+      var calendarMonthWeeksHeight = firstVisibleMonthWeeks * (daySize - 1);
+      translationValue = -(monthTitleHeight + calendarMonthWeeksHeight + 1);
+    }
+    if (this.isHorizontal()) {
+      translationValue = -calendarMonthWidth;
+      if (isRTL) {
+        translationValue = 0;
+      }
+      var visibleCalendarWeeks = this.calendarMonthWeeks.slice(2, numberOfMonths + 2);
+      var _calendarMonthWeeksHeight2 = Math.max.apply(Math, [0].concat((0, _toConsumableArray2["default"])(visibleCalendarWeeks))) * (daySize - 1);
+      var newMonthHeight = monthTitleHeight + _calendarMonthWeeksHeight2 + 1;
+      this.adjustDayPickerHeight(newMonthHeight);
+    }
+    this.setState({
+      monthTransition: NEXT_TRANSITION,
+      translationValue: translationValue,
+      focusedDate: null,
+      nextFocusedDate: nextFocusedDate
+    });
+  };
+  _proto.getFirstDayOfWeek = function getFirstDayOfWeek() {
+    var firstDayOfWeek = this.props.firstDayOfWeek;
+    if (firstDayOfWeek == null) {
+      return _moment["default"].localeData().firstDayOfWeek();
+    }
+    return firstDayOfWeek;
+  };
+  _proto.getWeekHeaders = function getWeekHeaders() {
+    var weekDayFormat = this.props.weekDayFormat;
+    var currentMonth = this.state.currentMonth;
+    var firstDayOfWeek = this.getFirstDayOfWeek();
+    var weekHeaders = [];
+    for (var i = 0; i < 7; i += 1) {
+      weekHeaders.push(currentMonth.clone().day((i + firstDayOfWeek) % 7).format(weekDayFormat));
+    }
+    return weekHeaders;
+  };
+  _proto.getFirstVisibleIndex = function getFirstVisibleIndex() {
+    var orientation = this.props.orientation;
+    var monthTransition = this.state.monthTransition;
+    if (orientation === _constants.VERTICAL_SCROLLABLE) return 0;
+    var firstVisibleMonthIndex = 1;
+    if (monthTransition === PREV_TRANSITION) {
+      firstVisibleMonthIndex -= 1;
+    } else if (monthTransition === NEXT_TRANSITION) {
+      firstVisibleMonthIndex += 1;
+    }
+    return firstVisibleMonthIndex;
+  };
+  _proto.getFocusedDay = function getFocusedDay(newMonth) {
+    var _this$props5 = this.props,
+      getFirstFocusableDay = _this$props5.getFirstFocusableDay,
+      numberOfMonths = _this$props5.numberOfMonths;
+    var focusedDate;
+    if (getFirstFocusableDay) {
+      focusedDate = getFirstFocusableDay(newMonth);
+    }
+    if (newMonth && (!focusedDate || !(0, _isDayVisible["default"])(focusedDate, newMonth, numberOfMonths))) {
+      focusedDate = newMonth.clone().startOf('month').hour(12);
+    }
+    return focusedDate;
+  };
+  _proto.setMonthTitleHeight = function setMonthTitleHeight(monthTitleHeight) {
+    var _this3 = this;
+    this.setState({
+      monthTitleHeight: monthTitleHeight
+    }, function () {
+      _this3.calculateAndSetDayPickerHeight();
+    });
+  };
+  _proto.setCalendarMonthWeeks = function setCalendarMonthWeeks(currentMonth) {
+    var numberOfMonths = this.props.numberOfMonths;
+    this.calendarMonthWeeks = [];
+    var month = currentMonth.clone().subtract(1, 'months');
+    var firstDayOfWeek = this.getFirstDayOfWeek();
+    for (var i = 0; i < numberOfMonths + 2; i += 1) {
+      var numberOfWeeks = (0, _getNumberOfCalendarMonthWeeks["default"])(month, firstDayOfWeek);
+      this.calendarMonthWeeks.push(numberOfWeeks);
+      month = month.add(1, 'months');
+    }
+  };
+  _proto.setContainerRef = function setContainerRef(ref) {
+    this.container = ref;
+  };
+  _proto.setCalendarInfoRef = function setCalendarInfoRef(ref) {
+    this.calendarInfo = ref;
+  };
+  _proto.setTransitionContainerRef = function setTransitionContainerRef(ref) {
+    this.transitionContainer = ref;
+  };
+  _proto.getNextScrollableMonths = function getNextScrollableMonths(e) {
+    var onGetNextScrollableMonths = this.props.onGetNextScrollableMonths;
+    if (e) e.preventDefault();
+    if (onGetNextScrollableMonths) onGetNextScrollableMonths(e);
+    this.setState(function (_ref3) {
+      var scrollableMonthMultiple = _ref3.scrollableMonthMultiple;
+      return {
+        scrollableMonthMultiple: scrollableMonthMultiple + 1
+      };
+    });
+  };
+  _proto.getPrevScrollableMonths = function getPrevScrollableMonths(e) {
+    var _this$props6 = this.props,
+      numberOfMonths = _this$props6.numberOfMonths,
+      onGetPrevScrollableMonths = _this$props6.onGetPrevScrollableMonths;
+    if (e) e.preventDefault();
+    if (onGetPrevScrollableMonths) onGetPrevScrollableMonths(e);
+    this.setState(function (_ref4) {
+      var currentMonth = _ref4.currentMonth,
+        scrollableMonthMultiple = _ref4.scrollableMonthMultiple;
+      return {
+        currentMonth: currentMonth.clone().subtract(numberOfMonths, 'month'),
+        scrollableMonthMultiple: scrollableMonthMultiple + 1
+      };
+    });
+  };
+  _proto.maybeTransitionNextMonth = function maybeTransitionNextMonth(newFocusedDate) {
+    var numberOfMonths = this.props.numberOfMonths;
+    var _this$state5 = this.state,
+      currentMonth = _this$state5.currentMonth,
+      focusedDate = _this$state5.focusedDate;
+    var newFocusedDateMonth = newFocusedDate.month();
+    var focusedDateMonth = focusedDate.month();
+    var isNewFocusedDateVisible = (0, _isDayVisible["default"])(newFocusedDate, currentMonth, numberOfMonths);
+    if (newFocusedDateMonth !== focusedDateMonth && !isNewFocusedDateVisible) {
+      this.onNextMonthTransition(newFocusedDate);
+      return true;
+    }
+    return false;
+  };
+  _proto.maybeTransitionPrevMonth = function maybeTransitionPrevMonth(newFocusedDate) {
+    var numberOfMonths = this.props.numberOfMonths;
+    var _this$state6 = this.state,
+      currentMonth = _this$state6.currentMonth,
+      focusedDate = _this$state6.focusedDate;
+    var newFocusedDateMonth = newFocusedDate.month();
+    var focusedDateMonth = focusedDate.month();
+    var isNewFocusedDateVisible = (0, _isDayVisible["default"])(newFocusedDate, currentMonth, numberOfMonths);
+    if (newFocusedDateMonth !== focusedDateMonth && !isNewFocusedDateVisible) {
+      this.onPrevMonthTransition(newFocusedDate);
+      return true;
+    }
+    return false;
+  };
+  _proto.isHorizontal = function isHorizontal() {
+    var orientation = this.props.orientation;
+    return orientation === _constants.HORIZONTAL_ORIENTATION;
+  };
+  _proto.isVertical = function isVertical() {
+    var orientation = this.props.orientation;
+    return orientation === _constants.VERTICAL_ORIENTATION || orientation === _constants.VERTICAL_SCROLLABLE;
+  };
+  _proto.updateStateAfterMonthTransition = function updateStateAfterMonthTransition() {
+    var _this4 = this;
+    var _this$props7 = this.props,
+      onPrevMonthClick = _this$props7.onPrevMonthClick,
+      onNextMonthClick = _this$props7.onNextMonthClick,
+      numberOfMonths = _this$props7.numberOfMonths,
+      onMonthChange = _this$props7.onMonthChange,
+      onYearChange = _this$props7.onYearChange,
+      isRTL = _this$props7.isRTL;
+    var _this$state7 = this.state,
+      currentMonth = _this$state7.currentMonth,
+      monthTransition = _this$state7.monthTransition,
+      focusedDate = _this$state7.focusedDate,
+      nextFocusedDate = _this$state7.nextFocusedDate,
+      withMouseInteractions = _this$state7.withMouseInteractions,
+      calendarMonthWidth = _this$state7.calendarMonthWidth;
+    if (!monthTransition) return;
+    var newMonth = currentMonth.clone();
+    var firstDayOfWeek = this.getFirstDayOfWeek();
+    if (monthTransition === PREV_TRANSITION) {
+      newMonth.subtract(1, 'month');
+      if (onPrevMonthClick) onPrevMonthClick(newMonth);
+      var newInvisibleMonth = newMonth.clone().subtract(1, 'month');
+      var numberOfWeeks = (0, _getNumberOfCalendarMonthWeeks["default"])(newInvisibleMonth, firstDayOfWeek);
+      this.calendarMonthWeeks = [numberOfWeeks].concat((0, _toConsumableArray2["default"])(this.calendarMonthWeeks.slice(0, -1)));
+    } else if (monthTransition === NEXT_TRANSITION) {
+      newMonth.add(1, 'month');
+      if (onNextMonthClick) onNextMonthClick(newMonth);
+      var _newInvisibleMonth = newMonth.clone().add(numberOfMonths, 'month');
+      var _numberOfWeeks = (0, _getNumberOfCalendarMonthWeeks["default"])(_newInvisibleMonth, firstDayOfWeek);
+      this.calendarMonthWeeks = [].concat((0, _toConsumableArray2["default"])(this.calendarMonthWeeks.slice(1)), [_numberOfWeeks]);
+    } else if (monthTransition === MONTH_SELECTION_TRANSITION) {
+      if (onMonthChange) onMonthChange(newMonth);
+    } else if (monthTransition === YEAR_SELECTION_TRANSITION) {
+      if (onYearChange) onYearChange(newMonth);
+    }
+    var newFocusedDate = null;
+    if (nextFocusedDate) {
+      newFocusedDate = nextFocusedDate;
+    } else if (!focusedDate && !withMouseInteractions) {
+      newFocusedDate = this.getFocusedDay(newMonth);
+    }
+    this.setState({
+      currentMonth: newMonth,
+      monthTransition: null,
+      translationValue: isRTL && this.isHorizontal() ? -calendarMonthWidth : 0,
+      nextFocusedDate: null,
+      focusedDate: newFocusedDate
+    }, function () {
+      // we don't want to focus on the relevant calendar day after a month transition
+      // if the user is navigating around using a mouse
+      if (withMouseInteractions) {
+        var activeElement = (0, _getActiveElement["default"])();
+        if (activeElement && activeElement !== document.body && _this4.container.contains(activeElement) && activeElement.blur) {
+          activeElement.blur();
+        }
+      }
+    });
+  };
+  _proto.adjustDayPickerHeight = function adjustDayPickerHeight(newMonthHeight) {
+    var _this5 = this;
+    var monthHeight = newMonthHeight + MONTH_PADDING;
+    if (monthHeight !== this.calendarMonthGridHeight) {
+      this.transitionContainer.style.height = "".concat(monthHeight, "px");
+      if (!this.calendarMonthGridHeight) {
+        this.setCalendarMonthGridHeightTimeout = setTimeout(function () {
+          _this5.setState({
+            hasSetHeight: true
+          });
+        }, 0);
+      }
+      this.calendarMonthGridHeight = monthHeight;
+    }
+  };
+  _proto.calculateAndSetDayPickerHeight = function calculateAndSetDayPickerHeight() {
+    var _this$props8 = this.props,
+      daySize = _this$props8.daySize,
+      numberOfMonths = _this$props8.numberOfMonths;
+    var monthTitleHeight = this.state.monthTitleHeight;
+    var visibleCalendarWeeks = this.calendarMonthWeeks.slice(1, numberOfMonths + 1);
+    var calendarMonthWeeksHeight = Math.max.apply(Math, [0].concat((0, _toConsumableArray2["default"])(visibleCalendarWeeks))) * (daySize - 1);
+    var newMonthHeight = monthTitleHeight + calendarMonthWeeksHeight + 1;
+    if (this.isHorizontal()) {
+      this.adjustDayPickerHeight(newMonthHeight);
+    }
+  };
+  _proto.openKeyboardShortcutsPanel = function openKeyboardShortcutsPanel(onCloseCallBack) {
+    this.setState({
+      showKeyboardShortcuts: true,
+      onKeyboardShortcutsPanelClose: onCloseCallBack
+    });
+  };
+  _proto.closeKeyboardShortcutsPanel = function closeKeyboardShortcutsPanel() {
+    var onKeyboardShortcutsPanelClose = this.state.onKeyboardShortcutsPanelClose;
+    if (onKeyboardShortcutsPanelClose) {
+      onKeyboardShortcutsPanelClose();
+    }
+    this.setState({
+      onKeyboardShortcutsPanelClose: null,
+      showKeyboardShortcuts: false
+    });
+  };
+  _proto.renderNavigation = function renderNavigation(navDirection) {
+    var _this$props9 = this.props,
+      dayPickerNavigationInlineStyles = _this$props9.dayPickerNavigationInlineStyles,
+      disablePrev = _this$props9.disablePrev,
+      disableNext = _this$props9.disableNext,
+      navPosition = _this$props9.navPosition,
+      navPrev = _this$props9.navPrev,
+      navNext = _this$props9.navNext,
+      noNavButtons = _this$props9.noNavButtons,
+      noNavNextButton = _this$props9.noNavNextButton,
+      noNavPrevButton = _this$props9.noNavPrevButton,
+      orientation = _this$props9.orientation,
+      phrases = _this$props9.phrases,
+      renderNavPrevButton = _this$props9.renderNavPrevButton,
+      renderNavNextButton = _this$props9.renderNavNextButton,
+      isRTL = _this$props9.isRTL;
+    if (noNavButtons) {
+      return null;
+    }
+    var onPrevMonthClick = orientation === _constants.VERTICAL_SCROLLABLE ? this.getPrevScrollableMonths : this.onPrevMonthClick;
+    var onNextMonthClick = orientation === _constants.VERTICAL_SCROLLABLE ? this.getNextScrollableMonths : this.onNextMonthClick;
+    return /*#__PURE__*/_react["default"].createElement(_DayPickerNavigation["default"], {
+      disablePrev: disablePrev,
+      disableNext: disableNext,
+      inlineStyles: dayPickerNavigationInlineStyles,
+      onPrevMonthClick: onPrevMonthClick,
+      onNextMonthClick: onNextMonthClick,
+      navPosition: navPosition,
+      navPrev: navPrev,
+      navNext: navNext,
+      renderNavPrevButton: renderNavPrevButton,
+      renderNavNextButton: renderNavNextButton,
+      orientation: orientation,
+      phrases: phrases,
+      isRTL: isRTL,
+      showNavNextButton: !(noNavNextButton || orientation === _constants.VERTICAL_SCROLLABLE && navDirection === PREV_NAV),
+      showNavPrevButton: !(noNavPrevButton || orientation === _constants.VERTICAL_SCROLLABLE && navDirection === NEXT_NAV)
+    });
+  };
+  _proto.renderWeekHeader = function renderWeekHeader(index) {
+    var _this$props0 = this.props,
+      daySize = _this$props0.daySize,
+      horizontalMonthPadding = _this$props0.horizontalMonthPadding,
+      orientation = _this$props0.orientation,
+      renderWeekHeaderElement = _this$props0.renderWeekHeaderElement,
+      css = _this$props0.css,
+      styles = _this$props0.styles;
+    var calendarMonthWidth = this.state.calendarMonthWidth;
+    var verticalScrollable = orientation === _constants.VERTICAL_SCROLLABLE;
+    var horizontalStyle = {
+      left: index * calendarMonthWidth
+    };
+    var verticalStyle = {
+      marginLeft: -calendarMonthWidth / 2
+    };
+    var weekHeaderStyle = {}; // no styles applied to the vertical-scrollable orientation
+    if (this.isHorizontal()) {
+      weekHeaderStyle = horizontalStyle;
+    } else if (this.isVertical() && !verticalScrollable) {
+      weekHeaderStyle = verticalStyle;
+    }
+    var weekHeaders = this.getWeekHeaders();
+    var header = weekHeaders.map(function (day) {
+      return /*#__PURE__*/_react["default"].createElement("li", (0, _extends2["default"])({
+        key: day
+      }, css(styles.DayPicker_weekHeader_li, {
+        width: daySize
+      })), renderWeekHeaderElement ? renderWeekHeaderElement(day) : /*#__PURE__*/_react["default"].createElement("small", null, day));
+    });
+    return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, css(styles.DayPicker_weekHeader, this.isVertical() && styles.DayPicker_weekHeader__vertical, verticalScrollable && styles.DayPicker_weekHeader__verticalScrollable, weekHeaderStyle, {
+      padding: "0 ".concat(horizontalMonthPadding, "px")
+    }), {
+      key: "week-".concat(index)
+    }), /*#__PURE__*/_react["default"].createElement("ul", css(styles.DayPicker_weekHeader_ul), header));
+  };
+  _proto.render = function render() {
+    var _this6 = this;
+    var _this$state8 = this.state,
+      calendarMonthWidth = _this$state8.calendarMonthWidth,
+      currentMonth = _this$state8.currentMonth,
+      monthTransition = _this$state8.monthTransition,
+      translationValue = _this$state8.translationValue,
+      scrollableMonthMultiple = _this$state8.scrollableMonthMultiple,
+      focusedDate = _this$state8.focusedDate,
+      showKeyboardShortcuts = _this$state8.showKeyboardShortcuts,
+      isTouch = _this$state8.isTouchDevice,
+      hasSetHeight = _this$state8.hasSetHeight,
+      calendarInfoWidth = _this$state8.calendarInfoWidth,
+      monthTitleHeight = _this$state8.monthTitleHeight;
+    var _this$props1 = this.props,
+      enableOutsideDays = _this$props1.enableOutsideDays,
+      numberOfMonths = _this$props1.numberOfMonths,
+      orientation = _this$props1.orientation,
+      modifiers = _this$props1.modifiers,
+      withPortal = _this$props1.withPortal,
+      onDayClick = _this$props1.onDayClick,
+      onDayMouseEnter = _this$props1.onDayMouseEnter,
+      onDayMouseLeave = _this$props1.onDayMouseLeave,
+      firstDayOfWeek = _this$props1.firstDayOfWeek,
+      renderMonthText = _this$props1.renderMonthText,
+      renderCalendarDay = _this$props1.renderCalendarDay,
+      renderDayContents = _this$props1.renderDayContents,
+      renderCalendarInfo = _this$props1.renderCalendarInfo,
+      renderMonthElement = _this$props1.renderMonthElement,
+      renderKeyboardShortcutsButton = _this$props1.renderKeyboardShortcutsButton,
+      renderKeyboardShortcutsPanel = _this$props1.renderKeyboardShortcutsPanel,
+      calendarInfoPosition = _this$props1.calendarInfoPosition,
+      hideKeyboardShortcutsPanel = _this$props1.hideKeyboardShortcutsPanel,
+      onOutsideClick = _this$props1.onOutsideClick,
+      monthFormat = _this$props1.monthFormat,
+      daySize = _this$props1.daySize,
+      isFocused = _this$props1.isFocused,
+      isRTL = _this$props1.isRTL,
+      css = _this$props1.css,
+      styles = _this$props1.styles,
+      theme = _this$props1.theme,
+      phrases = _this$props1.phrases,
+      verticalHeight = _this$props1.verticalHeight,
+      dayAriaLabelFormat = _this$props1.dayAriaLabelFormat,
+      noBorder = _this$props1.noBorder,
+      transitionDuration = _this$props1.transitionDuration,
+      verticalBorderSpacing = _this$props1.verticalBorderSpacing,
+      horizontalMonthPadding = _this$props1.horizontalMonthPadding,
+      navPosition = _this$props1.navPosition;
+    var dayPickerHorizontalPadding = theme.reactDates.spacing.dayPickerHorizontalPadding;
+    var isHorizontal = this.isHorizontal();
+    var numOfWeekHeaders = this.isVertical() ? 1 : numberOfMonths;
+    var weekHeaders = [];
+    for (var i = 0; i < numOfWeekHeaders; i += 1) {
+      weekHeaders.push(this.renderWeekHeader(i));
+    }
+    var verticalScrollable = orientation === _constants.VERTICAL_SCROLLABLE;
+    var height;
+    if (isHorizontal) {
+      height = this.calendarMonthGridHeight;
+    } else if (this.isVertical() && !verticalScrollable && !withPortal) {
+      // If the user doesn't set a desired height,
+      // we default back to this kind of made-up value that generally looks good
+      height = verticalHeight || 1.75 * calendarMonthWidth;
+    }
+    var isCalendarMonthGridAnimating = monthTransition !== null;
+    var shouldFocusDate = !isCalendarMonthGridAnimating && isFocused;
+    var keyboardShortcutButtonLocation = _DayPickerKeyboardShortcuts.BOTTOM_RIGHT;
+    if (this.isVertical()) {
+      keyboardShortcutButtonLocation = withPortal ? _DayPickerKeyboardShortcuts.TOP_LEFT : _DayPickerKeyboardShortcuts.TOP_RIGHT;
+    }
+    var shouldAnimateHeight = isHorizontal && hasSetHeight;
+    var calendarInfoPositionTop = calendarInfoPosition === _constants.INFO_POSITION_TOP;
+    var calendarInfoPositionBottom = calendarInfoPosition === _constants.INFO_POSITION_BOTTOM;
+    var calendarInfoPositionBefore = calendarInfoPosition === _constants.INFO_POSITION_BEFORE;
+    var calendarInfoPositionAfter = calendarInfoPosition === _constants.INFO_POSITION_AFTER;
+    var calendarInfoIsInline = calendarInfoPositionBefore || calendarInfoPositionAfter;
+    var calendarInfo = renderCalendarInfo && /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+      ref: this.setCalendarInfoRef
+    }, css(calendarInfoIsInline && styles.DayPicker_calendarInfo__horizontal)), renderCalendarInfo());
+    var calendarInfoPanelWidth = renderCalendarInfo && calendarInfoIsInline ? calendarInfoWidth : 0;
+    var firstVisibleMonthIndex = this.getFirstVisibleIndex();
+    var wrapperHorizontalWidth = calendarMonthWidth * numberOfMonths + 2 * dayPickerHorizontalPadding;
+    // Adding `1px` because of whitespace between 2 inline-block
+    var fullHorizontalWidth = wrapperHorizontalWidth + calendarInfoPanelWidth + 1;
+    var transitionContainerStyle = {
+      width: isHorizontal && wrapperHorizontalWidth,
+      height: height
+    };
+    var dayPickerWrapperStyle = {
+      width: isHorizontal && wrapperHorizontalWidth
+    };
+    var dayPickerStyle = {
+      width: isHorizontal && fullHorizontalWidth,
+      // These values are to center the datepicker (approximately) on the page
+      marginLeft: isHorizontal && withPortal ? -fullHorizontalWidth / 2 : null,
+      marginTop: isHorizontal && withPortal ? -calendarMonthWidth / 2 : null
+    };
+    return /*#__PURE__*/_react["default"].createElement("div", css(styles.DayPicker, isHorizontal && styles.DayPicker__horizontal, verticalScrollable && styles.DayPicker__verticalScrollable, isHorizontal && withPortal && styles.DayPicker_portal__horizontal, this.isVertical() && withPortal && styles.DayPicker_portal__vertical, dayPickerStyle, !monthTitleHeight && styles.DayPicker__hidden, !noBorder && styles.DayPicker__withBorder), /*#__PURE__*/_react["default"].createElement(_reactOutsideClickHandler["default"], {
+      onOutsideClick: onOutsideClick
+    }, (calendarInfoPositionTop || calendarInfoPositionBefore) && calendarInfo, /*#__PURE__*/_react["default"].createElement("div", css(dayPickerWrapperStyle, calendarInfoIsInline && isHorizontal && styles.DayPicker_wrapper__horizontal), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, css(styles.DayPicker_weekHeaders, isHorizontal && styles.DayPicker_weekHeaders__horizontal), {
+      "aria-hidden": "true",
+      role: "presentation"
+    }), weekHeaders), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, css(styles.DayPicker_focusRegion), {
+      ref: this.setContainerRef,
+      onClick: function onClick(e) {
+        e.stopPropagation();
+      },
+      onKeyDown: this.onKeyDown,
+      onMouseUp: function onMouseUp() {
+        _this6.setState({
+          withMouseInteractions: true
+        });
+      },
+      tabIndex: -1,
+      role: "application",
+      "aria-roledescription": phrases.roleDescription,
+      "aria-label": phrases.calendarLabel
+    }), !verticalScrollable && navPosition === _constants.NAV_POSITION_TOP && this.renderNavigation(), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, css(styles.DayPicker_transitionContainer, shouldAnimateHeight && styles.DayPicker_transitionContainer__horizontal, this.isVertical() && styles.DayPicker_transitionContainer__vertical, verticalScrollable && styles.DayPicker_transitionContainer__verticalScrollable, transitionContainerStyle), {
+      ref: this.setTransitionContainerRef
+    }), verticalScrollable && this.renderNavigation(PREV_NAV), /*#__PURE__*/_react["default"].createElement(_CalendarMonthGrid["default"], {
+      setMonthTitleHeight: !monthTitleHeight ? this.setMonthTitleHeight : undefined,
+      translationValue: translationValue,
+      enableOutsideDays: enableOutsideDays,
+      firstVisibleMonthIndex: firstVisibleMonthIndex,
+      initialMonth: currentMonth,
+      isAnimating: isCalendarMonthGridAnimating,
+      modifiers: modifiers,
+      orientation: orientation,
+      numberOfMonths: numberOfMonths * scrollableMonthMultiple,
+      onDayClick: onDayClick,
+      onDayMouseEnter: onDayMouseEnter,
+      onDayMouseLeave: onDayMouseLeave,
+      onMonthChange: this.onMonthChange,
+      onYearChange: this.onYearChange,
+      renderMonthText: renderMonthText,
+      renderCalendarDay: renderCalendarDay,
+      renderDayContents: renderDayContents,
+      renderMonthElement: renderMonthElement,
+      onMonthTransitionEnd: this.updateStateAfterMonthTransition,
+      monthFormat: monthFormat,
+      daySize: daySize,
+      firstDayOfWeek: firstDayOfWeek,
+      isFocused: shouldFocusDate,
+      focusedDate: focusedDate,
+      phrases: phrases,
+      isRTL: isRTL,
+      dayAriaLabelFormat: dayAriaLabelFormat,
+      transitionDuration: transitionDuration,
+      verticalBorderSpacing: verticalBorderSpacing,
+      horizontalMonthPadding: horizontalMonthPadding
+    }), verticalScrollable && this.renderNavigation(NEXT_NAV)), !verticalScrollable && navPosition === _constants.NAV_POSITION_BOTTOM && this.renderNavigation(), !isTouch && !hideKeyboardShortcutsPanel && /*#__PURE__*/_react["default"].createElement(_DayPickerKeyboardShortcuts["default"], {
+      block: this.isVertical() && !withPortal,
+      buttonLocation: keyboardShortcutButtonLocation,
+      showKeyboardShortcutsPanel: showKeyboardShortcuts,
+      openKeyboardShortcutsPanel: this.openKeyboardShortcutsPanel,
+      closeKeyboardShortcutsPanel: this.closeKeyboardShortcutsPanel,
+      phrases: phrases,
+      renderKeyboardShortcutsButton: renderKeyboardShortcutsButton,
+      renderKeyboardShortcutsPanel: renderKeyboardShortcutsPanel
+    }))), (calendarInfoPositionBottom || calendarInfoPositionAfter) && calendarInfo));
+  };
+  return DayPicker;
+}(_react["default"].PureComponent || _react["default"].Component, !_react["default"].PureComponent && "shouldComponentUpdate");
+DayPicker.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
+DayPicker.defaultProps = defaultProps;
+var _default = exports["default"] = (0, _reactWithStyles.withStyles)(function (_ref5) {
+  var _ref5$reactDates = _ref5.reactDates,
+    color = _ref5$reactDates.color,
+    font = _ref5$reactDates.font,
+    noScrollBarOnVerticalScrollable = _ref5$reactDates.noScrollBarOnVerticalScrollable,
+    spacing = _ref5$reactDates.spacing,
+    zIndex = _ref5$reactDates.zIndex;
+  return {
+    DayPicker: {
+      background: color.background,
+      position: 'relative',
+      textAlign: (0, _noflip["default"])('left')
+    },
+    DayPicker__horizontal: {
+      background: color.background
+    },
+    DayPicker__verticalScrollable: {
+      height: '100%'
+    },
+    DayPicker__hidden: {
+      visibility: 'hidden'
+    },
+    DayPicker__withBorder: {
+      boxShadow: (0, _noflip["default"])('0 2px 6px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.07)'),
+      borderRadius: 3
+    },
+    DayPicker_portal__horizontal: {
+      boxShadow: 'none',
+      position: 'absolute',
+      left: (0, _noflip["default"])('50%'),
+      top: '50%'
+    },
+    DayPicker_portal__vertical: {
+      position: 'initial'
+    },
+    DayPicker_focusRegion: {
+      outline: 'none'
+    },
+    DayPicker_calendarInfo__horizontal: {
+      display: 'inline-block',
+      verticalAlign: 'top'
+    },
+    DayPicker_wrapper__horizontal: {
+      display: 'inline-block',
+      verticalAlign: 'top'
+    },
+    DayPicker_weekHeaders: {
+      position: 'relative'
+    },
+    DayPicker_weekHeaders__horizontal: {
+      marginLeft: (0, _noflip["default"])(spacing.dayPickerHorizontalPadding)
+    },
+    DayPicker_weekHeader: {
+      color: color.placeholderText,
+      position: 'absolute',
+      top: 62,
+      zIndex: zIndex + 2,
+      textAlign: (0, _noflip["default"])('left')
+    },
+    DayPicker_weekHeader__vertical: {
+      left: (0, _noflip["default"])('50%')
+    },
+    DayPicker_weekHeader__verticalScrollable: {
+      top: 0,
+      display: 'table-row',
+      borderBottom: "1px solid ".concat(color.core.border),
+      background: color.background,
+      marginLeft: (0, _noflip["default"])(0),
+      left: (0, _noflip["default"])(0),
+      width: '100%',
+      textAlign: 'center'
+    },
+    DayPicker_weekHeader_ul: {
+      listStyle: 'none',
+      margin: '1px 0',
+      paddingLeft: (0, _noflip["default"])(0),
+      paddingRight: (0, _noflip["default"])(0),
+      fontSize: font.size
+    },
+    DayPicker_weekHeader_li: {
+      display: 'inline-block',
+      textAlign: 'center'
+    },
+    DayPicker_transitionContainer: {
+      position: 'relative',
+      overflow: 'hidden',
+      borderRadius: 3
+    },
+    DayPicker_transitionContainer__horizontal: {
+      transition: 'height 0.2s ease-in-out'
+    },
+    DayPicker_transitionContainer__vertical: {
+      width: '100%'
+    },
+    DayPicker_transitionContainer__verticalScrollable: _objectSpread({
+      paddingTop: 20,
+      height: '100%',
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      right: (0, _noflip["default"])(0),
+      left: (0, _noflip["default"])(0),
+      overflowY: 'scroll'
+    }, noScrollBarOnVerticalScrollable && {
+      '-webkitOverflowScrolling': 'touch',
+      '::-webkit-scrollbar': {
+        '-webkit-appearance': 'none',
+        display: 'none'
+      }
+    })
+  };
+}, {
+  pureComponent: typeof _react["default"].PureComponent !== 'undefined'
+})(DayPicker);