daySize: _airbnbPropTypes.nonNegativeInteger,
focusedDate: _reactMomentProptypes2['default'].momentObj, // indicates focusable day
isFocused: _propTypes2['default'].bool, // indicates whether or not to move focus to focusable day
firstDayOfWeek: _DayOfWeekShape2['default'],
setMonthTitleHeight: _propTypes2['default'].func,
isRTL: _propTypes2['default'].bool,
transitionDuration: _airbnbPropTypes.nonNegativeInteger,
verticalBorderSpacing: _airbnbPropTypes.nonNegativeInteger,
monthFormat: _propTypes2['default'].string,
phrases: _propTypes2['default'].shape((0, _getPhrasePropTypes2['default'])(_defaultPhrases.CalendarDayPhrases)),
dayAriaLabelFormat: _propTypes2['default'].string
enableOutsideDays: false,
firstVisibleMonthIndex: 0,
horizontalMonthPadding: 13,
initialMonth: (0, _moment2['default'])(),
orientation: _constants.HORIZONTAL_ORIENTATION,
onDayClick: function () {
onDayMouseEnter: function () {
function onDayMouseEnter() {}
onDayMouseLeave: function () {
function onDayMouseLeave() {}
onMonthChange: function () {
function onMonthChange() {}
onYearChange: function () {
function onYearChange() {}
onMonthTransitionEnd: function () {
function onMonthTransitionEnd() {}
return onMonthTransitionEnd;
renderCalendarDay: undefined,
renderMonthElement: null,
daySize: _constants.DAY_SIZE,
setMonthTitleHeight: null,
verticalBorderSpacing: undefined,
monthFormat: 'MMMM YYYY', // english locale
phrases: _defaultPhrases.CalendarDayPhrases,
dayAriaLabelFormat: undefined
function getMonths(initialMonth, numberOfMonths, withoutTransitionMonths) {
var month = initialMonth.clone();
if (!withoutTransitionMonths) month = month.subtract(1, 'month');
for (var i = 0; i < (withoutTransitionMonths ? numberOfMonths : numberOfMonths + 2); i += 1) {
month = month.clone().add(1, 'month');
var CalendarMonthGrid = function (_React$Component) {
_inherits(CalendarMonthGrid, _React$Component);
function CalendarMonthGrid(props) {
_classCallCheck(this, CalendarMonthGrid);
var _this = _possibleConstructorReturn(this, (CalendarMonthGrid.__proto__ || Object.getPrototypeOf(CalendarMonthGrid)).call(this, props));
var withoutTransitionMonths = props.orientation === _constants.VERTICAL_SCROLLABLE;
months: getMonths(props.initialMonth, props.numberOfMonths, withoutTransitionMonths)
_this.isTransitionEndSupported = (0, _isTransitionEndSupported2['default'])();
_this.onTransitionEnd = _this.onTransitionEnd.bind(_this);
_this.setContainerRef = _this.setContainerRef.bind(_this);
_this.locale = _moment2['default'].locale();
_this.onMonthSelect = _this.onMonthSelect.bind(_this);
_this.onYearSelect = _this.onYearSelect.bind(_this);
_createClass(CalendarMonthGrid, [{
key: 'componentDidMount',
function componentDidMount() {
this.removeEventListener = (0, _consolidatedEvents.addEventListener)(this.container, 'transitionend', this.onTransitionEnd);
return componentDidMount;
key: 'componentWillReceiveProps',
function componentWillReceiveProps(nextProps) {
var initialMonth = nextProps.initialMonth,
numberOfMonths = nextProps.numberOfMonths,
orientation = nextProps.orientation;
var months = this.state.months;
prevInitialMonth = _props.initialMonth,
prevNumberOfMonths = _props.numberOfMonths;
var hasMonthChanged = !prevInitialMonth.isSame(initialMonth, 'month');
var hasNumberOfMonthsChanged = prevNumberOfMonths !== numberOfMonths;
if (hasMonthChanged && !hasNumberOfMonthsChanged) {
if ((0, _isNextMonth2['default'])(prevInitialMonth, initialMonth)) {
newMonths = months.slice(1);
newMonths.push(months[months.length - 1].clone().add(1, 'month'));
} else if ((0, _isPrevMonth2['default'])(prevInitialMonth, initialMonth)) {
newMonths = months.slice(0, months.length - 1);
newMonths.unshift(months[0].clone().subtract(1, 'month'));
var withoutTransitionMonths = orientation === _constants.VERTICAL_SCROLLABLE;
newMonths = getMonths(initialMonth, numberOfMonths, withoutTransitionMonths);
if (hasNumberOfMonthsChanged) {
var _withoutTransitionMonths = orientation === _constants.VERTICAL_SCROLLABLE;
newMonths = getMonths(initialMonth, numberOfMonths, _withoutTransitionMonths);
var momentLocale = _moment2['default'].locale();
if (this.locale !== momentLocale) {
this.locale = momentLocale;
newMonths = newMonths.map(function (m) {
return m.locale(_this2.locale);
return componentWillReceiveProps;
key: 'shouldComponentUpdate',
function shouldComponentUpdate(nextProps, nextState) {
return (0, _reactAddonsShallowCompare2['default'])(this, nextProps, nextState);
return shouldComponentUpdate;
key: 'componentDidUpdate',
function componentDidUpdate() {
var _props2 = this.props,
isAnimating = _props2.isAnimating,
transitionDuration = _props2.transitionDuration,
onMonthTransitionEnd = _props2.onMonthTransitionEnd;
// For IE9, immediately call onMonthTransitionEnd instead of
// waiting for the animation to complete. Similarly, if transitionDuration
// is set to 0, also immediately invoke the onMonthTransitionEnd callback
if ((!this.isTransitionEndSupported || !transitionDuration) && isAnimating) {
return componentDidUpdate;
key: 'componentWillUnmount',
function componentWillUnmount() {
if (this.removeEventListener) this.removeEventListener();
return componentWillUnmount;
function onTransitionEnd() {
var onMonthTransitionEnd = this.props.onMonthTransitionEnd;
function onMonthSelect(currentMonth, newMonthVal) {
var newMonth = currentMonth.clone();
var _props3 = this.props,
onMonthChange = _props3.onMonthChange,
orientation = _props3.orientation;
var months = this.state.months;
var withoutTransitionMonths = orientation === _constants.VERTICAL_SCROLLABLE;
var initialMonthSubtraction = months.indexOf(currentMonth);
if (!withoutTransitionMonths) {
initialMonthSubtraction -= 1;
newMonth.set('month', newMonthVal).subtract(initialMonthSubtraction, 'months');
function onYearSelect(currentMonth, newYearVal) {
var newMonth = currentMonth.clone();
var _props4 = this.props,
onYearChange = _props4.onYearChange,
orientation = _props4.orientation;
var months = this.state.months;
var withoutTransitionMonths = orientation === _constants.VERTICAL_SCROLLABLE;
var initialMonthSubtraction = months.indexOf(currentMonth);
if (!withoutTransitionMonths) {
initialMonthSubtraction -= 1;
newMonth.set('year', newYearVal).subtract(initialMonthSubtraction, 'months');
function setContainerRef(ref) {
var _props5 = this.props,
enableOutsideDays = _props5.enableOutsideDays,
firstVisibleMonthIndex = _props5.firstVisibleMonthIndex,
horizontalMonthPadding = _props5.horizontalMonthPadding,
isAnimating = _props5.isAnimating,
modifiers = _props5.modifiers,
numberOfMonths = _props5.numberOfMonths,
monthFormat = _props5.monthFormat,
orientation = _props5.orientation,
translationValue = _props5.translationValue,
daySize = _props5.daySize,
onDayMouseEnter = _props5.onDayMouseEnter,
onDayMouseLeave = _props5.onDayMouseLeave,
onDayClick = _props5.onDayClick,
renderMonthText = _props5.renderMonthText,
renderCalendarDay = _props5.renderCalendarDay,
renderDayContents = _props5.renderDayContents,
renderMonthElement = _props5.renderMonthElement,
onMonthTransitionEnd = _props5.onMonthTransitionEnd,
firstDayOfWeek = _props5.firstDayOfWeek,
focusedDate = _props5.focusedDate,
isFocused = _props5.isFocused,
phrases = _props5.phrases,
dayAriaLabelFormat = _props5.dayAriaLabelFormat,
transitionDuration = _props5.transitionDuration,
verticalBorderSpacing = _props5.verticalBorderSpacing,
setMonthTitleHeight = _props5.setMonthTitleHeight;
var months = this.state.months;
var isVertical = orientation === _constants.VERTICAL_ORIENTATION;
var isVerticalScrollable = orientation === _constants.VERTICAL_SCROLLABLE;
var isHorizontal = orientation === _constants.HORIZONTAL_ORIENTATION;
var calendarMonthWidth = (0, _getCalendarMonthWidth2['default'])(daySize, horizontalMonthPadding);
var width = isVertical || isVerticalScrollable ? calendarMonthWidth : (numberOfMonths + 2) * calendarMonthWidth;
var transformType = isVertical || isVerticalScrollable ? 'translateY' : 'translateX';
var transformValue = transformType + '(' + String(translationValue) + 'px)';
return _react2['default'].createElement(
_extends({}, (0, _reactWithStyles.css)(styles.CalendarMonthGrid, isHorizontal && styles.CalendarMonthGrid__horizontal, isVertical && styles.CalendarMonthGrid__vertical, isVerticalScrollable && styles.CalendarMonthGrid__vertical_scrollable, isAnimating && styles.CalendarMonthGrid__animating, isAnimating && transitionDuration && {
transition: 'transform ' + String(transitionDuration) + 'ms ease-in-out'
}, (0, _object2['default'])({}, (0, _getTransformStyles2['default'])(transformValue), {
ref: this.setContainerRef,
onTransitionEnd: onMonthTransitionEnd
months.map(function (month, i) {
var isVisible = i >= firstVisibleMonthIndex && i < firstVisibleMonthIndex + numberOfMonths;
var hideForAnimation = i === 0 && !isVisible;
var showForAnimation = i === 0 && isAnimating && isVisible;
var monthString = (0, _toISOMonthString2['default'])(month);
return _react2['default'].createElement(
}, (0, _reactWithStyles.css)(isHorizontal && styles.CalendarMonthGrid_month__horizontal, hideForAnimation && styles.CalendarMonthGrid_month__hideForAnimation, showForAnimation && !isVertical && !isRTL && {
left: -calendarMonthWidth
}, showForAnimation && !isVertical && isRTL && {
}, showForAnimation && isVertical && {
}, !isVisible && !isAnimating && styles.CalendarMonthGrid_month__hidden)),
_react2['default'].createElement(_CalendarMonth2['default'], {
enableOutsideDays: enableOutsideDays,
modifiers: modifiers[monthString],
monthFormat: monthFormat,
orientation: orientation,
onDayMouseEnter: onDayMouseEnter,
onDayMouseLeave: onDayMouseLeave,
onMonthSelect: _this3.onMonthSelect,
onYearSelect: _this3.onYearSelect,
renderMonthText: renderMonthText,
renderCalendarDay: renderCalendarDay,
renderDayContents: renderDayContents,
renderMonthElement: renderMonthElement,
firstDayOfWeek: firstDayOfWeek,
focusedDate: isVisible ? focusedDate : null,
setMonthTitleHeight: setMonthTitleHeight,
dayAriaLabelFormat: dayAriaLabelFormat,
verticalBorderSpacing: verticalBorderSpacing,
horizontalMonthPadding: horizontalMonthPadding
return CalendarMonthGrid;
}(_react2['default'].Component);
CalendarMonthGrid.propTypes = propTypes;
CalendarMonthGrid.defaultProps = defaultProps;
exports['default'] = (0, _reactWithStyles.withStyles)(function (_ref) {
var _ref$reactDates = _ref.reactDates,
color = _ref$reactDates.color,
noScrollBarOnVerticalScrollable = _ref$reactDates.noScrollBarOnVerticalScrollable,
spacing = _ref$reactDates.spacing,
zIndex = _ref$reactDates.zIndex;
background: color.background,
CalendarMonthGrid__animating: {
CalendarMonthGrid__horizontal: {
left: spacing.dayPickerHorizontalPadding
CalendarMonthGrid__vertical: {
CalendarMonthGrid__vertical_scrollable: (0, _object2['default'])({
}, noScrollBarOnVerticalScrollable && {
'-webkitOverflowScrolling': 'touch',
'-webkit-appearance': 'none',
CalendarMonthGrid_month__horizontal: {
CalendarMonthGrid_month__hideForAnimation: {
CalendarMonthGrid_month__hidden: {
/***/ (function(module, __webpack_exports__, __webpack_require__) {
// EXTERNAL MODULE: ./node_modules/@emotion/sheet/dist/sheet.browser.esm.js
var sheet_browser_esm = __webpack_require__("z9I/");
// CONCATENATED MODULE: ./node_modules/@emotion/stylis/dist/stylis.browser.esm.js
function stylis_min (W) {
function M(d, c, e, h, a) {
for (var m = 0, b = 0, v = 0, n = 0, q, g, x = 0, K = 0, k, u = k = q = 0, l = 0, r = 0, I = 0, t = 0, B = e.length, J = B - 1, y, f = '', p = '', F = '', G = '', C; l < B;) {
l === J && 0 !== b + n + v + m && (0 !== b && (g = 47 === b ? 10 : 47), n = v = m = 0, B++, J++);
if (0 === b + n + v + m) {
if (l === J && (0 < r && (f = f.replace(N, '')), 0 < f.trim().length)) {
switch (g = e.charCodeAt(l)) {
switch (g = e.charCodeAt(l + 1)) {