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

package/esm/components/CalendarDay.js

@@ -0,0 +1,321 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _readOnlyError from "@babel/runtime/helpers/esm/readOnlyError";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import shallowEqual from "enzyme-shallow-equal";
+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) { _defineProperty(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; }
+import React from 'react';
+import PropTypes from 'prop-types';
+import momentPropTypes from 'react-moment-proptypes';
+import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
+import { withStyles, withStylesPropTypes } from 'react-with-styles';
+import moment from 'moment';
+import raf from 'raf';
+import { CalendarDayPhrases } from '../defaultPhrases';
+import getPhrasePropTypes from '../utils/getPhrasePropTypes';
+import getCalendarDaySettings from '../utils/getCalendarDaySettings';
+import ModifiersShape from '../shapes/ModifiersShape';
+import { DAY_SIZE } from '../constants';
+var propTypes = process.env.NODE_ENV !== "production" ? forbidExtraProps(_objectSpread(_objectSpread({}, withStylesPropTypes), {}, {
+  day: momentPropTypes.momentObj,
+  daySize: nonNegativeInteger,
+  isOutsideDay: PropTypes.bool,
+  modifiers: ModifiersShape,
+  isFocused: PropTypes.bool,
+  tabIndex: PropTypes.oneOf([0, -1]),
+  onDayClick: PropTypes.func,
+  onDayMouseEnter: PropTypes.func,
+  onDayMouseLeave: PropTypes.func,
+  renderDayContents: PropTypes.func,
+  ariaLabelFormat: PropTypes.string,
+  // internationalization
+  phrases: PropTypes.shape(getPhrasePropTypes(CalendarDayPhrases))
+})) : {};
+var defaultProps = {
+  day: moment(),
+  daySize: DAY_SIZE,
+  isOutsideDay: false,
+  modifiers: new Set(),
+  isFocused: false,
+  tabIndex: -1,
+  onDayClick: function onDayClick() {},
+  onDayMouseEnter: function onDayMouseEnter() {},
+  onDayMouseLeave: function onDayMouseLeave() {},
+  renderDayContents: null,
+  ariaLabelFormat: 'dddd, LL',
+  // internationalization
+  phrases: CalendarDayPhrases
+};
+var CalendarDay = /*#__PURE__*/function (_ref2, _ref) {
+  function CalendarDay() {
+    var _this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _ref2.call.apply(_ref2, [this].concat(args)) || this;
+    _this.setButtonRef = _this.setButtonRef.bind(_this);
+    return _this;
+  }
+  _inheritsLoose(CalendarDay, _ref2);
+  var _proto = CalendarDay.prototype;
+  _proto[_ref] = function (nextProps, nextState) {
+    return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState);
+  };
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    var _this2 = this;
+    var _this$props = this.props,
+      isFocused = _this$props.isFocused,
+      tabIndex = _this$props.tabIndex;
+    if (tabIndex === 0) {
+      if (isFocused || tabIndex !== prevProps.tabIndex) {
+        raf(function () {
+          if (_this2.buttonRef) {
+            _this2.buttonRef.focus();
+          }
+        });
+      }
+    }
+  };
+  _proto.onDayClick = function onDayClick(day, e) {
+    var onDayClick = this.props.onDayClick;
+    onDayClick(day, e);
+  };
+  _proto.onDayMouseEnter = function onDayMouseEnter(day, e) {
+    var onDayMouseEnter = this.props.onDayMouseEnter;
+    onDayMouseEnter(day, e);
+  };
+  _proto.onDayMouseLeave = function onDayMouseLeave(day, e) {
+    var onDayMouseLeave = this.props.onDayMouseLeave;
+    onDayMouseLeave(day, e);
+  };
+  _proto.onKeyDown = function onKeyDown(day, e) {
+    var onDayClick = this.props.onDayClick;
+    var key = e.key;
+    if (key === 'Enter' || key === ' ') {
+      onDayClick(day, e);
+    }
+  };
+  _proto.setButtonRef = function setButtonRef(ref) {
+    this.buttonRef = ref;
+  };
+  _proto.render = function render() {
+    var _this3 = this;
+    var _this$props2 = this.props,
+      day = _this$props2.day,
+      ariaLabelFormat = _this$props2.ariaLabelFormat,
+      daySize = _this$props2.daySize,
+      isOutsideDay = _this$props2.isOutsideDay,
+      modifiers = _this$props2.modifiers,
+      renderDayContents = _this$props2.renderDayContents,
+      tabIndex = _this$props2.tabIndex,
+      css = _this$props2.css,
+      styles = _this$props2.styles,
+      phrases = _this$props2.phrases;
+
+    // empty placeholder cell (no day to render); nothing to label
+    // eslint-disable-next-line jsx-a11y/control-has-associated-label
+    if (!day) return /*#__PURE__*/React.createElement("td", null);
+    var _getCalendarDaySettin = getCalendarDaySettings(day, ariaLabelFormat, daySize, modifiers, phrases),
+      daySizeStyles = _getCalendarDaySettin.daySizeStyles,
+      useDefaultCursor = _getCalendarDaySettin.useDefaultCursor,
+      selected = _getCalendarDaySettin.selected,
+      hoveredSpan = _getCalendarDaySettin.hoveredSpan,
+      isOutsideRange = _getCalendarDaySettin.isOutsideRange,
+      ariaLabel = _getCalendarDaySettin.ariaLabel;
+    return /*#__PURE__*/React.createElement("td", _extends({}, css(styles.CalendarDay, useDefaultCursor && styles.CalendarDay__defaultCursor, styles.CalendarDay__default, isOutsideDay && styles.CalendarDay__outside, modifiers.has('today') && styles.CalendarDay__today, modifiers.has('first-day-of-week') && styles.CalendarDay__firstDayOfWeek, modifiers.has('last-day-of-week') && styles.CalendarDay__lastDayOfWeek, modifiers.has('hovered-offset') && styles.CalendarDay__hovered_offset, modifiers.has('hovered-start-first-possible-end') && styles.CalendarDay__hovered_start_first_possible_end, modifiers.has('hovered-start-blocked-minimum-nights') && styles.CalendarDay__hovered_start_blocked_min_nights, modifiers.has('highlighted-calendar') && styles.CalendarDay__highlighted_calendar, modifiers.has('blocked-minimum-nights') && styles.CalendarDay__blocked_minimum_nights, modifiers.has('blocked-calendar') && styles.CalendarDay__blocked_calendar, hoveredSpan && styles.CalendarDay__hovered_span, modifiers.has('after-hovered-start') && styles.CalendarDay__after_hovered_start, modifiers.has('selected-span') && styles.CalendarDay__selected_span, modifiers.has('selected-start') && styles.CalendarDay__selected_start, modifiers.has('selected-end') && styles.CalendarDay__selected_end, selected && !modifiers.has('selected-span') && styles.CalendarDay__selected, modifiers.has('before-hovered-end') && styles.CalendarDay__before_hovered_end, modifiers.has('no-selected-start-before-selected-end') && styles.CalendarDay__no_selected_start_before_selected_end, modifiers.has('selected-start-in-hovered-span') && styles.CalendarDay__selected_start_in_hovered_span, modifiers.has('selected-end-in-hovered-span') && styles.CalendarDay__selected_end_in_hovered_span, modifiers.has('selected-start-no-selected-end') && styles.CalendarDay__selected_start_no_selected_end, modifiers.has('selected-end-no-selected-start') && styles.CalendarDay__selected_end_no_selected_start, isOutsideRange && styles.CalendarDay__blocked_out_of_range, daySizeStyles), {
+      role: "button" // eslint-disable-line jsx-a11y/no-noninteractive-element-to-interactive-role
+      ,
+      ref: this.setButtonRef,
+      "aria-disabled": modifiers.has('blocked')
+    }, modifiers.has('today') ? {
+      'aria-current': 'date'
+    } : {}, {
+      "aria-label": ariaLabel,
+      onMouseEnter: function onMouseEnter(e) {
+        _this3.onDayMouseEnter(day, e);
+      },
+      onMouseLeave: function onMouseLeave(e) {
+        _this3.onDayMouseLeave(day, e);
+      },
+      onMouseUp: function onMouseUp(e) {
+        e.currentTarget.blur();
+      },
+      onClick: function onClick(e) {
+        _this3.onDayClick(day, e);
+      },
+      onKeyDown: function onKeyDown(e) {
+        _this3.onKeyDown(day, e);
+      },
+      tabIndex: tabIndex
+    }), renderDayContents ? renderDayContents(day, modifiers) : day.format('D'));
+  };
+  return CalendarDay;
+}(React.PureComponent || React.Component, !React.PureComponent && "shouldComponentUpdate");
+CalendarDay.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
+CalendarDay.defaultProps = defaultProps;
+export { CalendarDay as PureCalendarDay };
+export default withStyles(function (_ref3) {
+  var _ref3$reactDates = _ref3.reactDates,
+    color = _ref3$reactDates.color,
+    font = _ref3$reactDates.font;
+  return {
+    CalendarDay: {
+      boxSizing: 'border-box',
+      cursor: 'pointer',
+      fontSize: font.size,
+      textAlign: 'center',
+      ':active': {
+        outline: 0
+      }
+    },
+    CalendarDay__defaultCursor: {
+      cursor: 'default'
+    },
+    CalendarDay__default: {
+      border: "1px solid ".concat(color.core.borderLight),
+      color: color.text,
+      background: color.background,
+      ':hover': {
+        background: color.core.borderLight,
+        border: "1px solid ".concat(color.core.borderLight),
+        color: 'inherit'
+      }
+    },
+    CalendarDay__hovered_offset: {
+      background: color.core.borderBright,
+      border: "1px double ".concat(color.core.borderLight),
+      color: 'inherit'
+    },
+    CalendarDay__outside: {
+      border: 0,
+      background: color.outside.backgroundColor,
+      color: color.outside.color,
+      ':hover': {
+        border: 0
+      }
+    },
+    CalendarDay__blocked_minimum_nights: {
+      background: color.minimumNights.backgroundColor,
+      border: "1px solid ".concat(color.minimumNights.borderColor),
+      color: color.minimumNights.color,
+      ':hover': {
+        background: color.minimumNights.backgroundColor_hover,
+        color: color.minimumNights.color_active
+      },
+      ':active': {
+        background: color.minimumNights.backgroundColor_active,
+        color: color.minimumNights.color_active
+      }
+    },
+    CalendarDay__highlighted_calendar: {
+      background: color.highlighted.backgroundColor,
+      color: color.highlighted.color,
+      ':hover': {
+        background: color.highlighted.backgroundColor_hover,
+        color: color.highlighted.color_active
+      },
+      ':active': {
+        background: color.highlighted.backgroundColor_active,
+        color: color.highlighted.color_active
+      }
+    },
+    CalendarDay__selected_span: {
+      background: color.selectedSpan.backgroundColor,
+      border: "1px double ".concat(color.selectedSpan.borderColor),
+      color: color.selectedSpan.color,
+      ':hover': {
+        background: color.selectedSpan.backgroundColor_hover,
+        border: "1px double ".concat(color.selectedSpan.borderColor),
+        color: color.selectedSpan.color_active
+      },
+      ':active': {
+        background: color.selectedSpan.backgroundColor_active,
+        border: "1px double ".concat(color.selectedSpan.borderColor),
+        color: color.selectedSpan.color_active
+      }
+    },
+    CalendarDay__selected: {
+      background: color.selected.backgroundColor,
+      border: "1px double ".concat(color.selected.borderColor),
+      color: color.selected.color,
+      ':hover': {
+        background: color.selected.backgroundColor_hover,
+        border: "1px double ".concat(color.selected.borderColor),
+        color: color.selected.color_active
+      },
+      ':active': {
+        background: color.selected.backgroundColor_active,
+        border: "1px double ".concat(color.selected.borderColor),
+        color: color.selected.color_active
+      }
+    },
+    CalendarDay__hovered_span: {
+      background: color.hoveredSpan.backgroundColor,
+      border: "1px double ".concat(color.hoveredSpan.borderColor),
+      color: color.hoveredSpan.color,
+      ':hover': {
+        background: color.hoveredSpan.backgroundColor_hover,
+        border: "1px double ".concat(color.hoveredSpan.borderColor),
+        color: color.hoveredSpan.color_active
+      },
+      ':active': {
+        background: color.hoveredSpan.backgroundColor_active,
+        border: "1px double ".concat(color.hoveredSpan.borderColor),
+        color: color.hoveredSpan.color_active
+      }
+    },
+    CalendarDay__blocked_calendar: {
+      background: color.blocked_calendar.backgroundColor,
+      border: "1px solid ".concat(color.blocked_calendar.borderColor),
+      color: color.blocked_calendar.color,
+      ':hover': {
+        background: color.blocked_calendar.backgroundColor_hover,
+        border: "1px solid ".concat(color.blocked_calendar.borderColor),
+        color: color.blocked_calendar.color_active
+      },
+      ':active': {
+        background: color.blocked_calendar.backgroundColor_active,
+        border: "1px solid ".concat(color.blocked_calendar.borderColor),
+        color: color.blocked_calendar.color_active
+      }
+    },
+    CalendarDay__blocked_out_of_range: {
+      background: color.blocked_out_of_range.backgroundColor,
+      border: "1px solid ".concat(color.blocked_out_of_range.borderColor),
+      color: color.blocked_out_of_range.color,
+      ':hover': {
+        background: color.blocked_out_of_range.backgroundColor_hover,
+        border: "1px solid ".concat(color.blocked_out_of_range.borderColor),
+        color: color.blocked_out_of_range.color_active
+      },
+      ':active': {
+        background: color.blocked_out_of_range.backgroundColor_active,
+        border: "1px solid ".concat(color.blocked_out_of_range.borderColor),
+        color: color.blocked_out_of_range.color_active
+      }
+    },
+    CalendarDay__hovered_start_first_possible_end: {
+      background: color.core.borderLighter,
+      border: "1px double ".concat(color.core.borderLighter)
+    },
+    CalendarDay__hovered_start_blocked_min_nights: {
+      background: color.core.borderLighter,
+      border: "1px double ".concat(color.core.borderLight)
+    },
+    CalendarDay__selected_start: {},
+    CalendarDay__selected_end: {},
+    CalendarDay__today: {},
+    CalendarDay__firstDayOfWeek: {},
+    CalendarDay__lastDayOfWeek: {},
+    CalendarDay__after_hovered_start: {},
+    CalendarDay__before_hovered_end: {},
+    CalendarDay__no_selected_start_before_selected_end: {},
+    CalendarDay__selected_start_in_hovered_span: {},
+    CalendarDay__selected_end_in_hovered_span: {},
+    CalendarDay__selected_start_no_selected_end: {},
+    CalendarDay__selected_end_no_selected_start: {}
+  };
+}, {
+  pureComponent: typeof React.PureComponent !== 'undefined'
+})(CalendarDay);

package/esm/components/CalendarIcon.js

@@ -0,0 +1,11 @@
+import React from "react";
+var CalendarIcon = function CalendarIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    d: "m107 1393h241v-241h-241zm295 0h268v-241h-268zm-295-295h241v-268h-241zm295 0h268v-268h-268zm-295-321h241v-241h-241zm616 616h268v-241h-268zm-321-616h268v-241h-268zm643 616h241v-241h-241zm-322-295h268v-268h-268zm-294-723v-241c0-7-3-14-8-19-6-5-12-8-19-8h-54c-7 0-13 3-19 8-5 5-8 12-8 19v241c0 7 3 14 8 19 6 5 12 8 19 8h54c7 0 13-3 19-8 5-5 8-12 8-19zm616 723h241v-268h-241zm-322-321h268v-241h-268zm322 0h241v-241h-241zm27-402v-241c0-7-3-14-8-19-6-5-12-8-19-8h-54c-7 0-13 3-19 8-5 5-8 12-8 19v241c0 7 3 14 8 19 6 5 12 8 19 8h54c7 0 13-3 19-8 5-5 8-12 8-19zm321-54v1072c0 29-11 54-32 75s-46 32-75 32h-1179c-29 0-54-11-75-32s-32-46-32-75v-1072c0-29 11-54 32-75s46-32 75-32h107v-80c0-37 13-68 40-95s57-39 94-39h54c37 0 68 13 95 39 26 26 39 58 39 95v80h321v-80c0-37 13-69 40-95 26-26 57-39 94-39h54c37 0 68 13 94 39s40 58 40 95v80h107c29 0 54 11 75 32s32 46 32 75z"
+  }));
+};
+CalendarIcon.defaultProps = {
+  focusable: "false",
+  viewBox: "0 0 1393.1 1500"
+};
+export default CalendarIcon;

package/esm/components/CalendarMonth.js

@@ -0,0 +1,254 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _readOnlyError from "@babel/runtime/helpers/esm/readOnlyError";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import shallowEqual from "enzyme-shallow-equal";
+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) { _defineProperty(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; }
+/* eslint react/no-array-index-key: 0 */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import momentPropTypes from 'react-moment-proptypes';
+import { forbidExtraProps, mutuallyExclusiveProps, nonNegativeInteger } from 'airbnb-prop-types';
+import { withStyles, withStylesPropTypes } from 'react-with-styles';
+import moment from 'moment';
+import { CalendarDayPhrases } from '../defaultPhrases';
+import getPhrasePropTypes from '../utils/getPhrasePropTypes';
+import CalendarWeek from './CalendarWeek';
+import CalendarDay from './CalendarDay';
+import calculateDimension from '../utils/calculateDimension';
+import getCalendarMonthWeeks from '../utils/getCalendarMonthWeeks';
+import isSameDay from '../utils/isSameDay';
+import toISODateString from '../utils/toISODateString';
+import ModifiersShape from '../shapes/ModifiersShape';
+import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
+import DayOfWeekShape from '../shapes/DayOfWeekShape';
+import { HORIZONTAL_ORIENTATION, VERTICAL_SCROLLABLE, DAY_SIZE } from '../constants';
+var propTypes = process.env.NODE_ENV !== "production" ? forbidExtraProps(_objectSpread(_objectSpread({}, withStylesPropTypes), {}, {
+  month: momentPropTypes.momentObj,
+  horizontalMonthPadding: nonNegativeInteger,
+  isVisible: PropTypes.bool,
+  enableOutsideDays: PropTypes.bool,
+  modifiers: PropTypes.objectOf(ModifiersShape),
+  orientation: ScrollableOrientationShape,
+  daySize: nonNegativeInteger,
+  onDayClick: PropTypes.func,
+  onDayMouseEnter: PropTypes.func,
+  onDayMouseLeave: PropTypes.func,
+  onMonthSelect: PropTypes.func,
+  onYearSelect: PropTypes.func,
+  renderMonthText: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'),
+  renderCalendarDay: PropTypes.func,
+  renderDayContents: PropTypes.func,
+  renderMonthElement: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'),
+  firstDayOfWeek: DayOfWeekShape,
+  setMonthTitleHeight: PropTypes.func,
+  verticalBorderSpacing: nonNegativeInteger,
+  focusedDate: momentPropTypes.momentObj,
+  // indicates focusable day
+  isFocused: PropTypes.bool,
+  // indicates whether or not to move focus to focusable day
+
+  // i18n
+  monthFormat: PropTypes.string,
+  phrases: PropTypes.shape(getPhrasePropTypes(CalendarDayPhrases)),
+  dayAriaLabelFormat: PropTypes.string
+})) : {};
+var defaultProps = {
+  month: moment(),
+  horizontalMonthPadding: 13,
+  isVisible: true,
+  enableOutsideDays: false,
+  modifiers: {},
+  orientation: HORIZONTAL_ORIENTATION,
+  daySize: DAY_SIZE,
+  onDayClick: function onDayClick() {},
+  onDayMouseEnter: function onDayMouseEnter() {},
+  onDayMouseLeave: function onDayMouseLeave() {},
+  onMonthSelect: function onMonthSelect() {},
+  onYearSelect: function onYearSelect() {},
+  renderMonthText: null,
+  renderCalendarDay: function renderCalendarDay(props) {
+    return /*#__PURE__*/React.createElement(CalendarDay, props);
+  },
+  renderDayContents: null,
+  renderMonthElement: null,
+  firstDayOfWeek: null,
+  setMonthTitleHeight: null,
+  focusedDate: null,
+  isFocused: false,
+  // i18n
+  monthFormat: 'MMMM YYYY',
+  // english locale
+  phrases: CalendarDayPhrases,
+  dayAriaLabelFormat: undefined,
+  verticalBorderSpacing: undefined
+};
+var CalendarMonth = /*#__PURE__*/function (_ref2, _ref) {
+  function CalendarMonth(props) {
+    var _this;
+    _this = _ref2.call(this, props) || this;
+    _this.state = {
+      month: props.month,
+      enableOutsideDays: props.enableOutsideDays,
+      firstDayOfWeek: props.firstDayOfWeek,
+      weeks: getCalendarMonthWeeks(props.month, props.enableOutsideDays, props.firstDayOfWeek == null ? moment.localeData().firstDayOfWeek() : props.firstDayOfWeek)
+    };
+    _this.setCaptionRef = _this.setCaptionRef.bind(_this);
+    _this.setMonthTitleHeight = _this.setMonthTitleHeight.bind(_this);
+    return _this;
+  }
+  _inheritsLoose(CalendarMonth, _ref2);
+  var _proto = CalendarMonth.prototype;
+  _proto[_ref] = function (nextProps, nextState) {
+    return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState);
+  };
+  _proto.componentDidMount = function componentDidMount() {
+    this.queueSetMonthTitleHeight();
+  };
+  CalendarMonth.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
+    var month = props.month,
+      enableOutsideDays = props.enableOutsideDays,
+      firstDayOfWeek = props.firstDayOfWeek;
+    var prevMonth = state.month,
+      prevEnableOutsideDays = state.enableOutsideDays,
+      prevFirstDayOfWeek = state.firstDayOfWeek;
+    if (!month.isSame(prevMonth) || enableOutsideDays !== prevEnableOutsideDays || firstDayOfWeek !== prevFirstDayOfWeek) {
+      return {
+        month: month,
+        enableOutsideDays: enableOutsideDays,
+        firstDayOfWeek: firstDayOfWeek,
+        weeks: getCalendarMonthWeeks(month, enableOutsideDays, firstDayOfWeek == null ? moment.localeData().firstDayOfWeek() : firstDayOfWeek)
+      };
+    }
+    return null;
+  };
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    var setMonthTitleHeight = this.props.setMonthTitleHeight;
+    if (prevProps.setMonthTitleHeight === null && setMonthTitleHeight !== null) {
+      this.queueSetMonthTitleHeight();
+    }
+  };
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    if (this.setMonthTitleHeightTimeout) {
+      clearTimeout(this.setMonthTitleHeightTimeout);
+    }
+  };
+  _proto.setMonthTitleHeight = function setMonthTitleHeight() {
+    var setMonthTitleHeight = this.props.setMonthTitleHeight;
+    if (setMonthTitleHeight) {
+      var captionHeight = calculateDimension(this.captionRef, 'height', true, true);
+      setMonthTitleHeight(captionHeight);
+    }
+  };
+  _proto.setCaptionRef = function setCaptionRef(ref) {
+    this.captionRef = ref;
+  };
+  _proto.queueSetMonthTitleHeight = function queueSetMonthTitleHeight() {
+    this.setMonthTitleHeightTimeout = window.setTimeout(this.setMonthTitleHeight, 0);
+  };
+  _proto.render = function render() {
+    var _this$props = this.props,
+      dayAriaLabelFormat = _this$props.dayAriaLabelFormat,
+      daySize = _this$props.daySize,
+      focusedDate = _this$props.focusedDate,
+      horizontalMonthPadding = _this$props.horizontalMonthPadding,
+      isFocused = _this$props.isFocused,
+      isVisible = _this$props.isVisible,
+      modifiers = _this$props.modifiers,
+      month = _this$props.month,
+      monthFormat = _this$props.monthFormat,
+      onDayClick = _this$props.onDayClick,
+      onDayMouseEnter = _this$props.onDayMouseEnter,
+      onDayMouseLeave = _this$props.onDayMouseLeave,
+      onMonthSelect = _this$props.onMonthSelect,
+      onYearSelect = _this$props.onYearSelect,
+      orientation = _this$props.orientation,
+      phrases = _this$props.phrases,
+      renderCalendarDay = _this$props.renderCalendarDay,
+      renderDayContents = _this$props.renderDayContents,
+      renderMonthElement = _this$props.renderMonthElement,
+      renderMonthText = _this$props.renderMonthText,
+      css = _this$props.css,
+      styles = _this$props.styles,
+      verticalBorderSpacing = _this$props.verticalBorderSpacing;
+    var weeks = this.state.weeks;
+    var monthTitle = renderMonthText ? renderMonthText(month) : month.format(monthFormat);
+    var verticalScrollable = orientation === VERTICAL_SCROLLABLE;
+    return /*#__PURE__*/React.createElement("div", _extends({}, css(styles.CalendarMonth, {
+      padding: "0 ".concat(horizontalMonthPadding, "px")
+    }), {
+      "data-visible": isVisible
+    }), /*#__PURE__*/React.createElement("div", _extends({
+      ref: this.setCaptionRef
+    }, css(styles.CalendarMonth_caption, verticalScrollable && styles.CalendarMonth_caption__verticalScrollable)), renderMonthElement ? renderMonthElement({
+      month: month,
+      onMonthSelect: onMonthSelect,
+      onYearSelect: onYearSelect,
+      isVisible: isVisible
+    }) : /*#__PURE__*/React.createElement("strong", null, monthTitle)), /*#__PURE__*/React.createElement("table", _extends({}, css(!verticalBorderSpacing && styles.CalendarMonth_table, verticalBorderSpacing && styles.CalendarMonth_verticalSpacing, verticalBorderSpacing && {
+      borderSpacing: "0px ".concat(verticalBorderSpacing, "px")
+    }), {
+      role: "presentation"
+    }), /*#__PURE__*/React.createElement("tbody", null, weeks.map(function (week, i) {
+      return /*#__PURE__*/React.createElement(CalendarWeek, {
+        key: i
+      }, week.map(function (day, dayOfWeek) {
+        return renderCalendarDay({
+          key: dayOfWeek,
+          day: day,
+          daySize: daySize,
+          isOutsideDay: !day || day.month() !== month.month(),
+          tabIndex: isVisible && isSameDay(day, focusedDate) ? 0 : -1,
+          isFocused: isFocused,
+          onDayMouseEnter: onDayMouseEnter,
+          onDayMouseLeave: onDayMouseLeave,
+          onDayClick: onDayClick,
+          renderDayContents: renderDayContents,
+          phrases: phrases,
+          modifiers: modifiers[toISODateString(day)],
+          ariaLabelFormat: dayAriaLabelFormat
+        });
+      }));
+    }))));
+  };
+  return CalendarMonth;
+}(React.PureComponent || React.Component, !React.PureComponent && "shouldComponentUpdate");
+CalendarMonth.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
+CalendarMonth.defaultProps = defaultProps;
+export default withStyles(function (_ref3) {
+  var _ref3$reactDates = _ref3.reactDates,
+    color = _ref3$reactDates.color,
+    font = _ref3$reactDates.font,
+    spacing = _ref3$reactDates.spacing;
+  return {
+    CalendarMonth: {
+      background: color.background,
+      textAlign: 'center',
+      verticalAlign: 'top',
+      userSelect: 'none'
+    },
+    CalendarMonth_table: {
+      borderCollapse: 'collapse',
+      borderSpacing: 0
+    },
+    CalendarMonth_verticalSpacing: {
+      borderCollapse: 'separate'
+    },
+    CalendarMonth_caption: {
+      color: color.text,
+      fontSize: font.captionSize,
+      textAlign: 'center',
+      paddingTop: spacing.captionPaddingTop,
+      paddingBottom: spacing.captionPaddingBottom,
+      captionSide: 'initial'
+    },
+    CalendarMonth_caption__verticalScrollable: {
+      paddingTop: 12,
+      paddingBottom: 7
+    }
+  };
+}, {
+  pureComponent: typeof React.PureComponent !== 'undefined'
+})(CalendarMonth);