From 55d6453642db3cc3d4a90a9dc32ee244bebbec15 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Mon, 13 Nov 2017 22:09:49 -0800
Subject: [PATCH 001/618] Fix reliance of stories on built constants

---
 stories/DateRangePicker.js               | 2 +-
 stories/DateRangePicker_calendar.js      | 2 +-
 stories/DayPicker.js                     | 2 +-
 stories/DayPickerRangeController.js      | 2 +-
 stories/DayPickerSingleDateController.js | 2 +-
 stories/SingleDatePicker.js              | 2 +-
 stories/SingleDatePicker_calendar.js     | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/stories/DateRangePicker.js b/stories/DateRangePicker.js
index 949670bea3..e7df729fd2 100644
--- a/stories/DateRangePicker.js
+++ b/stories/DateRangePicker.js
@@ -4,7 +4,7 @@ import momentJalaali from 'moment-jalaali';
 import { storiesOf } from '@storybook/react';
 import {
   VERTICAL_ORIENTATION,
-} from '../constants';
+} from '../src/constants';
 
 import DateRangePickerWrapper from '../examples/DateRangePickerWrapper';
 
diff --git a/stories/DateRangePicker_calendar.js b/stories/DateRangePicker_calendar.js
index e67c31a22b..841d033756 100644
--- a/stories/DateRangePicker_calendar.js
+++ b/stories/DateRangePicker_calendar.js
@@ -2,7 +2,7 @@ import React from 'react';
 import moment from 'moment';
 import { storiesOf } from '@storybook/react';
 
-import { VERTICAL_ORIENTATION, ANCHOR_RIGHT, OPEN_UP } from '../constants';
+import { VERTICAL_ORIENTATION, ANCHOR_RIGHT, OPEN_UP } from '../src/constants';
 
 import DateRangePickerWrapper from '../examples/DateRangePickerWrapper';
 
diff --git a/stories/DayPicker.js b/stories/DayPicker.js
index eeba97cc26..cea8b8ae6d 100644
--- a/stories/DayPicker.js
+++ b/stories/DayPicker.js
@@ -5,7 +5,7 @@ import DayPicker from '../src/components/DayPicker';
 import {
   VERTICAL_ORIENTATION,
   VERTICAL_SCROLLABLE,
-} from '../constants';
+} from '../src/constants';
 
 const TestPrevIcon = () => (
   <span
diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
index 7f286175f5..a13ab7a28b 100644
--- a/stories/DayPickerRangeController.js
+++ b/stories/DayPickerRangeController.js
@@ -5,7 +5,7 @@ import { storiesOf, action } from '@storybook/react';
 import isSameDay from '../src/utils/isSameDay';
 import isInclusivelyAfterDay from '../src/utils/isInclusivelyAfterDay';
 
-import { VERTICAL_ORIENTATION } from '../constants';
+import { VERTICAL_ORIENTATION } from '../src/constants';
 
 import DayPickerRangeControllerWrapper from '../examples/DayPickerRangeControllerWrapper';
 
diff --git a/stories/DayPickerSingleDateController.js b/stories/DayPickerSingleDateController.js
index a10236baea..2b03e8fb29 100644
--- a/stories/DayPickerSingleDateController.js
+++ b/stories/DayPickerSingleDateController.js
@@ -5,7 +5,7 @@ import { storiesOf, action } from '@storybook/react';
 import isSameDay from '../src/utils/isSameDay';
 import isInclusivelyAfterDay from '../src/utils/isInclusivelyAfterDay';
 
-import { VERTICAL_ORIENTATION } from '../constants';
+import { VERTICAL_ORIENTATION } from '../src/constants';
 
 import DayPickerSingleDateControllerWrapper from '../examples/DayPickerSingleDateControllerWrapper';
 
diff --git a/stories/SingleDatePicker.js b/stories/SingleDatePicker.js
index e5cd59ceb1..d5bc16f28e 100644
--- a/stories/SingleDatePicker.js
+++ b/stories/SingleDatePicker.js
@@ -4,7 +4,7 @@ import momentJalaali from 'moment-jalaali';
 import { storiesOf } from '@storybook/react';
 import {
   VERTICAL_ORIENTATION,
-} from '../constants';
+} from '../src/constants';
 
 import SingleDatePickerWrapper from '../examples/SingleDatePickerWrapper';
 
diff --git a/stories/SingleDatePicker_calendar.js b/stories/SingleDatePicker_calendar.js
index a0eb88c453..fa8a5dd9a1 100644
--- a/stories/SingleDatePicker_calendar.js
+++ b/stories/SingleDatePicker_calendar.js
@@ -4,7 +4,7 @@ import { storiesOf } from '@storybook/react';
 
 import SingleDatePickerWrapper from '../examples/SingleDatePickerWrapper';
 
-import { VERTICAL_ORIENTATION, ANCHOR_RIGHT, OPEN_UP } from '../constants';
+import { VERTICAL_ORIENTATION, ANCHOR_RIGHT, OPEN_UP } from '../src/constants';
 
 const TestPrevIcon = () => (
   <span

From 5bea9634cf7f4a749661dab803349cffaa8969f2 Mon Sep 17 00:00:00 2001
From: Toru Kobayashi <koba0004@gmail.com>
Date: Tue, 14 Nov 2017 15:13:35 +0900
Subject: [PATCH 002/618] Add dayAriaLabelFormat Prop into CalendarDay
 component

---
 src/components/CalendarDay.jsx       |  5 ++++-
 src/components/CalendarMonth.jsx     |  3 +++
 src/components/CalendarMonthGrid.jsx |  3 +++
 src/components/DayPicker.jsx         |  3 +++
 test/components/CalendarDay_spec.jsx | 12 ++++++++++++
 5 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/components/CalendarDay.jsx b/src/components/CalendarDay.jsx
index ef06976f3b..6928aeaa17 100644
--- a/src/components/CalendarDay.jsx
+++ b/src/components/CalendarDay.jsx
@@ -24,6 +24,7 @@ const propTypes = forbidExtraProps({
   onDayMouseEnter: PropTypes.func,
   onDayMouseLeave: PropTypes.func,
   renderDay: PropTypes.func,
+  ariaLabelFormat: PropTypes.string,
 
   // internationalization
   phrases: PropTypes.shape(getPhrasePropTypes(CalendarDayPhrases)),
@@ -40,6 +41,7 @@ const defaultProps = {
   onDayMouseEnter() {},
   onDayMouseLeave() {},
   renderDay: null,
+  ariaLabelFormat: 'dddd, LL',
 
   // internationalization
   phrases: CalendarDayPhrases,
@@ -87,6 +89,7 @@ class CalendarDay extends React.Component {
   render() {
     const {
       day,
+      ariaLabelFormat,
       daySize,
       isOutsideDay,
       modifiers,
@@ -101,7 +104,7 @@ class CalendarDay extends React.Component {
 
     if (!day) return <td />;
 
-    const formattedDate = { date: `${day.format('dddd')}, ${day.format('LL')}` };
+    const formattedDate = { date: day.format(ariaLabelFormat) };
 
     const ariaLabel = modifiers.has(BLOCKED_MODIFIER)
       ? getPhrase(dateIsUnavailable, formattedDate)
diff --git a/src/components/CalendarMonth.jsx b/src/components/CalendarMonth.jsx
index c2a1093f8d..0ec3ab6e7c 100644
--- a/src/components/CalendarMonth.jsx
+++ b/src/components/CalendarMonth.jsx
@@ -50,6 +50,7 @@ const propTypes = forbidExtraProps({
   // i18n
   monthFormat: PropTypes.string,
   phrases: PropTypes.shape(getPhrasePropTypes(CalendarDayPhrases)),
+  dayAriaLabelFormat: PropTypes.string,
 });
 
 const defaultProps = {
@@ -154,6 +155,7 @@ class CalendarMonth extends React.Component {
       isFocused,
       styles,
       phrases,
+      dayAriaLabelFormat,
     } = this.props;
 
     const { weeks } = this.state;
@@ -202,6 +204,7 @@ class CalendarMonth extends React.Component {
                     renderDay={renderDay}
                     phrases={phrases}
                     modifiers={modifiers[toISODateString(day)]}
+                    ariaLabelFormat={dayAriaLabelFormat}
                   />
                 ))}
               </tr>
diff --git a/src/components/CalendarMonthGrid.jsx b/src/components/CalendarMonthGrid.jsx
index dfd43c1e7f..7a6b706a33 100644
--- a/src/components/CalendarMonthGrid.jsx
+++ b/src/components/CalendarMonthGrid.jsx
@@ -54,6 +54,7 @@ const propTypes = forbidExtraProps({
   // i18n
   monthFormat: PropTypes.string,
   phrases: PropTypes.shape(getPhrasePropTypes(CalendarDayPhrases)),
+  dayAriaLabelFormat: PropTypes.string,
 });
 
 const defaultProps = {
@@ -230,6 +231,7 @@ class CalendarMonthGrid extends React.Component {
       isRTL,
       styles,
       phrases,
+      dayAriaLabelFormat,
     } = this.props;
 
     const { months } = this.state;
@@ -306,6 +308,7 @@ class CalendarMonthGrid extends React.Component {
                 isFocused={isFocused}
                 phrases={phrases}
                 setMonthHeight={(height) => { this.setMonthHeight(height, i); }}
+                dayAriaLabelFormat={dayAriaLabelFormat}
               />
             </div>
           );
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index a3fb8ee42b..07cc79efcb 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -84,6 +84,7 @@ const propTypes = forbidExtraProps({
   monthFormat: PropTypes.string,
   weekDayFormat: PropTypes.string,
   phrases: PropTypes.shape(getPhrasePropTypes(DayPickerPhrases)),
+  dayAriaLabelFormat: PropTypes.string,
 });
 
 export const defaultProps = {
@@ -686,6 +687,7 @@ class DayPicker extends React.Component {
       styles,
       phrases,
       verticalHeight,
+      dayAriaLabelFormat,
     } = this.props;
 
     const numOfWeekHeaders = this.isVertical() ? 1 : numberOfMonths;
@@ -805,6 +807,7 @@ class DayPicker extends React.Component {
                 focusedDate={focusedDate}
                 phrases={phrases}
                 isRTL={isRTL}
+                dayAriaLabelFormat={dayAriaLabelFormat}
               />
               {verticalScrollable && this.renderNavigation()}
             </div>
diff --git a/test/components/CalendarDay_spec.jsx b/test/components/CalendarDay_spec.jsx
index 9493199c9e..d9171c2198 100644
--- a/test/components/CalendarDay_spec.jsx
+++ b/test/components/CalendarDay_spec.jsx
@@ -87,6 +87,18 @@ describe('CalendarDay', () => {
           expect(phrases.dateIsUnavailable.calledWith(expectedFormattedDay)).to.equal(true);
           expect(wrapper.find('button').prop('aria-label')).to.equal('dateIsUnavailable text');
         });
+
+        it('should set aria-label with a value pass through ariaLabelFormat prop if it exists', () => {
+          const modifiers = new Set();
+
+          const wrapper = shallow(<CalendarDay
+            modifiers={modifiers}
+            day={day}
+            ariaLabelFormat="MMMM Do YYYY"
+          />).dive();
+
+          expect(wrapper.find('button').prop('aria-label')).to.equal('October 10th 2017');
+        });
       });
     });
   });

From bd3d7f927069cb5db7d1a3f2d9ca7a36a86dc883 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Wed, 15 Nov 2017 01:17:36 -0800
Subject: [PATCH 003/618] Use export of enzyme-adapter-react-helper to simplify
 test setup

---
 package.json                 |  2 +-
 test/_helpers/enzymeSetup.js | 10 ++--------
 2 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index d9810a2907..554c3a5cad 100644
--- a/package.json
+++ b/package.json
@@ -71,7 +71,7 @@
     "coveralls": "^2.13.3",
     "cross-env": "^5.1.0",
     "enzyme": "^3.1.0",
-    "enzyme-adapter-react-15": "^1.0.2",
+    "enzyme-adapter-react-helper": "^1.0.3",
     "eslint": "^4.9.0",
     "eslint-config-airbnb": "^16.1.0",
     "eslint-plugin-import": "^2.8.0",
diff --git a/test/_helpers/enzymeSetup.js b/test/_helpers/enzymeSetup.js
index dad5556e93..5491fa359c 100644
--- a/test/_helpers/enzymeSetup.js
+++ b/test/_helpers/enzymeSetup.js
@@ -1,9 +1,3 @@
-const configure = require('enzyme').configure;
-let Adapter;
-try {
-  Adapter = require('enzyme-adapter-react-15');
-} catch (e) {
-  Adapter = require('enzyme-adapter-react-14');
-}
+import configure from 'enzyme-adapter-react-helper';
 
-configure({ adapter: new Adapter(), disableLifecycleMethods: true });
+configure({ disableLifecycleMethods: true });

From 38513f554a175601b8a497a81e36692d3f51de9d Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Wed, 15 Nov 2017 01:37:14 -0800
Subject: [PATCH 004/618] =?UTF-8?q?Use=20enzyme-adapter-react-helper?=
 =?UTF-8?q?=E2=80=99s=20binary=20to=20clean=20up=20testing.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .travis.yml               |  2 +-
 install-relevant-react.sh | 13 -------------
 package.json              |  4 +---
 3 files changed, 2 insertions(+), 17 deletions(-)
 delete mode 100644 install-relevant-react.sh

diff --git a/.travis.yml b/.travis.yml
index d0c8bbd383..e774d95326 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -12,7 +12,7 @@ before_script:
   - 'if [ -n "${KARMA-}" ]; then export DISPLAY=:99.0; fi'
   - 'if [ -n "${KARMA-}" ]; then sh -e /etc/init.d/xvfb start; fi'
   - 'if [ -n "${KARMA-}" ]; then sleep 3; fi'
-  - 'if [ -n "${REACT-}" ] && [ "${TEST-}" = true ]; then sh install-relevant-react.sh && npm ls >/dev/null || echo "temporary bypass"; fi'
+  - 'if [ -n "${REACT-}" ] && [ "${TEST-}" = true ]; then npm run react && (npm ls >/dev/null || echo "temporary bypass"); fi'
 script:
   - 'if [ -n "${LINT-}" ]; then npm run lint ; fi'
   - 'if [ "${TEST-}" = true ]; then npm run tests-only ; fi'
diff --git a/install-relevant-react.sh b/install-relevant-react.sh
deleted file mode 100644
index f73da9e55f..0000000000
--- a/install-relevant-react.sh
+++ /dev/null
@@ -1,13 +0,0 @@
-#!/bin/sh
-
-REACT=${REACT:-15}
-
-echo "installing React $REACT"
-
-if [ "$REACT" = "0.14" ]; then
-    npm run react:14
-fi
-
-if [ "$REACT" = "15" ]; then
-    npm run react:15
-fi
diff --git a/package.json b/package.json
index 554c3a5cad..0e2c90548c 100644
--- a/package.json
+++ b/package.json
@@ -15,9 +15,7 @@
     "lint": "eslint --ext .js,.jsx src test",
     "mocha": "mocha ./test/_helpers",
     "storybook:uninstall": "npm uninstall --no-save @storybook/react && rimraf node_modules/@storybook node_modules/react-modal node_modules/react-dom-factories",
-    "react:clean": "npm run storybook:uninstall && npm i --no-save ajv ajv-keywords && npm uninstall --no-save react react-dom react-addons-test-utils react-test-renderer && rimraf node_modules/react-test-renderer node_modules/react && npm prune",
-    "react:14": "rimraf node_modules/.bin/npm && npm run react:clean && npm i --no-save react@0.14 react-dom@0.14 react-addons-test-utils@0.14 enzyme-adapter-react-14 && npm run storybook:uninstall && npm prune && npm i --no-save enzyme-adapter-react-14",
-    "react:15": "rimraf node_modules/.bin/npm && npm run react:clean && npm i --no-save react@15 react-dom@15 react-addons-test-utils@15 react-test-renderer@15 && npm run storybook:uninstall && npm prune",
+    "react": "enzyme-adapter-react-install 15",
     "pretest": "npm run --silent lint",
     "tests-only": "npm run mocha --silent test",
     "tests-karma": "karma start",

From cfce43e375fd8afb744e5cd5a0f0d89e21cff125 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Fri, 17 Nov 2017 10:42:39 -0600
Subject: [PATCH 005/618] [Tests] test on React 16

---
 .travis.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.travis.yml b/.travis.yml
index e774d95326..a5e14e7880 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -24,6 +24,7 @@ env:
   matrix:
     - REACT=0.14
     - REACT=15
+    - REACT=16
 sudo: false
 matrix:
   fast_finish: true

From 5e8eb683cf819eba8ecfb6e31273116de154d0b7 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Fri, 17 Nov 2017 11:35:31 -0600
Subject: [PATCH 006/618] [Tests] fix coverage

---
 .travis.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.travis.yml b/.travis.yml
index a5e14e7880..06d23f20f4 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -17,7 +17,7 @@ script:
   - 'if [ -n "${LINT-}" ]; then npm run lint ; fi'
   - 'if [ "${TEST-}" = true ]; then npm run tests-only ; fi'
   - 'if [ -n "${KARMA-}" ]; then npm run tests-karma ; fi'
-  - 'if [ -n "${COVERAGE-}" ] && [ "${TRAVIS_BRANCH-}" = "master" ]; then npm run cover; cat ./coverage/lcov.info | ./node_modules/.bin/coveralls ; fi'
+  - 'if [ -n "${COVERAGE-}" ] && [ "${TRAVIS_BRANCH-}" = "master" ]; then npm run react && npm run cover; cat ./coverage/lcov.info | ./node_modules/.bin/coveralls ; fi'
 env:
   global:
     - TEST=true

From c2b861bf8e46e4e2c05d924f39f93bb5cdf4851c Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Fri, 17 Nov 2017 22:04:07 -0600
Subject: [PATCH 007/618] [Dev Deps] update `babel-plugin-inline-svg`,
 `cross-env`, `enzyme`, `eslint`, `moment`, `sinon`

---
 package.json | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 0e2c90548c..2b02006259 100644
--- a/package.json
+++ b/package.json
@@ -59,6 +59,7 @@
     "babel-core": "^6.26.0",
     "babel-loader": "^6.4.1",
     "babel-plugin-inline-react-svg": "^0.5.1",
+    "babel-plugin-inline-svg": "^0.1.0",
     "babel-plugin-istanbul": "^4.1.5",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-replace-object-assign": "^0.2.1",
@@ -67,10 +68,10 @@
     "chai": "^4.1.2",
     "clean-css": "^4.1.9",
     "coveralls": "^2.13.3",
-    "cross-env": "^5.1.0",
-    "enzyme": "^3.1.0",
+    "cross-env": "^5.1.1",
+    "enzyme": "^3.2.0",
     "enzyme-adapter-react-helper": "^1.0.3",
-    "eslint": "^4.9.0",
+    "eslint": "^4.11.0",
     "eslint-config-airbnb": "^16.1.0",
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-jsx-a11y": "^6.0.2",
@@ -88,7 +89,7 @@
     "karma-webpack": "^2.0.5",
     "mocha": "^3.5.3",
     "mocha-wrap": "^2.1.1",
-    "moment": "^2.19.1",
+    "moment": "^2.19.2",
     "moment-jalaali": "^0.7.2",
     "node-sass": "^4.5.3",
     "nyc": "^11.2.1",
@@ -103,7 +104,7 @@
     "rimraf": "^2.6.2",
     "safe-publish-latest": "^1.1.1",
     "sass-loader": "^6.0.6",
-    "sinon": "^4.0.1",
+    "sinon": "^4.1.2",
     "sinon-sandbox": "^1.0.2",
     "style-loader": "^0.19.0",
     "webpack": "^2.6.1"

From 96655cf75b7b34391c1110cfde204deb0b2a5e3a Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Fri, 17 Nov 2017 22:12:20 -0600
Subject: [PATCH 008/618] [Tests] fix scripts

---
 .travis.yml  | 3 +--
 package.json | 4 +++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index 06d23f20f4..d73f3cae0e 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -12,12 +12,11 @@ before_script:
   - 'if [ -n "${KARMA-}" ]; then export DISPLAY=:99.0; fi'
   - 'if [ -n "${KARMA-}" ]; then sh -e /etc/init.d/xvfb start; fi'
   - 'if [ -n "${KARMA-}" ]; then sleep 3; fi'
-  - 'if [ -n "${REACT-}" ] && [ "${TEST-}" = true ]; then npm run react && (npm ls >/dev/null || echo "temporary bypass"); fi'
 script:
   - 'if [ -n "${LINT-}" ]; then npm run lint ; fi'
   - 'if [ "${TEST-}" = true ]; then npm run tests-only ; fi'
   - 'if [ -n "${KARMA-}" ]; then npm run tests-karma ; fi'
-  - 'if [ -n "${COVERAGE-}" ] && [ "${TRAVIS_BRANCH-}" = "master" ]; then npm run react && npm run cover; cat ./coverage/lcov.info | ./node_modules/.bin/coveralls ; fi'
+  - 'if [ -n "${COVERAGE-}" ] && [ "${TRAVIS_BRANCH-}" = "master" ]; then npm run cover; cat ./coverage/lcov.info | ./node_modules/.bin/coveralls ; fi'
 env:
   global:
     - TEST=true
diff --git a/package.json b/package.json
index 2b02006259..0729f9b379 100644
--- a/package.json
+++ b/package.json
@@ -10,14 +10,16 @@
     "prebuild:css": "rimraf lib/css && mkdir -p lib/css",
     "build:css": "node scripts/buildCSS.js",
     "clean": "rimraf lib esm",
-    "precover": "rimraf coverage",
+    "precover": "rimraf coverage && npm run react",
     "cover": "cross-env NODE_ENV=test node --max-old-space-size=2048 $(which nyc) npm run mocha test",
     "lint": "eslint --ext .js,.jsx src test",
     "mocha": "mocha ./test/_helpers",
     "storybook:uninstall": "npm uninstall --no-save @storybook/react && rimraf node_modules/@storybook node_modules/react-modal node_modules/react-dom-factories",
     "react": "enzyme-adapter-react-install 15",
     "pretest": "npm run --silent lint",
+    "pretests-only": "npm run react",
     "tests-only": "npm run mocha --silent test",
+    "pretests-karma": "npm run react",
     "tests-karma": "karma start",
     "test": "npm run tests-only",
     "storybook": "start-storybook -p 6006",

From d40de87b908a62cd064e3b0de6c143ede377758e Mon Sep 17 00:00:00 2001
From: IjzerenHein <hrutjes@gmail.com>
Date: Fri, 24 Nov 2017 15:04:02 +0100
Subject: [PATCH 009/618] Fixed calendar-day background color which was
 hardcoded to #fff

---
 src/components/CalendarDay.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/CalendarDay.jsx b/src/components/CalendarDay.jsx
index ef06976f3b..4e1081ea75 100644
--- a/src/components/CalendarDay.jsx
+++ b/src/components/CalendarDay.jsx
@@ -180,7 +180,7 @@ export default withStyles(({ reactDates: { color } }) => ({
     padding: 0,
     boxSizing: 'border-box',
     color: color.text,
-    background: '#fff',
+    background: color.background,
 
     ':hover': {
       background: color.core.borderLight,

From 8256b3eb7f001ca9b4c46fcf5ac8452e96b69e6c Mon Sep 17 00:00:00 2001
From: IjzerenHein <hrutjes@gmail.com>
Date: Fri, 24 Nov 2017 15:05:08 +0100
Subject: [PATCH 010/618] Made it possible to set the date-input background
 using the theme

---
 src/components/DateInput.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
index 85b86983db..9cffa74b26 100644
--- a/src/components/DateInput.jsx
+++ b/src/components/DateInput.jsx
@@ -293,6 +293,7 @@ export default withStyles(({
       fontWeight: 200,
       fontSize: font.input.size,
       color: color.text,
+      backgroundColor: color.background,
       width: '100%',
       padding: `${spacing.displayTextPaddingVertical}px ${spacing.displayTextPaddingHorizontal}px`,
       border: border.input.border,

From e2cf4b73284dd1f0d2affd0d11fff17ec124c302 Mon Sep 17 00:00:00 2001
From: Stephen Wyatt Bush <stephen.bush@airbnb.com>
Date: Wed, 15 Nov 2017 14:25:09 -0800
Subject: [PATCH 011/618] Reset after-hovered-start in
 componentWillReceiveProps - Fixes #831

after-hovered-start was being unset in onDayClick, which led to an issue
where the modifier was left as applied when changing dates via keyboard
navigation. This moves that logic into componentWillReceiveProps so that
it works in both cases.
---
 src/components/DayPickerRangeController.jsx   |  9 ++--
 .../DayPickerRangeController_spec.jsx         | 51 ++++++++++---------
 2 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 01f96bebfe..d3812f0a72 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -258,6 +258,11 @@ export default class DayPickerRangeController extends React.Component {
     if (didStartDateChange) {
       modifiers = this.deleteModifier(modifiers, this.props.startDate, 'selected-start');
       modifiers = this.addModifier(modifiers, startDate, 'selected-start');
+      if (this.props.startDate) {
+        const startSpan = this.props.startDate.clone().add(1, 'day');
+        const endSpan = this.props.startDate.clone().add(this.props.minimumNights + 1, 'days');
+        modifiers = this.deleteModifierFromRange(modifiers, startSpan, endSpan, 'after-hovered-start');
+      }
     }
 
     if (didEndDateChange) {
@@ -462,10 +467,6 @@ export default class DayPickerRangeController extends React.Component {
       }
 
       if (startDate) {
-        const startSpan = startDate.clone().add(1, 'day');
-        const endSpan = startDate.clone().add(minimumNights + 1, 'days');
-        modifiers = this.deleteModifierFromRange(modifiers, startSpan, endSpan, 'after-hovered-start');
-
         if (isSameDay(day, startDate)) {
           const newStartSpan = startDate.clone().add(1, 'day');
           const newEndSpan = startDate.clone().add(minimumNights + 1, 'days');
diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index 0cf38ff725..f64a1d4421 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -296,6 +296,34 @@ describe('DayPickerRangeController', () => {
           });
           expect(wrapper.instance().state.visibleDays).to.equal(visibleDays);
         });
+        describe('startDate changed from one date to another', () => {
+          it('removes previous `after-hovered-start` range', () => {
+            const minimumNights = 5;
+            const startDate = moment().add(7, 'days');
+            const dayAfterStartDate = startDate.clone().add(1, 'day');
+            const firstAvailableDate = startDate.clone().add(minimumNights + 1, 'days');
+            const deleteModifierFromRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifierFromRange');
+            const nextStartDate = moment().add(4, 'days');
+            const wrapper = shallow((
+              <DayPickerRangeController
+                onDatesChange={sinon.stub()}
+                onFocusChange={sinon.stub()}
+                startDate={startDate}
+                focusedInput={START_DATE}
+                minimumNights={minimumNights}
+              />
+            ));
+            deleteModifierFromRangeSpy.reset();
+            wrapper.instance().componentWillReceiveProps({
+              ...props,
+              startDate: nextStartDate,
+            });
+            const afterHoverStartCalls = getCallsByModifier(deleteModifierFromRangeSpy, 'after-hovered-start');
+            expect(afterHoverStartCalls.length).to.equal(1);
+            expect(isSameDay(afterHoverStartCalls[0].args[1], dayAfterStartDate)).to.equal(true);
+            expect(isSameDay(afterHoverStartCalls[0].args[2], firstAvailableDate)).to.equal(true);
+          });
+        });
       });
     });
 
@@ -1615,29 +1643,6 @@ describe('DayPickerRangeController', () => {
         });
 
         describe('startDate exists', () => {
-          it('removes previous `after-hovered-start` range', () => {
-            const minimumNights = 5;
-            const startDate = moment().add(7, 'days');
-            const dayAfterStartDate = startDate.clone().add(1, 'day');
-            const firstAvailableDate = startDate.clone().add(minimumNights + 1, 'days');
-            const deleteModifierFromRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifierFromRange');
-            const wrapper = shallow((
-              <DayPickerRangeController
-                onDatesChange={sinon.stub()}
-                onFocusChange={sinon.stub()}
-                startDate={startDate}
-                focusedInput={START_DATE}
-                minimumNights={minimumNights}
-              />
-            ));
-            deleteModifierFromRangeSpy.reset();
-            wrapper.instance().onDayMouseEnter(today);
-            const afterHoverStartCalls = getCallsByModifier(deleteModifierFromRangeSpy, 'after-hovered-start');
-            expect(afterHoverStartCalls.length).to.equal(1);
-            expect(isSameDay(afterHoverStartCalls[0].args[1], dayAfterStartDate)).to.equal(true);
-            expect(isSameDay(afterHoverStartCalls[0].args[2], firstAvailableDate)).to.equal(true);
-          });
-
           describe('hoverDate is startDate', () => {
             it('adds new `after-hovered-start` range', () => {
               const minimumNights = 5;

From 11600900ac069fbe7e89980c76620226a8cd4d61 Mon Sep 17 00:00:00 2001
From: Stephen Wyatt Bush <stephen.bush@airbnb.com>
Date: Mon, 27 Nov 2017 11:40:31 -0800
Subject: [PATCH 012/618] Destructure this.props in componentWillReceiveProps

---
 src/components/DayPickerRangeController.jsx | 58 +++++++++++++--------
 1 file changed, 37 insertions(+), 21 deletions(-)

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index d3812f0a72..ff4505e2cc 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -206,23 +206,38 @@ export default class DayPickerRangeController extends React.Component {
       numberOfMonths,
       enableOutsideDays,
     } = nextProps;
+
+    const {
+      startDate: prevStartDate,
+      endDate: prevEndDate,
+      focusedInput: prevFocusedInput,
+      minimumNights: prevMinimumNights,
+      isOutsideRange: prevIsOutsideRange,
+      isDayBlocked: prevIsDayBlocked,
+      isDayHighlighted: prevIsDayHighlighted,
+      phrases: prevPhrases,
+      initialVisibleMonth: prevInitialVisibleMonth,
+      numberOfMonths: prevNumberOfMonths,
+      enableOutsideDays: prevEnableOutsideDays,
+    } = this.props;
+
     let { visibleDays } = this.state;
 
     let recomputeOutsideRange = false;
     let recomputeDayBlocked = false;
     let recomputeDayHighlighted = false;
 
-    if (isOutsideRange !== this.props.isOutsideRange) {
+    if (isOutsideRange !== prevIsOutsideRange) {
       this.modifiers['blocked-out-of-range'] = day => isOutsideRange(day);
       recomputeOutsideRange = true;
     }
 
-    if (isDayBlocked !== this.props.isDayBlocked) {
+    if (isDayBlocked !== prevIsDayBlocked) {
       this.modifiers['blocked-calendar'] = day => isDayBlocked(day);
       recomputeDayBlocked = true;
     }
 
-    if (isDayHighlighted !== this.props.isDayHighlighted) {
+    if (isDayHighlighted !== prevIsDayHighlighted) {
       this.modifiers['highlighted-calendar'] = day => isDayHighlighted(day);
       recomputeDayHighlighted = true;
     }
@@ -231,16 +246,16 @@ export default class DayPickerRangeController extends React.Component {
       recomputeOutsideRange || recomputeDayBlocked || recomputeDayHighlighted
     );
 
-    const didStartDateChange = startDate !== this.props.startDate;
-    const didEndDateChange = endDate !== this.props.endDate;
-    const didFocusChange = focusedInput !== this.props.focusedInput;
+    const didStartDateChange = startDate !== prevStartDate;
+    const didEndDateChange = endDate !== prevEndDate;
+    const didFocusChange = focusedInput !== prevFocusedInput;
 
     if (
-      numberOfMonths !== this.props.numberOfMonths ||
-      enableOutsideDays !== this.props.enableOutsideDays ||
+      numberOfMonths !== prevNumberOfMonths ||
+      enableOutsideDays !== prevEnableOutsideDays ||
       (
-        initialVisibleMonth !== this.props.initialVisibleMonth &&
-        !this.props.focusedInput &&
+        initialVisibleMonth !== prevInitialVisibleMonth &&
+        !prevFocusedInput &&
         didFocusChange
       )
     ) {
@@ -256,26 +271,27 @@ export default class DayPickerRangeController extends React.Component {
     let modifiers = {};
 
     if (didStartDateChange) {
-      modifiers = this.deleteModifier(modifiers, this.props.startDate, 'selected-start');
+      modifiers = this.deleteModifier(modifiers, prevStartDate, 'selected-start');
       modifiers = this.addModifier(modifiers, startDate, 'selected-start');
-      if (this.props.startDate) {
-        const startSpan = this.props.startDate.clone().add(1, 'day');
-        const endSpan = this.props.startDate.clone().add(this.props.minimumNights + 1, 'days');
+
+      if (prevStartDate) {
+        const startSpan = prevStartDate.clone().add(1, 'day');
+        const endSpan = prevStartDate.clone().add(prevMinimumNights + 1, 'days');
         modifiers = this.deleteModifierFromRange(modifiers, startSpan, endSpan, 'after-hovered-start');
       }
     }
 
     if (didEndDateChange) {
-      modifiers = this.deleteModifier(modifiers, this.props.endDate, 'selected-end');
+      modifiers = this.deleteModifier(modifiers, prevEndDate, 'selected-end');
       modifiers = this.addModifier(modifiers, endDate, 'selected-end');
     }
 
     if (didStartDateChange || didEndDateChange) {
-      if (this.props.startDate && this.props.endDate) {
+      if (prevStartDate && prevEndDate) {
         modifiers = this.deleteModifierFromRange(
           modifiers,
-          this.props.startDate,
-          this.props.endDate.clone().add(1, 'day'),
+          prevStartDate,
+          prevEndDate.clone().add(1, 'day'),
           'selected-span',
         );
       }
@@ -303,9 +319,9 @@ export default class DayPickerRangeController extends React.Component {
       modifiers = this.addModifierToRange(modifiers, startSpan, endSpan, 'after-hovered-start');
     }
 
-    if (minimumNights > 0 || minimumNights !== this.props.minimumNights) {
+    if (minimumNights > 0 || minimumNights !== prevMinimumNights) {
       if (didFocusChange || didStartDateChange) {
-        const startSpan = this.props.startDate ? this.props.startDate : this.today;
+        const startSpan = prevStartDate || this.today;
         modifiers = this.deleteModifierFromRange(
           modifiers,
           startSpan,
@@ -378,7 +394,7 @@ export default class DayPickerRangeController extends React.Component {
       });
     }
 
-    if (didFocusChange || phrases !== this.props.phrases) {
+    if (didFocusChange || phrases !== prevPhrases) {
       // set the appropriate CalendarDay phrase based on focusedInput
       const chooseAvailableDate = getChooseAvailableDatePhrase(phrases, focusedInput);
 

From e7316bdeac589a131ed1a21b64326521cfca9563 Mon Sep 17 00:00:00 2001
From: steevn <steven.lundgren+steevn@gmail.com>
Date: Mon, 27 Nov 2017 12:28:31 -0800
Subject: [PATCH 013/618] Fix README typo

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 59727fbe0b..b5204534d4 100644
--- a/README.md
+++ b/README.md
@@ -66,7 +66,7 @@ Create a CSS file with the contents of `require.resolve('react-dates/lib/css/_da
 To see this in action, you can check out https://github.com/majapw/react-dates-demo which adds `react-dates` on top of a simple `create-react-app` setup.
 
 #### Overriding styles
-Right now, the easiest way to tweak `react-dates` to your heart's contents is to create another stylesheet to override the default react-dates styles. For example, you could create a file named `react_dates_overrides.css` with the following contents:
+Right now, the easiest way to tweak `react-dates` to your heart's content is to create another stylesheet to override the default react-dates styles. For example, you could create a file named `react_dates_overrides.css` with the following contents:
 
 ```css
 .CalendarDay__highlighted_calendar {

From 0d26f19b55ea93a142226d26e670256783dd92e9 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Mon, 27 Nov 2017 16:20:15 -0800
Subject: [PATCH 014/618] Bump react to v16 in dev deps

---
 package.json | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 0729f9b379..994206e9a7 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "lint": "eslint --ext .js,.jsx src test",
     "mocha": "mocha ./test/_helpers",
     "storybook:uninstall": "npm uninstall --no-save @storybook/react && rimraf node_modules/@storybook node_modules/react-modal node_modules/react-dom-factories",
-    "react": "enzyme-adapter-react-install 15",
+    "react": "enzyme-adapter-react-install 16",
     "pretest": "npm run --silent lint",
     "pretests-only": "npm run react",
     "tests-only": "npm run mocha --silent test",
@@ -96,13 +96,10 @@
     "node-sass": "^4.5.3",
     "nyc": "^11.2.1",
     "raw-loader": "^0.5.1",
-    "react": "^0.14 || ^15.5.4",
-    "react-addons-shallow-compare": "^0.14 || ^15.5.2",
-    "react-addons-test-utils": "^0.14 || ^15.5.1",
-    "react-dom": "^0.14 || ^15.5.4",
-    "react-test-renderer": "^15.6.1",
+    "react": "^0.14 || ^15.5.4 || ^16.1.1",
+    "react-dom": "^0.14 || ^15.5.4 || ^16.1.1",
     "react-with-styles-interface-aphrodite": "^3.1.1",
-    "react-with-styles-interface-css-compiler": "^1.0.1",
+    "react-with-styles-interface-css-compiler": "^1.1.0",
     "rimraf": "^2.6.2",
     "safe-publish-latest": "^1.1.1",
     "sass-loader": "^6.0.6",
@@ -119,6 +116,7 @@
     "object.assign": "^4.0.4",
     "object.values": "^1.0.4",
     "prop-types": "^15.5.10",
+    "react-addons-shallow-compare": "^15.5.2",
     "react-moment-proptypes": "^1.5.0",
     "react-portal": "^3.1.0",
     "react-with-styles": "^2.2.0",
@@ -126,9 +124,8 @@
   },
   "peerDependencies": {
     "moment": "^2.18.1",
-    "react": ">=0.14",
-    "react-dom": ">=0.14",
-    "react-addons-shallow-compare": ">=0.14"
+    "react": "^0.14 || ^15.5.4 || ^16.1.1",
+    "react-dom": "^0.14 || ^15.5.4 || ^16.1.1"
   },
   "greenkeeper": {
     "ignore": [

From 6ff22f2dfa5e6ce777b9eb234d4415848eb98cbd Mon Sep 17 00:00:00 2001
From: Toru Kobayashi <koba0004@gmail.com>
Date: Tue, 28 Nov 2017 11:23:31 +0900
Subject: [PATCH 015/618] Add dayAriaLabelFormat into
 DayPickerSingleDateController and DayPickerRangeController

---
 src/components/DayPickerRangeController.jsx      | 3 +++
 src/components/DayPickerSingleDateController.jsx | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index ff4505e2cc..7ce61a1254 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -80,6 +80,7 @@ const propTypes = forbidExtraProps({
   monthFormat: PropTypes.string,
   weekDayFormat: PropTypes.string,
   phrases: PropTypes.shape(getPhrasePropTypes(DayPickerPhrases)),
+  dayAriaLabelFormat: PropTypes.string,
 
   isRTL: PropTypes.bool,
 });
@@ -901,6 +902,7 @@ export default class DayPickerRangeController extends React.Component {
       showKeyboardShortcuts,
       isRTL,
       weekDayFormat,
+      dayAriaLabelFormat,
       verticalHeight,
     } = this.props;
 
@@ -939,6 +941,7 @@ export default class DayPickerRangeController extends React.Component {
         phrases={phrases}
         isRTL={isRTL}
         weekDayFormat={weekDayFormat}
+        dayAriaLabelFormat={dayAriaLabelFormat}
         verticalHeight={verticalHeight}
       />
     );
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 1b0d037dcd..fb1be51b35 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -73,6 +73,7 @@ const propTypes = forbidExtraProps({
   monthFormat: PropTypes.string,
   weekDayFormat: PropTypes.string,
   phrases: PropTypes.shape(getPhrasePropTypes(DayPickerPhrases)),
+  dayAriaLabelFormat: PropTypes.string,
 
   isRTL: PropTypes.bool,
 });
@@ -583,6 +584,7 @@ export default class DayPickerSingleDateController extends React.Component {
       isFocused,
       isRTL,
       phrases,
+      dayAriaLabelFormat,
       onOutsideClick,
       onBlur,
       showKeyboardShortcuts,
@@ -622,6 +624,7 @@ export default class DayPickerSingleDateController extends React.Component {
         isRTL={isRTL}
         showKeyboardShortcuts={showKeyboardShortcuts}
         weekDayFormat={weekDayFormat}
+        dayAriaLabelFormat={dayAriaLabelFormat}
         verticalHeight={verticalHeight}
       />
     );

From 0ce7164751c383e8b0e9daa0b6589c8da6bdc685 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Tue, 28 Nov 2017 11:53:48 -0800
Subject: [PATCH 016/618] Adds back today modifier

---
 src/components/CalendarDay.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/CalendarDay.jsx b/src/components/CalendarDay.jsx
index 948b31fd22..603707641e 100644
--- a/src/components/CalendarDay.jsx
+++ b/src/components/CalendarDay.jsx
@@ -139,6 +139,7 @@ class CalendarDay extends React.Component {
         {...css(
           styles.CalendarDay_container,
           isOutsideDay && styles.CalendarDay__outside,
+          modifiers.has('today') && styles.CalendarDay__today,
           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,
@@ -351,5 +352,5 @@ export default withStyles(({ reactDates: { color } }) => ({
 
   CalendarDay__selected_start: {},
   CalendarDay__selected_end: {},
-
+  CalendarDay__today: {},
 }))(CalendarDay);

From c9c35c90aa982b8cef4c63c887c08ab941031a48 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Tue, 28 Nov 2017 13:15:06 -0800
Subject: [PATCH 017/618] Version 15.2.0

---
 CHANGELOG.md | 7 +++++++
 package.json | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b4e46807e6..1ae09f3d68 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Change Log
 
+## 15.2.0
+- [new] Add back today modifier (and class) ([#861](https://github.com/airbnb/react-dates/pull/861))
+- [new] Add ariaLabelFormat prop to CalendarDay ([#842](https://github.com/airbnb/react-dates/pull/842), [#857](https://github.com/airbnb/react-dates/pull/857))
+- [fix] Reset `after-hover-start` in `componentWillReceiveProps` instead of only on click ([#843](https://github.com/airbnb/react-dates/pull/843))
+- [fix] Use `color.background` variable instead of hardcoded #fff for theming ([#852](https://github.com/airbnb/react-dates/pull/852))
+- [fix] Update CalendarMonthGrid months based on locale change ([#795](https://github.com/airbnb/react-dates/pull/795))
+
 ## 15.1.0
 - [fix] Add explicit border-radius on KeyboardShortcuts button ([#792](https://github.com/airbnb/react-dates/pull/792))
 - [fix] Pass onClose from SingleDatePicker to DayPickerSingleDateController ([#816](https://github.com/airbnb/react-dates/pull/816))
diff --git a/package.json b/package.json
index 994206e9a7..54333db759 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "15.1.0",
+  "version": "15.2.0",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From c9bb71d2c6e7c73a9ac9b8c4628ab71e9214ce30 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Tue, 28 Nov 2017 11:52:11 -0800
Subject: [PATCH 018/618] Add DateRangePicker example with presets

---
 .storybook-css/config.js           |   1 +
 .storybook/config.js               |   1 +
 examples/PresetDateRangePicker.jsx | 214 +++++++++++++++++++++++++++++
 stories/PresetDateRangePicker.js   |  36 +++++
 4 files changed, 252 insertions(+)
 create mode 100644 examples/PresetDateRangePicker.jsx
 create mode 100644 stories/PresetDateRangePicker.js

diff --git a/.storybook-css/config.js b/.storybook-css/config.js
index f3b12328c7..d6652020d0 100644
--- a/.storybook-css/config.js
+++ b/.storybook-css/config.js
@@ -67,6 +67,7 @@ function loadStories() {
   require('../stories/DayPickerRangeController');
   require('../stories/DayPickerSingleDateController');
   require('../stories/DayPicker');
+  require('../stories/PresetDateRangePicker');
 }
 
 setAddon(infoAddon);
diff --git a/.storybook/config.js b/.storybook/config.js
index f0eca636d6..3764b18a9f 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -67,6 +67,7 @@ function loadStories() {
   require('../stories/DayPickerRangeController');
   require('../stories/DayPickerSingleDateController');
   require('../stories/DayPicker');
+  require('../stories/PresetDateRangePicker');
 }
 
 setAddon(infoAddon);
diff --git a/examples/PresetDateRangePicker.jsx b/examples/PresetDateRangePicker.jsx
new file mode 100644
index 0000000000..31662f5cc5
--- /dev/null
+++ b/examples/PresetDateRangePicker.jsx
@@ -0,0 +1,214 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import momentPropTypes from 'react-moment-proptypes';
+import moment from 'moment';
+import omit from 'lodash/omit';
+
+import { withStyles, withStylesPropTypes, css } from 'react-with-styles';
+
+import DateRangePicker from '../src/components/DateRangePicker';
+
+import { DateRangePickerPhrases } from '../src/defaultPhrases';
+import DateRangePickerShape from '../src/shapes/DateRangePickerShape';
+import { START_DATE, END_DATE, HORIZONTAL_ORIENTATION, ANCHOR_LEFT } from '../src/constants';
+import isSameDay from '../src/utils/isSameDay';
+
+const propTypes = {
+  ...withStylesPropTypes,
+
+  // example props for the demo
+  autoFocus: PropTypes.bool,
+  autoFocusEndDate: PropTypes.bool,
+  initialStartDate: momentPropTypes.momentObj,
+  initialEndDate: momentPropTypes.momentObj,
+  presets: PropTypes.arrayOf(PropTypes.shape({
+    text: PropTypes.string,
+    start: momentPropTypes.momentObj,
+    end: momentPropTypes.momentObj,
+  })),
+
+  ...omit(DateRangePickerShape, [
+    'startDate',
+    'endDate',
+    'onDatesChange',
+    'focusedInput',
+    'onFocusChange',
+  ]),
+};
+
+const defaultProps = {
+  // example props for the demo
+  autoFocus: false,
+  autoFocusEndDate: false,
+  initialStartDate: null,
+  initialEndDate: null,
+  presets: [],
+
+  // input related props
+  startDateId: START_DATE,
+  startDatePlaceholderText: 'Start Date',
+  endDateId: END_DATE,
+  endDatePlaceholderText: 'End Date',
+  disabled: false,
+  required: false,
+  screenReaderInputMessage: '',
+  showClearDates: false,
+  showDefaultInputIcon: false,
+  customInputIcon: null,
+  customArrowIcon: null,
+  customCloseIcon: null,
+
+  // calendar presentation and interaction related props
+  renderMonth: null,
+  orientation: HORIZONTAL_ORIENTATION,
+  anchorDirection: ANCHOR_LEFT,
+  horizontalMargin: 0,
+  withPortal: false,
+  withFullScreenPortal: false,
+  initialVisibleMonth: null,
+  numberOfMonths: 2,
+  keepOpenOnDateSelect: false,
+  reopenPickerOnClearDates: false,
+  isRTL: false,
+
+  // navigation related props
+  navPrev: null,
+  navNext: null,
+  onPrevMonthClick() {},
+  onNextMonthClick() {},
+  onClose() {},
+
+  // day presentation and interaction related props
+  renderDay: null,
+  minimumNights: 0,
+  enableOutsideDays: false,
+  isDayBlocked: () => false,
+  isOutsideRange: day => false,
+  isDayHighlighted: () => false,
+
+  // internationalization
+  displayFormat: () => moment.localeData().longDateFormat('L'),
+  monthFormat: 'MMMM YYYY',
+  phrases: DateRangePickerPhrases,
+};
+
+class DateRangePickerWrapper extends React.Component {
+  constructor(props) {
+    super(props);
+
+    let focusedInput = null;
+    if (props.autoFocus) {
+      focusedInput = START_DATE;
+    } else if (props.autoFocusEndDate) {
+      focusedInput = END_DATE;
+    }
+
+    this.state = {
+      focusedInput,
+      startDate: props.initialStartDate,
+      endDate: props.initialEndDate,
+    };
+
+    this.onDatesChange = this.onDatesChange.bind(this);
+    this.onFocusChange = this.onFocusChange.bind(this);
+    this.renderDatePresets = this.renderDatePresets.bind(this);
+  }
+
+  onDatesChange({ startDate, endDate }) {
+    this.setState({ startDate, endDate });
+  }
+
+  onFocusChange(focusedInput) {
+    this.setState({ focusedInput });
+  }
+
+  renderDatePresets() {
+    const { presets, styles } = this.props;
+    const { startDate, endDate } = this.state;
+
+    return (
+      <div {...css(styles.PresetDateRangePicker_panel)}>
+        {presets.map(({ text, start, end }) => {
+          const isSelected = isSameDay(start, startDate) && isSameDay(end, endDate);
+          return (
+            <button
+              key={text}
+              {...css(
+                styles.PresetDateRangePicker_button,
+                isSelected && styles.PresetDateRangePicker_button__selected,
+              )}
+              type="button"
+              onClick={() => this.onDatesChange({ startDate: start, endDate: end })}
+            >
+              {text}
+            </button>
+          );
+        })}
+      </div>
+    );
+  }
+
+  render() {
+    const { focusedInput, startDate, endDate } = this.state;
+
+    // autoFocus, autoFocusEndDate, initialStartDate and initialEndDate are helper props for the
+    // example wrapper but are not props on the SingleDatePicker itself and
+    // thus, have to be omitted.
+    const props = omit(this.props, [
+      'autoFocus',
+      'autoFocusEndDate',
+      'initialStartDate',
+      'initialEndDate',
+      'presets',
+    ]);
+
+    return (
+      <div>
+        <DateRangePicker
+          {...props}
+          renderCalendarInfo={this.renderDatePresets}
+          onDatesChange={this.onDatesChange}
+          onFocusChange={this.onFocusChange}
+          focusedInput={focusedInput}
+          startDate={startDate}
+          endDate={endDate}
+        />
+      </div>
+    );
+  }
+}
+
+DateRangePickerWrapper.propTypes = propTypes;
+DateRangePickerWrapper.defaultProps = defaultProps;
+
+export default withStyles(({ reactDates: { color } }) => ({
+  PresetDateRangePicker_panel: {
+    padding: '0 22px 11px 22px',
+  },
+
+  PresetDateRangePicker_button: {
+    position: 'relative',
+    height: '100%',
+    textAlign: 'center',
+    background: 'none',
+    border: `2px solid ${color.core.primary}`,
+    color: color.core.primary,
+    padding: '4px 12px',
+    marginRight: 8,
+    font: 'inherit',
+    fontWeight: 700,
+    lineHeight: 'normal',
+    overflow: 'visible',
+    boxSizing: 'border-box',
+    cursor: 'pointer',
+
+    ':active': {
+      outline: 0,
+    },
+  },
+
+  PresetDateRangePicker_button__selected: {
+    color: color.core.white,
+    background: color.core.primary,
+  },
+}))(DateRangePickerWrapper);
diff --git a/stories/PresetDateRangePicker.js b/stories/PresetDateRangePicker.js
new file mode 100644
index 0000000000..e5ac247b6e
--- /dev/null
+++ b/stories/PresetDateRangePicker.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import moment from 'moment';
+
+import PresetDateRangePicker from '../examples/PresetDateRangePicker';
+
+const today = moment();
+const tomorrow = moment().add(1, 'day');
+const presets = [{
+  text: 'Today',
+  start: today,
+  end: today,
+},
+{
+  text: 'Tomorrow',
+  start: tomorrow,
+  end: tomorrow,
+},
+{
+  text: 'Next Week',
+  start: today,
+  end: moment().add(1, 'week'),
+},
+{
+  text: 'Next Month',
+  start: today,
+  end: moment().add(1, 'month'),
+}];
+
+storiesOf('PresetDatePicker', module)
+  .addWithInfo('default', () => (
+    <PresetDateRangePicker
+      presets={presets}
+      autoFocus
+    />
+  ));

From 61cb8a6d2a75cddb85f817c2ddde1dbf072f2d5f Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Tue, 28 Nov 2017 13:55:28 -0800
Subject: [PATCH 019/618] Separate out InfoPanelDecorator and add usage
 information for the PresetDateRangePicker

---
 scripts/buildCSS.js                      |  8 ++++--
 stories/DayPickerRangeController.js      | 27 ++----------------
 stories/DayPickerSingleDateController.js | 29 +++-----------------
 stories/InfoPanelDecorator.js            | 35 ++++++++++++++++++++++++
 stories/PresetDateRangePicker.js         | 12 ++++++++
 5 files changed, 59 insertions(+), 52 deletions(-)
 create mode 100644 stories/InfoPanelDecorator.js

diff --git a/scripts/buildCSS.js b/scripts/buildCSS.js
index ab1b7a9e7c..0efc8b315d 100644
--- a/scripts/buildCSS.js
+++ b/scripts/buildCSS.js
@@ -16,12 +16,14 @@ require('../test/_helpers/ignoreSVGStrings');
 registerMaxSpecificity(0);
 registerCSSInterfaceWithDefaultTheme();
 
-const DateRangePickerPath = './src/components/DateRangePicker.jsx';
-const SingleDatePickerPath = './src/components/SingleDatePicker.jsx';
+const DateRangePickerPath = './examples/DateRangePickerWrapper.jsx';
+const SingleDatePickerPath = './examples/SingleDatePickerWrapper.jsx';
+const PresetDateRangePickerPath = './examples/PresetDateRangePicker.jsx';
 
 const dateRangePickerCSS = compileCSS(DateRangePickerPath);
 const singleDatePickerCSS = compileCSS(SingleDatePickerPath);
-const CSS = dateRangePickerCSS + singleDatePickerCSS;
+const presetDatePickerCSS = compileCSS(PresetDateRangePickerPath);
+const CSS = dateRangePickerCSS + singleDatePickerCSS + presetDatePickerCSS;
 
 const format = new CleanCSS({
   level: optimizeForProduction ? 2 : 0,
diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
index a13ab7a28b..3babfe7af9 100644
--- a/stories/DayPickerRangeController.js
+++ b/stories/DayPickerRangeController.js
@@ -2,6 +2,8 @@ import React from 'react';
 import moment from 'moment';
 import { storiesOf, action } from '@storybook/react';
 
+import InfoPanelDecorator, { monospace } from './InfoPanelDecorator';
+
 import isSameDay from '../src/utils/isSameDay';
 import isInclusivelyAfterDay from '../src/utils/isInclusivelyAfterDay';
 
@@ -9,8 +11,6 @@ import { VERTICAL_ORIENTATION } from '../src/constants';
 
 import DayPickerRangeControllerWrapper from '../examples/DayPickerRangeControllerWrapper';
 
-const monospace = text => `<span style="font-family:monospace;background:#f7f7f7">${text}</span>`;
-
 const dayPickerRangeControllerInfo = `The ${monospace('DayPickerRangeController')} component is a
   fully controlled version of the ${monospace('DayPicker')} that has built-in rules for selecting a
   date range. Unlike the ${monospace('DayPicker')}, which requires the consumer to explicitly define
@@ -28,27 +28,6 @@ const dayPickerRangeControllerInfo = `The ${monospace('DayPickerRangeController'
   ${monospace('DateRangePicker')} functionality and calendar presentation, but would like to
   implement your own inputs.`;
 
-const InfoPanel = ({ text }) => (
-  <div
-    style={{
-      backgroundColor: '#fff',
-      fontColor: '#3c3f40',
-      fontSize: 14,
-      margin: '8px 0',
-      padding: 16,
-    }}
-  >
-    <span dangerouslySetInnerHTML={{ __html: text }} />
-  </div>
-);
-
-const InfoPanelDecorator = story => (
-  <div>
-    <InfoPanel text={dayPickerRangeControllerInfo} />
-    {story()}
-  </div>
-);
-
 const TestPrevIcon = () => (
   <span
     style={{
@@ -99,7 +78,7 @@ const datesList = [
 ];
 
 storiesOf('DayPickerRangeController', module)
-  .addDecorator(InfoPanelDecorator)
+  .addDecorator(InfoPanelDecorator(dayPickerRangeControllerInfo))
   .addWithInfo('default', () => (
     <DayPickerRangeControllerWrapper
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
diff --git a/stories/DayPickerSingleDateController.js b/stories/DayPickerSingleDateController.js
index 2b03e8fb29..ff6979cc26 100644
--- a/stories/DayPickerSingleDateController.js
+++ b/stories/DayPickerSingleDateController.js
@@ -2,6 +2,8 @@ import React from 'react';
 import moment from 'moment';
 import { storiesOf, action } from '@storybook/react';
 
+import InfoPanelDecorator, { monospace } from './InfoPanelDecorator';
+
 import isSameDay from '../src/utils/isSameDay';
 import isInclusivelyAfterDay from '../src/utils/isInclusivelyAfterDay';
 
@@ -9,9 +11,7 @@ import { VERTICAL_ORIENTATION } from '../src/constants';
 
 import DayPickerSingleDateControllerWrapper from '../examples/DayPickerSingleDateControllerWrapper';
 
-const monospace = text => `<span style="font-family:monospace;background:#f7f7f7">${text}</span>`;
-
-const dayPickerRangeControllerInfo = `The ${monospace('DayPickerSingleDateController')} component is a
+const dayPickerSingleDateControllerInfo = `The ${monospace('DayPickerSingleDateController')} component is a
   fully controlled version of the ${monospace('DayPicker')} that has built-in rules for selecting a
   single date. Unlike the ${monospace('DayPicker')}, which requires the consumer to explicitly define
   ${monospace('onDayMouseEnter')}, ${monospace('onDayMouseLeave')}, and ${monospace('onDayClick')}
@@ -28,27 +28,6 @@ const dayPickerRangeControllerInfo = `The ${monospace('DayPickerSingleDateContro
   ${monospace('SingleDatePicker')} functionality and calendar presentation, but would like to
   implement your own input.`;
 
-const InfoPanel = ({ text }) => (
-  <div
-    style={{
-      backgroundColor: '#fff',
-      fontColor: '#3c3f40',
-      fontSize: 14,
-      margin: '8px 0',
-      padding: 16,
-    }}
-  >
-    <span dangerouslySetInnerHTML={{ __html: text }} />
-  </div>
-);
-
-const InfoPanelDecorator = story => (
-  <div>
-    <InfoPanel text={dayPickerRangeControllerInfo} />
-    {story()}
-  </div>
-);
-
 const TestPrevIcon = () => (
   <span
     style={{
@@ -99,7 +78,7 @@ const datesList = [
 ];
 
 storiesOf('DayPickerSingleDateController', module)
-  .addDecorator(InfoPanelDecorator)
+  .addDecorator(InfoPanelDecorator(dayPickerSingleDateControllerInfo))
   .addWithInfo('default', () => (
     <DayPickerSingleDateControllerWrapper
       onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
diff --git a/stories/InfoPanelDecorator.js b/stories/InfoPanelDecorator.js
new file mode 100644
index 0000000000..f1f6a3d5a4
--- /dev/null
+++ b/stories/InfoPanelDecorator.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export function monospace(text) {
+  return `<span style="font-family:monospace;background:#f7f7f7">${text}</span>`;
+}
+
+function InfoPanel({ text }) {
+  return (
+    <div
+      style={{
+        backgroundColor: '#fff',
+        fontColor: '#3c3f40',
+        fontSize: 14,
+        margin: '8px 0',
+        padding: 16,
+      }}
+    >
+      <span dangerouslySetInnerHTML={{ __html: text }} />
+    </div>
+  );
+}
+
+InfoPanel.propTypes = {
+  text: PropTypes.string.isRequired,
+};
+
+export default function InfoPanelDecorator(text) {
+  return story => (
+    <div>
+      <InfoPanel text={text} />
+      {story()}
+    </div>
+  );
+}
diff --git a/stories/PresetDateRangePicker.js b/stories/PresetDateRangePicker.js
index e5ac247b6e..7d3a9864fb 100644
--- a/stories/PresetDateRangePicker.js
+++ b/stories/PresetDateRangePicker.js
@@ -4,6 +4,17 @@ import moment from 'moment';
 
 import PresetDateRangePicker from '../examples/PresetDateRangePicker';
 
+import InfoPanelDecorator, { monospace } from './InfoPanelDecorator';
+
+const presetDateRangePickerControllerInfo = `The ${monospace('PresetDateRangePicker')} component is not
+  exported by ${monospace('react-dates')}. It is instead an example of how you might use the
+  ${monospace('DateRangePicker')} along with the ${monospace('renderCalendarInfo')} prop in
+  order to add preset range buttons for easy range selection. You can see the example code
+  <a href="https://github.com/airbnb/react-dates/blob/master/examples/PresetDateRangePicker.jsx">
+  here</a> and
+  <a href="https://github.com/airbnb/react-dates/blob/master/stories/PresetDateRangePicker.js">
+  here</a>.`;
+
 const today = moment();
 const tomorrow = moment().add(1, 'day');
 const presets = [{
@@ -28,6 +39,7 @@ const presets = [{
 }];
 
 storiesOf('PresetDatePicker', module)
+  .addDecorator(InfoPanelDecorator(presetDateRangePickerControllerInfo))
   .addWithInfo('default', () => (
     <PresetDateRangePicker
       presets={presets}

From e0d96f66f74ccd13dd799a962919bad60738dbf4 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Tue, 28 Nov 2017 16:37:25 -0800
Subject: [PATCH 020/618] Version 15.2.1

---
 CHANGELOG.md | 3 +++
 package.json | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1ae09f3d68..43e6509f09 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # Change Log
 
+## 15.2.1
+- [fix] Republish `_datepicker.css`
+
 ## 15.2.0
 - [new] Add back today modifier (and class) ([#861](https://github.com/airbnb/react-dates/pull/861))
 - [new] Add ariaLabelFormat prop to CalendarDay ([#842](https://github.com/airbnb/react-dates/pull/842), [#857](https://github.com/airbnb/react-dates/pull/857))
diff --git a/package.json b/package.json
index 54333db759..85af5863f8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "15.2.0",
+  "version": "15.2.1",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 17899356500562ec62b0f083196ca67a3da1d21c Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Tue, 28 Nov 2017 19:26:44 -0800
Subject: [PATCH 021/618] Remove startDateId and endDateId default prop values

---
 src/components/DateRangePicker.jsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 1143009bd8..026b903b45 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -46,9 +46,7 @@ const defaultProps = {
   focusedInput: null,
 
   // input related props
-  startDateId: START_DATE,
   startDatePlaceholderText: 'Start Date',
-  endDateId: END_DATE,
   endDatePlaceholderText: 'End Date',
   disabled: false,
   required: false,

From 81ba5d1276cb3b5369f3dbee48fb7b5fd84ca61a Mon Sep 17 00:00:00 2001
From: Weilin Shi <934587911@qq.com>
Date: Wed, 29 Nov 2017 15:16:37 +0800
Subject: [PATCH 022/618] Remove unused style in KeyboardShortcutRow.jsx

`width: 'auto'` is ignored due to display.
---
 src/components/KeyboardShortcutRow.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/KeyboardShortcutRow.jsx b/src/components/KeyboardShortcutRow.jsx
index 5bfa2fd4de..fed00a93ac 100644
--- a/src/components/KeyboardShortcutRow.jsx
+++ b/src/components/KeyboardShortcutRow.jsx
@@ -72,7 +72,6 @@ export default withStyles(({ reactDates: { color } }) => ({
   },
 
   KeyboardShortcutRow_keyContainer__block: {
-    width: 'auto',
     textAlign: 'left',
     display: 'inline',
   },

From 2bf64761b825e350b6a2304fd340f3e46a67a03f Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Wed, 29 Nov 2017 16:08:28 -0800
Subject: [PATCH 023/618] Add borderless option to the `DayPicker` variations

---
 README.md                                        |  1 +
 src/components/DayPicker.jsx                     | 12 +++++++++---
 src/components/DayPickerRangeController.jsx      |  4 ++++
 src/components/DayPickerSingleDateController.jsx |  4 ++++
 stories/DayPicker.js                             |  5 ++++-
 5 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index b5204534d4..1f6af827c9 100644
--- a/README.md
+++ b/README.md
@@ -262,6 +262,7 @@ The following is a list of other *OPTIONAL* props you may provide to the `DayPic
   renderCalendarInfo: PropTypes.func,
   onOutsideClick: PropTypes.func,
   keepOpenOnDateSelect: PropTypes.bool,
+  noBorder: PropTypes.bool,
 
   // navigation related props
   navPrev: PropTypes.node,
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 07cc79efcb..c5aeae48fc 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -56,6 +56,7 @@ const propTypes = forbidExtraProps({
   daySize: nonNegativeInteger,
   isRTL: PropTypes.bool,
   verticalHeight: nonNegativeInteger,
+  noBorder: PropTypes.bool,
 
   // navigation props
   navPrev: PropTypes.node,
@@ -102,6 +103,7 @@ export const defaultProps = {
   daySize: DAY_SIZE,
   isRTL: false,
   verticalHeight: null,
+  noBorder: false,
 
   // navigation props
   navPrev: null,
@@ -688,6 +690,7 @@ class DayPicker extends React.Component {
       phrases,
       verticalHeight,
       dayAriaLabelFormat,
+      noBorder,
     } = this.props;
 
     const numOfWeekHeaders = this.isVertical() ? 1 : numberOfMonths;
@@ -748,6 +751,7 @@ class DayPicker extends React.Component {
           this.isVertical() && withPortal && styles.DayPicker_portal__vertical,
           dayPickerStyle,
           !hasSetHeight && styles.DayPicker__hidden,
+          !noBorder && styles.DayPicker__withBorder,
         )}
       >
         <OutsideClickHandler onOutsideClick={onOutsideClick}>
@@ -780,7 +784,6 @@ class DayPicker extends React.Component {
                 this.isVertical() && styles.DayPicker_transitionContainer__vertical,
                 verticalScrollable && styles.DayPicker_transitionContainer__verticalScrollable,
                 transitionContainerStyle,
-
               )}
               ref={this.setTransitionContainerRef}
             >
@@ -844,8 +847,6 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
 
   DayPicker__horizontal: {
     background: color.background,
-    boxShadow: '0 2px 6px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.07)',
-    borderRadius: 3,
   },
 
   DayPicker__verticalScrollable: {
@@ -856,6 +857,11 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     visibility: 'hidden',
   },
 
+  DayPicker__withBorder: {
+    boxShadow: '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',
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 7ce61a1254..64846a2784 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -59,6 +59,7 @@ const propTypes = forbidExtraProps({
   initialVisibleMonth: PropTypes.func,
   hideKeyboardShortcutsPanel: PropTypes.bool,
   daySize: nonNegativeInteger,
+  noBorder: PropTypes.bool,
 
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
@@ -121,6 +122,7 @@ const defaultProps = {
   renderCalendarInfo: null,
   firstDayOfWeek: null,
   verticalHeight: null,
+  noBorder: false,
 
   // accessibility
   onBlur() {},
@@ -904,6 +906,7 @@ export default class DayPickerRangeController extends React.Component {
       weekDayFormat,
       dayAriaLabelFormat,
       verticalHeight,
+      noBorder,
     } = this.props;
 
     const { currentMonth, phrases, visibleDays } = this.state;
@@ -943,6 +946,7 @@ export default class DayPickerRangeController extends React.Component {
         weekDayFormat={weekDayFormat}
         dayAriaLabelFormat={dayAriaLabelFormat}
         verticalHeight={verticalHeight}
+        noBorder={noBorder}
       />
     );
   }
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index fb1be51b35..b438b5f47b 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -54,6 +54,7 @@ const propTypes = forbidExtraProps({
   hideKeyboardShortcutsPanel: PropTypes.bool,
   daySize: nonNegativeInteger,
   verticalHeight: nonNegativeInteger,
+  noBorder: PropTypes.bool,
 
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
@@ -102,6 +103,7 @@ const defaultProps = {
   firstDayOfWeek: null,
   daySize: DAY_SIZE,
   verticalHeight: null,
+  noBorder: false,
 
   navPrev: null,
   navNext: null,
@@ -590,6 +592,7 @@ export default class DayPickerSingleDateController extends React.Component {
       showKeyboardShortcuts,
       weekDayFormat,
       verticalHeight,
+      noBorder,
     } = this.props;
 
     const { currentMonth, visibleDays } = this.state;
@@ -626,6 +629,7 @@ export default class DayPickerSingleDateController extends React.Component {
         weekDayFormat={weekDayFormat}
         dayAriaLabelFormat={dayAriaLabelFormat}
         verticalHeight={verticalHeight}
+        noBorder={noBorder}
       />
     );
 
diff --git a/stories/DayPicker.js b/stories/DayPicker.js
index cea8b8ae6d..8420f3b050 100644
--- a/stories/DayPicker.js
+++ b/stories/DayPicker.js
@@ -119,6 +119,9 @@ storiesOf('DayPicker', module)
   ))
   .addWithInfo('with custom week day format', () => (
     <DayPicker
-      weekDayFormat='ddd'
+      weekDayFormat="ddd"
     />
+  ))
+  .addWithInfo('noBorder', () => (
+    <DayPicker noBorder />
   ));

From 9f3238f35639f5a5b86cfd0a9de67f57146f4aad Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Wed, 29 Nov 2017 16:28:53 -0800
Subject: [PATCH 024/618] Add borderless option for inputs

---
 README.md                                         | 2 ++
 src/components/DateRangePicker.jsx                | 3 +++
 src/components/DateRangePickerInput.jsx           | 9 ++++++++-
 src/components/DateRangePickerInputController.jsx | 4 ++++
 src/components/SingleDatePicker.jsx               | 3 +++
 src/components/SingleDatePickerInput.jsx          | 8 ++++++++
 src/shapes/DateRangePickerShape.js                | 1 +
 src/shapes/SingleDatePickerShape.js               | 1 +
 stories/DateRangePicker_input.js                  | 7 +++++++
 stories/SingleDatePicker_input.js                 | 6 ++++++
 10 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index b5204534d4..eb5ebc36dc 100644
--- a/README.md
+++ b/README.md
@@ -126,6 +126,7 @@ showDefaultInputIcon: PropTypes.bool,
 customInputIcon: PropTypes.node,
 customArrowIcon: PropTypes.node,
 customCloseIcon: PropTypes.node,
+noBorder: PropTypes.bool,
 
 // calendar presentation and interaction related props
 renderMonth: PropTypes.func,
@@ -196,6 +197,7 @@ showClearDate: PropTypes.bool,
 customCloseIcon: PropTypes.node,
 showDefaultInputIcon: PropTypes.bool,
 customInputIcon: PropTypes.node,
+noBorder: PropTypes.bool,
 
 // calendar presentation and interaction related props
 renderMonth: PropTypes.func,
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 1143009bd8..2416003029 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -60,6 +60,7 @@ const defaultProps = {
   customInputIcon: null,
   customArrowIcon: null,
   customCloseIcon: null,
+  noBorder: false,
 
   // calendar presentation and interaction related props
   renderMonth: null,
@@ -436,6 +437,7 @@ class DateRangePicker extends React.Component {
       onDatesChange,
       onClose,
       isRTL,
+      noBorder,
       styles,
     } = this.props;
 
@@ -481,6 +483,7 @@ class DateRangePicker extends React.Component {
             screenReaderMessage={screenReaderInputMessage}
             isFocused={isDateRangePickerInputFocused}
             isRTL={isRTL}
+            noBorder={noBorder}
           />
 
           {this.maybeRenderDayPickerWithPortal()}
diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index f561bfe0a6..b92cc7da48 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -58,6 +58,7 @@ const propTypes = forbidExtraProps({
   customInputIcon: PropTypes.node,
   customArrowIcon: PropTypes.node,
   customCloseIcon: PropTypes.node,
+  noBorder: PropTypes.bool,
 
   // accessibility
   isFocused: PropTypes.bool, // describes actual DOM focus
@@ -100,6 +101,7 @@ const defaultProps = {
   customInputIcon: null,
   customArrowIcon: null,
   customCloseIcon: null,
+  noBorder: false,
 
   // accessibility
   isFocused: false,
@@ -143,6 +145,7 @@ function DateRangePickerInput({
   isFocused,
   phrases,
   isRTL,
+  noBorder,
   styles,
 }) {
   const calendarIcon = customInputIcon || (
@@ -174,6 +177,7 @@ function DateRangePickerInput({
         styles.DateRangePickerInput,
         disabled && styles.DateRangePickerInput__disabled,
         isRTL && styles.DateRangePickerInput__rtl,
+        !noBorder && styles.DateRangePickerInput__withBorder,
       )}
     >
       {inputIconPosition === ICON_BEFORE_POSITION && inputIcon}
@@ -251,7 +255,6 @@ DateRangePickerInput.defaultProps = defaultProps;
 export default withStyles(({ reactDates: { color, sizing } }) => ({
   DateRangePickerInput: {
     backgroundColor: color.background,
-    border: `1px solid ${color.core.grayLighter}`,
     display: 'inline-block',
   },
 
@@ -259,6 +262,10 @@ export default withStyles(({ reactDates: { color, sizing } }) => ({
     background: color.disabled,
   },
 
+  DateRangePickerInput__withBorder: {
+    border: `1px solid ${color.core.grayLighter}`,
+  },
+
   DateRangePickerInput__rtl: {
     direction: 'rtl',
   },
diff --git a/src/components/DateRangePickerInputController.jsx b/src/components/DateRangePickerInputController.jsx
index 5f4fd014cf..68e2deb0af 100644
--- a/src/components/DateRangePickerInputController.jsx
+++ b/src/components/DateRangePickerInputController.jsx
@@ -41,6 +41,7 @@ const propTypes = forbidExtraProps({
   required: PropTypes.bool,
   readOnly: PropTypes.bool,
   openDirection: openDirectionShape,
+  noBorder: PropTypes.bool,
 
   keepOpenOnDateSelect: PropTypes.bool,
   reopenPickerOnClearDates: PropTypes.bool,
@@ -88,6 +89,7 @@ const defaultProps = {
   required: false,
   readOnly: false,
   openDirection: OPEN_DOWN,
+  noBorder: false,
 
   keepOpenOnDateSelect: false,
   reopenPickerOnClearDates: false,
@@ -261,6 +263,7 @@ export default class DateRangePickerInputController extends React.Component {
       onKeyDownArrowDown,
       onKeyDownQuestionMark,
       isRTL,
+      noBorder,
     } = this.props;
 
     const startDateString = this.getDateString(startDate);
@@ -300,6 +303,7 @@ export default class DateRangePickerInputController extends React.Component {
         onKeyDownArrowDown={onKeyDownArrowDown}
         onKeyDownQuestionMark={onKeyDownQuestionMark}
         isRTL={isRTL}
+        noBorder={noBorder}
       />
     );
   }
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index bb9a201d59..dc1e63cd5b 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -54,6 +54,7 @@ const defaultProps = {
   inputIconPosition: ICON_BEFORE_POSITION,
   customInputIcon: null,
   customCloseIcon: null,
+  noBorder: false,
 
   // calendar presentation and interaction related props
   orientation: HORIZONTAL_ORIENTATION,
@@ -452,6 +453,7 @@ class SingleDatePicker extends React.Component {
       withFullScreenPortal,
       screenReaderInputMessage,
       isRTL,
+      noBorder,
       styles,
     } = this.props;
 
@@ -490,6 +492,7 @@ class SingleDatePicker extends React.Component {
             screenReaderMessage={screenReaderInputMessage}
             phrases={phrases}
             isRTL={isRTL}
+            noBorder={noBorder}
           />
 
           {this.maybeRenderDayPickerWithPortal()}
diff --git a/src/components/SingleDatePickerInput.jsx b/src/components/SingleDatePickerInput.jsx
index 066db51f11..8ebd67415c 100644
--- a/src/components/SingleDatePickerInput.jsx
+++ b/src/components/SingleDatePickerInput.jsx
@@ -34,6 +34,8 @@ const propTypes = forbidExtraProps({
   inputIconPosition: IconPositionShape,
   customInputIcon: PropTypes.node,
   isRTL: PropTypes.bool,
+  noBorder: PropTypes.bool,
+
   onChange: PropTypes.func,
   onClearDate: PropTypes.func,
   onFocus: PropTypes.func,
@@ -63,6 +65,7 @@ const defaultProps = {
   customCloseIcon: null,
   customInputIcon: null,
   isRTL: false,
+  noBorder: false,
 
   onChange() {},
   onClearDate() {},
@@ -102,6 +105,7 @@ function SingleDatePickerInput({
   customInputIcon,
   openDirection,
   isRTL,
+  noBorder,
   styles,
 }) {
   const calendarIcon = customInputIcon || (
@@ -130,6 +134,7 @@ function SingleDatePickerInput({
         styles.SingleDatePickerInput,
         disabled && styles.SingleDatePickerInput__disabled,
         isRTL && styles.SingleDatePickerInput__rtl,
+        !noBorder && styles.SingleDatePickerInput__withBorder,
       )}
     >
       {inputIconPosition === ICON_BEFORE_POSITION && inputIcon}
@@ -183,6 +188,9 @@ SingleDatePickerInput.defaultProps = defaultProps;
 export default withStyles(({ reactDates: { color } }) => ({
   SingleDatePickerInput: {
     backgroundColor: color.background,
+  },
+
+  SingleDatePickerInput__withBorder: {
     border: `1px solid ${color.core.border}`,
   },
 
diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js
index df58104ff3..436621ed30 100644
--- a/src/shapes/DateRangePickerShape.js
+++ b/src/shapes/DateRangePickerShape.js
@@ -38,6 +38,7 @@ export default {
   customInputIcon: PropTypes.node,
   customArrowIcon: PropTypes.node,
   customCloseIcon: PropTypes.node,
+  noBorder: PropTypes.bool,
 
   // calendar presentation and interaction related props
   renderMonth: PropTypes.func,
diff --git a/src/shapes/SingleDatePickerShape.js b/src/shapes/SingleDatePickerShape.js
index 2a949f0626..4f17111f6f 100644
--- a/src/shapes/SingleDatePickerShape.js
+++ b/src/shapes/SingleDatePickerShape.js
@@ -31,6 +31,7 @@ export default {
   showDefaultInputIcon: PropTypes.bool,
   inputIconPosition: IconPositionShape,
   customInputIcon: PropTypes.node,
+  noBorder: PropTypes.bool,
 
   // calendar presentation and interaction related props
   renderMonth: PropTypes.func,
diff --git a/stories/DateRangePicker_input.js b/stories/DateRangePicker_input.js
index 205f63c52d..99dc81ee3b 100644
--- a/stories/DateRangePicker_input.js
+++ b/stories/DateRangePicker_input.js
@@ -119,4 +119,11 @@ storiesOf('DRP - Input Props', module)
       initialEndDate={moment().add(10, 'days')}
       screenReaderInputMessage="Here you could inform screen reader users of the date format, minimum nights, blocked out dates, etc"
     />
+  ))
+  .addWithInfo('noBorder', () => (
+    <DateRangePickerWrapper
+      initialStartDate={moment().add(3, 'days')}
+      initialEndDate={moment().add(10, 'days')}
+      noBorder
+    />
   ));
diff --git a/stories/SingleDatePicker_input.js b/stories/SingleDatePicker_input.js
index 9ba42e1bc4..1953bdac46 100644
--- a/stories/SingleDatePicker_input.js
+++ b/stories/SingleDatePicker_input.js
@@ -71,4 +71,10 @@ storiesOf('SDP - Input Props', module)
       initialDate={moment().add(3, 'days')}
       screenReaderInputMessage="Here you could inform screen reader users of the date format, minimum nights, blocked out dates, etc"
     />
+  ))
+  .addWithInfo('noBorder', () => (
+    <SingleDatePickerWrapper
+      initialDate={moment().add(3, 'days')}
+      noBorder
+    />
   ));

From 8a4ea442822ee1dc0f083cc4860214346b25073b Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Wed, 29 Nov 2017 17:06:48 -0800
Subject: [PATCH 025/618] Add block styling to the SDP/DRP inputs

---
 README.md                                     |  2 ++
 src/components/DateRangePicker.jsx            | 14 ++++++++++-
 src/components/DateRangePickerInput.jsx       | 22 ++++++++++++++++--
 .../DateRangePickerInputController.jsx        |  4 ++++
 src/components/SingleDatePicker.jsx           | 14 ++++++++++-
 src/components/SingleDatePickerInput.jsx      | 23 +++++++++++++++++--
 src/shapes/DateRangePickerShape.js            |  1 +
 src/shapes/SingleDatePickerShape.js           |  1 +
 stories/DateRangePicker_input.js              |  8 +++++++
 stories/SingleDatePicker_input.js             |  7 ++++++
 10 files changed, 90 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index eb5ebc36dc..0f86a27e95 100644
--- a/README.md
+++ b/README.md
@@ -127,6 +127,7 @@ customInputIcon: PropTypes.node,
 customArrowIcon: PropTypes.node,
 customCloseIcon: PropTypes.node,
 noBorder: PropTypes.bool,
+block: PropTypes.bool,
 
 // calendar presentation and interaction related props
 renderMonth: PropTypes.func,
@@ -198,6 +199,7 @@ customCloseIcon: PropTypes.node,
 showDefaultInputIcon: PropTypes.bool,
 customInputIcon: PropTypes.node,
 noBorder: PropTypes.bool,
+block: PropTypes.bool,
 
 // calendar presentation and interaction related props
 renderMonth: PropTypes.func,
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 2416003029..909337cd6a 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -61,6 +61,7 @@ const defaultProps = {
   customArrowIcon: null,
   customCloseIcon: null,
   noBorder: false,
+  block: false,
 
   // calendar presentation and interaction related props
   renderMonth: null,
@@ -438,6 +439,7 @@ class DateRangePicker extends React.Component {
       onClose,
       isRTL,
       noBorder,
+      block,
       styles,
     } = this.props;
 
@@ -446,7 +448,12 @@ class DateRangePicker extends React.Component {
     const onOutsideClick = (!withPortal && !withFullScreenPortal) ? this.onOutsideClick : undefined;
 
     return (
-      <div {...css(styles.DateRangePicker)}>
+      <div
+        {...css(
+          styles.DateRangePicker,
+          block && styles.DateRangePicker__block,
+        )}
+      >
         <OutsideClickHandler onOutsideClick={onOutsideClick}>
           <DateRangePickerInputController
             startDate={startDate}
@@ -484,6 +491,7 @@ class DateRangePicker extends React.Component {
             isFocused={isDateRangePickerInputFocused}
             isRTL={isRTL}
             noBorder={noBorder}
+            block={block}
           />
 
           {this.maybeRenderDayPickerWithPortal()}
@@ -503,6 +511,10 @@ export default withStyles(({ reactDates: { color, zIndex, spacing } }) => ({
     display: 'inline-block',
   },
 
+  DateRangePicker__block: {
+    display: 'block',
+  },
+
   DateRangePicker_picker: {
     zIndex: zIndex + 1,
     backgroundColor: color.background,
diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index b92cc7da48..330b01f17f 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -59,6 +59,7 @@ const propTypes = forbidExtraProps({
   customArrowIcon: PropTypes.node,
   customCloseIcon: PropTypes.node,
   noBorder: PropTypes.bool,
+  block: PropTypes.bool,
 
   // accessibility
   isFocused: PropTypes.bool, // describes actual DOM focus
@@ -102,6 +103,7 @@ const defaultProps = {
   customArrowIcon: null,
   customCloseIcon: null,
   noBorder: false,
+  block: false,
 
   // accessibility
   isFocused: false,
@@ -146,6 +148,7 @@ function DateRangePickerInput({
   phrases,
   isRTL,
   noBorder,
+  block,
   styles,
 }) {
   const calendarIcon = customInputIcon || (
@@ -178,6 +181,8 @@ function DateRangePickerInput({
         disabled && styles.DateRangePickerInput__disabled,
         isRTL && styles.DateRangePickerInput__rtl,
         !noBorder && styles.DateRangePickerInput__withBorder,
+        block && styles.DateRangePickerInput__block,
+        showClearDates && styles.DateRangePickerInput__showClearDates,
       )}
     >
       {inputIconPosition === ICON_BEFORE_POSITION && inputIcon}
@@ -234,6 +239,7 @@ function DateRangePickerInput({
           aria-label={phrases.clearDates}
           {...css(
             styles.DateRangePickerInput_clearDates,
+            !customCloseIcon && styles.DateRangePickerInput_clearDates_default,
             !(startDate || endDate) && styles.DateRangePickerInput_clearDates__hide,
           )}
           onClick={onClearDates}
@@ -270,6 +276,14 @@ export default withStyles(({ reactDates: { color, sizing } }) => ({
     direction: 'rtl',
   },
 
+  DateRangePickerInput__block: {
+    display: 'block',
+  },
+
+  DateRangePickerInput__showClearDates: {
+    paddingRight: 30,
+  },
+
   DateRangePickerInput_arrow: {
     display: 'inline-block',
     verticalAlign: 'middle',
@@ -291,11 +305,15 @@ export default withStyles(({ reactDates: { color, sizing } }) => ({
     overflow: 'visible',
 
     cursor: 'pointer',
-    display: 'inline-block',
-    verticalAlign: 'middle',
     padding: 10,
     margin: '0 10px 0 5px',
+    position: 'absolute',
+    right: 0,
+    top: '50%',
+    transform: 'translateY(-50%)',
+  },
 
+  DateRangePickerInput_clearDates_default: {
     ':focus': {
       background: color.core.border,
       borderRadius: '50%',
diff --git a/src/components/DateRangePickerInputController.jsx b/src/components/DateRangePickerInputController.jsx
index 68e2deb0af..f8bef6f21f 100644
--- a/src/components/DateRangePickerInputController.jsx
+++ b/src/components/DateRangePickerInputController.jsx
@@ -42,6 +42,7 @@ const propTypes = forbidExtraProps({
   readOnly: PropTypes.bool,
   openDirection: openDirectionShape,
   noBorder: PropTypes.bool,
+  block: PropTypes.bool,
 
   keepOpenOnDateSelect: PropTypes.bool,
   reopenPickerOnClearDates: PropTypes.bool,
@@ -90,6 +91,7 @@ const defaultProps = {
   readOnly: false,
   openDirection: OPEN_DOWN,
   noBorder: false,
+  block: false,
 
   keepOpenOnDateSelect: false,
   reopenPickerOnClearDates: false,
@@ -264,6 +266,7 @@ export default class DateRangePickerInputController extends React.Component {
       onKeyDownQuestionMark,
       isRTL,
       noBorder,
+      block,
     } = this.props;
 
     const startDateString = this.getDateString(startDate);
@@ -304,6 +307,7 @@ export default class DateRangePickerInputController extends React.Component {
         onKeyDownQuestionMark={onKeyDownQuestionMark}
         isRTL={isRTL}
         noBorder={noBorder}
+        block={block}
       />
     );
   }
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index dc1e63cd5b..72219f3608 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -55,6 +55,7 @@ const defaultProps = {
   customInputIcon: null,
   customCloseIcon: null,
   noBorder: false,
+  block: false,
 
   // calendar presentation and interaction related props
   orientation: HORIZONTAL_ORIENTATION,
@@ -454,6 +455,7 @@ class SingleDatePicker extends React.Component {
       screenReaderInputMessage,
       isRTL,
       noBorder,
+      block,
       styles,
     } = this.props;
 
@@ -464,7 +466,12 @@ class SingleDatePicker extends React.Component {
     const onOutsideClick = (!withPortal && !withFullScreenPortal) ? this.onClearFocus : undefined;
 
     return (
-      <div {...css(styles.SingleDatePicker)}>
+      <div
+        {...css(
+          styles.SingleDatePicker,
+          block && styles.SingleDatePicker__block,
+        )}
+      >
         <OutsideClickHandler onOutsideClick={onOutsideClick}>
           <SingleDatePickerInput
             id={id}
@@ -493,6 +500,7 @@ class SingleDatePicker extends React.Component {
             phrases={phrases}
             isRTL={isRTL}
             noBorder={noBorder}
+            block={block}
           />
 
           {this.maybeRenderDayPickerWithPortal()}
@@ -512,6 +520,10 @@ export default withStyles(({ reactDates: { color, spacing, zIndex } }) => ({
     display: 'inline-block',
   },
 
+  SingleDatePicker__block: {
+    display: 'block',
+  },
+
   SingleDatePicker_picker: {
     zIndex: zIndex + 1,
     backgroundColor: color.background,
diff --git a/src/components/SingleDatePickerInput.jsx b/src/components/SingleDatePickerInput.jsx
index 8ebd67415c..e6c992dec9 100644
--- a/src/components/SingleDatePickerInput.jsx
+++ b/src/components/SingleDatePickerInput.jsx
@@ -35,6 +35,7 @@ const propTypes = forbidExtraProps({
   customInputIcon: PropTypes.node,
   isRTL: PropTypes.bool,
   noBorder: PropTypes.bool,
+  block: PropTypes.bool,
 
   onChange: PropTypes.func,
   onClearDate: PropTypes.func,
@@ -66,6 +67,7 @@ const defaultProps = {
   customInputIcon: null,
   isRTL: false,
   noBorder: false,
+  block: false,
 
   onChange() {},
   onClearDate() {},
@@ -106,6 +108,7 @@ function SingleDatePickerInput({
   openDirection,
   isRTL,
   noBorder,
+  block,
   styles,
 }) {
   const calendarIcon = customInputIcon || (
@@ -135,6 +138,8 @@ function SingleDatePickerInput({
         disabled && styles.SingleDatePickerInput__disabled,
         isRTL && styles.SingleDatePickerInput__rtl,
         !noBorder && styles.SingleDatePickerInput__withBorder,
+        block && styles.SingleDatePickerInput__block,
+        showClearDate && styles.SingleDatePickerInput__showClearDate,
       )}
     >
       {inputIconPosition === ICON_BEFORE_POSITION && inputIcon}
@@ -163,6 +168,7 @@ function SingleDatePickerInput({
         <button
           {...css(
             styles.SingleDatePickerInput_clearDate,
+            !customCloseIcon && styles.SingleDatePickerInput_clearDate__default,
             !displayValue && styles.SingleDatePickerInput_clearDate__hide,
           )}
           type="button"
@@ -187,6 +193,7 @@ SingleDatePickerInput.defaultProps = defaultProps;
 
 export default withStyles(({ reactDates: { color } }) => ({
   SingleDatePickerInput: {
+    display: 'inline-block',
     backgroundColor: color.background,
   },
 
@@ -202,6 +209,14 @@ export default withStyles(({ reactDates: { color } }) => ({
     backgroundColor: color.disabled,
   },
 
+  SingleDatePickerInput__block: {
+    display: 'block',
+  },
+
+  SingleDatePickerInput__showClearDate: {
+    paddingRight: 30,
+  },
+
   SingleDatePickerInput_clearDate: {
     background: 'none',
     border: 0,
@@ -211,11 +226,15 @@ export default withStyles(({ reactDates: { color } }) => ({
     overflow: 'visible',
 
     cursor: 'pointer',
-    display: 'inline-block',
-    verticalAlign: 'middle',
     padding: 10,
     margin: '0 10px 0 5px',
+    position: 'absolute',
+    right: 0,
+    top: '50%',
+    transform: 'translateY(-50%)',
+  },
 
+  SingleDatePickerInput_clearDate__default: {
     ':focus': {
       background: color.core.border,
       borderRadius: '50%',
diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js
index 436621ed30..f30fb444d4 100644
--- a/src/shapes/DateRangePickerShape.js
+++ b/src/shapes/DateRangePickerShape.js
@@ -39,6 +39,7 @@ export default {
   customArrowIcon: PropTypes.node,
   customCloseIcon: PropTypes.node,
   noBorder: PropTypes.bool,
+  block: PropTypes.bool,
 
   // calendar presentation and interaction related props
   renderMonth: PropTypes.func,
diff --git a/src/shapes/SingleDatePickerShape.js b/src/shapes/SingleDatePickerShape.js
index 4f17111f6f..6d9dafdb25 100644
--- a/src/shapes/SingleDatePickerShape.js
+++ b/src/shapes/SingleDatePickerShape.js
@@ -32,6 +32,7 @@ export default {
   inputIconPosition: IconPositionShape,
   customInputIcon: PropTypes.node,
   noBorder: PropTypes.bool,
+  block: PropTypes.bool,
 
   // calendar presentation and interaction related props
   renderMonth: PropTypes.func,
diff --git a/stories/DateRangePicker_input.js b/stories/DateRangePicker_input.js
index 99dc81ee3b..e58f3c4a41 100644
--- a/stories/DateRangePicker_input.js
+++ b/stories/DateRangePicker_input.js
@@ -126,4 +126,12 @@ storiesOf('DRP - Input Props', module)
       initialEndDate={moment().add(10, 'days')}
       noBorder
     />
+  ))
+  .addWithInfo('block styling', () => (
+    <DateRangePickerWrapper
+      initialStartDate={moment().add(3, 'days')}
+      initialEndDate={moment().add(10, 'days')}
+      showClearDates
+      block
+    />
   ));
diff --git a/stories/SingleDatePicker_input.js b/stories/SingleDatePicker_input.js
index 1953bdac46..ffe973735e 100644
--- a/stories/SingleDatePicker_input.js
+++ b/stories/SingleDatePicker_input.js
@@ -77,4 +77,11 @@ storiesOf('SDP - Input Props', module)
       initialDate={moment().add(3, 'days')}
       noBorder
     />
+  ))
+  .addWithInfo('block styling', () => (
+    <SingleDatePickerWrapper
+      initialDate={moment().add(3, 'days')}
+      showClearDate
+      block
+    />
   ));

From b4037dbc0fbbf6c647aa5d1d471b9996cc875e31 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Tue, 28 Nov 2017 16:28:56 -0800
Subject: [PATCH 026/618] Add transitionDuration prop

---
 README.md                                     |  3 +++
 src/components/CalendarMonthGrid.jsx          | 19 ++++++++++++++-----
 src/components/DateRangePicker.jsx            |  3 +++
 src/components/DayPicker.jsx                  |  4 ++++
 src/components/DayPickerRangeController.jsx   |  4 ++++
 .../DayPickerSingleDateController.jsx         |  4 ++++
 src/components/SingleDatePicker.jsx           |  3 +++
 src/shapes/DateRangePickerShape.js            |  1 +
 src/shapes/SingleDatePickerShape.js           |  1 +
 stories/DateRangePicker_calendar.js           |  6 ++++++
 stories/DayPicker.js                          |  5 +++++
 stories/DayPickerRangeController.js           |  8 ++++++++
 stories/DayPickerSingleDateController.js      |  8 ++++++++
 stories/PresetDateRangePicker.js              |  2 +-
 stories/SingleDatePicker_calendar.js          |  6 ++++++
 15 files changed, 71 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index eea6995f12..eb4a22a87e 100644
--- a/README.md
+++ b/README.md
@@ -152,6 +152,7 @@ navNext: PropTypes.node,
 onPrevMonthClick: PropTypes.func,
 onNextMonthClick: PropTypes.func,
 onClose: PropTypes.func,
+transitionDuration: nonNegativeInteger, // milliseconds
 
 // day presentation and interaction related props
 renderDay: PropTypes.func,
@@ -224,6 +225,7 @@ navNext: PropTypes.node,
 onPrevMonthClick: PropTypes.func,
 onNextMonthClick: PropTypes.func,
 onClose: PropTypes.func,
+transitionDuration: nonNegativeInteger, // milliseconds
 
 // day presentation and interaction related props
 renderDay: PropTypes.func,
@@ -273,6 +275,7 @@ The following is a list of other *OPTIONAL* props you may provide to the `DayPic
   navNext: PropTypes.node,
   onPrevMonthClick: PropTypes.func,
   onNextMonthClick: PropTypes.func,
+  transitionDuration: nonNegativeInteger, // milliseconds
 
   // day presentation and interaction related props
   renderDay: PropTypes.func,
diff --git a/src/components/CalendarMonthGrid.jsx b/src/components/CalendarMonthGrid.jsx
index 7a6b706a33..07796a6853 100644
--- a/src/components/CalendarMonthGrid.jsx
+++ b/src/components/CalendarMonthGrid.jsx
@@ -50,6 +50,7 @@ const propTypes = forbidExtraProps({
   firstDayOfWeek: DayOfWeekShape,
   setCalendarMonthHeights: PropTypes.func,
   isRTL: PropTypes.bool,
+  transitionDuration: nonNegativeInteger,
 
   // i18n
   monthFormat: PropTypes.string,
@@ -78,6 +79,7 @@ const defaultProps = {
   firstDayOfWeek: null,
   setCalendarMonthHeights() {},
   isRTL: false,
+  transitionDuration: 200,
 
   // i18n
   monthFormat: 'MMMM YYYY', // english locale
@@ -166,11 +168,17 @@ class CalendarMonthGrid extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    const { isAnimating, onMonthTransitionEnd, setCalendarMonthHeights } = this.props;
+    const {
+      isAnimating,
+      transitionDuration,
+      onMonthTransitionEnd,
+      setCalendarMonthHeights,
+    } = this.props;
 
     // For IE9, immediately call onMonthTransitionEnd instead of
-    // waiting for the animation to complete
-    if (!this.isTransitionEndSupported && isAnimating) {
+    // waiting for the animation to complete. Similarly, if transitionDuration
+    // is set to 0, also immediately invoke the onMonthTransitionEnd callback
+    if ((!this.isTransitionEndSupported || !transitionDuration) && isAnimating) {
       onMonthTransitionEnd();
     }
 
@@ -232,6 +240,7 @@ class CalendarMonthGrid extends React.Component {
       styles,
       phrases,
       dayAriaLabelFormat,
+      transitionDuration,
     } = this.props;
 
     const { months } = this.state;
@@ -253,8 +262,8 @@ class CalendarMonthGrid extends React.Component {
           isVertical && styles.CalendarMonthGrid__vertical,
           isVerticalScrollable && styles.CalendarMonthGrid__vertical_scrollable,
           isAnimating && styles.CalendarMonthGrid__animating,
-          isAnimating && {
-            transition: 'transform 0.2s ease-in-out',
+          isAnimating && transitionDuration && {
+            transition: `transform ${transitionDuration}ms ease-in-out`,
           },
           {
             ...getTransformStyles(transformValue),
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 6c18b610bb..a2b87155d1 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -79,6 +79,7 @@ const defaultProps = {
   isRTL: false,
   firstDayOfWeek: null,
   verticalHeight: null,
+  transitionDuration: undefined,
 
   // navigation related props
   navPrev: null,
@@ -322,6 +323,7 @@ class DateRangePicker extends React.Component {
       weekDayFormat,
       styles,
       verticalHeight,
+      transitionDuration,
     } = this.props;
     const { dayPickerContainerStyles, isDayPickerFocused, showKeyboardShortcuts } = this.state;
 
@@ -389,6 +391,7 @@ class DateRangePicker extends React.Component {
           firstDayOfWeek={firstDayOfWeek}
           weekDayFormat={weekDayFormat}
           verticalHeight={verticalHeight}
+          transitionDuration={transitionDuration}
         />
 
         {withFullScreenPortal && (
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index c5aeae48fc..fbff031850 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -57,6 +57,7 @@ const propTypes = forbidExtraProps({
   isRTL: PropTypes.bool,
   verticalHeight: nonNegativeInteger,
   noBorder: PropTypes.bool,
+  transitionDuration: nonNegativeInteger,
 
   // navigation props
   navPrev: PropTypes.node,
@@ -104,6 +105,7 @@ export const defaultProps = {
   isRTL: false,
   verticalHeight: null,
   noBorder: false,
+  transitionDuration: undefined,
 
   // navigation props
   navPrev: null,
@@ -691,6 +693,7 @@ class DayPicker extends React.Component {
       verticalHeight,
       dayAriaLabelFormat,
       noBorder,
+      transitionDuration,
     } = this.props;
 
     const numOfWeekHeaders = this.isVertical() ? 1 : numberOfMonths;
@@ -811,6 +814,7 @@ class DayPicker extends React.Component {
                 phrases={phrases}
                 isRTL={isRTL}
                 dayAriaLabelFormat={dayAriaLabelFormat}
+                transitionDuration={transitionDuration}
               />
               {verticalScrollable && this.renderNavigation()}
             </div>
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 64846a2784..e96675cb0c 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -71,6 +71,7 @@ const propTypes = forbidExtraProps({
   renderCalendarInfo: PropTypes.func,
   firstDayOfWeek: DayOfWeekShape,
   verticalHeight: nonNegativeInteger,
+  transitionDuration: nonNegativeInteger,
 
   // accessibility
   onBlur: PropTypes.func,
@@ -123,6 +124,7 @@ const defaultProps = {
   firstDayOfWeek: null,
   verticalHeight: null,
   noBorder: false,
+  transitionDuration: undefined,
 
   // accessibility
   onBlur() {},
@@ -907,6 +909,7 @@ export default class DayPickerRangeController extends React.Component {
       dayAriaLabelFormat,
       verticalHeight,
       noBorder,
+      transitionDuration,
     } = this.props;
 
     const { currentMonth, phrases, visibleDays } = this.state;
@@ -947,6 +950,7 @@ export default class DayPickerRangeController extends React.Component {
         dayAriaLabelFormat={dayAriaLabelFormat}
         verticalHeight={verticalHeight}
         noBorder={noBorder}
+        transitionDuration={transitionDuration}
       />
     );
   }
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index b438b5f47b..08964a845e 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -55,6 +55,7 @@ const propTypes = forbidExtraProps({
   daySize: nonNegativeInteger,
   verticalHeight: nonNegativeInteger,
   noBorder: PropTypes.bool,
+  transitionDuration: nonNegativeInteger,
 
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
@@ -104,6 +105,7 @@ const defaultProps = {
   daySize: DAY_SIZE,
   verticalHeight: null,
   noBorder: false,
+  transitionDuration: undefined,
 
   navPrev: null,
   navNext: null,
@@ -593,6 +595,7 @@ export default class DayPickerSingleDateController extends React.Component {
       weekDayFormat,
       verticalHeight,
       noBorder,
+      transitionDuration,
     } = this.props;
 
     const { currentMonth, visibleDays } = this.state;
@@ -630,6 +633,7 @@ export default class DayPickerSingleDateController extends React.Component {
         dayAriaLabelFormat={dayAriaLabelFormat}
         verticalHeight={verticalHeight}
         noBorder={noBorder}
+        transitionDuration={transitionDuration}
       />
     );
 
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index 72219f3608..717dfa721b 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -74,6 +74,7 @@ const defaultProps = {
   daySize: DAY_SIZE,
   isRTL: false,
   verticalHeight: null,
+  transitionDuration: undefined,
 
   // navigation related props
   navPrev: null,
@@ -359,6 +360,7 @@ class SingleDatePicker extends React.Component {
       weekDayFormat,
       styles,
       verticalHeight,
+      transitionDuration,
     } = this.props;
     const { dayPickerContainerStyles, isDayPickerFocused, showKeyboardShortcuts } = this.state;
 
@@ -416,6 +418,7 @@ class SingleDatePicker extends React.Component {
           firstDayOfWeek={firstDayOfWeek}
           weekDayFormat={weekDayFormat}
           verticalHeight={verticalHeight}
+          transitionDuration={transitionDuration}
         />
 
         {withFullScreenPortal && (
diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js
index f30fb444d4..b252d025ad 100644
--- a/src/shapes/DateRangePickerShape.js
+++ b/src/shapes/DateRangePickerShape.js
@@ -59,6 +59,7 @@ export default {
   renderCalendarInfo: PropTypes.func,
   hideKeyboardShortcutsPanel: PropTypes.bool,
   verticalHeight: nonNegativeInteger,
+  transitionDuration: nonNegativeInteger,
 
   // navigation related props
   navPrev: PropTypes.node,
diff --git a/src/shapes/SingleDatePickerShape.js b/src/shapes/SingleDatePickerShape.js
index 6d9dafdb25..df758e981e 100644
--- a/src/shapes/SingleDatePickerShape.js
+++ b/src/shapes/SingleDatePickerShape.js
@@ -52,6 +52,7 @@ export default {
   daySize: nonNegativeInteger,
   isRTL: PropTypes.bool,
   verticalHeight: nonNegativeInteger,
+  transitionDuration: nonNegativeInteger,
 
   // navigation related props
   navPrev: PropTypes.node,
diff --git a/stories/DateRangePicker_calendar.js b/stories/DateRangePicker_calendar.js
index 841d033756..e731958c6c 100644
--- a/stories/DateRangePicker_calendar.js
+++ b/stories/DateRangePicker_calendar.js
@@ -171,4 +171,10 @@ storiesOf('DRP - Calendar Props', module)
       onClose={({ startDate, endDate }) => alert(`onClose: startDate = ${startDate}, endDate = ${endDate}`)}
       autoFocus
     />
+  ))
+  .addWithInfo('with no animation', () => (
+    <DateRangePickerWrapper
+      transitionDuration={0}
+      autoFocus
+    />
   ));
diff --git a/stories/DayPicker.js b/stories/DayPicker.js
index 8420f3b050..ab0d59c457 100644
--- a/stories/DayPicker.js
+++ b/stories/DayPicker.js
@@ -122,6 +122,11 @@ storiesOf('DayPicker', module)
       weekDayFormat="ddd"
     />
   ))
+  .addWithInfo('with no animation', () => (
+    <DayPicker
+      transitionDuration={0}
+    />
+  ))
   .addWithInfo('noBorder', () => (
     <DayPicker noBorder />
   ));
diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
index 3babfe7af9..74f06d860a 100644
--- a/stories/DayPickerRangeController.js
+++ b/stories/DayPickerRangeController.js
@@ -235,4 +235,12 @@ storiesOf('DayPickerRangeController', module)
         <TestCustomInfoPanel />
       )}
     />
+  ))
+  .addWithInfo('with no animation', () => (
+    <DayPickerRangeControllerWrapper
+      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
+      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
+      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
+      transitionDuration={0}
+    />
   ));
diff --git a/stories/DayPickerSingleDateController.js b/stories/DayPickerSingleDateController.js
index ff6979cc26..acdca57dd0 100644
--- a/stories/DayPickerSingleDateController.js
+++ b/stories/DayPickerSingleDateController.js
@@ -215,4 +215,12 @@ storiesOf('DayPickerSingleDateController', module)
         <TestCustomInfoPanel />
       )}
     />
+  ))
+  .addWithInfo('with no animation', () => (
+    <DayPickerSingleDateControllerWrapper
+      onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
+      onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
+      onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
+      transitionDuration={0}
+    />
   ));
diff --git a/stories/PresetDateRangePicker.js b/stories/PresetDateRangePicker.js
index 7d3a9864fb..aa00a3adc0 100644
--- a/stories/PresetDateRangePicker.js
+++ b/stories/PresetDateRangePicker.js
@@ -38,7 +38,7 @@ const presets = [{
   end: moment().add(1, 'month'),
 }];
 
-storiesOf('PresetDatePicker', module)
+storiesOf('PresetDateRangePicker', module)
   .addDecorator(InfoPanelDecorator(presetDateRangePickerControllerInfo))
   .addWithInfo('default', () => (
     <PresetDateRangePicker
diff --git a/stories/SingleDatePicker_calendar.js b/stories/SingleDatePicker_calendar.js
index fa8a5dd9a1..4a1a49bf9c 100644
--- a/stories/SingleDatePicker_calendar.js
+++ b/stories/SingleDatePicker_calendar.js
@@ -152,5 +152,11 @@ storiesOf('SDP - Calendar Props', module)
       onClose={({ date }) => alert(`onClose: date = ${date}`)}
       autoFocus
     />
+  ))
+  .addWithInfo('with no animation', () => (
+    <SingleDatePickerWrapper
+      transitionDuration={0}
+      autoFocus
+    />
   ));
 

From dd5eb9ea2b5974d4cee4d954b7dcf5cc75532183 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Thu, 30 Nov 2017 15:29:39 -0800
Subject: [PATCH 027/618] Version 15.3.0

---
 CHANGELOG.md | 8 ++++++++
 package.json | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 43e6509f09..8f1d0667b8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # Change Log
 
+## 15.3.0
+- [new] Add `transitionDuration` prop ([#865](https://github.com/airbnb/react-dates/pull/865))
+- [fix] Remove default prop values for required startDateId and endDateId props ([#866](https://github.com/airbnb/react-dates/pull/866))
+- [new] Add `block` styling prop ([#871](https://github.com/airbnb/react-dates/pull/871))
+- [new] Add `noBorder` prop to `DayPicker` variations ([#869](https://github.com/airbnb/react-dates/pull/869))
+- [new] Add `noBorder` prop to inputs ([#870](https://github.com/airbnb/react-dates/pull/870))
+- [fix] Remove unused width style in `KeyboardShortcutsRow` ([#867](https://github.com/airbnb/react-dates/pull/867))
+
 ## 15.2.1
 - [fix] Republish `_datepicker.css`
 
diff --git a/package.json b/package.json
index 85af5863f8..2f00b7bc09 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "15.2.1",
+  "version": "15.3.0",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 6c1abb609e9ec7b28658c98de16af3e5f6a0e029 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Sun, 3 Dec 2017 23:22:47 -0800
Subject: [PATCH 028/618] [Tests] Years only have 12 months, and these tests
 started failing in December

---
 test/components/DayPickerRangeController_spec.jsx      | 2 +-
 test/components/DayPickerSingleDateController_spec.jsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index f64a1d4421..b96956ebc2 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -1934,7 +1934,7 @@ describe('DayPickerRangeController', () => {
         currentMonth: today,
       });
       wrapper.instance().onNextMonthClick();
-      expect(wrapper.state().currentMonth.month()).to.equal(today.month() + 1);
+      expect(wrapper.state().currentMonth.month()).to.equal(today.clone().add(1, 'month').month());
     });
 
     it('new visibleDays has next month', () => {
diff --git a/test/components/DayPickerSingleDateController_spec.jsx b/test/components/DayPickerSingleDateController_spec.jsx
index a6bb36b559..053ba19771 100644
--- a/test/components/DayPickerSingleDateController_spec.jsx
+++ b/test/components/DayPickerSingleDateController_spec.jsx
@@ -773,7 +773,7 @@ describe('DayPickerSingleDateController', () => {
         currentMonth: today,
       });
       wrapper.instance().onNextMonthClick();
-      expect(wrapper.state().currentMonth.month()).to.equal(today.month() + 1);
+      expect(wrapper.state().currentMonth.month()).to.equal(today.clone().add(1, 'month').month());
     });
 
     it('new visibleDays has next month', () => {

From 8a558c9584e97fcf142dbc53d34376d4a694efc2 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Fri, 1 Dec 2017 16:42:33 -0800
Subject: [PATCH 029/618] Add verticalSpacing prop

---
 src/components/DateInput.jsx                  | 262 +++++++++---------
 src/components/DateRangePicker.jsx            |  38 ++-
 src/components/DateRangePickerInput.jsx       |   7 +-
 .../DateRangePickerInputController.jsx        |   4 +
 src/components/SingleDatePicker.jsx           |  36 ++-
 src/components/SingleDatePickerInput.jsx      |   6 +-
 src/constants.js                              |   4 +
 src/shapes/DateRangePickerShape.js            |   1 +
 src/shapes/SingleDatePickerShape.js           |   1 +
 src/theme/DefaultTheme.js                     |   2 -
 src/utils/getInputHeight.js                   |   9 +
 stories/DateRangePicker_calendar.js           |   7 +
 stories/SingleDatePicker_calendar.js          |   6 +
 test/utils/getInputHeight_spec.js             |  13 +
 14 files changed, 241 insertions(+), 155 deletions(-)
 create mode 100644 src/utils/getInputHeight.js
 create mode 100644 test/utils/getInputHeight_spec.js

diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
index 9cffa74b26..4d6cb1eb5e 100644
--- a/src/components/DateInput.jsx
+++ b/src/components/DateInput.jsx
@@ -1,12 +1,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { forbidExtraProps } from 'airbnb-prop-types';
+import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 import throttle from 'lodash/throttle';
 import isTouchDevice from 'is-touch-device';
 
+import getInputHeight from '../utils/getInputHeight';
 import openDirectionShape from '../shapes/OpenDirectionShape';
-import { OPEN_DOWN, OPEN_UP } from '../constants';
+import {
+  OPEN_DOWN,
+  OPEN_UP,
+  FANG_HEIGHT_PX,
+  FANG_WIDTH_PX,
+  DEFAULT_VERTICAL_SPACING,
+} from '../constants';
+
+const FANG_PATH_TOP = `M0,${FANG_HEIGHT_PX} ${FANG_WIDTH_PX},${FANG_HEIGHT_PX} ${FANG_WIDTH_PX / 2},0z`;
+const FANG_STROKE_TOP = `M0,${FANG_HEIGHT_PX} ${FANG_WIDTH_PX / 2},0 ${FANG_WIDTH_PX},${FANG_HEIGHT_PX}`;
+const FANG_PATH_BOTTOM = `M0,0 ${FANG_WIDTH_PX},0 ${FANG_WIDTH_PX / 2},${FANG_HEIGHT_PX}z`;
+const FANG_STROKE_BOTTOM = `M0,0 ${FANG_WIDTH_PX / 2},${FANG_HEIGHT_PX} ${FANG_WIDTH_PX},0`;
 
 const propTypes = forbidExtraProps({
   ...withStylesPropTypes,
@@ -20,6 +32,7 @@ const propTypes = forbidExtraProps({
   readOnly: PropTypes.bool,
   openDirection: openDirectionShape,
   showCaret: PropTypes.bool,
+  verticalSpacing: nonNegativeInteger,
 
   onChange: PropTypes.func,
   onFocus: PropTypes.func,
@@ -43,6 +56,7 @@ const defaultProps = {
   readOnly: null,
   openDirection: OPEN_DOWN,
   showCaret: false,
+  verticalSpacing: DEFAULT_VERTICAL_SPACING,
 
   onChange() {},
   onFocus() {},
@@ -154,22 +168,30 @@ class DateInput extends React.Component {
       required,
       readOnly,
       openDirection,
+      verticalSpacing,
       styles,
+      theme: { reactDates },
     } = this.props;
 
     const value = displayValue || dateString || '';
     const screenReaderMessageId = `DateInput__screen-reader-message-${id}`;
 
-    const withCaret = showCaret && focused;
+    const withFang = showCaret && focused;
+
+    const {
+      font: { input: { lineHeight } },
+      spacing: { inputPadding, displayTextPaddingVertical },
+    } = reactDates;
+    const inputHeight = getInputHeight({ lineHeight, inputPadding, displayTextPaddingVertical });
 
     return (
       <div
         {...css(
           styles.DateInput,
-          withCaret && styles.DateInput__withCaret,
+          withFang && styles.DateInput__withFang,
           disabled && styles.DateInput__disabled,
-          withCaret && openDirection === OPEN_DOWN && styles.DateInput__openDown,
-          withCaret && openDirection === OPEN_UP && styles.DateInput__openUp,
+          withFang && openDirection === OPEN_DOWN && styles.DateInput__openDown,
+          withFang && openDirection === OPEN_UP && styles.DateInput__openUp,
         )}
       >
         <input
@@ -196,6 +218,31 @@ class DateInput extends React.Component {
           aria-describedby={screenReaderMessage && screenReaderMessageId}
         />
 
+        {withFang && (
+          <svg
+            role="presentation"
+            focusable="false"
+            {...css(
+              styles.DateInput_fang,
+              openDirection === OPEN_DOWN && {
+                top: inputHeight + verticalSpacing - FANG_HEIGHT_PX - 1,
+              },
+              openDirection === OPEN_DOWN && {
+                bottom: inputHeight + verticalSpacing - FANG_HEIGHT_PX - 1,
+              },
+            )}
+          >
+            <path
+              {...css(styles.DateInput_fangShape)}
+              d={openDirection === OPEN_DOWN ? FANG_PATH_TOP : FANG_PATH_BOTTOM}
+            />
+            <path
+              {...css(styles.DateInput_fangStroke)}
+              d={openDirection === OPEN_DOWN ? FANG_STROKE_TOP : FANG_STROKE_BOTTOM}
+            />
+          </svg>
+        )}
+
         {screenReaderMessage && (
           <p {...css(styles.DateInput_screenReaderMessage)} id={screenReaderMessageId}>
             {screenReaderMessage}
@@ -213,124 +260,85 @@ export default withStyles(({
   reactDates: {
     border, color, sizing, spacing, font, zIndex,
   },
-}) => {
-  const inputHeight = parseInt(font.input.lineHeight, 10)
-    + (2 * spacing.inputPadding)
-    + (2 * spacing.displayTextPaddingVertical);
-
-  return {
-    DateInput: {
-      fontWeight: 200,
-      fontSize: font.input.size,
-      lineHeight: font.input.lineHeight,
-      color: color.placeholderText,
-      margin: 0,
-      padding: spacing.inputPadding,
-
-      background: color.background,
-      position: 'relative',
-      display: 'inline-block',
-      width: sizing.inputWidth,
-      verticalAlign: 'middle',
-    },
-
-    DateInput__withCaret: {
-      ':before': {
-        content: '""',
-        display: 'inline-block',
-        position: 'absolute',
-        bottom: 'auto',
-        border: `${sizing.tooltipArrowWidth / 2}px solid transparent`,
-        left: 22,
-        zIndex: zIndex + 2,
-      },
-
-      ':after': {
-        content: '""',
-        display: 'inline-block',
-        position: 'absolute',
-        bottom: 'auto',
-        border: `${sizing.tooltipArrowWidth / 2}px solid transparent`,
-        left: 22,
-        zIndex: zIndex + 2,
-      },
-    },
-
-    DateInput__openUp: {
-      ':before': {
-        borderBottom: 0,
-        top: inputHeight - spacing.inputMarginBottom,
-        borderTopColor: 'rgba(0, 0, 0, 0.1)',
-      },
-
-      ':after': {
-        borderBottom: 0,
-        top: inputHeight - spacing.inputMarginBottom - 1,
-        borderTopColor: color.background,
-      },
-    },
-
-    DateInput__openDown: {
-      ':before': {
-        borderTop: 0,
-        top: spacing.inputMarginBottom - (sizing.tooltipArrowWidth / 2),
-        borderBottomColor: 'rgba(0, 0, 0, 0.1)',
-      },
-
-      ':after': {
-        borderTop: 0,
-        top: spacing.inputMarginBottom - (sizing.tooltipArrowWidth / 2) + 1,
-        borderBottomColor: color.background,
-      },
-    },
-
-    DateInput__disabled: {
-      background: color.disabled,
-      color: color.textDisabled,
-    },
-
-    DateInput_input: {
-      fontWeight: 200,
-      fontSize: font.input.size,
-      color: color.text,
-      backgroundColor: color.background,
-      width: '100%',
-      padding: `${spacing.displayTextPaddingVertical}px ${spacing.displayTextPaddingHorizontal}px`,
-      border: border.input.border,
-      borderTop: border.input.borderTop,
-      borderRight: border.input.borderRight,
-      borderBottom: border.input.borderBottom,
-      borderLeft: border.input.borderLeft,
-    },
-
-    DateInput_input__readOnly: {
-      userSelect: 'none',
-    },
-
-    DateInput_input__focused: {
-      outline: border.input.outlineFocused,
-      background: color.backgroundFocused,
-      border: border.input.borderFocused,
-      borderTop: border.input.borderTopFocused,
-      borderRight: border.input.borderRightFocused,
-      borderBottom: border.input.borderBottomFocused,
-      borderLeft: border.input.borderLeftFocused,
-    },
-
-    DateInput_input__disabled: {
-      background: color.disabled,
-      fontStyle: font.input.styleDisabled,
-    },
-
-    DateInput_screenReaderMessage: {
-      border: 0,
-      clip: 'rect(0, 0, 0, 0)',
-      height: 1,
-      margin: -1,
-      overflow: 'hidden',
-      padding: 0,
-      position: 'absolute',
-      width: 1,
-    },
-  };
-})(DateInput);
+}) => ({
+  DateInput: {
+    fontWeight: 200,
+    fontSize: font.input.size,
+    lineHeight: font.input.lineHeight,
+    color: color.placeholderText,
+    margin: 0,
+    padding: spacing.inputPadding,
+
+    background: color.background,
+    position: 'relative',
+    display: 'inline-block',
+    width: sizing.inputWidth,
+    verticalAlign: 'middle',
+  },
+
+  DateInput__disabled: {
+    background: color.disabled,
+    color: color.textDisabled,
+  },
+
+  DateInput_input: {
+    fontWeight: 200,
+    fontSize: font.input.size,
+    color: color.text,
+    backgroundColor: color.background,
+    width: '100%',
+    padding: `${spacing.displayTextPaddingVertical}px ${spacing.displayTextPaddingHorizontal}px`,
+    border: border.input.border,
+    borderTop: border.input.borderTop,
+    borderRight: border.input.borderRight,
+    borderBottom: border.input.borderBottom,
+    borderLeft: border.input.borderLeft,
+  },
+
+  DateInput_input__readOnly: {
+    userSelect: 'none',
+  },
+
+  DateInput_input__focused: {
+    outline: border.input.outlineFocused,
+    background: color.backgroundFocused,
+    border: border.input.borderFocused,
+    borderTop: border.input.borderTopFocused,
+    borderRight: border.input.borderRightFocused,
+    borderBottom: border.input.borderBottomFocused,
+    borderLeft: border.input.borderLeftFocused,
+  },
+
+  DateInput_input__disabled: {
+    background: color.disabled,
+    fontStyle: font.input.styleDisabled,
+  },
+
+  DateInput_screenReaderMessage: {
+    border: 0,
+    clip: 'rect(0, 0, 0, 0)',
+    height: 1,
+    margin: -1,
+    overflow: 'hidden',
+    padding: 0,
+    position: 'absolute',
+    width: 1,
+  },
+
+  DateInput_fang: {
+    position: 'absolute',
+    width: FANG_WIDTH_PX,
+    height: FANG_HEIGHT_PX,
+    left: 22,
+    zIndex: zIndex + 2,
+  },
+
+  DateInput_fangShape: {
+    fill: color.background,
+  },
+
+  DateInput_fangStroke: {
+    stroke: color.core.border,
+    fill: 'transparent',
+  },
+}))(DateInput);
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index a2b87155d1..c6948ae535 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -11,6 +11,7 @@ import { DateRangePickerPhrases } from '../defaultPhrases';
 
 import OutsideClickHandler from './OutsideClickHandler';
 import getResponsiveContainerStyles from '../utils/getResponsiveContainerStyles';
+import getInputHeight from '../utils/getInputHeight';
 
 import isInclusivelyAfterDay from '../utils/isInclusivelyAfterDay';
 
@@ -32,6 +33,8 @@ import {
   OPEN_UP,
   DAY_SIZE,
   ICON_BEFORE_POSITION,
+  FANG_HEIGHT_PX,
+  DEFAULT_VERTICAL_SPACING,
 } from '../constants';
 
 const propTypes = forbidExtraProps({
@@ -80,6 +83,7 @@ const defaultProps = {
   firstDayOfWeek: null,
   verticalHeight: null,
   transitionDuration: undefined,
+  verticalSpacing: DEFAULT_VERTICAL_SPACING,
 
   // navigation related props
   navPrev: null,
@@ -324,6 +328,8 @@ class DateRangePicker extends React.Component {
       styles,
       verticalHeight,
       transitionDuration,
+      verticalSpacing,
+      theme: { reactDates },
     } = this.props;
     const { dayPickerContainerStyles, isDayPickerFocused, showKeyboardShortcuts } = this.state;
 
@@ -338,6 +344,12 @@ class DateRangePicker extends React.Component {
       <CloseButton {...css(styles.DateRangePicker_closeButton_svg)} />
     );
 
+    const {
+      font: { input: { lineHeight } },
+      spacing: { inputPadding, displayTextPaddingVertical },
+    } = reactDates;
+    const inputHeight = getInputHeight({ lineHeight, inputPadding, displayTextPaddingVertical });
+
     return (
       <div // eslint-disable-line jsx-a11y/no-static-element-interactions
         ref={this.setDayPickerContainerRef}
@@ -346,14 +358,18 @@ class DateRangePicker extends React.Component {
           anchorDirection === ANCHOR_LEFT && styles.DateRangePicker_picker__directionLeft,
           anchorDirection === ANCHOR_RIGHT && styles.DateRangePicker_picker__directionRight,
           orientation === HORIZONTAL_ORIENTATION && styles.DateRangePicker_picker__horizontal,
-          openDirection === OPEN_DOWN && styles.DateRangePicker_picker__openDown,
-          openDirection === OPEN_UP && styles.DateRangePicker_picker__openUp,
           orientation === VERTICAL_ORIENTATION && styles.DateRangePicker_picker__vertical,
+          openDirection === OPEN_DOWN && {
+            top: inputHeight + verticalSpacing,
+          },
+          openDirection === OPEN_UP && {
+            bottom: inputHeight + verticalSpacing,
+          },
           (withPortal || withFullScreenPortal) && styles.DateRangePicker_picker__portal,
           withFullScreenPortal && styles.DateRangePicker_picker__fullScreenPortal,
           isRTL && styles.DateRangePicker_picker__rtl,
+          dayPickerContainerStyles,
         )}
-        style={dayPickerContainerStyles}
         onClick={onOutsideClick}
       >
         <DayPickerRangeController
@@ -441,6 +457,7 @@ class DateRangePicker extends React.Component {
       isRTL,
       noBorder,
       block,
+      verticalSpacing,
       styles,
     } = this.props;
 
@@ -448,6 +465,8 @@ class DateRangePicker extends React.Component {
 
     const onOutsideClick = (!withPortal && !withFullScreenPortal) ? this.onOutsideClick : undefined;
 
+    const hideFang = verticalSpacing < FANG_HEIGHT_PX;
+
     return (
       <div
         {...css(
@@ -467,7 +486,7 @@ class DateRangePicker extends React.Component {
             isEndDateFocused={focusedInput === END_DATE}
             displayFormat={displayFormat}
             showClearDates={showClearDates}
-            showCaret={!withPortal && !withFullScreenPortal}
+            showCaret={!withPortal && !withFullScreenPortal && !hideFang}
             showDefaultInputIcon={showDefaultInputIcon}
             inputIconPosition={inputIconPosition}
             customInputIcon={customInputIcon}
@@ -493,6 +512,7 @@ class DateRangePicker extends React.Component {
             isRTL={isRTL}
             noBorder={noBorder}
             block={block}
+            verticalSpacing={verticalSpacing}
           />
 
           {this.maybeRenderDayPickerWithPortal()}
@@ -506,7 +526,7 @@ DateRangePicker.propTypes = propTypes;
 DateRangePicker.defaultProps = defaultProps;
 
 export { DateRangePicker as PureDateRangePicker };
-export default withStyles(({ reactDates: { color, zIndex, spacing } }) => ({
+export default withStyles(({ reactDates: { color, zIndex } }) => ({
   DateRangePicker: {
     position: 'relative',
     display: 'inline-block',
@@ -534,14 +554,6 @@ export default withStyles(({ reactDates: { color, zIndex, spacing } }) => ({
     right: 0,
   },
 
-  DateRangePicker_picker__openDown: {
-    top: spacing.inputMarginBottom,
-  },
-
-  DateRangePicker_picker__openUp: {
-    bottom: spacing.inputMarginBottom,
-  },
-
   DateRangePicker_picker__portal: {
     backgroundColor: 'rgba(0, 0, 0, 0.3)',
     position: 'fixed',
diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index 330b01f17f..5c60707a2e 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { forbidExtraProps } from 'airbnb-prop-types';
+import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 
 import { DateRangePickerInputPhrases } from '../defaultPhrases';
@@ -60,6 +60,7 @@ const propTypes = forbidExtraProps({
   customCloseIcon: PropTypes.node,
   noBorder: PropTypes.bool,
   block: PropTypes.bool,
+  verticalSpacing: nonNegativeInteger,
 
   // accessibility
   isFocused: PropTypes.bool, // describes actual DOM focus
@@ -104,6 +105,7 @@ const defaultProps = {
   customCloseIcon: null,
   noBorder: false,
   block: false,
+  verticalSpacing: undefined,
 
   // accessibility
   isFocused: false,
@@ -149,6 +151,7 @@ function DateRangePickerInput({
   isRTL,
   noBorder,
   block,
+  verticalSpacing,
   styles,
 }) {
   const calendarIcon = customInputIcon || (
@@ -204,6 +207,7 @@ function DateRangePickerInput({
         onKeyDownShiftTab={onStartDateShiftTab}
         onKeyDownArrowDown={onKeyDownArrowDown}
         onKeyDownQuestionMark={onKeyDownQuestionMark}
+        verticalSpacing={verticalSpacing}
       />
 
       <div
@@ -231,6 +235,7 @@ function DateRangePickerInput({
         onKeyDownTab={onEndDateTab}
         onKeyDownArrowDown={onKeyDownArrowDown}
         onKeyDownQuestionMark={onKeyDownQuestionMark}
+        verticalSpacing={verticalSpacing}
       />
 
       {showClearDates && (
diff --git a/src/components/DateRangePickerInputController.jsx b/src/components/DateRangePickerInputController.jsx
index f8bef6f21f..95837d3af8 100644
--- a/src/components/DateRangePickerInputController.jsx
+++ b/src/components/DateRangePickerInputController.jsx
@@ -43,6 +43,7 @@ const propTypes = forbidExtraProps({
   openDirection: openDirectionShape,
   noBorder: PropTypes.bool,
   block: PropTypes.bool,
+  verticalSpacing: nonNegativeInteger,
 
   keepOpenOnDateSelect: PropTypes.bool,
   reopenPickerOnClearDates: PropTypes.bool,
@@ -92,6 +93,7 @@ const defaultProps = {
   openDirection: OPEN_DOWN,
   noBorder: false,
   block: false,
+  verticalSpacing: undefined,
 
   keepOpenOnDateSelect: false,
   reopenPickerOnClearDates: false,
@@ -267,6 +269,7 @@ export default class DateRangePickerInputController extends React.Component {
       isRTL,
       noBorder,
       block,
+      verticalSpacing,
     } = this.props;
 
     const startDateString = this.getDateString(startDate);
@@ -308,6 +311,7 @@ export default class DateRangePickerInputController extends React.Component {
         isRTL={isRTL}
         noBorder={noBorder}
         block={block}
+        verticalSpacing={verticalSpacing}
       />
     );
   }
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index 717dfa721b..c879d7c027 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -13,6 +13,7 @@ import OutsideClickHandler from './OutsideClickHandler';
 import toMomentObject from '../utils/toMomentObject';
 import toLocalizedDateString from '../utils/toLocalizedDateString';
 import getResponsiveContainerStyles from '../utils/getResponsiveContainerStyles';
+import getInputHeight from '../utils/getInputHeight';
 
 import SingleDatePickerInput from './SingleDatePickerInput';
 import DayPickerSingleDateController from './DayPickerSingleDateController';
@@ -30,6 +31,8 @@ import {
   OPEN_UP,
   DAY_SIZE,
   ICON_BEFORE_POSITION,
+  FANG_HEIGHT_PX,
+  DEFAULT_VERTICAL_SPACING,
 } from '../constants';
 
 const propTypes = forbidExtraProps({
@@ -56,6 +59,7 @@ const defaultProps = {
   customCloseIcon: null,
   noBorder: false,
   block: false,
+  verticalSpacing: DEFAULT_VERTICAL_SPACING,
 
   // calendar presentation and interaction related props
   orientation: HORIZONTAL_ORIENTATION,
@@ -361,12 +365,20 @@ class SingleDatePicker extends React.Component {
       styles,
       verticalHeight,
       transitionDuration,
+      verticalSpacing,
+      theme: { reactDates },
     } = this.props;
     const { dayPickerContainerStyles, isDayPickerFocused, showKeyboardShortcuts } = this.state;
 
     const onOutsideClick = (!withFullScreenPortal && withPortal) ? this.onClearFocus : undefined;
     const closeIcon = customCloseIcon || (<CloseButton />);
 
+    const {
+      font: { input: { lineHeight } },
+      spacing: { inputPadding, displayTextPaddingVertical },
+    } = reactDates;
+    const inputHeight = getInputHeight({ lineHeight, inputPadding, displayTextPaddingVertical });
+
     return (
       <div // eslint-disable-line jsx-a11y/no-static-element-interactions
         ref={this.setDayPickerContainerRef}
@@ -376,13 +388,19 @@ class SingleDatePicker extends React.Component {
           anchorDirection === ANCHOR_RIGHT && styles.SingleDatePicker_picker__directionRight,
           openDirection === OPEN_DOWN && styles.SingleDatePicker_picker__openDown,
           openDirection === OPEN_UP && styles.SingleDatePicker_picker__openUp,
+          openDirection === OPEN_DOWN && {
+            top: inputHeight + verticalSpacing,
+          },
+          openDirection === OPEN_UP && {
+            bottom: inputHeight + verticalSpacing,
+          },
           orientation === HORIZONTAL_ORIENTATION && styles.SingleDatePicker_picker__horizontal,
           orientation === VERTICAL_ORIENTATION && styles.SingleDatePicker_picker__vertical,
           (withPortal || withFullScreenPortal) && styles.SingleDatePicker_picker__portal,
           withFullScreenPortal && styles.SingleDatePicker_picker__fullScreenPortal,
           isRTL && styles.SingleDatePicker_picker__rtl,
+          dayPickerContainerStyles,
         )}
-        style={dayPickerContainerStyles}
         onClick={onOutsideClick}
       >
         <DayPickerSingleDateController
@@ -459,6 +477,7 @@ class SingleDatePicker extends React.Component {
       isRTL,
       noBorder,
       block,
+      verticalSpacing,
       styles,
     } = this.props;
 
@@ -468,6 +487,8 @@ class SingleDatePicker extends React.Component {
 
     const onOutsideClick = (!withPortal && !withFullScreenPortal) ? this.onClearFocus : undefined;
 
+    const hideFang = verticalSpacing < FANG_HEIGHT_PX;
+
     return (
       <div
         {...css(
@@ -485,7 +506,7 @@ class SingleDatePicker extends React.Component {
             required={required}
             readOnly={readOnly}
             openDirection={openDirection}
-            showCaret={!withPortal && !withFullScreenPortal}
+            showCaret={!withPortal && !withFullScreenPortal && !hideFang}
             onClearDate={this.clearDate}
             showClearDate={showClearDate}
             showDefaultInputIcon={showDefaultInputIcon}
@@ -504,6 +525,7 @@ class SingleDatePicker extends React.Component {
             isRTL={isRTL}
             noBorder={noBorder}
             block={block}
+            verticalSpacing={verticalSpacing}
           />
 
           {this.maybeRenderDayPickerWithPortal()}
@@ -517,7 +539,7 @@ SingleDatePicker.propTypes = propTypes;
 SingleDatePicker.defaultProps = defaultProps;
 
 export { SingleDatePicker as PureSingleDatePicker };
-export default withStyles(({ reactDates: { color, spacing, zIndex } }) => ({
+export default withStyles(({ reactDates: { color, zIndex } }) => ({
   SingleDatePicker: {
     position: 'relative',
     display: 'inline-block',
@@ -545,14 +567,6 @@ export default withStyles(({ reactDates: { color, spacing, zIndex } }) => ({
     right: 0,
   },
 
-  SingleDatePicker_picker__openDown: {
-    top: spacing.inputMarginBottom,
-  },
-
-  SingleDatePicker_picker__openUp: {
-    bottom: spacing.inputMarginBottom,
-  },
-
   SingleDatePicker_picker__portal: {
     backgroundColor: 'rgba(0, 0, 0, 0.3)',
     position: 'fixed',
diff --git a/src/components/SingleDatePickerInput.jsx b/src/components/SingleDatePickerInput.jsx
index e6c992dec9..b47f2e38d0 100644
--- a/src/components/SingleDatePickerInput.jsx
+++ b/src/components/SingleDatePickerInput.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { forbidExtraProps } from 'airbnb-prop-types';
+import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 
 import { SingleDatePickerInputPhrases } from '../defaultPhrases';
@@ -36,6 +36,7 @@ const propTypes = forbidExtraProps({
   isRTL: PropTypes.bool,
   noBorder: PropTypes.bool,
   block: PropTypes.bool,
+  verticalSpacing: nonNegativeInteger,
 
   onChange: PropTypes.func,
   onClearDate: PropTypes.func,
@@ -68,6 +69,7 @@ const defaultProps = {
   isRTL: false,
   noBorder: false,
   block: false,
+  verticalSpacing: undefined,
 
   onChange() {},
   onClearDate() {},
@@ -109,6 +111,7 @@ function SingleDatePickerInput({
   isRTL,
   noBorder,
   block,
+  verticalSpacing,
   styles,
 }) {
   const calendarIcon = customInputIcon || (
@@ -162,6 +165,7 @@ function SingleDatePickerInput({
         onKeyDownArrowDown={onKeyDownArrowDown}
         onKeyDownQuestionMark={onKeyDownQuestionMark}
         openDirection={openDirection}
+        verticalSpacing={verticalSpacing}
       />
 
       {showClearDate && (
diff --git a/src/constants.js b/src/constants.js
index c41193d173..0e8bb5a4b2 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -21,3 +21,7 @@ export const OPEN_UP = 'up';
 export const DAY_SIZE = 39;
 export const BLOCKED_MODIFIER = 'blocked';
 export const WEEKDAYS = [0, 1, 2, 3, 4, 5, 6];
+
+export const FANG_WIDTH_PX = 20;
+export const FANG_HEIGHT_PX = 10;
+export const DEFAULT_VERTICAL_SPACING = 22;
diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js
index b252d025ad..e5e3d16111 100644
--- a/src/shapes/DateRangePickerShape.js
+++ b/src/shapes/DateRangePickerShape.js
@@ -60,6 +60,7 @@ export default {
   hideKeyboardShortcutsPanel: PropTypes.bool,
   verticalHeight: nonNegativeInteger,
   transitionDuration: nonNegativeInteger,
+  verticalSpacing: nonNegativeInteger,
 
   // navigation related props
   navPrev: PropTypes.node,
diff --git a/src/shapes/SingleDatePickerShape.js b/src/shapes/SingleDatePickerShape.js
index df758e981e..bed41ba4d3 100644
--- a/src/shapes/SingleDatePickerShape.js
+++ b/src/shapes/SingleDatePickerShape.js
@@ -33,6 +33,7 @@ export default {
   customInputIcon: PropTypes.node,
   noBorder: PropTypes.bool,
   block: PropTypes.bool,
+  verticalSpacing: nonNegativeInteger,
 
   // calendar presentation and interaction related props
   renderMonth: PropTypes.func,
diff --git a/src/theme/DefaultTheme.js b/src/theme/DefaultTheme.js
index 22e24cf0c8..f5feef8a5c 100644
--- a/src/theme/DefaultTheme.js
+++ b/src/theme/DefaultTheme.js
@@ -148,14 +148,12 @@ export default {
       captionPaddingTop: 22,
       captionPaddingBottom: 37,
       inputPadding: 0,
-      inputMarginBottom: 72, // spacing in between the input and the picker
       displayTextPaddingVertical: 12,
       displayTextPaddingHorizontal: 12,
     },
 
     sizing: {
       inputWidth: 130,
-      tooltipArrowWidth: 20,
       arrowWidth: 24,
     },
 
diff --git a/src/utils/getInputHeight.js b/src/utils/getInputHeight.js
new file mode 100644
index 0000000000..db6af95481
--- /dev/null
+++ b/src/utils/getInputHeight.js
@@ -0,0 +1,9 @@
+export default function getInputHeight({
+  lineHeight,
+  inputPadding,
+  displayTextPaddingVertical,
+}) {
+  return parseInt(lineHeight, 10)
+    + (2 * inputPadding)
+    + (2 * displayTextPaddingVertical);
+}
diff --git a/stories/DateRangePicker_calendar.js b/stories/DateRangePicker_calendar.js
index e731958c6c..4c085c4c52 100644
--- a/stories/DateRangePicker_calendar.js
+++ b/stories/DateRangePicker_calendar.js
@@ -177,4 +177,11 @@ storiesOf('DRP - Calendar Props', module)
       transitionDuration={0}
       autoFocus
     />
+  ))
+  .addWithInfo('with custom vertical spacing', () => (
+    <DateRangePickerWrapper
+      verticalSpacing={0}
+      autoFocus
+    />
   ));
+
diff --git a/stories/SingleDatePicker_calendar.js b/stories/SingleDatePicker_calendar.js
index 4a1a49bf9c..af2e07c990 100644
--- a/stories/SingleDatePicker_calendar.js
+++ b/stories/SingleDatePicker_calendar.js
@@ -158,5 +158,11 @@ storiesOf('SDP - Calendar Props', module)
       transitionDuration={0}
       autoFocus
     />
+  ))
+  .addWithInfo('with custom vertical spacing', () => (
+    <SingleDatePickerWrapper
+      verticalSpacing={0}
+      autoFocus
+    />
   ));
 
diff --git a/test/utils/getInputHeight_spec.js b/test/utils/getInputHeight_spec.js
new file mode 100644
index 0000000000..ce220526d0
--- /dev/null
+++ b/test/utils/getInputHeight_spec.js
@@ -0,0 +1,13 @@
+import { expect } from 'chai';
+import getInputHeight from '../../src/utils/getInputHeight';
+
+describe('#getInputHeight', () => {
+  it('returns the expected value', () => {
+    const inputHeight = getInputHeight({
+      lineHeight: 7,
+      inputPadding: 13,
+      displayTextPaddingVertical: 91,
+    });
+    expect(inputHeight).to.equal(215);
+  });
+});

From e2f494c87d01e4c98ed92b70166650d69a1d0ace Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Wed, 6 Dec 2017 11:21:58 -0800
Subject: [PATCH 030/618] Use theme font size in a meaningful way

---
 src/components/CalendarDay.jsx                |  6 ++++--
 src/components/DayPicker.jsx                  |  3 ++-
 src/components/DayPickerKeyboardShortcuts.jsx | 19 +++++++++----------
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/components/CalendarDay.jsx b/src/components/CalendarDay.jsx
index 603707641e..85f1ccd927 100644
--- a/src/components/CalendarDay.jsx
+++ b/src/components/CalendarDay.jsx
@@ -178,7 +178,7 @@ CalendarDay.propTypes = propTypes;
 CalendarDay.defaultProps = defaultProps;
 
 export { CalendarDay as PureCalendarDay };
-export default withStyles(({ reactDates: { color } }) => ({
+export default withStyles(({ reactDates: { color, font } }) => ({
   CalendarDay_container: {
     border: `1px solid ${color.core.borderLight}`,
     padding: 0,
@@ -203,11 +203,13 @@ export default withStyles(({ reactDates: { color } }) => ({
     margin: 0,
     padding: 0,
     color: 'inherit',
-    font: 'inherit',
     lineHeight: 'normal',
     overflow: 'visible',
     boxSizing: 'border-box',
     cursor: 'pointer',
+    fontFamily: 'inherit',
+    fontStyle: 'inherit',
+    fontSize: font.size,
 
     ':active': {
       outline: 0,
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index fbff031850..ae9e946d8e 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -842,7 +842,7 @@ DayPicker.propTypes = propTypes;
 DayPicker.defaultProps = defaultProps;
 
 export { DayPicker as PureDayPicker };
-export default withStyles(({ reactDates: { color, zIndex } }) => ({
+export default withStyles(({ reactDates: { color, font, zIndex } }) => ({
   DayPicker: {
     background: color.background,
     position: 'relative',
@@ -918,6 +918,7 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     margin: '1px 0',
     paddingLeft: 0,
     paddingRight: 0,
+    fontSize: font.size,
   },
 
   DayPicker_weekHeader_li: {
diff --git a/src/components/DayPickerKeyboardShortcuts.jsx b/src/components/DayPickerKeyboardShortcuts.jsx
index 3dd42247d3..eacb6d5640 100644
--- a/src/components/DayPickerKeyboardShortcuts.jsx
+++ b/src/components/DayPickerKeyboardShortcuts.jsx
@@ -214,17 +214,14 @@ class DayPickerKeyboardShortcuts extends React.Component {
 
         {showKeyboardShortcutsPanel &&
           <div
-            {...css(
-              styles.DayPickerKeyboardShortcuts_panel,
-              block && styles.DayPickerKeyboardShortcuts_panel__block,
-            )}
+            {...css(styles.DayPickerKeyboardShortcuts_panel)}
             role="dialog"
-            aria-labelledby="DayPickerKeyboardShortcuts__title"
-            aria-describedby="DayPickerKeyboardShortcuts__description"
+            aria-labelledby="DayPickerKeyboardShortcuts_title"
+            aria-describedby="DayPickerKeyboardShortcuts_description"
           >
             <div
               {...css(styles.DayPickerKeyboardShortcuts_title)}
-              id="DayPickerKeyboardShortcuts__title"
+              id="DayPickerKeyboardShortcuts_title"
             >
               {phrases.keyboardShortcuts}
             </div>
@@ -245,8 +242,8 @@ class DayPickerKeyboardShortcuts extends React.Component {
             </button>
 
             <ul
-              {...css(styles.DayPickerKeyboardShortcuts__list)}
-              id="DayPickerKeyboardShortcuts__description"
+              {...css(styles.DayPickerKeyboardShortcuts_list)}
+              id="DayPickerKeyboardShortcuts_description"
             >
               {this.keyboardShortcuts.map(({ unicode, label, action }) => (
                 <KeyboardShortcutRow
@@ -268,7 +265,7 @@ class DayPickerKeyboardShortcuts extends React.Component {
 DayPickerKeyboardShortcuts.propTypes = propTypes;
 DayPickerKeyboardShortcuts.defaultProps = defaultProps;
 
-export default withStyles(({ reactDates: { color, zIndex } }) => ({
+export default withStyles(({ reactDates: { color, font, zIndex } }) => ({
   DayPickerKeyboardShortcuts_buttonReset: {
     background: 'none',
     border: 0,
@@ -279,6 +276,7 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     overflow: 'visible',
     padding: 0,
     cursor: 'pointer',
+    fontSize: font.size,
 
     ':active': {
       outline: 'none',
@@ -368,6 +366,7 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
   DayPickerKeyboardShortcuts_list: {
     listStyle: 'none',
     padding: 0,
+    fontSize: font.size,
   },
 
   DayPickerKeyboardShortcuts_close: {

From f0eff4f99801a97fd4d9aedd52e9b88ffe85efe7 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Wed, 6 Dec 2017 16:43:40 -0800
Subject: [PATCH 031/618] Version 15.4.0

---
 CHANGELOG.md | 4 ++++
 package.json | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8f1d0667b8..c6b8417ed9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Change Log
 
+## 15.4.0
+- [fix] Set font sizes according to theme variable ([#885](https://github.com/airbnb/react-dates/pull/885))
+- [new] Add `verticalSpacing` prop ([#883](https://github.com/airbnb/react-dates/pull/883))
+
 ## 15.3.0
 - [new] Add `transitionDuration` prop ([#865](https://github.com/airbnb/react-dates/pull/865))
 - [fix] Remove default prop values for required startDateId and endDateId props ([#866](https://github.com/airbnb/react-dates/pull/866))
diff --git a/package.json b/package.json
index 2f00b7bc09..4f667a62eb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "15.3.0",
+  "version": "15.4.0",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 1159c62b5fd97cdb65393ad05ce01c3be20bc95a Mon Sep 17 00:00:00 2001
From: tajo <vojtech@miksu.cz>
Date: Wed, 6 Dec 2017 22:40:37 -0800
Subject: [PATCH 032/618] Bump react-portal to v4.1.0

---
 package.json                              |  2 +-
 src/components/DateRangePicker.jsx        |  4 ++--
 src/components/SingleDatePicker.jsx       |  4 ++--
 test/components/DateRangePicker_spec.jsx  | 24 +--------------------
 test/components/SingleDatePicker_spec.jsx | 26 +----------------------
 5 files changed, 7 insertions(+), 53 deletions(-)

diff --git a/package.json b/package.json
index 4f667a62eb..b87990906d 100644
--- a/package.json
+++ b/package.json
@@ -118,7 +118,7 @@
     "prop-types": "^15.5.10",
     "react-addons-shallow-compare": "^15.5.2",
     "react-moment-proptypes": "^1.5.0",
-    "react-portal": "^3.1.0",
+    "react-portal": "^4.1.0",
     "react-with-styles": "^2.2.0",
     "react-with-styles-interface-css": "^3.0.0"
   },
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index c6948ae535..9eeaec431b 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import shallowCompare from 'react-addons-shallow-compare';
 import moment from 'moment';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
-import Portal from 'react-portal';
+import { Portal } from 'react-portal';
 import { forbidExtraProps } from 'airbnb-prop-types';
 import { addEventListener } from 'consolidated-events';
 import isTouchDevice from 'is-touch-device';
@@ -280,7 +280,7 @@ class DateRangePicker extends React.Component {
 
     if (withPortal || withFullScreenPortal) {
       return (
-        <Portal isOpened>
+        <Portal>
           {this.renderDayPicker()}
         </Portal>
       );
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index c879d7c027..a4f5b5ff09 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import moment from 'moment';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
-import Portal from 'react-portal';
+import { Portal } from 'react-portal';
 import { forbidExtraProps } from 'airbnb-prop-types';
 import { addEventListener } from 'consolidated-events';
 import isTouchDevice from 'is-touch-device';
@@ -319,7 +319,7 @@ class SingleDatePicker extends React.Component {
 
     if (withPortal || withFullScreenPortal) {
       return (
-        <Portal isOpened>
+        <Portal>
           {this.renderDayPicker()}
         </Portal>
       );
diff --git a/test/components/DateRangePicker_spec.jsx b/test/components/DateRangePicker_spec.jsx
index 1d3fdd0767..fcf7a77fa1 100644
--- a/test/components/DateRangePicker_spec.jsx
+++ b/test/components/DateRangePicker_spec.jsx
@@ -3,7 +3,7 @@ import moment from 'moment';
 import { expect } from 'chai';
 import sinon from 'sinon-sandbox';
 import { shallow } from 'enzyme';
-import Portal from 'react-portal';
+import { Portal } from 'react-portal';
 
 import DateRangePicker, { PureDateRangePicker } from '../../src/components/DateRangePicker';
 
@@ -76,17 +76,6 @@ describe('DateRangePicker', () => {
           )).dive();
           expect(wrapper.find(Portal)).to.have.length(0);
         });
-
-        it('isOpened prop is true if props.focusedInput !== null', () => {
-          const wrapper = shallow((
-            <DateRangePicker
-              {...requiredProps}
-              withPortal
-              focusedInput={START_DATE}
-            />
-          )).dive();
-          expect(wrapper.find(Portal).props().isOpened).to.equal(true);
-        });
       });
     });
 
@@ -114,17 +103,6 @@ describe('DateRangePicker', () => {
           )).dive();
           expect(wrapper.find(Portal)).to.have.length(0);
         });
-
-        it('isOpened prop is true if props.focusedInput !== null', () => {
-          const wrapper = shallow((
-            <DateRangePicker
-              {...requiredProps}
-              withFullScreenPortal
-              focusedInput={START_DATE}
-            />
-          )).dive();
-          expect(wrapper.find(Portal).props().isOpened).to.equal(true);
-        });
       });
     });
 
diff --git a/test/components/SingleDatePicker_spec.jsx b/test/components/SingleDatePicker_spec.jsx
index 53e544c623..4659234aad 100644
--- a/test/components/SingleDatePicker_spec.jsx
+++ b/test/components/SingleDatePicker_spec.jsx
@@ -3,7 +3,7 @@ import { expect } from 'chai';
 import { shallow } from 'enzyme';
 import sinon from 'sinon-sandbox';
 import moment from 'moment';
-import Portal from 'react-portal';
+import { Portal } from 'react-portal';
 
 import CloseButton from '../../src/components/CloseButton';
 import DayPickerSingleDateController from '../../src/components/DayPickerSingleDateController';
@@ -115,18 +115,6 @@ describe('SingleDatePicker', () => {
           )).dive();
           expect(wrapper.find(Portal)).to.have.length(0);
         });
-
-        it('isOpened prop is true if props.focused is true', () => {
-          const wrapper = shallow((
-            <SingleDatePicker
-              onDateChange={() => {}}
-              onFocusChange={() => {}}
-              withPortal
-              focused
-            />
-          )).dive();
-          expect(wrapper.find(Portal).props().isOpened).to.equal(true);
-        });
       });
     });
 
@@ -166,18 +154,6 @@ describe('SingleDatePicker', () => {
           )).dive();
           expect(wrapper.find(Portal)).to.have.length(0);
         });
-
-        it('isOpened prop is true if props.focused is truthy', () => {
-          const wrapper = shallow((
-            <SingleDatePicker
-              onDateChange={() => {}}
-              onFocusChange={() => {}}
-              withFullScreenPortal
-              focused
-            />
-          )).dive();
-          expect(wrapper.find(Portal).props().isOpened).to.equal(true);
-        });
       });
     });
   });

From f65c1e3656a5023a516800d2c2a60beaab83d056 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Wed, 6 Dec 2017 17:23:37 -0800
Subject: [PATCH 033/618] Add small (input) variant of the DRP/SDP

---
 examples/DateRangePickerWrapper.jsx           |  2 +
 examples/SingleDatePickerWrapper.jsx          |  3 +
 src/components/DateInput.jsx                  | 35 ++++++---
 src/components/DateRangePicker.jsx            | 10 +--
 src/components/DateRangePickerInput.jsx       | 43 ++++++++++-
 .../DateRangePickerInputController.jsx        |  4 ++
 src/components/SingleDatePicker.jsx           | 10 +--
 src/components/SingleDatePickerInput.jsx      | 19 ++++-
 src/shapes/DateRangePickerShape.js            |  1 +
 src/shapes/SingleDatePickerShape.js           |  1 +
 src/theme/DefaultTheme.js                     | 18 ++++-
 src/utils/getInputHeight.js                   | 72 +++++++++++++++++--
 stories/DateRangePicker_input.js              |  8 +++
 stories/SingleDatePicker_input.js             |  7 ++
 test/utils/getInputHeight_spec.js             | 33 +++++++--
 15 files changed, 226 insertions(+), 40 deletions(-)

diff --git a/examples/DateRangePickerWrapper.jsx b/examples/DateRangePickerWrapper.jsx
index 97588980cc..5315909510 100644
--- a/examples/DateRangePickerWrapper.jsx
+++ b/examples/DateRangePickerWrapper.jsx
@@ -47,6 +47,8 @@ const defaultProps = {
   customInputIcon: null,
   customArrowIcon: null,
   customCloseIcon: null,
+  block: false,
+  small: false,
 
   // calendar presentation and interaction related props
   renderMonth: null,
diff --git a/examples/SingleDatePickerWrapper.jsx b/examples/SingleDatePickerWrapper.jsx
index 8562a2b933..feb5d90c8e 100644
--- a/examples/SingleDatePickerWrapper.jsx
+++ b/examples/SingleDatePickerWrapper.jsx
@@ -38,6 +38,9 @@ const defaultProps = {
   showClearDate: false,
   showDefaultInputIcon: false,
   customInputIcon: null,
+  block: false,
+  small: false,
+  verticalSpacing: undefined,
 
   // calendar presentation and interaction related props
   renderMonth: null,
diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
index 4d6cb1eb5e..ee8a265d99 100644
--- a/src/components/DateInput.jsx
+++ b/src/components/DateInput.jsx
@@ -33,6 +33,7 @@ const propTypes = forbidExtraProps({
   openDirection: openDirectionShape,
   showCaret: PropTypes.bool,
   verticalSpacing: nonNegativeInteger,
+  small: PropTypes.bool,
 
   onChange: PropTypes.func,
   onFocus: PropTypes.func,
@@ -57,6 +58,7 @@ const defaultProps = {
   openDirection: OPEN_DOWN,
   showCaret: false,
   verticalSpacing: DEFAULT_VERTICAL_SPACING,
+  small: false,
 
   onChange() {},
   onFocus() {},
@@ -169,6 +171,7 @@ class DateInput extends React.Component {
       readOnly,
       openDirection,
       verticalSpacing,
+      small,
       styles,
       theme: { reactDates },
     } = this.props;
@@ -178,16 +181,13 @@ class DateInput extends React.Component {
 
     const withFang = showCaret && focused;
 
-    const {
-      font: { input: { lineHeight } },
-      spacing: { inputPadding, displayTextPaddingVertical },
-    } = reactDates;
-    const inputHeight = getInputHeight({ lineHeight, inputPadding, displayTextPaddingVertical });
+    const inputHeight = getInputHeight(reactDates, small);
 
     return (
       <div
         {...css(
           styles.DateInput,
+          small && styles.DateInput__small,
           withFang && styles.DateInput__withFang,
           disabled && styles.DateInput__disabled,
           withFang && openDirection === OPEN_DOWN && styles.DateInput__openDown,
@@ -197,6 +197,7 @@ class DateInput extends React.Component {
         <input
           {...css(
             styles.DateInput_input,
+            small && styles.DateInput_input__small,
             readOnly && styles.DateInput_input__readOnly,
             focused && styles.DateInput_input__focused,
             disabled && styles.DateInput_input__disabled,
@@ -262,13 +263,8 @@ export default withStyles(({
   },
 }) => ({
   DateInput: {
-    fontWeight: 200,
-    fontSize: font.input.size,
-    lineHeight: font.input.lineHeight,
-    color: color.placeholderText,
     margin: 0,
     padding: spacing.inputPadding,
-
     background: color.background,
     position: 'relative',
     display: 'inline-block',
@@ -276,6 +272,10 @@ export default withStyles(({
     verticalAlign: 'middle',
   },
 
+  DateInput__small: {
+    width: sizing.inputWidth_small,
+  },
+
   DateInput__disabled: {
     background: color.disabled,
     color: color.textDisabled,
@@ -284,10 +284,15 @@ export default withStyles(({
   DateInput_input: {
     fontWeight: 200,
     fontSize: font.input.size,
+    lineHeight: font.input.lineHeight,
     color: color.text,
     backgroundColor: color.background,
     width: '100%',
     padding: `${spacing.displayTextPaddingVertical}px ${spacing.displayTextPaddingHorizontal}px`,
+    paddingTop: spacing.displayTextPaddingTop,
+    paddingBottom: spacing.displayTextPaddingBottom,
+    paddingLeft: spacing.displayTextPaddingLeft,
+    paddingRight: spacing.displayTextPaddingRight,
     border: border.input.border,
     borderTop: border.input.borderTop,
     borderRight: border.input.borderRight,
@@ -295,6 +300,16 @@ export default withStyles(({
     borderLeft: border.input.borderLeft,
   },
 
+  DateInput_input__small: {
+    fontSize: font.input.size_small,
+    lineHeight: font.input.lineHeight_small,
+    padding: `${spacing.displayTextPaddingVertical_small}px ${spacing.displayTextPaddingHorizontal_small}px`,
+    paddingTop: spacing.displayTextPaddingTop_small,
+    paddingBottom: spacing.displayTextPaddingBottom_small,
+    paddingLeft: spacing.displayTextPaddingLeft_small,
+    paddingRight: spacing.displayTextPaddingRight_small,
+  },
+
   DateInput_input__readOnly: {
     userSelect: 'none',
   },
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 9eeaec431b..fc89cf6c99 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -63,6 +63,7 @@ const defaultProps = {
   customCloseIcon: null,
   noBorder: false,
   block: false,
+  small: false,
 
   // calendar presentation and interaction related props
   renderMonth: null,
@@ -329,6 +330,7 @@ class DateRangePicker extends React.Component {
       verticalHeight,
       transitionDuration,
       verticalSpacing,
+      small,
       theme: { reactDates },
     } = this.props;
     const { dayPickerContainerStyles, isDayPickerFocused, showKeyboardShortcuts } = this.state;
@@ -344,11 +346,7 @@ class DateRangePicker extends React.Component {
       <CloseButton {...css(styles.DateRangePicker_closeButton_svg)} />
     );
 
-    const {
-      font: { input: { lineHeight } },
-      spacing: { inputPadding, displayTextPaddingVertical },
-    } = reactDates;
-    const inputHeight = getInputHeight({ lineHeight, inputPadding, displayTextPaddingVertical });
+    const inputHeight = getInputHeight(reactDates, small);
 
     return (
       <div // eslint-disable-line jsx-a11y/no-static-element-interactions
@@ -458,6 +456,7 @@ class DateRangePicker extends React.Component {
       noBorder,
       block,
       verticalSpacing,
+      small,
       styles,
     } = this.props;
 
@@ -512,6 +511,7 @@ class DateRangePicker extends React.Component {
             isRTL={isRTL}
             noBorder={noBorder}
             block={block}
+            small={small}
             verticalSpacing={verticalSpacing}
           />
 
diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index 5c60707a2e..ebf041c4d5 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -60,6 +60,7 @@ const propTypes = forbidExtraProps({
   customCloseIcon: PropTypes.node,
   noBorder: PropTypes.bool,
   block: PropTypes.bool,
+  small: PropTypes.bool,
   verticalSpacing: nonNegativeInteger,
 
   // accessibility
@@ -105,6 +106,7 @@ const defaultProps = {
   customCloseIcon: null,
   noBorder: false,
   block: false,
+  small: false,
   verticalSpacing: undefined,
 
   // accessibility
@@ -152,17 +154,36 @@ function DateRangePickerInput({
   noBorder,
   block,
   verticalSpacing,
+  small,
   styles,
 }) {
   const calendarIcon = customInputIcon || (
     <CalendarIcon {...css(styles.DateRangePickerInput_calendarIcon_svg)} />
   );
   const arrowIcon = customArrowIcon || (isRTL
-    ? <LeftArrow {...css(styles.DateRangePickerInput_arrow_svg)} />
-    : <RightArrow {...css(styles.DateRangePickerInput_arrow_svg)} />
+    ? (
+      <LeftArrow
+        {...css(
+          styles.DateRangePickerInput_arrow_svg,
+          small && styles.DateRangePickerInput_arrow_svg__small,
+        )}
+      />
+    ) : (
+      <RightArrow
+        {...css(
+          styles.DateRangePickerInput_arrow_svg,
+          small && styles.DateRangePickerInput_arrow_svg__small,
+        )}
+      />
+    )
   );
   const closeIcon = customCloseIcon || (
-    <CloseButton {...css(styles.DateRangePickerInput_clearDates_svg)} />
+    <CloseButton
+      {...css(
+        styles.DateRangePickerInput_clearDates_svg,
+        small && styles.DateRangePickerInput_clearDates_svg__small,
+      )}
+    />
   );
   const screenReaderText = screenReaderMessage || phrases.keyboardNavigationInstructions;
   const inputIcon = (showDefaultInputIcon || customInputIcon !== null) && (
@@ -208,6 +229,7 @@ function DateRangePickerInput({
         onKeyDownArrowDown={onKeyDownArrowDown}
         onKeyDownQuestionMark={onKeyDownQuestionMark}
         verticalSpacing={verticalSpacing}
+        small={small}
       />
 
       <div
@@ -236,6 +258,7 @@ function DateRangePickerInput({
         onKeyDownArrowDown={onKeyDownArrowDown}
         onKeyDownQuestionMark={onKeyDownQuestionMark}
         verticalSpacing={verticalSpacing}
+        small={small}
       />
 
       {showClearDates && (
@@ -244,6 +267,7 @@ function DateRangePickerInput({
           aria-label={phrases.clearDates}
           {...css(
             styles.DateRangePickerInput_clearDates,
+            small && styles.DateRangePickerInput_clearDates__small,
             !customCloseIcon && styles.DateRangePickerInput_clearDates_default,
             !(startDate || endDate) && styles.DateRangePickerInput_clearDates__hide,
           )}
@@ -301,6 +325,11 @@ export default withStyles(({ reactDates: { color, sizing } }) => ({
     width: sizing.arrowWidth,
   },
 
+  DateRangePickerInput_arrow_svg__small: {
+    height: sizing.arrowWidth_small,
+    width: sizing.arrowWidth_small,
+  },
+
   DateRangePickerInput_clearDates: {
     background: 'none',
     border: 0,
@@ -318,6 +347,10 @@ export default withStyles(({ reactDates: { color, sizing } }) => ({
     transform: 'translateY(-50%)',
   },
 
+  DateRangePickerInput_clearDates__small: {
+    padding: 6,
+  },
+
   DateRangePickerInput_clearDates_default: {
     ':focus': {
       background: color.core.border,
@@ -341,6 +374,10 @@ export default withStyles(({ reactDates: { color, sizing } }) => ({
     verticalAlign: 'middle',
   },
 
+  DateRangePickerInput_clearDates_svg__small: {
+    height: 9,
+  },
+
   DateRangePickerInput_calendarIcon: {
     background: 'none',
     border: 0,
diff --git a/src/components/DateRangePickerInputController.jsx b/src/components/DateRangePickerInputController.jsx
index 95837d3af8..aa5843214d 100644
--- a/src/components/DateRangePickerInputController.jsx
+++ b/src/components/DateRangePickerInputController.jsx
@@ -43,6 +43,7 @@ const propTypes = forbidExtraProps({
   openDirection: openDirectionShape,
   noBorder: PropTypes.bool,
   block: PropTypes.bool,
+  small: PropTypes.bool,
   verticalSpacing: nonNegativeInteger,
 
   keepOpenOnDateSelect: PropTypes.bool,
@@ -93,6 +94,7 @@ const defaultProps = {
   openDirection: OPEN_DOWN,
   noBorder: false,
   block: false,
+  small: false,
   verticalSpacing: undefined,
 
   keepOpenOnDateSelect: false,
@@ -269,6 +271,7 @@ export default class DateRangePickerInputController extends React.Component {
       isRTL,
       noBorder,
       block,
+      small,
       verticalSpacing,
     } = this.props;
 
@@ -311,6 +314,7 @@ export default class DateRangePickerInputController extends React.Component {
         isRTL={isRTL}
         noBorder={noBorder}
         block={block}
+        small={small}
         verticalSpacing={verticalSpacing}
       />
     );
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index a4f5b5ff09..8d4563aa10 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -59,6 +59,7 @@ const defaultProps = {
   customCloseIcon: null,
   noBorder: false,
   block: false,
+  small: false,
   verticalSpacing: DEFAULT_VERTICAL_SPACING,
 
   // calendar presentation and interaction related props
@@ -366,6 +367,7 @@ class SingleDatePicker extends React.Component {
       verticalHeight,
       transitionDuration,
       verticalSpacing,
+      small,
       theme: { reactDates },
     } = this.props;
     const { dayPickerContainerStyles, isDayPickerFocused, showKeyboardShortcuts } = this.state;
@@ -373,11 +375,7 @@ class SingleDatePicker extends React.Component {
     const onOutsideClick = (!withFullScreenPortal && withPortal) ? this.onClearFocus : undefined;
     const closeIcon = customCloseIcon || (<CloseButton />);
 
-    const {
-      font: { input: { lineHeight } },
-      spacing: { inputPadding, displayTextPaddingVertical },
-    } = reactDates;
-    const inputHeight = getInputHeight({ lineHeight, inputPadding, displayTextPaddingVertical });
+    const inputHeight = getInputHeight(reactDates, small);
 
     return (
       <div // eslint-disable-line jsx-a11y/no-static-element-interactions
@@ -477,6 +475,7 @@ class SingleDatePicker extends React.Component {
       isRTL,
       noBorder,
       block,
+      small,
       verticalSpacing,
       styles,
     } = this.props;
@@ -525,6 +524,7 @@ class SingleDatePicker extends React.Component {
             isRTL={isRTL}
             noBorder={noBorder}
             block={block}
+            small={small}
             verticalSpacing={verticalSpacing}
           />
 
diff --git a/src/components/SingleDatePickerInput.jsx b/src/components/SingleDatePickerInput.jsx
index b47f2e38d0..af362629f5 100644
--- a/src/components/SingleDatePickerInput.jsx
+++ b/src/components/SingleDatePickerInput.jsx
@@ -36,6 +36,7 @@ const propTypes = forbidExtraProps({
   isRTL: PropTypes.bool,
   noBorder: PropTypes.bool,
   block: PropTypes.bool,
+  small: PropTypes.bool,
   verticalSpacing: nonNegativeInteger,
 
   onChange: PropTypes.func,
@@ -111,6 +112,7 @@ function SingleDatePickerInput({
   isRTL,
   noBorder,
   block,
+  small,
   verticalSpacing,
   styles,
 }) {
@@ -118,7 +120,12 @@ function SingleDatePickerInput({
     <CalendarIcon {...css(styles.SingleDatePickerInput_calendarIcon_svg)} />
   );
   const closeIcon = customCloseIcon || (
-    <CloseButton {...css(styles.SingleDatePickerInput_clearDate_svg)} />
+    <CloseButton
+      {...css(
+        styles.SingleDatePickerInput_clearDate_svg,
+        styles.SingleDatePickerInput_clearDate_svg__small,
+      )}
+    />
   );
 
   const screenReaderText = screenReaderMessage || phrases.keyboardNavigationInstructions;
@@ -166,12 +173,14 @@ function SingleDatePickerInput({
         onKeyDownQuestionMark={onKeyDownQuestionMark}
         openDirection={openDirection}
         verticalSpacing={verticalSpacing}
+        small={small}
       />
 
       {showClearDate && (
         <button
           {...css(
             styles.SingleDatePickerInput_clearDate,
+            small && styles.SingleDatePickerInput_clearDate__small,
             !customCloseIcon && styles.SingleDatePickerInput_clearDate__default,
             !displayValue && styles.SingleDatePickerInput_clearDate__hide,
           )}
@@ -250,6 +259,10 @@ export default withStyles(({ reactDates: { color } }) => ({
     },
   },
 
+  SingleDatePickerInput_clearDate__small: {
+    padding: 6,
+  },
+
   SingleDatePickerInput_clearDate__hide: {
     visibility: 'hidden',
   },
@@ -261,6 +274,10 @@ export default withStyles(({ reactDates: { color } }) => ({
     verticalAlign: 'middle',
   },
 
+  SingleDatePickerInput_clearDate_svg__small: {
+    height: 9,
+  },
+
   SingleDatePickerInput_calendarIcon: {
     background: 'none',
     border: 0,
diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js
index e5e3d16111..2259633096 100644
--- a/src/shapes/DateRangePickerShape.js
+++ b/src/shapes/DateRangePickerShape.js
@@ -40,6 +40,7 @@ export default {
   customCloseIcon: PropTypes.node,
   noBorder: PropTypes.bool,
   block: PropTypes.bool,
+  small: PropTypes.bool,
 
   // calendar presentation and interaction related props
   renderMonth: PropTypes.func,
diff --git a/src/shapes/SingleDatePickerShape.js b/src/shapes/SingleDatePickerShape.js
index bed41ba4d3..3628b05308 100644
--- a/src/shapes/SingleDatePickerShape.js
+++ b/src/shapes/SingleDatePickerShape.js
@@ -33,6 +33,7 @@ export default {
   customInputIcon: PropTypes.node,
   noBorder: PropTypes.bool,
   block: PropTypes.bool,
+  small: PropTypes.bool,
   verticalSpacing: nonNegativeInteger,
 
   // calendar presentation and interaction related props
diff --git a/src/theme/DefaultTheme.js b/src/theme/DefaultTheme.js
index f5feef8a5c..a1f98e4841 100644
--- a/src/theme/DefaultTheme.js
+++ b/src/theme/DefaultTheme.js
@@ -148,13 +148,25 @@ export default {
       captionPaddingTop: 22,
       captionPaddingBottom: 37,
       inputPadding: 0,
-      displayTextPaddingVertical: 12,
-      displayTextPaddingHorizontal: 12,
+      displayTextPaddingVertical: undefined,
+      displayTextPaddingTop: 13,
+      displayTextPaddingBottom: 11,
+      displayTextPaddingHorizontal: undefined,
+      displayTextPaddingLeft: 12,
+      displayTextPaddingRight: 12,
+      displayTextPaddingVertical_small: undefined,
+      displayTextPaddingTop_small: 9,
+      displayTextPaddingBottom_small: 7,
+      displayTextPaddingHorizontal_small: undefined,
+      displayTextPaddingLeft_small: 8,
+      displayTextPaddingRight_small: 8,
     },
 
     sizing: {
       inputWidth: 130,
+      inputWidth_small: 90,
       arrowWidth: 24,
+      arrowWidth_small: 19,
     },
 
     font: {
@@ -163,6 +175,8 @@ export default {
       input: {
         size: 18,
         lineHeight: '24px',
+        size_small: 14,
+        lineHeight_small: '18px',
         styleDisabled: 'italic',
       },
     },
diff --git a/src/utils/getInputHeight.js b/src/utils/getInputHeight.js
index db6af95481..47be040a31 100644
--- a/src/utils/getInputHeight.js
+++ b/src/utils/getInputHeight.js
@@ -1,9 +1,67 @@
+/* eslint-disable camelcase */
+
+function getPadding(vertical, top, bottom) {
+  const isTopDefined = typeof top === 'number';
+  const isBottomDefined = typeof bottom === 'number';
+  const isVerticalDefined = typeof vertical === 'number';
+
+  if (isTopDefined && isBottomDefined) {
+    return top + bottom;
+  }
+
+  if (isTopDefined && isVerticalDefined) {
+    return top + vertical;
+  }
+
+  if (isTopDefined) {
+    return top;
+  }
+
+  if (isBottomDefined && isVerticalDefined) {
+    return bottom + vertical;
+  }
+
+  if (isBottomDefined) {
+    return bottom;
+  }
+
+  if (isVerticalDefined) {
+    return 2 * vertical;
+  }
+
+  return 0;
+}
+
 export default function getInputHeight({
-  lineHeight,
-  inputPadding,
-  displayTextPaddingVertical,
-}) {
-  return parseInt(lineHeight, 10)
-    + (2 * inputPadding)
-    + (2 * displayTextPaddingVertical);
+  font: {
+    input: {
+      lineHeight,
+      lineHeight_small,
+    },
+  },
+  spacing: {
+    inputPadding,
+    displayTextPaddingVertical,
+    displayTextPaddingTop,
+    displayTextPaddingBottom,
+    displayTextPaddingVertical_small,
+    displayTextPaddingTop_small,
+    displayTextPaddingBottom_small,
+  },
+}, small) {
+  const calcLineHeight = small ? lineHeight_small : lineHeight;
+
+  const padding = small ?
+    getPadding(
+      displayTextPaddingVertical_small,
+      displayTextPaddingTop_small,
+      displayTextPaddingBottom_small,
+    ) :
+    getPadding(
+      displayTextPaddingVertical,
+      displayTextPaddingTop,
+      displayTextPaddingBottom,
+    );
+
+  return parseInt(calcLineHeight, 10) + (2 * inputPadding) + padding;
 }
diff --git a/stories/DateRangePicker_input.js b/stories/DateRangePicker_input.js
index e58f3c4a41..420cdcea91 100644
--- a/stories/DateRangePicker_input.js
+++ b/stories/DateRangePicker_input.js
@@ -134,4 +134,12 @@ storiesOf('DRP - Input Props', module)
       showClearDates
       block
     />
+  ))
+  .addWithInfo('small styling', () => (
+    <DateRangePickerWrapper
+      initialStartDate={moment().add(3, 'days')}
+      initialEndDate={moment().add(10, 'days')}
+      showClearDates
+      small
+    />
   ));
diff --git a/stories/SingleDatePicker_input.js b/stories/SingleDatePicker_input.js
index ffe973735e..f5e88b8c82 100644
--- a/stories/SingleDatePicker_input.js
+++ b/stories/SingleDatePicker_input.js
@@ -84,4 +84,11 @@ storiesOf('SDP - Input Props', module)
       showClearDate
       block
     />
+  ))
+  .addWithInfo('small styling', () => (
+    <SingleDatePickerWrapper
+      initialDate={moment().add(3, 'days')}
+      showClearDate
+      small
+    />
   ));
diff --git a/test/utils/getInputHeight_spec.js b/test/utils/getInputHeight_spec.js
index ce220526d0..c5155669d0 100644
--- a/test/utils/getInputHeight_spec.js
+++ b/test/utils/getInputHeight_spec.js
@@ -1,13 +1,32 @@
 import { expect } from 'chai';
 import getInputHeight from '../../src/utils/getInputHeight';
 
+const theme = {
+  font: {
+    input: {
+      lineHeight: 13,
+      lineHeight_small: 7,
+    },
+  },
+  spacing: {
+    inputPadding: 10,
+    displayTextPaddingVertical: 8,
+    displayTextPaddingTop: 10,
+    displayTextPaddingBottom: 12,
+    displayTextPaddingVertical_small: 2,
+    displayTextPaddingTop_small: 4,
+    displayTextPaddingBottom_small: 6,
+  },
+};
+
 describe('#getInputHeight', () => {
-  it('returns the expected value', () => {
-    const inputHeight = getInputHeight({
-      lineHeight: 7,
-      inputPadding: 13,
-      displayTextPaddingVertical: 91,
-    });
-    expect(inputHeight).to.equal(215);
+  it('returns the expected value with falsey second arg', () => {
+    const inputHeight = getInputHeight(theme);
+    expect(inputHeight).to.equal(55);
+  });
+
+  it('returns the expected value with truthy second arg', () => {
+    const inputHeight = getInputHeight(theme, true);
+    expect(inputHeight).to.equal(37);
   });
 });

From 83cc6bed16e9603efe07d78e299a8268217ec3cd Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Thu, 7 Dec 2017 14:43:45 -0800
Subject: [PATCH 034/618] Version 15.5.0

---
 CHANGELOG.md | 3 +++
 package.json | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c6b8417ed9..952296c86e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # Change Log
 
+## 15.5.0
+- [new] Add `small` variant ([#891](https://github.com/airbnb/react-dates/pull/891))
+
 ## 15.4.0
 - [fix] Set font sizes according to theme variable ([#885](https://github.com/airbnb/react-dates/pull/885))
 - [new] Add `verticalSpacing` prop ([#883](https://github.com/airbnb/react-dates/pull/883))
diff --git a/package.json b/package.json
index b87990906d..0143547feb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "15.4.0",
+  "version": "15.5.0",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 19cf5194f6ad3569d526e0ddfadc0d9972ca7fe8 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Thu, 7 Dec 2017 15:36:41 -0800
Subject: [PATCH 035/618] Adjust small input padding so that input is 36px tall

---
 src/theme/DefaultTheme.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/theme/DefaultTheme.js b/src/theme/DefaultTheme.js
index a1f98e4841..d2e278aeac 100644
--- a/src/theme/DefaultTheme.js
+++ b/src/theme/DefaultTheme.js
@@ -155,8 +155,8 @@ export default {
       displayTextPaddingLeft: 12,
       displayTextPaddingRight: 12,
       displayTextPaddingVertical_small: undefined,
-      displayTextPaddingTop_small: 9,
-      displayTextPaddingBottom_small: 7,
+      displayTextPaddingTop_small: 8,
+      displayTextPaddingBottom_small: 6,
       displayTextPaddingHorizontal_small: undefined,
       displayTextPaddingLeft_small: 8,
       displayTextPaddingRight_small: 8,

From bab162d84c511b132d3c279fb1e359bf1cd08dfa Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Thu, 7 Dec 2017 16:04:46 -0800
Subject: [PATCH 036/618] Version 15.5.1

---
 CHANGELOG.md | 3 +++
 package.json | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 952296c86e..1a78d56798 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # Change Log
 
+## 15.5.1
+- [fix] Adjust `small` variant height to be 36px ([#892](https://github.com/airbnb/react-dates/pull/892))
+
 ## 15.5.0
 - [new] Add `small` variant ([#891](https://github.com/airbnb/react-dates/pull/891))
 
diff --git a/package.json b/package.json
index 0143547feb..f0d2dd5722 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "15.5.0",
+  "version": "15.5.1",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From d810291947c39d6524f395a245cc7973374c9d44 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Fri, 8 Dec 2017 11:32:16 -0800
Subject: [PATCH 037/618] Add renderCalendarDay prop to allow for one-off,
 hacky customization of day styling

---
 README.md                                     |   9 +-
 css/storybook.scss                            |   4 +
 examples/DateRangePickerWrapper.jsx           |   3 +-
 examples/DayPickerRangeControllerWrapper.jsx  |   6 +-
 .../DayPickerSingleDateControllerWrapper.jsx  |   6 +-
 examples/PresetDateRangePicker.jsx            |   2 +-
 examples/SingleDatePickerWrapper.jsx          |   3 +-
 src/components/CalendarDay.jsx                |  80 ++-
 src/components/CalendarMonth.jsx              |  46 +-
 src/components/CalendarMonthGrid.jsx          |  12 +-
 src/components/CalendarWeek.jsx               |  19 +
 src/components/CustomizableCalendarDay.jsx    | 466 ++++++++++++++++++
 src/components/DateRangePicker.jsx            |   9 +-
 src/components/DayPicker.jsx                  |  12 +-
 src/components/DayPickerRangeController.jsx   |  12 +-
 .../DayPickerSingleDateController.jsx         |  12 +-
 src/components/SingleDatePicker.jsx           |   9 +-
 src/shapes/DateRangePickerShape.js            |   3 +-
 src/shapes/SingleDatePickerShape.js           |   3 +-
 stories/DateRangePicker.js                    |   2 +-
 stories/DateRangePicker_day.js                |  47 +-
 stories/DayPicker.js                          |   2 +-
 stories/DayPickerRangeController.js           |   2 +-
 stories/DayPickerSingleDateController.js      |   2 +-
 stories/SingleDatePicker.js                   |   2 +-
 stories/SingleDatePicker_day.js               |   2 +-
 stories/withStyles.js                         |  59 ++-
 test/components/CalendarDay_spec.jsx          | 131 +++--
 test/components/CalendarWeek_spec.jsx         |  18 +
 .../CustomizableCalendarDay_spec.jsx          | 196 ++++++++
 30 files changed, 987 insertions(+), 192 deletions(-)
 create mode 100644 src/components/CalendarWeek.jsx
 create mode 100644 src/components/CustomizableCalendarDay.jsx
 create mode 100644 test/components/CalendarWeek_spec.jsx
 create mode 100644 test/components/CustomizableCalendarDay_spec.jsx

diff --git a/README.md b/README.md
index eb4a22a87e..54614a0721 100644
--- a/README.md
+++ b/README.md
@@ -155,7 +155,8 @@ onClose: PropTypes.func,
 transitionDuration: nonNegativeInteger, // milliseconds
 
 // day presentation and interaction related props
-renderDay: PropTypes.func,
+renderCalendarDay: PropTypes.func,
+renderDayContents: PropTypes.func,
 minimumNights: PropTypes.number,
 enableOutsideDays: PropTypes.bool,
 isDayBlocked: PropTypes.func,
@@ -228,7 +229,8 @@ onClose: PropTypes.func,
 transitionDuration: nonNegativeInteger, // milliseconds
 
 // day presentation and interaction related props
-renderDay: PropTypes.func,
+renderCalendarDay: PropTypes.func,
+renderDayContents: PropTypes.func,
 enableOutsideDays: PropTypes.bool,
 isDayBlocked: PropTypes.func,
 isOutsideRange: PropTypes.func,
@@ -278,7 +280,8 @@ The following is a list of other *OPTIONAL* props you may provide to the `DayPic
   transitionDuration: nonNegativeInteger, // milliseconds
 
   // day presentation and interaction related props
-  renderDay: PropTypes.func,
+  renderCalendarDay: PropTypes.func,
+  renderDayContents: PropTypes.func,
   minimumNights: PropTypes.number,
   isOutsideRange: PropTypes.func,
   isDayBlocked: PropTypes.func,
diff --git a/css/storybook.scss b/css/storybook.scss
index 2f94c9ee71..c304369718 100644
--- a/css/storybook.scss
+++ b/css/storybook.scss
@@ -17,4 +17,8 @@ html {
 a {
   color: #008489;
   font-weight: bold;
+}
+
+.foo-bar {
+  background: red !important;
 }
\ No newline at end of file
diff --git a/examples/DateRangePickerWrapper.jsx b/examples/DateRangePickerWrapper.jsx
index 5315909510..ba0018e69c 100644
--- a/examples/DateRangePickerWrapper.jsx
+++ b/examples/DateRangePickerWrapper.jsx
@@ -71,7 +71,8 @@ const defaultProps = {
   onClose() {},
 
   // day presentation and interaction related props
-  renderDay: null,
+  renderCalendarDay: undefined,
+  renderDayContents: null,
   minimumNights: 1,
   enableOutsideDays: false,
   isDayBlocked: () => false,
diff --git a/examples/DayPickerRangeControllerWrapper.jsx b/examples/DayPickerRangeControllerWrapper.jsx
index 5554b920af..29e04b639f 100644
--- a/examples/DayPickerRangeControllerWrapper.jsx
+++ b/examples/DayPickerRangeControllerWrapper.jsx
@@ -39,7 +39,8 @@ const propTypes = forbidExtraProps({
   onPrevMonthClick: PropTypes.func,
   onNextMonthClick: PropTypes.func,
   onOutsideClick: PropTypes.func,
-  renderDay: PropTypes.func,
+  renderCalendarDay: PropTypes.func,
+  renderDayContents: PropTypes.func,
 
   // i18n
   monthFormat: PropTypes.string,
@@ -54,7 +55,8 @@ const defaultProps = {
   initialEndDate: null,
 
   // day presentation and interaction related props
-  renderDay: null,
+  renderCalendarDay: undefined,
+  renderDayContents: null,
   minimumNights: 1,
   isDayBlocked: () => false,
   isOutsideRange: day => !isInclusivelyAfterDay(day, moment()),
diff --git a/examples/DayPickerSingleDateControllerWrapper.jsx b/examples/DayPickerSingleDateControllerWrapper.jsx
index 200c84ec8f..d9d703c19f 100644
--- a/examples/DayPickerSingleDateControllerWrapper.jsx
+++ b/examples/DayPickerSingleDateControllerWrapper.jsx
@@ -38,7 +38,8 @@ const propTypes = forbidExtraProps({
   onPrevMonthClick: PropTypes.func,
   onNextMonthClick: PropTypes.func,
   onOutsideClick: PropTypes.func,
-  renderDay: PropTypes.func,
+  renderCalendarDay: PropTypes.func,
+  renderDayContents: PropTypes.func,
 
   // i18n
   monthFormat: PropTypes.string,
@@ -53,7 +54,8 @@ const defaultProps = {
   showInput: false,
 
   // day presentation and interaction related props
-  renderDay: null,
+  renderCalendarDay: undefined,
+  renderDayContents: null,
   isDayBlocked: () => false,
   isOutsideRange: day => !isInclusivelyAfterDay(day, moment()),
   isDayHighlighted: () => false,
diff --git a/examples/PresetDateRangePicker.jsx b/examples/PresetDateRangePicker.jsx
index 31662f5cc5..f88e48b2ed 100644
--- a/examples/PresetDateRangePicker.jsx
+++ b/examples/PresetDateRangePicker.jsx
@@ -79,7 +79,7 @@ const defaultProps = {
   onClose() {},
 
   // day presentation and interaction related props
-  renderDay: null,
+  renderDayContents: null,
   minimumNights: 0,
   enableOutsideDays: false,
   isDayBlocked: () => false,
diff --git a/examples/SingleDatePickerWrapper.jsx b/examples/SingleDatePickerWrapper.jsx
index feb5d90c8e..328b12a0b6 100644
--- a/examples/SingleDatePickerWrapper.jsx
+++ b/examples/SingleDatePickerWrapper.jsx
@@ -63,7 +63,8 @@ const defaultProps = {
   onClose() {},
 
   // day presentation and interaction related props
-  renderDay: null,
+  renderCalendarDay: undefined,
+  renderDayContents: null,
   enableOutsideDays: false,
   isDayBlocked: () => false,
   isOutsideRange: day => !isInclusivelyAfterDay(day, moment()),
diff --git a/src/components/CalendarDay.jsx b/src/components/CalendarDay.jsx
index 85f1ccd927..7b2926b787 100644
--- a/src/components/CalendarDay.jsx
+++ b/src/components/CalendarDay.jsx
@@ -23,7 +23,7 @@ const propTypes = forbidExtraProps({
   onDayClick: PropTypes.func,
   onDayMouseEnter: PropTypes.func,
   onDayMouseLeave: PropTypes.func,
-  renderDay: PropTypes.func,
+  renderDayContents: PropTypes.func,
   ariaLabelFormat: PropTypes.string,
 
   // internationalization
@@ -40,7 +40,7 @@ const defaultProps = {
   onDayClick() {},
   onDayMouseEnter() {},
   onDayMouseLeave() {},
-  renderDay: null,
+  renderDayContents: null,
   ariaLabelFormat: 'dddd, LL',
 
   // internationalization
@@ -93,7 +93,7 @@ class CalendarDay extends React.Component {
       daySize,
       isOutsideDay,
       modifiers,
-      renderDay,
+      renderDayContents,
       tabIndex,
       styles,
       phrases: {
@@ -137,7 +137,9 @@ class CalendarDay extends React.Component {
     return (
       <td
         {...css(
-          styles.CalendarDay_container,
+          styles.CalendarDay,
+          useDefaultCursor && styles.CalendarDay__defaultCursor,
+          styles.CalendarDay__default,
           isOutsideDay && styles.CalendarDay__outside,
           modifiers.has('today') && styles.CalendarDay__today,
           modifiers.has('highlighted-calendar') && styles.CalendarDay__highlighted_calendar,
@@ -152,23 +154,17 @@ class CalendarDay extends React.Component {
           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-label={ariaLabel}
+        onMouseEnter={(e) => { this.onDayMouseEnter(day, e); }}
+        onMouseLeave={(e) => { this.onDayMouseLeave(day, e); }}
+        onMouseUp={(e) => { e.currentTarget.blur(); }}
+        onClick={(e) => { this.onDayClick(day, e); }}
+        onKeyDown={(e) => { this.onKeyDown(day, e); }}
+        tabIndex={tabIndex}
       >
-        <button
-          {...css(
-            styles.CalendarDay_button,
-            useDefaultCursor && styles.CalendarDay_button__default,
-          )}
-          type="button"
-          ref={this.setButtonRef}
-          aria-label={ariaLabel}
-          onMouseEnter={(e) => { this.onDayMouseEnter(day, e); }}
-          onMouseLeave={(e) => { this.onDayMouseLeave(day, e); }}
-          onMouseUp={(e) => { e.currentTarget.blur(); }}
-          onClick={(e) => { this.onDayClick(day, e); }}
-          tabIndex={tabIndex}
-        >
-          {renderDay ? renderDay(day, modifiers) : day.format('D')}
-        </button>
+        {renderDayContents ? renderDayContents(day, modifiers) : day.format('D')}
       </td>
     );
   }
@@ -179,47 +175,33 @@ CalendarDay.defaultProps = defaultProps;
 
 export { CalendarDay as PureCalendarDay };
 export default withStyles(({ reactDates: { color, font } }) => ({
-  CalendarDay_container: {
-    border: `1px solid ${color.core.borderLight}`,
-    padding: 0,
-    boxSizing: 'border-box',
-    color: color.text,
-    background: color.background,
-
-    ':hover': {
-      background: color.core.borderLight,
-      border: `1px double ${color.core.borderLight}`,
-      color: 'inherit',
-    },
-  },
-
-  CalendarDay_button: {
-    position: 'relative',
-    height: '100%',
-    width: '100%',
-    textAlign: 'center',
-    background: 'none',
-    border: 0,
-    margin: 0,
-    padding: 0,
-    color: 'inherit',
-    lineHeight: 'normal',
-    overflow: 'visible',
+  CalendarDay: {
     boxSizing: 'border-box',
     cursor: 'pointer',
-    fontFamily: 'inherit',
-    fontStyle: 'inherit',
     fontSize: font.size,
+    textAlign: 'center',
 
     ':active': {
       outline: 0,
     },
   },
 
-  CalendarDay_button__default: {
+  CalendarDay__defaultCursor: {
     cursor: 'default',
   },
 
+  CalendarDay__default: {
+    border: `1px solid ${color.core.borderLight}`,
+    color: color.text,
+    background: color.background,
+
+    ':hover': {
+      background: color.core.borderLight,
+      border: `1px double ${color.core.borderLight}`,
+      color: 'inherit',
+    },
+  },
+
   CalendarDay__outside: {
     border: 0,
 
diff --git a/src/components/CalendarMonth.jsx b/src/components/CalendarMonth.jsx
index 0ec3ab6e7c..dce3a944d9 100644
--- a/src/components/CalendarMonth.jsx
+++ b/src/components/CalendarMonth.jsx
@@ -11,6 +11,7 @@ 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';
@@ -40,7 +41,8 @@ const propTypes = forbidExtraProps({
   onDayMouseEnter: PropTypes.func,
   onDayMouseLeave: PropTypes.func,
   renderMonth: PropTypes.func,
-  renderDay: PropTypes.func,
+  renderCalendarDay: PropTypes.func,
+  renderDayContents: PropTypes.func,
   firstDayOfWeek: DayOfWeekShape,
   setMonthHeight: PropTypes.func,
 
@@ -64,7 +66,8 @@ const defaultProps = {
   onDayMouseEnter() {},
   onDayMouseLeave() {},
   renderMonth: null,
-  renderDay: null,
+  renderCalendarDay: props => (<CalendarDay {...props} />),
+  renderDayContents: null,
   firstDayOfWeek: null,
   setMonthHeight() {},
 
@@ -149,7 +152,8 @@ class CalendarMonth extends React.Component {
       onDayMouseEnter,
       onDayMouseLeave,
       renderMonth,
-      renderDay,
+      renderCalendarDay,
+      renderDayContents,
       daySize,
       focusedDate,
       isFocused,
@@ -189,25 +193,23 @@ class CalendarMonth extends React.Component {
         >
           <tbody ref={this.setGridRef}>
             {weeks.map((week, i) => (
-              <tr key={i}>
-                {week.map((day, dayOfWeek) => (
-                  <CalendarDay
-                    day={day}
-                    daySize={daySize}
-                    isOutsideDay={!day || day.month() !== month.month()}
-                    tabIndex={isVisible && isSameDay(day, focusedDate) ? 0 : -1}
-                    isFocused={isFocused}
-                    key={dayOfWeek}
-                    onDayMouseEnter={onDayMouseEnter}
-                    onDayMouseLeave={onDayMouseLeave}
-                    onDayClick={onDayClick}
-                    renderDay={renderDay}
-                    phrases={phrases}
-                    modifiers={modifiers[toISODateString(day)]}
-                    ariaLabelFormat={dayAriaLabelFormat}
-                  />
-                ))}
-              </tr>
+              <CalendarWeek key={i}>
+                {week.map((day, dayOfWeek) => renderCalendarDay({
+                  key: dayOfWeek,
+                  day,
+                  daySize,
+                  isOutsideDay: !day || day.month() !== month.month(),
+                  tabIndex: isVisible && isSameDay(day, focusedDate) ? 0 : -1,
+                  isFocused,
+                  onDayMouseEnter,
+                  onDayMouseLeave,
+                  onDayClick,
+                  renderDayContents,
+                  phrases,
+                  modifiers: modifiers[toISODateString(day)],
+                  ariaLabelFormat: dayAriaLabelFormat,
+                }))}
+              </CalendarWeek>
             ))}
           </tbody>
         </table>
diff --git a/src/components/CalendarMonthGrid.jsx b/src/components/CalendarMonthGrid.jsx
index 07796a6853..dfd5552abc 100644
--- a/src/components/CalendarMonthGrid.jsx
+++ b/src/components/CalendarMonthGrid.jsx
@@ -42,7 +42,8 @@ const propTypes = forbidExtraProps({
   onDayMouseLeave: PropTypes.func,
   onMonthTransitionEnd: PropTypes.func,
   renderMonth: PropTypes.func,
-  renderDay: PropTypes.func,
+  renderCalendarDay: PropTypes.func,
+  renderDayContents: PropTypes.func,
   transformValue: PropTypes.string,
   daySize: nonNegativeInteger,
   focusedDate: momentPropTypes.momentObj, // indicates focusable day
@@ -71,7 +72,8 @@ const defaultProps = {
   onDayMouseLeave() {},
   onMonthTransitionEnd() {},
   renderMonth: null,
-  renderDay: null,
+  renderCalendarDay: undefined,
+  renderDayContents: null,
   transformValue: 'none',
   daySize: DAY_SIZE,
   focusedDate: null,
@@ -231,7 +233,8 @@ class CalendarMonthGrid extends React.Component {
       onDayMouseLeave,
       onDayClick,
       renderMonth,
-      renderDay,
+      renderCalendarDay,
+      renderDayContents,
       onMonthTransitionEnd,
       firstDayOfWeek,
       focusedDate,
@@ -310,7 +313,8 @@ class CalendarMonthGrid extends React.Component {
                 onDayMouseLeave={onDayMouseLeave}
                 onDayClick={onDayClick}
                 renderMonth={renderMonth}
-                renderDay={renderDay}
+                renderCalendarDay={renderCalendarDay}
+                renderDayContents={renderDayContents}
                 firstDayOfWeek={firstDayOfWeek}
                 daySize={daySize}
                 focusedDate={isVisible ? focusedDate : null}
diff --git a/src/components/CalendarWeek.jsx b/src/components/CalendarWeek.jsx
new file mode 100644
index 0000000000..ef691ac45f
--- /dev/null
+++ b/src/components/CalendarWeek.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { forbidExtraProps, or, childrenOfType } from 'airbnb-prop-types';
+
+import CalendarDay from './CalendarDay';
+import CustomizableCalendarDay from './CustomizableCalendarDay';
+
+const propTypes = forbidExtraProps({
+  children: or([childrenOfType(CalendarDay), childrenOfType(CustomizableCalendarDay)]).isRequired,
+});
+
+export default function CalendarWeek({ children }) {
+  return (
+    <tr>
+      {children}
+    </tr>
+  );
+}
+
+CalendarWeek.propTypes = propTypes;
diff --git a/src/components/CustomizableCalendarDay.jsx b/src/components/CustomizableCalendarDay.jsx
new file mode 100644
index 0000000000..867347b66c
--- /dev/null
+++ b/src/components/CustomizableCalendarDay.jsx
@@ -0,0 +1,466 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import shallowCompare from 'react-addons-shallow-compare';
+import momentPropTypes from 'react-moment-proptypes';
+import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
+import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
+import moment from 'moment';
+
+import { CalendarDayPhrases } from '../defaultPhrases';
+import getPhrasePropTypes from '../utils/getPhrasePropTypes';
+import getPhrase from '../utils/getPhrase';
+
+import { BLOCKED_MODIFIER, DAY_SIZE } from '../constants';
+
+function getStyles(stylesObj, isHovered) {
+  if (!stylesObj) return null;
+
+  const { hover } = stylesObj;
+  if (isHovered && hover) {
+    return hover;
+  }
+
+  return stylesObj;
+}
+
+const DayStyleShape = PropTypes.shape({
+  background: PropTypes.string,
+  border: PropTypes.string,
+  color: PropTypes.string,
+
+  hover: PropTypes.shape({
+    background: PropTypes.string,
+    border: PropTypes.string,
+    color: PropTypes.string,
+  }),
+});
+
+const propTypes = forbidExtraProps({
+  ...withStylesPropTypes,
+  day: momentPropTypes.momentObj,
+  daySize: nonNegativeInteger,
+  isOutsideDay: PropTypes.bool,
+  modifiers: PropTypes.instanceOf(Set),
+  isFocused: PropTypes.bool,
+  tabIndex: PropTypes.oneOf([0, -1]),
+  onDayClick: PropTypes.func,
+  onDayMouseEnter: PropTypes.func,
+  onDayMouseLeave: PropTypes.func,
+  renderDayContents: PropTypes.func,
+  ariaLabelFormat: PropTypes.string,
+
+  // style overrides
+  defaultStyles: DayStyleShape,
+  outsideStyles: DayStyleShape,
+  todayStyles: DayStyleShape,
+  highlightedCalendarStyles: DayStyleShape,
+  blockedMinNightsStyles: DayStyleShape,
+  blockedCalendarStyles: DayStyleShape,
+  blockedOutOfRangeStyles: DayStyleShape,
+  hoveredSpanStyles: DayStyleShape,
+  selectedSpanStyles: DayStyleShape,
+  lastInRangeStyles: DayStyleShape,
+  selectedStartStyles: DayStyleShape,
+  selectedEndStyles: DayStyleShape,
+  selectedStyles: DayStyleShape,
+  afterHoveredStartStyles: DayStyleShape,
+
+  // internationalization
+  phrases: PropTypes.shape(getPhrasePropTypes(CalendarDayPhrases)),
+});
+
+const defaultProps = {
+  day: moment(),
+  daySize: DAY_SIZE,
+  isOutsideDay: false,
+  modifiers: new Set(),
+  isFocused: false,
+  tabIndex: -1,
+  onDayClick() {},
+  onDayMouseEnter() {},
+  onDayMouseLeave() {},
+  renderDayContents: null,
+  ariaLabelFormat: 'dddd, LL',
+
+  // internationalization
+  phrases: CalendarDayPhrases,
+};
+
+class CustomizableCalendarDay extends React.Component {
+  constructor(...args) {
+    super(...args);
+
+    this.state = {
+      isHovered: false,
+    };
+
+    this.setButtonRef = this.setButtonRef.bind(this);
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return shallowCompare(this, nextProps, nextState);
+  }
+
+  componentDidUpdate(prevProps) {
+    const { isFocused, tabIndex } = this.props;
+    if (tabIndex === 0) {
+      if (isFocused || tabIndex !== prevProps.tabIndex) {
+        this.buttonRef.focus();
+      }
+    }
+  }
+
+  onDayClick(day, e) {
+    const { onDayClick } = this.props;
+    onDayClick(day, e);
+  }
+
+  onDayMouseEnter(day, e) {
+    const { onDayMouseEnter } = this.props;
+    this.setState({ isHovered: true });
+    onDayMouseEnter(day, e);
+  }
+
+  onDayMouseLeave(day, e) {
+    const { onDayMouseLeave } = this.props;
+    this.setState({ isHovered: false });
+    onDayMouseLeave(day, e);
+  }
+
+  onKeyDown(day, e) {
+    const {
+      onDayClick,
+    } = this.props;
+
+    const { key } = e;
+    if (key === 'Enter' || key === ' ') {
+      onDayClick(day, e);
+    }
+  }
+
+  setButtonRef(ref) {
+    this.buttonRef = ref;
+  }
+
+  render() {
+    const {
+      day,
+      ariaLabelFormat,
+      daySize,
+      isOutsideDay,
+      modifiers,
+      tabIndex,
+      renderDayContents,
+      styles,
+      phrases: {
+        chooseAvailableDate,
+        dateIsUnavailable,
+      },
+
+      defaultStyles: defaultStylesWithHover,
+      outsideStyles: outsideStylesWithHover,
+      todayStyles: todayStylesWithHover,
+      highlightedCalendarStyles: highlightedCalendarStylesWithHover,
+      blockedMinNightsStyles: blockedMinNightsStylesWithHover,
+      blockedCalendarStyles: blockedCalendarStylesWithHover,
+      blockedOutOfRangeStyles: blockedOutOfRangeStylesWithHover,
+      hoveredSpanStyles: hoveredSpanStylesWithHover,
+      selectedSpanStyles: selectedSpanStylesWithHover,
+      lastInRangeStyles: lastInRangeStylesWithHover,
+      selectedStartStyles: selectedStartStylesWithHover,
+      selectedEndStyles: selectedEndStylesWithHover,
+      selectedStyles: selectedStylesWithHover,
+      afterHoveredStartStyles: afterHoveredStartStylesWithHover,
+    } = this.props;
+
+    const { isHovered } = this.state;
+
+    if (!day) return <td />;
+
+    const formattedDate = { date: day.format(ariaLabelFormat) };
+
+    const ariaLabel = modifiers.has(BLOCKED_MODIFIER)
+      ? getPhrase(dateIsUnavailable, formattedDate)
+      : getPhrase(chooseAvailableDate, formattedDate);
+
+    const daySizeStyles = {
+      width: daySize,
+      height: daySize - 1,
+    };
+
+    const useDefaultCursor = (
+      modifiers.has('blocked-minimum-nights')
+      || modifiers.has('blocked-calendar')
+      || modifiers.has('blocked-out-of-range')
+    );
+
+    const selected = (
+      modifiers.has('selected')
+      || modifiers.has('selected-start')
+      || modifiers.has('selected-end')
+    );
+
+    const hoveredSpan = !selected && (
+      modifiers.has('hovered-span')
+      || modifiers.has('after-hovered-start')
+    );
+
+    const isOutsideRange = modifiers.has('blocked-out-of-range');
+
+    const defaultStyles = getStyles(defaultStylesWithHover, isHovered);
+    const outsideStyles = getStyles(outsideStylesWithHover, isHovered);
+    const todayStyles = getStyles(todayStylesWithHover, isHovered);
+    const highlightedCalendarStyles = getStyles(highlightedCalendarStylesWithHover, isHovered);
+    const blockedMinNightsStyles = getStyles(blockedMinNightsStylesWithHover, isHovered);
+    const blockedCalendarStyles = getStyles(blockedCalendarStylesWithHover, isHovered);
+    const blockedOutOfRangeStyles = getStyles(blockedOutOfRangeStylesWithHover, isHovered);
+    const hoveredSpanStyles = getStyles(hoveredSpanStylesWithHover, isHovered);
+    const selectedSpanStyles = getStyles(selectedSpanStylesWithHover, isHovered);
+    const lastInRangeStyles = getStyles(lastInRangeStylesWithHover, isHovered);
+    const selectedStartStyles = getStyles(selectedStartStylesWithHover, isHovered);
+    const selectedEndStyles = getStyles(selectedEndStylesWithHover, isHovered);
+    const selectedStyles = getStyles(selectedStylesWithHover, isHovered);
+    const afterHoveredStartStyles = getStyles(afterHoveredStartStylesWithHover, isHovered);
+
+    const hasCustomSelectedStyles =
+      defaultStyles ||
+      (selected && selectedStyles) ||
+      (modifiers.has('selected-start') && selectedStartStyles) ||
+      (modifiers.has('selected-end') && selectedEndStyles);
+    const hasCustomHoveredStyles =
+      (modifiers.has('hovered-span') && hoveredSpanStyles) ||
+      (modifiers.has('after-hovered-start') && afterHoveredStartStyles);
+    const hasCustomStyles =
+      (isOutsideDay && outsideStyles) ||
+      (modifiers.has('today') && todayStyles) ||
+      (modifiers.has('highlighted-calendar') && highlightedCalendarStyles) ||
+      (modifiers.has('blocked-minimum-nights') && blockedMinNightsStyles) ||
+      (modifiers.has('blocked-calendar') && blockedCalendarStyles) ||
+      (modifiers.has('last-in-range') && lastInRangeStyles) ||
+      (modifiers.has('selected-span') && selectedSpanStyles) ||
+      (isOutsideRange && blockedOutOfRangeStyles) ||
+      hasCustomSelectedStyles ||
+      hasCustomHoveredStyles;
+
+    return (
+      <td
+        {...css(
+          styles.CalendarDay,
+          useDefaultCursor && styles.CalendarDay__defaultCursor,
+          daySizeStyles,
+          ...hasCustomStyles && [
+            defaultStyles,
+            isOutsideDay && outsideStyles,
+            modifiers.has('today') && todayStyles,
+            modifiers.has('highlighted-calendar') && highlightedCalendarStyles,
+            modifiers.has('blocked-minimum-nights') && blockedMinNightsStyles,
+            modifiers.has('blocked-calendar') && blockedCalendarStyles,
+            hoveredSpan && hoveredSpanStyles,
+            modifiers.has('after-hovered-start') && afterHoveredStartStyles,
+            modifiers.has('selected-span') && selectedSpanStyles,
+            modifiers.has('last-in-range') && lastInRangeStyles,
+            modifiers.has('selected-start') && selectedStartStyles,
+            modifiers.has('selected-end') && selectedEndStyles,
+            selected && selectedStyles,
+            isOutsideRange && blockedOutOfRangeStyles,
+          ],
+
+          ...!hasCustomStyles && [
+            styles.CalendarDay__default,
+            isOutsideDay && styles.CalendarDay__outside,
+            modifiers.has('today') && styles.CalendarDay__today,
+            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('selected-span') && styles.CalendarDay__selected_span,
+            modifiers.has('last-in-range') && styles.CalendarDay__last_in_range,
+            modifiers.has('selected-start') && styles.CalendarDay__selected_start,
+            modifiers.has('selected-end') && styles.CalendarDay__selected_end,
+            isOutsideRange && (blockedOutOfRangeStyles || styles.CalendarDay__blocked_out_of_range),
+          ],
+        )}
+        role="button" // eslint-disable-line jsx-a11y/no-noninteractive-element-to-interactive-role
+        ref={this.setButtonRef}
+        aria-label={ariaLabel}
+        onMouseEnter={(e) => { this.onDayMouseEnter(day, e); }}
+        onMouseLeave={(e) => { this.onDayMouseLeave(day, e); }}
+        onMouseUp={(e) => { e.currentTarget.blur(); }}
+        onClick={(e) => { this.onDayClick(day, e); }}
+        onKeyDown={(e) => { this.onKeyDown(day, e); }}
+        tabIndex={tabIndex}
+      >
+        {renderDayContents ? renderDayContents(day, modifiers) : day.format('D')}
+      </td>
+    );
+  }
+}
+
+CustomizableCalendarDay.propTypes = propTypes;
+CustomizableCalendarDay.defaultProps = defaultProps;
+
+export { CustomizableCalendarDay as PureCustomizableCalendarDay };
+export default withStyles(({ reactDates: { color, font } }) => ({
+  CalendarDay: {
+    boxSizing: 'border-box',
+    cursor: 'pointer',
+    fontSize: font.size,
+    textAlign: 'center',
+
+    ':active': {
+      outline: 0,
+    },
+  },
+
+  CalendarDay__defaultCursor: {
+    cursor: 'default',
+  },
+
+  CalendarDay__default: {
+    border: `1px solid ${color.core.borderLight}`,
+    color: color.text,
+    background: color.background,
+
+    ':hover': {
+      background: color.core.borderLight,
+      border: `1px double ${color.core.borderLight}`,
+      color: 'inherit',
+    },
+  },
+
+  CalendarDay__outside: {
+    border: 0,
+
+    background: color.outside.backgroundColor,
+    color: color.outside.color,
+  },
+
+  CalendarDay__blocked_minimum_nights: {
+    background: color.minimumNights.backgroundColor,
+    border: `1px solid ${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 solid ${color.selectedSpan.borderColor}`,
+    color: color.selectedSpan.color,
+
+    ':hover': {
+      background: color.selectedSpan.backgroundColor_hover,
+      border: `1px solid ${color.selectedSpan.borderColor}`,
+      color: color.selectedSpan.color_active,
+    },
+
+    ':active': {
+      background: color.selectedSpan.backgroundColor_active,
+      border: `1px solid ${color.selectedSpan.borderColor}`,
+      color: color.selectedSpan.color_active,
+    },
+  },
+
+  CalendarDay__last_in_range: {
+    borderRight: color.core.primary,
+  },
+
+  CalendarDay__selected: {
+    background: color.selected.backgroundColor,
+    border: `1px solid ${color.selected.borderColor}`,
+    color: color.selected.color,
+
+    ':hover': {
+      background: color.selected.backgroundColor_hover,
+      border: `1px solid ${color.selected.borderColor}`,
+      color: color.selected.color_active,
+    },
+
+    ':active': {
+      background: color.selected.backgroundColor_active,
+      border: `1px solid ${color.selected.borderColor}`,
+      color: color.selected.color_active,
+    },
+  },
+
+  CalendarDay__hovered_span: {
+    background: color.hoveredSpan.backgroundColor,
+    border: `1px solid ${color.hoveredSpan.borderColor}`,
+    color: color.hoveredSpan.color,
+
+    ':hover': {
+      background: color.hoveredSpan.backgroundColor_hover,
+      border: `1px solid ${color.hoveredSpan.borderColor}`,
+      color: color.hoveredSpan.color_active,
+    },
+
+    ':active': {
+      background: color.hoveredSpan.backgroundColor_active,
+      border: `1px solid ${color.hoveredSpan.borderColor}`,
+      color: color.hoveredSpan.color_active,
+    },
+  },
+
+  CalendarDay__blocked_calendar: {
+    background: color.blocked_calendar.backgroundColor,
+    border: `1px solid ${color.blocked_calendar.borderColor}`,
+    color: color.blocked_calendar.color,
+
+    ':hover': {
+      background: color.blocked_calendar.backgroundColor_hover,
+      border: `1px solid ${color.blocked_calendar.borderColor}`,
+      color: color.blocked_calendar.color_active,
+    },
+
+    ':active': {
+      background: color.blocked_calendar.backgroundColor_active,
+      border: `1px solid ${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 ${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 ${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 ${color.blocked_out_of_range.borderColor}`,
+      color: color.blocked_out_of_range.color_active,
+    },
+  },
+
+  CalendarDay__selected_start: {},
+  CalendarDay__selected_end: {},
+  CalendarDay__today: {},
+}))(CustomizableCalendarDay);
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index fc89cf6c99..0b4484de24 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -96,7 +96,8 @@ const defaultProps = {
   onClose() {},
 
   // day presentation and interaction related props
-  renderDay: null,
+  renderCalendarDay: undefined,
+  renderDayContents: null,
   minimumNights: 1,
   enableOutsideDays: false,
   isDayBlocked: () => false,
@@ -316,7 +317,8 @@ class DateRangePicker extends React.Component {
       endDate,
       minimumNights,
       keepOpenOnDateSelect,
-      renderDay,
+      renderCalendarDay,
+      renderDayContents,
       renderCalendarInfo,
       firstDayOfWeek,
       initialVisibleMonth,
@@ -395,7 +397,8 @@ class DateRangePicker extends React.Component {
           isDayHighlighted={isDayHighlighted}
           isDayBlocked={isDayBlocked}
           keepOpenOnDateSelect={keepOpenOnDateSelect}
-          renderDay={renderDay}
+          renderCalendarDay={renderCalendarDay}
+          renderDayContents={renderDayContents}
           renderCalendarInfo={renderCalendarInfo}
           isFocused={isDayPickerFocused}
           showKeyboardShortcuts={showKeyboardShortcuts}
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index ae9e946d8e..9b8414ec07 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -71,7 +71,8 @@ const propTypes = forbidExtraProps({
 
   // day props
   modifiers: PropTypes.object,
-  renderDay: PropTypes.func,
+  renderCalendarDay: PropTypes.func,
+  renderDayContents: PropTypes.func,
   onDayClick: PropTypes.func,
   onDayMouseEnter: PropTypes.func,
   onDayMouseLeave: PropTypes.func,
@@ -119,7 +120,8 @@ export const defaultProps = {
 
   // day props
   modifiers: {},
-  renderDay: null,
+  renderCalendarDay: undefined,
+  renderDayContents: null,
   onDayClick() {},
   onDayMouseEnter() {},
   onDayMouseLeave() {},
@@ -680,7 +682,8 @@ class DayPicker extends React.Component {
       onDayMouseLeave,
       firstDayOfWeek,
       renderMonth,
-      renderDay,
+      renderCalendarDay,
+      renderDayContents,
       renderCalendarInfo,
       hideKeyboardShortcutsPanel,
       onOutsideClick,
@@ -804,7 +807,8 @@ class DayPicker extends React.Component {
                 onDayMouseEnter={onDayMouseEnter}
                 onDayMouseLeave={onDayMouseLeave}
                 renderMonth={renderMonth}
-                renderDay={renderDay}
+                renderCalendarDay={renderCalendarDay}
+                renderDayContents={renderDayContents}
                 onMonthTransitionEnd={this.updateStateAfterMonthTransition}
                 monthFormat={monthFormat}
                 daySize={daySize}
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index e96675cb0c..0a03216a1c 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -67,7 +67,8 @@ const propTypes = forbidExtraProps({
   onPrevMonthClick: PropTypes.func,
   onNextMonthClick: PropTypes.func,
   onOutsideClick: PropTypes.func,
-  renderDay: PropTypes.func,
+  renderCalendarDay: PropTypes.func,
+  renderDayContents: PropTypes.func,
   renderCalendarInfo: PropTypes.func,
   firstDayOfWeek: DayOfWeekShape,
   verticalHeight: nonNegativeInteger,
@@ -119,7 +120,8 @@ const defaultProps = {
   onNextMonthClick() {},
   onOutsideClick() {},
 
-  renderDay: null,
+  renderCalendarDay: undefined,
+  renderDayContents: null,
   renderCalendarInfo: null,
   firstDayOfWeek: null,
   verticalHeight: null,
@@ -899,7 +901,8 @@ export default class DayPickerRangeController extends React.Component {
       hideKeyboardShortcutsPanel,
       daySize,
       focusedInput,
-      renderDay,
+      renderCalendarDay,
+      renderDayContents,
       renderCalendarInfo,
       onBlur,
       isFocused,
@@ -936,7 +939,8 @@ export default class DayPickerRangeController extends React.Component {
         onOutsideClick={onOutsideClick}
         navPrev={navPrev}
         navNext={navNext}
-        renderDay={renderDay}
+        renderCalendarDay={renderCalendarDay}
+        renderDayContents={renderDayContents}
         renderCalendarInfo={renderCalendarInfo}
         firstDayOfWeek={firstDayOfWeek}
         hideKeyboardShortcutsPanel={hideKeyboardShortcutsPanel}
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 08964a845e..0773f89f15 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -63,7 +63,8 @@ const propTypes = forbidExtraProps({
   onPrevMonthClick: PropTypes.func,
   onNextMonthClick: PropTypes.func,
   onOutsideClick: PropTypes.func,
-  renderDay: PropTypes.func,
+  renderCalendarDay: PropTypes.func,
+  renderDayContents: PropTypes.func,
   renderCalendarInfo: PropTypes.func,
 
   // accessibility
@@ -114,7 +115,8 @@ const defaultProps = {
   onNextMonthClick() {},
   onOutsideClick: null,
 
-  renderDay: null,
+  renderCalendarDay: undefined,
+  renderDayContents: null,
   renderCalendarInfo: null,
 
   // accessibility
@@ -583,7 +585,8 @@ export default class DayPickerSingleDateController extends React.Component {
       hideKeyboardShortcutsPanel,
       daySize,
       firstDayOfWeek,
-      renderDay,
+      renderCalendarDay,
+      renderDayContents,
       renderCalendarInfo,
       isFocused,
       isRTL,
@@ -620,7 +623,8 @@ export default class DayPickerSingleDateController extends React.Component {
         navPrev={navPrev}
         navNext={navNext}
         renderMonth={renderMonth}
-        renderDay={renderDay}
+        renderCalendarDay={renderCalendarDay}
+        renderDayContents={renderDayContents}
         renderCalendarInfo={renderCalendarInfo}
         isFocused={isFocused}
         getFirstFocusableDay={this.getFirstFocusableDay}
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index 8d4563aa10..58b79446b1 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -93,7 +93,8 @@ const defaultProps = {
   renderMonth: null,
 
   // day presentation and interaction related props
-  renderDay: null,
+  renderCalendarDay: undefined,
+  renderDayContents: null,
   enableOutsideDays: false,
   isDayBlocked: () => false,
   isOutsideRange: day => !isInclusivelyAfterDay(day, moment()),
@@ -351,7 +352,8 @@ class SingleDatePicker extends React.Component {
       keepOpenOnDateSelect,
       initialVisibleMonth,
       renderMonth,
-      renderDay,
+      renderCalendarDay,
+      renderDayContents,
       renderCalendarInfo,
       hideKeyboardShortcutsPanel,
       firstDayOfWeek,
@@ -420,7 +422,8 @@ class SingleDatePicker extends React.Component {
           onNextMonthClick={onNextMonthClick}
           onClose={onClose}
           renderMonth={renderMonth}
-          renderDay={renderDay}
+          renderCalendarDay={renderCalendarDay}
+          renderDayContents={renderDayContents}
           renderCalendarInfo={renderCalendarInfo}
           isFocused={isDayPickerFocused}
           showKeyboardShortcuts={showKeyboardShortcuts}
diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js
index 2259633096..d1f0d9b2a7 100644
--- a/src/shapes/DateRangePickerShape.js
+++ b/src/shapes/DateRangePickerShape.js
@@ -70,7 +70,8 @@ export default {
   onNextMonthClick: PropTypes.func,
 
   // day presentation and interaction related props
-  renderDay: PropTypes.func,
+  renderCalendarDay: PropTypes.func,
+  renderDayContents: PropTypes.func,
   minimumNights: PropTypes.number,
   enableOutsideDays: PropTypes.bool,
   isDayBlocked: PropTypes.func,
diff --git a/src/shapes/SingleDatePickerShape.js b/src/shapes/SingleDatePickerShape.js
index 3628b05308..b464549d76 100644
--- a/src/shapes/SingleDatePickerShape.js
+++ b/src/shapes/SingleDatePickerShape.js
@@ -65,7 +65,8 @@ export default {
   onClose: PropTypes.func,
 
   // day presentation and interaction related props
-  renderDay: PropTypes.func,
+  renderCalendarDay: PropTypes.func,
+  renderDayContents: PropTypes.func,
   enableOutsideDays: PropTypes.bool,
   isDayBlocked: PropTypes.func,
   isOutsideRange: PropTypes.func,
diff --git a/stories/DateRangePicker.js b/stories/DateRangePicker.js
index e7df729fd2..f24d00d5bf 100644
--- a/stories/DateRangePicker.js
+++ b/stories/DateRangePicker.js
@@ -87,7 +87,7 @@ storiesOf('DateRangePicker (DRP)', module)
     return (
       <DateRangePickerWrapper
         renderMonth={month => momentJalaali(month).format('jMMMM jYYYY')}
-        renderDay={day => momentJalaali(day).format('jD')}
+        renderDayContents={day => momentJalaali(day).format('jD')}
       />
     );
   })
diff --git a/stories/DateRangePicker_day.js b/stories/DateRangePicker_day.js
index 8ab87322b1..abf69d78b1 100644
--- a/stories/DateRangePicker_day.js
+++ b/stories/DateRangePicker_day.js
@@ -5,6 +5,8 @@ import { storiesOf } from '@storybook/react';
 import isSameDay from '../src/utils/isSameDay';
 import isInclusivelyAfterDay from '../src/utils/isInclusivelyAfterDay';
 
+import CustomizableCalendarDay from '../src/components/CustomizableCalendarDay';
+
 import DateRangePickerWrapper from '../examples/DateRangePickerWrapper';
 
 const datesList = [
@@ -18,6 +20,43 @@ const datesList = [
   moment().add(13, 'days'),
 ];
 
+const selectedStyles = {
+  background: '#590098',
+  border: '1px solid #590098',
+  color: '#fff',
+
+  hover: {
+    background: '#7A32AC',
+    border: '1px solid #7A32AC',
+    color: '#fff',
+  },
+};
+
+const hoveredStyles = {
+  background: '#cd99d0',
+  border: '1px solid #cd99d0',
+  color: '#fff',
+};
+
+const customDayStyles = {
+  selectedStartStyles: selectedStyles,
+  selectedEndStyles: selectedStyles,
+  hoveredSpanStyles: hoveredStyles,
+  afterHoveredStartStyles: hoveredStyles,
+
+  selectedSpanStyles: {
+    background: '#9b32a2',
+    border: '1px solid #9b32a2',
+    color: '#fff',
+
+    hover: {
+      background: '#83008b',
+      border: '1px solid #83008b',
+      color: '#fff',
+    },
+  },
+};
+
 storiesOf('DRP - Day Props', module)
   .addWithInfo('default', () => (
     <DateRangePickerWrapper autoFocus />
@@ -71,7 +110,13 @@ storiesOf('DRP - Day Props', module)
   ))
   .addWithInfo('with custom daily details', () => (
     <DateRangePickerWrapper
-      renderDay={day => day.format('ddd')}
+      renderDayContents={day => <td className="foo-bar">{day.format('ddd')}</td>}
+      autoFocus
+    />
+  ))
+  .addWithInfo('one-off custom styling', () => (
+    <DateRangePickerWrapper
+      renderCalendarDay={props => <CustomizableCalendarDay {...props} {...customDayStyles} />}
       autoFocus
     />
   ));
diff --git a/stories/DayPicker.js b/stories/DayPicker.js
index ab0d59c457..043c3952db 100644
--- a/stories/DayPicker.js
+++ b/stories/DayPicker.js
@@ -99,7 +99,7 @@ storiesOf('DayPicker', module)
   ))
   .addWithInfo('with custom details', () => (
     <DayPicker
-      renderDay={day => (day.day() % 6 === 5 ? '😻' : day.format('D'))}
+      renderDayContents={day => (day.day() % 6 === 5 ? '😻' : day.format('D'))}
     />
   ))
   .addWithInfo('vertical with fixed-width container', () => (
diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
index 74f06d860a..ca1c7fb446 100644
--- a/stories/DayPickerRangeController.js
+++ b/stories/DayPickerRangeController.js
@@ -223,7 +223,7 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      renderDay={day => day.format('ddd')}
+      renderDayContents={day => day.format('ddd')}
     />
   ))
   .addWithInfo('with info panel', () => (
diff --git a/stories/DayPickerSingleDateController.js b/stories/DayPickerSingleDateController.js
index acdca57dd0..20abf7463c 100644
--- a/stories/DayPickerSingleDateController.js
+++ b/stories/DayPickerSingleDateController.js
@@ -203,7 +203,7 @@ storiesOf('DayPickerSingleDateController', module)
       onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
-      renderDay={day => day.format('ddd')}
+      renderDayContents={day => day.format('ddd')}
     />
   ))
   .addWithInfo('with info panel', () => (
diff --git a/stories/SingleDatePicker.js b/stories/SingleDatePicker.js
index d5bc16f28e..621c8bfc18 100644
--- a/stories/SingleDatePicker.js
+++ b/stories/SingleDatePicker.js
@@ -55,7 +55,7 @@ storiesOf('SingleDatePicker (SDP)', module)
       <SingleDatePickerWrapper
         placeholder="تقویم فارسی"
         renderMonth={month => momentJalaali(month).format('jMMMM jYYYY')}
-        renderDay={day => momentJalaali(day).format('jD')}
+        renderDayContents={day => momentJalaali(day).format('jD')}
       />
     );
   })
diff --git a/stories/SingleDatePicker_day.js b/stories/SingleDatePicker_day.js
index beba330472..36689140de 100644
--- a/stories/SingleDatePicker_day.js
+++ b/stories/SingleDatePicker_day.js
@@ -58,7 +58,7 @@ storiesOf('SDP - Day Props', module)
   .addWithInfo('with custom daily details', () => (
     <SingleDatePickerWrapper
       numberOfMonths={1}
-      renderDay={day => day.format('ddd')}
+      renderDayContents={day => day.format('ddd')}
       autoFocus
     />
   ));
diff --git a/stories/withStyles.js b/stories/withStyles.js
index 17e05259c5..067cb27015 100644
--- a/stories/withStyles.js
+++ b/stories/withStyles.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { action, storiesOf } from '@storybook/react';
 
 import CalendarDay from '../src/components/CalendarDay';
+import CustomizableCalendarDay from '../src/components/CustomizableCalendarDay';
 import CalendarMonth from '../src/components/CalendarMonth';
 import CalendarMonthGrid from '../src/components/CalendarMonthGrid';
 import DayPickerNavigation from '../src/components/DayPickerNavigation';
@@ -13,23 +14,53 @@ import DateRangePickerInput from '../src/components/DateRangePickerInput';
 
 import { VERTICAL_ORIENTATION, VERTICAL_SCROLLABLE } from '../constants';
 
+const customStyles = {
+  background: '#5f4b8b',
+  border: '2px solid #5f4b8b',
+  color: '#fff',
+
+  hover: {
+    background: '#c3b5e3',
+    border: '2px solid #c3b5e3',
+    color: '#402b70',
+    fontWeight: 'bold',
+  },
+};
+
 storiesOf('withStyles', module)
   .addWithInfo('CalendarDay', () => (
     <table>
-      <tr>
-        <CalendarDay />
-        <CalendarDay isOutsideDay />
-        <CalendarDay modifiers={new Set(['highlighted-calendar'])} />
-        <CalendarDay modifiers={new Set(['blocked-minimum-nights'])} />
-        <CalendarDay modifiers={new Set(['selected-span'])} />
-        <CalendarDay modifiers={new Set(['selected'])} />
-        <CalendarDay modifiers={new Set(['selected-start'])} />
-        <CalendarDay modifiers={new Set(['selected-end'])} />
-        <CalendarDay modifiers={new Set(['hovered-span'])} />
-        <CalendarDay modifiers={new Set(['after-hovered-start'])} />
-        <CalendarDay modifiers={new Set(['blocked-calendar'])} />
-        <CalendarDay modifiers={new Set(['blocked-out-of-range'])} />
-      </tr>
+      <tbody>
+        <tr>
+          <CalendarDay />
+          <CalendarDay isOutsideDay />
+          <CalendarDay modifiers={new Set(['highlighted-calendar'])} />
+          <CalendarDay modifiers={new Set(['blocked-minimum-nights'])} />
+          <CalendarDay modifiers={new Set(['selected-span'])} />
+          <CalendarDay modifiers={new Set(['selected'])} />
+          <CalendarDay modifiers={new Set(['selected-start'])} />
+          <CalendarDay modifiers={new Set(['selected-end'])} />
+          <CalendarDay modifiers={new Set(['hovered-span'])} />
+          <CalendarDay modifiers={new Set(['after-hovered-start'])} />
+          <CalendarDay modifiers={new Set(['blocked-calendar'])} />
+          <CalendarDay modifiers={new Set(['blocked-out-of-range'])} />
+        </tr>
+
+        <tr>
+          <CustomizableCalendarDay defaultStyles={customStyles} />
+          <CustomizableCalendarDay isOutsideDay outsideStyles={customStyles} />
+          <CustomizableCalendarDay modifiers={new Set(['highlighted-calendar'])} highlightedCalendarStyles={customStyles} />
+          <CustomizableCalendarDay modifiers={new Set(['blocked-minimum-nights'])} blockedMinNightsStyles={customStyles} />
+          <CustomizableCalendarDay modifiers={new Set(['selected-span'])} selectedSpanStyles={customStyles} />
+          <CustomizableCalendarDay modifiers={new Set(['selected'])} selectedStyles={customStyles} />
+          <CustomizableCalendarDay modifiers={new Set(['selected-start'])} selectedStartStyles={customStyles} />
+          <CustomizableCalendarDay modifiers={new Set(['selected-end'])} selectedEndStyles={customStyles} />
+          <CustomizableCalendarDay modifiers={new Set(['hovered-span'])} hoveredSpanStyles={customStyles} />
+          <CustomizableCalendarDay modifiers={new Set(['after-hovered-start'])} afterHoveredStartStyles={customStyles} />
+          <CustomizableCalendarDay modifiers={new Set(['blocked-calendar'])} blockedCalendarStyles={customStyles} />
+          <CustomizableCalendarDay modifiers={new Set(['blocked-out-of-range'])} blockedOutOfRangeStyles={customStyles} />
+        </tr>
+      </tbody>
     </table>
   ))
   .addWithInfo('CalendarMonth', () => (
diff --git a/test/components/CalendarDay_spec.jsx b/test/components/CalendarDay_spec.jsx
index d9171c2198..3480e66117 100644
--- a/test/components/CalendarDay_spec.jsx
+++ b/test/components/CalendarDay_spec.jsx
@@ -24,81 +24,80 @@ describe('CalendarDay', () => {
     it('contains arbitrary content if renderDay is provided', () => {
       const dayName = moment().format('dddd');
       const renderDay = day => day.format('dddd');
-      const wrapper = shallow(<CalendarDay renderDay={renderDay} />).dive();
+      const wrapper = shallow(<CalendarDay renderDayContents={renderDay} />).dive();
       expect(wrapper.text()).to.equal(dayName);
     });
 
-    it('passes modifiers to renderDay', () => {
+    it('passes modifiers to renderDayContents', () => {
       const modifiers = new Set().add(BLOCKED_MODIFIER);
-      const renderDay = (day, mods) => `${day.format('dddd')}${mods.has(BLOCKED_MODIFIER) ? 'BLOCKED' : ''}`;
+      const renderDayContents = (day, mods) => `${day.format('dddd')}${mods.has(BLOCKED_MODIFIER) ? 'BLOCKED' : ''}`;
       const expected = `${moment().format('dddd')}BLOCKED`;
-      const wrapper = shallow(<CalendarDay renderDay={renderDay} modifiers={modifiers} />).dive();
+      const wrapper =
+        shallow(<CalendarDay renderDayContents={renderDayContents} modifiers={modifiers} />).dive();
       expect(wrapper.text()).to.equal(expected);
     });
 
-    describe('button', () => {
-      it('contains a button', () => {
-        const wrapper = shallow(<CalendarDay />).dive();
-        expect(wrapper.find('button')).to.have.lengthOf(1);
+    it('has button role', () => {
+      const wrapper = shallow(<CalendarDay />).dive();
+      expect(wrapper.props().role).to.equal('button');
+    });
+
+    it('has tabIndex equal to props.tabIndex', () => {
+      const tabIndex = -1;
+      const wrapper = shallow(<CalendarDay tabIndex={tabIndex} />).dive();
+      expect(wrapper.props().tabIndex).to.equal(tabIndex);
+    });
+
+    describe('aria-label', () => {
+      const phrases = {};
+      const day = moment('10/10/2017');
+      const expectedFormattedDay = { date: 'Tuesday, October 10, 2017' };
+
+      beforeEach(() => {
+        phrases.chooseAvailableDate = sinon.stub().returns('chooseAvailableDate text');
+        phrases.dateIsUnavailable = sinon.stub().returns('dateIsUnavailable text');
       });
 
-      it('has tabIndex equal to props.tabIndex', () => {
-        const tabIndex = -1;
-        const wrapper = shallow(<CalendarDay tabIndex={tabIndex} />).dive();
-        expect(wrapper.find('button').props().tabIndex).to.equal(tabIndex);
+      afterEach(() => {
+        sinon.restore();
       });
 
-      describe('aria-label', () => {
-        const phrases = {};
-        const day = moment('10/10/2017');
-        const expectedFormattedDay = { date: 'Tuesday, October 10, 2017' };
-
-        beforeEach(() => {
-          phrases.chooseAvailableDate = sinon.stub().returns('chooseAvailableDate text');
-          phrases.dateIsUnavailable = sinon.stub().returns('dateIsUnavailable text');
-        });
-
-        afterEach(() => {
-          sinon.restore();
-        });
-
-        it('is formatted with the chooseAvailableDate phrase function when day is available', () => {
-          const modifiers = new Set();
-
-          const wrapper = shallow(<CalendarDay
-            modifiers={modifiers}
-            phrases={phrases}
-            day={day}
-          />).dive();
-
-          expect(phrases.chooseAvailableDate.calledWith(expectedFormattedDay)).to.equal(true);
-          expect(wrapper.find('button').prop('aria-label')).to.equal('chooseAvailableDate text');
-        });
-
-        it('is formatted with the dateIsUnavailable phrase function when day is not available', () => {
-          const modifiers = new Set().add(BLOCKED_MODIFIER);
-
-          const wrapper = shallow(<CalendarDay
-            modifiers={modifiers}
-            phrases={phrases}
-            day={day}
-          />).dive();
-
-          expect(phrases.dateIsUnavailable.calledWith(expectedFormattedDay)).to.equal(true);
-          expect(wrapper.find('button').prop('aria-label')).to.equal('dateIsUnavailable text');
-        });
-
-        it('should set aria-label with a value pass through ariaLabelFormat prop if it exists', () => {
-          const modifiers = new Set();
-
-          const wrapper = shallow(<CalendarDay
-            modifiers={modifiers}
-            day={day}
-            ariaLabelFormat="MMMM Do YYYY"
-          />).dive();
-
-          expect(wrapper.find('button').prop('aria-label')).to.equal('October 10th 2017');
-        });
+      it('is formatted with the chooseAvailableDate phrase function when day is available', () => {
+        const modifiers = new Set();
+
+        const wrapper = shallow(<CalendarDay
+          modifiers={modifiers}
+          phrases={phrases}
+          day={day}
+        />).dive();
+
+        expect(phrases.chooseAvailableDate.calledWith(expectedFormattedDay)).to.equal(true);
+        expect(wrapper.prop('aria-label')).to.equal('chooseAvailableDate text');
+      });
+
+      it('is formatted with the dateIsUnavailable phrase function when day is not available', () => {
+        const modifiers = new Set().add(BLOCKED_MODIFIER);
+
+        const wrapper = shallow(<CalendarDay
+          modifiers={modifiers}
+          phrases={phrases}
+          day={day}
+        />).dive();
+
+        expect(phrases.dateIsUnavailable.calledWith(expectedFormattedDay)).to.equal(true);
+        expect(wrapper.prop('aria-label')).to.equal('dateIsUnavailable text');
+      });
+
+      it('should set aria-label with a value pass through ariaLabelFormat prop if it exists', () => {
+        const modifiers = new Set();
+
+        const wrapper = shallow(<CalendarDay
+          modifiers={modifiers}
+          day={day}
+          ariaLabelFormat="MMMM Do YYYY"
+        />).dive();
+
+        expect(wrapper.prop('aria-label')).to.equal('October 10th 2017');
       });
     });
   });
@@ -114,7 +113,7 @@ describe('CalendarDay', () => {
     });
 
     it('gets triggered by click', () => {
-      const wrapper = shallow(<CalendarDay />).dive().find('button');
+      const wrapper = shallow(<CalendarDay />).dive();
       wrapper.simulate('click');
       expect(onDayClickSpy).to.have.property('callCount', 1);
     });
@@ -138,7 +137,7 @@ describe('CalendarDay', () => {
     });
 
     it('gets triggered by mouseenter', () => {
-      const wrapper = shallow(<CalendarDay />).dive().find('button');
+      const wrapper = shallow(<CalendarDay />).dive();
       wrapper.simulate('mouseenter');
       expect(onDayMouseEnterSpy).to.have.property('callCount', 1);
     });
@@ -162,7 +161,7 @@ describe('CalendarDay', () => {
     });
 
     it('gets triggered by mouseleave', () => {
-      const wrapper = shallow(<CalendarDay />).dive().find('button');
+      const wrapper = shallow(<CalendarDay />).dive();
       wrapper.simulate('mouseleave');
       expect(onDayMouseLeaveSpy).to.have.property('callCount', 1);
     });
diff --git a/test/components/CalendarWeek_spec.jsx b/test/components/CalendarWeek_spec.jsx
new file mode 100644
index 0000000000..91117cbf6d
--- /dev/null
+++ b/test/components/CalendarWeek_spec.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { expect } from 'chai';
+import { shallow } from 'enzyme';
+
+import CalendarWeek from '../../src/components/CalendarWeek';
+
+import CalendarDay from '../../src/components/CalendarDay';
+
+describe('CalendarWeek', () => {
+  it('renders a tr', () => {
+    const wrapper = shallow((
+      <CalendarWeek>
+        <CalendarDay />
+      </CalendarWeek>
+    ));
+    expect(wrapper.is('tr')).to.equal(true);
+  });
+});
diff --git a/test/components/CustomizableCalendarDay_spec.jsx b/test/components/CustomizableCalendarDay_spec.jsx
new file mode 100644
index 0000000000..d3bb0cbf67
--- /dev/null
+++ b/test/components/CustomizableCalendarDay_spec.jsx
@@ -0,0 +1,196 @@
+import React from 'react';
+import { expect } from 'chai';
+import sinon from 'sinon-sandbox';
+import { shallow } from 'enzyme';
+import moment from 'moment';
+
+import { BLOCKED_MODIFIER } from '../../src/constants';
+import CustomizableCalendarDay, { PureCustomizableCalendarDay } from '../../src/components/CustomizableCalendarDay';
+
+describe('CustomizableCalendarDay', () => {
+  describe('#render', () => {
+    it('contains formatted day for single digit days', () => {
+      const firstOfMonth = moment().startOf('month');
+      const wrapper = shallow(<CustomizableCalendarDay day={firstOfMonth} />).dive();
+      expect(wrapper.text()).to.equal(firstOfMonth.format('D'));
+    });
+
+    it('contains formatted day for double digit days', () => {
+      const lastOfMonth = moment().endOf('month');
+      const wrapper = shallow(<CustomizableCalendarDay day={lastOfMonth} />).dive();
+      expect(wrapper.text()).to.equal(lastOfMonth.format('D'));
+    });
+
+    it('contains arbitrary content if renderDay is provided', () => {
+      const dayName = moment().format('dddd');
+      const renderDay = day => day.format('dddd');
+      const wrapper = shallow(<CustomizableCalendarDay renderDayContents={renderDay} />).dive();
+      expect(wrapper.text()).to.equal(dayName);
+    });
+
+    it('passes modifiers to renderDay', () => {
+      const modifiers = new Set().add(BLOCKED_MODIFIER);
+      const renderDay = (day, mods) => `${day.format('dddd')}${mods.has(BLOCKED_MODIFIER) ? 'BLOCKED' : ''}`;
+      const expected = `${moment().format('dddd')}BLOCKED`;
+      const wrapper = shallow(<CustomizableCalendarDay
+        renderDayContents={renderDay}
+        modifiers={modifiers}
+      />).dive();
+      expect(wrapper.text()).to.equal(expected);
+    });
+
+    it('has button role', () => {
+      const wrapper = shallow(<CustomizableCalendarDay />).dive();
+      expect(wrapper.props().role).to.equal('button');
+    });
+
+    it('has tabIndex equal to props.tabIndex', () => {
+      const tabIndex = -1;
+      const wrapper = shallow(<CustomizableCalendarDay tabIndex={tabIndex} />).dive();
+      expect(wrapper.props().tabIndex).to.equal(tabIndex);
+    });
+
+    describe('aria-label', () => {
+      const phrases = {};
+      const day = moment('10/10/2017');
+      const expectedFormattedDay = { date: 'Tuesday, October 10, 2017' };
+
+      beforeEach(() => {
+        phrases.chooseAvailableDate = sinon.stub().returns('chooseAvailableDate text');
+        phrases.dateIsUnavailable = sinon.stub().returns('dateIsUnavailable text');
+      });
+
+      afterEach(() => {
+        sinon.restore();
+      });
+
+      it('is formatted with the chooseAvailableDate phrase function when day is available', () => {
+        const modifiers = new Set();
+
+        const wrapper = shallow(<CustomizableCalendarDay
+          modifiers={modifiers}
+          phrases={phrases}
+          day={day}
+        />).dive();
+
+        expect(phrases.chooseAvailableDate.calledWith(expectedFormattedDay)).to.equal(true);
+        expect(wrapper.prop('aria-label')).to.equal('chooseAvailableDate text');
+      });
+
+      it('is formatted with the dateIsUnavailable phrase function when day is not available', () => {
+        const modifiers = new Set().add(BLOCKED_MODIFIER);
+
+        const wrapper = shallow(<CustomizableCalendarDay
+          modifiers={modifiers}
+          phrases={phrases}
+          day={day}
+        />).dive();
+
+        expect(phrases.dateIsUnavailable.calledWith(expectedFormattedDay)).to.equal(true);
+        expect(wrapper.prop('aria-label')).to.equal('dateIsUnavailable text');
+      });
+
+      it('should set aria-label with a value pass through ariaLabelFormat prop if it exists', () => {
+        const modifiers = new Set();
+
+        const wrapper = shallow(<CustomizableCalendarDay
+          modifiers={modifiers}
+          day={day}
+          ariaLabelFormat="MMMM Do YYYY"
+        />).dive();
+
+        expect(wrapper.prop('aria-label')).to.equal('October 10th 2017');
+      });
+    });
+  });
+
+  describe('#onDayClick', () => {
+    let onDayClickSpy;
+    beforeEach(() => {
+      onDayClickSpy = sinon.spy(PureCustomizableCalendarDay.prototype, 'onDayClick');
+    });
+
+    afterEach(() => {
+      sinon.restore();
+    });
+
+    it('gets triggered by click', () => {
+      const wrapper = shallow(<CustomizableCalendarDay />).dive();
+      wrapper.simulate('click');
+      expect(onDayClickSpy).to.have.property('callCount', 1);
+    });
+
+    it('calls props.onDayClick', () => {
+      const onDayClickStub = sinon.stub();
+      const wrapper = shallow(<CustomizableCalendarDay onDayClick={onDayClickStub} />).dive();
+      wrapper.instance().onDayClick();
+      expect(onDayClickStub).to.have.property('callCount', 1);
+    });
+  });
+
+  describe('#onDayMouseEnter', () => {
+    let onDayMouseEnterSpy;
+    beforeEach(() => {
+      onDayMouseEnterSpy = sinon.spy(PureCustomizableCalendarDay.prototype, 'onDayMouseEnter');
+    });
+
+    afterEach(() => {
+      sinon.restore();
+    });
+
+    it('gets triggered by mouseenter', () => {
+      const wrapper = shallow(<CustomizableCalendarDay />).dive();
+      wrapper.simulate('mouseenter');
+      expect(onDayMouseEnterSpy).to.have.property('callCount', 1);
+    });
+
+    it('sets state.isHovered to false', () => {
+      const wrapper = shallow(<CustomizableCalendarDay />).dive();
+      wrapper.setState({ isHovered: false });
+      wrapper.instance().onDayMouseEnter();
+      expect(wrapper.state().isHovered).to.equal(true);
+    });
+
+    it('calls props.onDayMouseEnter', () => {
+      const onMouseEnterStub = sinon.stub();
+      const wrapper = shallow(<CustomizableCalendarDay
+        onDayMouseEnter={onMouseEnterStub}
+      />).dive();
+      wrapper.instance().onDayMouseEnter();
+      expect(onMouseEnterStub).to.have.property('callCount', 1);
+    });
+  });
+
+  describe('#onDayMouseLeave', () => {
+    let onDayMouseLeaveSpy;
+    beforeEach(() => {
+      onDayMouseLeaveSpy = sinon.spy(PureCustomizableCalendarDay.prototype, 'onDayMouseLeave');
+    });
+
+    afterEach(() => {
+      sinon.restore();
+    });
+
+    it('gets triggered by mouseleave', () => {
+      const wrapper = shallow(<CustomizableCalendarDay />).dive();
+      wrapper.simulate('mouseleave');
+      expect(onDayMouseLeaveSpy).to.have.property('callCount', 1);
+    });
+
+    it('sets state.isHovered to false', () => {
+      const wrapper = shallow(<CustomizableCalendarDay />).dive();
+      wrapper.setState({ isHovered: true });
+      wrapper.instance().onDayMouseLeave();
+      expect(wrapper.state().isHovered).to.equal(false);
+    });
+
+    it('calls props.onDayMouseLeave', () => {
+      const onMouseLeaveStub = sinon.stub();
+      const wrapper = shallow(<CustomizableCalendarDay
+        onDayMouseLeave={onMouseLeaveStub}
+      />).dive();
+      wrapper.instance().onDayMouseLeave();
+      expect(onMouseLeaveStub).to.have.property('callCount', 1);
+    });
+  });
+});

From 94e18523fa8559fbf68d667b6f42697d8db3cdf4 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Mon, 11 Dec 2017 21:06:46 -0800
Subject: [PATCH 038/618] Version 16.0.0

---
 CHANGELOG.md | 5 +++++
 package.json | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1a78d56798..52be4cfa75 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Change Log
 
+## 16.0.0
+- [breaking] Simplify `CalendarDay` component ([#894](https://github.com/airbnb/react-dates/pull/894))
+- [breaking] rename `renderDay` prop to `renderDayContents` ([#894](https://github.com/airbnb/react-dates/pull/894))
+- [new] Add `renderCalendarDay` component to allow for easy one-off customization of `CalendarDay` ([#894](https://github.com/airbnb/react-dates/pull/894))
+
 ## 15.5.1
 - [fix] Adjust `small` variant height to be 36px ([#892](https://github.com/airbnb/react-dates/pull/892))
 
diff --git a/package.json b/package.json
index f0d2dd5722..56103c944b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "15.5.1",
+  "version": "16.0.0",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 4d3b312a5367c7711a78d9e9e4c43824fef08bbf Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Wed, 13 Dec 2017 10:32:26 -0800
Subject: [PATCH 039/618] Add missing onKeyDown function to CalendarDay

---
 src/components/CalendarDay.jsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/components/CalendarDay.jsx b/src/components/CalendarDay.jsx
index 7b2926b787..83cde243cf 100644
--- a/src/components/CalendarDay.jsx
+++ b/src/components/CalendarDay.jsx
@@ -82,6 +82,17 @@ class CalendarDay extends React.Component {
     onDayMouseLeave(day, e);
   }
 
+  onKeyDown(day, e) {
+    const {
+      onDayClick,
+    } = this.props;
+
+    const { key } = e;
+    if (key === 'Enter' || key === ' ') {
+      onDayClick(day, e);
+    }
+  }
+
   setButtonRef(ref) {
     this.buttonRef = ref;
   }

From e57d11939a270d50ed3aaacb8f711e63e5fa5476 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Wed, 13 Dec 2017 13:14:10 -0800
Subject: [PATCH 040/618] Version 16.0.1

---
 CHANGELOG.md | 3 +++
 package.json | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 52be4cfa75..bba77e2858 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # Change Log
 
+## 16.0.1
+- [fix] Add back missing onKeyDown method to `CalendarDay` ([#901](https://github.com/airbnb/react-dates/pull/901))
+
 ## 16.0.0
 - [breaking] Simplify `CalendarDay` component ([#894](https://github.com/airbnb/react-dates/pull/894))
 - [breaking] rename `renderDay` prop to `renderDayContents` ([#894](https://github.com/airbnb/react-dates/pull/894))
diff --git a/package.json b/package.json
index 56103c944b..32f70c7cbd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "16.0.0",
+  "version": "16.0.1",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 636f61929bbd08a87637f784b52249b9883d4641 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Fri, 15 Dec 2017 16:49:23 -0800
Subject: [PATCH 041/618] Revert "Merge pull request #866 from
 airbnb/maja-make-drp-ids-required"

This reverts commit 75a43415e30a2e25697b81470f3bbf8b486c19d0, reversing
changes made to f09d924115c0fa523afa52bf3263a43406ba69e0.

Turns out this was breaking.
---
 src/components/DateRangePicker.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index fc89cf6c99..39d1c4f467 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -49,7 +49,9 @@ const defaultProps = {
   focusedInput: null,
 
   // input related props
+  startDateId: START_DATE,
   startDatePlaceholderText: 'Start Date',
+  endDateId: END_DATE,
   endDatePlaceholderText: 'End Date',
   disabled: false,
   required: false,

From 065b6a3703367d43f912119db081b7b71dace2c4 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Fri, 15 Dec 2017 21:02:36 -0800
Subject: [PATCH 042/618] Version 15.5.2

---
 CHANGELOG.md | 3 +++
 package.json | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1a78d56798..5dd5924859 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # Change Log
 
+## 15.5.2
+- revert [#866](https://github.com/airbnb/react-dates/pull/866); it turned out to be semver-major
+
 ## 15.5.1
 - [fix] Adjust `small` variant height to be 36px ([#892](https://github.com/airbnb/react-dates/pull/892))
 
diff --git a/package.json b/package.json
index f0d2dd5722..fe45fa32ef 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "15.5.1",
+  "version": "15.5.2",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From f48b820449b2a460761ead4c056ccfac2322bb78 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Sat, 16 Dec 2017 21:45:51 -0800
Subject: [PATCH 043/618] Version 15.5.3

---
 package.json | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index fe45fa32ef..6e77550421 100644
--- a/package.json
+++ b/package.json
@@ -1,10 +1,11 @@
 {
   "name": "react-dates",
-  "version": "15.5.2",
+  "version": "15.5.3",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {
-    "build": "npm run clean && npm run build:cjs && npm run build:esm && npm run build:css -- --optimize ",
+    "prebuild": "npm run clean",
+    "build": "npm run build:cjs && npm run build:esm && npm run build:css -- --optimize ",
     "build:cjs": "BABEL_ENV=cjs babel src/ -d lib/",
     "build:esm": "BABEL_ENV=esm babel src/ -d esm/",
     "prebuild:css": "rimraf lib/css && mkdir -p lib/css",
@@ -119,8 +120,8 @@
     "react-addons-shallow-compare": "^15.5.2",
     "react-moment-proptypes": "^1.5.0",
     "react-portal": "^4.1.0",
-    "react-with-styles": "^2.2.0",
-    "react-with-styles-interface-css": "^3.0.0"
+    "react-with-styles-interface-css": "^3.0.0",
+    "react-with-styles": "=2.2.0"
   },
   "peerDependencies": {
     "moment": "^2.18.1",

From 78f62725b1601d220b2082b6b1a034c91ab5b24d Mon Sep 17 00:00:00 2001
From: Mike Lambert <github@jall.org>
Date: Wed, 23 Aug 2017 21:05:19 -0400
Subject: [PATCH 044/618] Fix React warning when Events are referenced later

Fixes https://github.com/airbnb/react-dates/issues/514 , which happens due to Events being stored to be delivered on the trailing edge of a keyDown. I believe we don't need the trailing edge, and it is better than a persisted Event.
---
 src/components/DateInput.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
index ee8a265d99..86e2c4e8b4 100644
--- a/src/components/DateInput.jsx
+++ b/src/components/DateInput.jsx
@@ -209,7 +209,7 @@ class DateInput extends React.Component {
           ref={this.setInputRef}
           value={value}
           onChange={this.onChange}
-          onKeyDown={throttle(this.onKeyDown, 300)}
+          onKeyDown={throttle(this.onKeyDown, 300, {trailing: false})}
           onFocus={onFocus}
           placeholder={placeholder}
           autoComplete="off"

From 7ada678eae91429cc12cdcff22ab98932dee3279 Mon Sep 17 00:00:00 2001
From: Mike Lambert <mlambert@gmail.com>
Date: Thu, 24 Aug 2017 02:28:32 -0400
Subject: [PATCH 045/618] Throttle at a deeper level, where we can filter out
 modifier-only key presses (ie, shift event on the way to a shift-tab event).
 Also turn off trailing edges, so that we don't need to hold onto events past
 their usefulness.

---
 src/components/DateInput.jsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
index 86e2c4e8b4..8decc89841 100644
--- a/src/components/DateInput.jsx
+++ b/src/components/DateInput.jsx
@@ -84,6 +84,7 @@ class DateInput extends React.Component {
     this.onChange = this.onChange.bind(this);
     this.onKeyDown = this.onKeyDown.bind(this);
     this.setInputRef = this.setInputRef.bind(this);
+    this.throttledKeyDown = throttle(this.onFinalKeyDown, 300, { trailing: false });
   }
 
   componentDidMount() {
@@ -126,15 +127,20 @@ class DateInput extends React.Component {
 
   onKeyDown(e) {
     e.stopPropagation();
+    if (!['Shift', 'Control', 'Alt', 'Meta'].includes(e.key)) {
+      this.throttledKeyDown(e);
+    }
+  }
 
+  onFinalKeyDown(e) {
     const {
       onKeyDownShiftTab,
       onKeyDownTab,
       onKeyDownArrowDown,
       onKeyDownQuestionMark,
     } = this.props;
-
     const { key } = e;
+
     if (key === 'Tab') {
       if (e.shiftKey) {
         onKeyDownShiftTab(e);
@@ -209,7 +215,7 @@ class DateInput extends React.Component {
           ref={this.setInputRef}
           value={value}
           onChange={this.onChange}
-          onKeyDown={throttle(this.onKeyDown, 300, {trailing: false})}
+          onKeyDown={this.onKeyDown}
           onFocus={onFocus}
           placeholder={placeholder}
           autoComplete="off"

From 45037c8c72976a73420cb62a7b330f9dddff1fcb Mon Sep 17 00:00:00 2001
From: Mike Lambert <mlambert@gmail.com>
Date: Wed, 20 Dec 2017 01:53:48 -0500
Subject: [PATCH 046/618] Extract out the constant data structure.

---
 src/components/DateInput.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
index 8decc89841..180344f3e7 100644
--- a/src/components/DateInput.jsx
+++ b/src/components/DateInput.jsx
@@ -20,6 +20,8 @@ const FANG_STROKE_TOP = `M0,${FANG_HEIGHT_PX} ${FANG_WIDTH_PX / 2},0 ${FANG_WIDT
 const FANG_PATH_BOTTOM = `M0,0 ${FANG_WIDTH_PX},0 ${FANG_WIDTH_PX / 2},${FANG_HEIGHT_PX}z`;
 const FANG_STROKE_BOTTOM = `M0,0 ${FANG_WIDTH_PX / 2},${FANG_HEIGHT_PX} ${FANG_WIDTH_PX},0`;
 
+const MODIFIER_NAMES = ['Shift', 'Control', 'Alt', 'Meta'];
+
 const propTypes = forbidExtraProps({
   ...withStylesPropTypes,
   id: PropTypes.string.isRequired,
@@ -127,7 +129,7 @@ class DateInput extends React.Component {
 
   onKeyDown(e) {
     e.stopPropagation();
-    if (!['Shift', 'Control', 'Alt', 'Meta'].includes(e.key)) {
+    if (!MODIFIER_NAMES.includes(e.key)) {
       this.throttledKeyDown(e);
     }
   }

From 2835d01dd8ab7aba6b17b3470f35ec1b0066feb5 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Fri, 29 Dec 2017 09:10:27 -0800
Subject: [PATCH 047/618] [Tests] include year in custom format string

---
 test/components/DateRangePickerInputController_spec.jsx | 4 ++--
 test/components/SingleDatePicker_spec.jsx               | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/test/components/DateRangePickerInputController_spec.jsx b/test/components/DateRangePickerInputController_spec.jsx
index 79fae574bb..5d9c495c6e 100644
--- a/test/components/DateRangePickerInputController_spec.jsx
+++ b/test/components/DateRangePickerInputController_spec.jsx
@@ -296,7 +296,7 @@ describe('DateRangePickerInputController', () => {
     });
 
     describe('matches custom display format', () => {
-      const customFormat = 'MM[foobar]DD';
+      const customFormat = 'YY|MM[foobar]DD';
       const customFormatDateString = moment(today).add(5, 'days').format(customFormat);
       it('calls props.onDatesChange with correct arguments', () => {
         const onDatesChangeStub = sinon.stub();
@@ -627,7 +627,7 @@ describe('DateRangePickerInputController', () => {
     });
 
     describe('matches custom display format', () => {
-      const customFormat = 'MM[foobar]DD';
+      const customFormat = 'YY|MM[foobar]DD';
       const customFormatDateString = moment(today).add(5, 'days').format(customFormat);
       it('calls props.onDatesChange with correct arguments', () => {
         const onDatesChangeStub = sinon.stub();
diff --git a/test/components/SingleDatePicker_spec.jsx b/test/components/SingleDatePicker_spec.jsx
index 4659234aad..cedd6f3eb5 100644
--- a/test/components/SingleDatePicker_spec.jsx
+++ b/test/components/SingleDatePicker_spec.jsx
@@ -229,7 +229,7 @@ describe('SingleDatePicker', () => {
     });
 
     describe('matches custom display format', () => {
-      const customFormat = 'MM[foobar]DD';
+      const customFormat = 'YY|MM[foobar]DD';
       const customFormatDateString = moment().add(5, 'days').format(customFormat);
       it('calls props.onDateChange once', () => {
         const onDateChangeStub = sinon.stub();

From 37a7c774b8b63188366e89dad50728478da1cad8 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Fri, 29 Dec 2017 23:13:36 -0800
Subject: [PATCH 048/618] [Tests] increase test coverage

---
 test/components/CalendarDay_spec.jsx          | 105 ++++++++++++++----
 .../CustomizableCalendarDay_spec.jsx          | 105 ++++++++++++++----
 2 files changed, 168 insertions(+), 42 deletions(-)

diff --git a/test/components/CalendarDay_spec.jsx b/test/components/CalendarDay_spec.jsx
index 3480e66117..61cd4aeaa1 100644
--- a/test/components/CalendarDay_spec.jsx
+++ b/test/components/CalendarDay_spec.jsx
@@ -8,6 +8,10 @@ import { BLOCKED_MODIFIER } from '../../src/constants';
 import CalendarDay, { PureCalendarDay } from '../../src/components/CalendarDay';
 
 describe('CalendarDay', () => {
+  afterEach(() => {
+    sinon.restore();
+  });
+
   describe('#render', () => {
     it('contains formatted day for single digit days', () => {
       const firstOfMonth = moment().startOf('month');
@@ -58,10 +62,6 @@ describe('CalendarDay', () => {
         phrases.dateIsUnavailable = sinon.stub().returns('dateIsUnavailable text');
       });
 
-      afterEach(() => {
-        sinon.restore();
-      });
-
       it('is formatted with the chooseAvailableDate phrase function when day is available', () => {
         const modifiers = new Set();
 
@@ -91,15 +91,90 @@ describe('CalendarDay', () => {
       it('should set aria-label with a value pass through ariaLabelFormat prop if it exists', () => {
         const modifiers = new Set();
 
-        const wrapper = shallow(<CalendarDay
-          modifiers={modifiers}
-          day={day}
-          ariaLabelFormat="MMMM Do YYYY"
-        />).dive();
+        const wrapper = shallow((
+          <CalendarDay
+            modifiers={modifiers}
+            day={day}
+            ariaLabelFormat="MMMM Do YYYY"
+          />
+        )).dive();
 
         expect(wrapper.prop('aria-label')).to.equal('October 10th 2017');
       });
     });
+
+    describe('event handlers', () => {
+      const day = moment('10/10/2017');
+
+      let wrapper;
+      beforeEach(() => {
+        wrapper = shallow((
+          <CalendarDay
+            day={day}
+            ariaLabelFormat="MMMM Do YYYY"
+          />
+        )).dive();
+      });
+
+      it('onMouseUp blurs the event target', () => {
+        const handler = wrapper.prop('onMouseUp');
+        const blur = sinon.spy();
+        handler({ currentTarget: { blur } });
+        expect(blur).to.have.property('callCount', 1);
+      });
+
+      it('onKeyDown calls this.onKeyDown', () => {
+        const spy = sinon.spy(wrapper.instance(), 'onKeyDown');
+        const handler = wrapper.prop('onKeyDown');
+        const event = {};
+        handler(event);
+        expect(spy).to.have.property('callCount', 1);
+        expect(spy.calledWith(day, event)).to.equal(true);
+      });
+    });
+
+    it('renders an empty <td> when no day is given', () => {
+      const wrapper = shallow(<CalendarDay day={null} />).dive();
+      expect(wrapper.is('td')).to.equal(true);
+      expect(wrapper.children()).to.have.lengthOf(0);
+      expect(wrapper.props()).to.eql({});
+    });
+  });
+
+  describe('#onKeyDown', () => {
+    const day = moment('10/10/2017');
+
+    let onDayClick;
+    let wrapper;
+    beforeEach(() => {
+      onDayClick = sinon.spy();
+      wrapper = shallow((
+        <CalendarDay
+          day={day}
+          onDayClick={onDayClick}
+        />
+      )).dive();
+    });
+
+    it('calls onDayClick with the enter key', () => {
+      const event = { key: 'Enter' };
+      wrapper.instance().onKeyDown(day, event);
+      expect(onDayClick).to.have.property('callCount', 1);
+      expect(onDayClick.calledWith(day, event)).to.equal(true);
+    });
+
+    it('calls onDayClick with the space key', () => {
+      const event = { key: ' ' };
+      wrapper.instance().onKeyDown(day, event);
+      expect(onDayClick).to.have.property('callCount', 1);
+      expect(onDayClick.calledWith(day, event)).to.equal(true);
+    });
+
+    it('does not call onDayClick otherwise', () => {
+      const event = { key: 'Shift' };
+      wrapper.instance().onKeyDown(day, event);
+      expect(onDayClick).to.have.property('callCount', 0);
+    });
   });
 
   describe('#onDayClick', () => {
@@ -108,10 +183,6 @@ describe('CalendarDay', () => {
       onDayClickSpy = sinon.spy(PureCalendarDay.prototype, 'onDayClick');
     });
 
-    afterEach(() => {
-      sinon.restore();
-    });
-
     it('gets triggered by click', () => {
       const wrapper = shallow(<CalendarDay />).dive();
       wrapper.simulate('click');
@@ -132,10 +203,6 @@ describe('CalendarDay', () => {
       onDayMouseEnterSpy = sinon.spy(PureCalendarDay.prototype, 'onDayMouseEnter');
     });
 
-    afterEach(() => {
-      sinon.restore();
-    });
-
     it('gets triggered by mouseenter', () => {
       const wrapper = shallow(<CalendarDay />).dive();
       wrapper.simulate('mouseenter');
@@ -156,10 +223,6 @@ describe('CalendarDay', () => {
       onDayMouseLeaveSpy = sinon.spy(PureCalendarDay.prototype, 'onDayMouseLeave');
     });
 
-    afterEach(() => {
-      sinon.restore();
-    });
-
     it('gets triggered by mouseleave', () => {
       const wrapper = shallow(<CalendarDay />).dive();
       wrapper.simulate('mouseleave');
diff --git a/test/components/CustomizableCalendarDay_spec.jsx b/test/components/CustomizableCalendarDay_spec.jsx
index d3bb0cbf67..499c6d0422 100644
--- a/test/components/CustomizableCalendarDay_spec.jsx
+++ b/test/components/CustomizableCalendarDay_spec.jsx
@@ -8,6 +8,10 @@ import { BLOCKED_MODIFIER } from '../../src/constants';
 import CustomizableCalendarDay, { PureCustomizableCalendarDay } from '../../src/components/CustomizableCalendarDay';
 
 describe('CustomizableCalendarDay', () => {
+  afterEach(() => {
+    sinon.restore();
+  });
+
   describe('#render', () => {
     it('contains formatted day for single digit days', () => {
       const firstOfMonth = moment().startOf('month');
@@ -60,10 +64,6 @@ describe('CustomizableCalendarDay', () => {
         phrases.dateIsUnavailable = sinon.stub().returns('dateIsUnavailable text');
       });
 
-      afterEach(() => {
-        sinon.restore();
-      });
-
       it('is formatted with the chooseAvailableDate phrase function when day is available', () => {
         const modifiers = new Set();
 
@@ -93,15 +93,90 @@ describe('CustomizableCalendarDay', () => {
       it('should set aria-label with a value pass through ariaLabelFormat prop if it exists', () => {
         const modifiers = new Set();
 
-        const wrapper = shallow(<CustomizableCalendarDay
-          modifiers={modifiers}
-          day={day}
-          ariaLabelFormat="MMMM Do YYYY"
-        />).dive();
+        const wrapper = shallow((
+          <CustomizableCalendarDay
+            modifiers={modifiers}
+            day={day}
+            ariaLabelFormat="MMMM Do YYYY"
+          />
+        )).dive();
 
         expect(wrapper.prop('aria-label')).to.equal('October 10th 2017');
       });
     });
+
+    describe('event handlers', () => {
+      const day = moment('10/10/2017');
+
+      let wrapper;
+      beforeEach(() => {
+        wrapper = shallow((
+          <CustomizableCalendarDay
+            day={day}
+            ariaLabelFormat="MMMM Do YYYY"
+          />
+        )).dive();
+      });
+
+      it('onMouseUp blurs the event target', () => {
+        const handler = wrapper.prop('onMouseUp');
+        const blur = sinon.spy();
+        handler({ currentTarget: { blur } });
+        expect(blur).to.have.property('callCount', 1);
+      });
+
+      it('onKeyDown calls this.onKeyDown', () => {
+        const spy = sinon.spy(wrapper.instance(), 'onKeyDown');
+        const handler = wrapper.prop('onKeyDown');
+        const event = {};
+        handler(event);
+        expect(spy).to.have.property('callCount', 1);
+        expect(spy.calledWith(day, event)).to.equal(true);
+      });
+    });
+
+    it('renders an empty <td> when no day is given', () => {
+      const wrapper = shallow(<CustomizableCalendarDay day={null} />).dive();
+      expect(wrapper.is('td')).to.equal(true);
+      expect(wrapper.children()).to.have.lengthOf(0);
+      expect(wrapper.props()).to.eql({});
+    });
+  });
+
+  describe('#onKeyDown', () => {
+    const day = moment('10/10/2017');
+
+    let onDayClick;
+    let wrapper;
+    beforeEach(() => {
+      onDayClick = sinon.spy();
+      wrapper = shallow((
+        <CustomizableCalendarDay
+          day={day}
+          onDayClick={onDayClick}
+        />
+      )).dive();
+    });
+
+    it('calls onDayClick with the enter key', () => {
+      const event = { key: 'Enter' };
+      wrapper.instance().onKeyDown(day, event);
+      expect(onDayClick).to.have.property('callCount', 1);
+      expect(onDayClick.calledWith(day, event)).to.equal(true);
+    });
+
+    it('calls onDayClick with the space key', () => {
+      const event = { key: ' ' };
+      wrapper.instance().onKeyDown(day, event);
+      expect(onDayClick).to.have.property('callCount', 1);
+      expect(onDayClick.calledWith(day, event)).to.equal(true);
+    });
+
+    it('does not call onDayClick otherwise', () => {
+      const event = { key: 'Shift' };
+      wrapper.instance().onKeyDown(day, event);
+      expect(onDayClick).to.have.property('callCount', 0);
+    });
   });
 
   describe('#onDayClick', () => {
@@ -110,10 +185,6 @@ describe('CustomizableCalendarDay', () => {
       onDayClickSpy = sinon.spy(PureCustomizableCalendarDay.prototype, 'onDayClick');
     });
 
-    afterEach(() => {
-      sinon.restore();
-    });
-
     it('gets triggered by click', () => {
       const wrapper = shallow(<CustomizableCalendarDay />).dive();
       wrapper.simulate('click');
@@ -134,10 +205,6 @@ describe('CustomizableCalendarDay', () => {
       onDayMouseEnterSpy = sinon.spy(PureCustomizableCalendarDay.prototype, 'onDayMouseEnter');
     });
 
-    afterEach(() => {
-      sinon.restore();
-    });
-
     it('gets triggered by mouseenter', () => {
       const wrapper = shallow(<CustomizableCalendarDay />).dive();
       wrapper.simulate('mouseenter');
@@ -167,10 +234,6 @@ describe('CustomizableCalendarDay', () => {
       onDayMouseLeaveSpy = sinon.spy(PureCustomizableCalendarDay.prototype, 'onDayMouseLeave');
     });
 
-    afterEach(() => {
-      sinon.restore();
-    });
-
     it('gets triggered by mouseleave', () => {
       const wrapper = shallow(<CustomizableCalendarDay />).dive();
       wrapper.simulate('mouseleave');

From 9feb7c70116f150e311a3e4515c130e0a00caf41 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Fri, 29 Dec 2017 23:22:16 -0800
Subject: [PATCH 049/618] [Tests] falsey -> falsy

---
 CHANGELOG.md                                       |  2 +-
 test/components/CalendarMonth_spec.jsx             |  2 +-
 test/components/DateInput_spec.jsx                 |  4 ++--
 test/components/DateRangePicker_spec.jsx           |  2 +-
 test/components/DayPickerRangeController_spec.jsx  | 12 ++++++------
 .../DayPickerSingleDateController_spec.jsx         |  2 +-
 test/components/DayPicker_spec.jsx                 | 14 +++++++-------
 test/components/SingleDatePickerInput_spec.jsx     |  4 ++--
 test/components/SingleDatePicker_spec.jsx          |  4 ++--
 test/utils/getInputHeight_spec.js                  |  2 +-
 test/utils/getPhrase_spec.jsx                      |  2 +-
 11 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d99e98c9a0..9fdebf024e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -148,7 +148,7 @@
 ## v11.1.0
 - [fix] Patch issues with vertical scrollable datepickers, after-hovered-start and month transitions ([#503](https://github.com/airbnb/react-dates/pull/503))
 - [new] Adds a `readOnly` prop on the DRP and SDP ([#501](https://github.com/airbnb/react-dates/pull/501))
-- [fix] Disable hover when `focusedInput` is falsey ([#483](https://github.com/airbnb/react-dates/pull/483))
+- [fix] Disable hover when `focusedInput` is falsy ([#483](https://github.com/airbnb/react-dates/pull/483))
 
 ## v11.0.1
 - [fix] Fixes small modifier issues in the DRP after rearchitecture ([#489](https://github.com/airbnb/react-dates/pull/489))
diff --git a/test/components/CalendarMonth_spec.jsx b/test/components/CalendarMonth_spec.jsx
index 6aa8bdf47c..777aa73e2d 100644
--- a/test/components/CalendarMonth_spec.jsx
+++ b/test/components/CalendarMonth_spec.jsx
@@ -13,7 +13,7 @@ describe('CalendarMonth', () => {
         expect(wrapper.prop('data-visible')).to.equal(true);
       });
 
-      it('data-visible attribute is falsey if !props.isVisible', () => {
+      it('data-visible attribute is falsy if !props.isVisible', () => {
         const wrapper = shallow(<CalendarMonth isVisible={false} />).dive();
         expect(wrapper.prop('data-visible')).to.equal(false);
       });
diff --git a/test/components/DateInput_spec.jsx b/test/components/DateInput_spec.jsx
index 059d844c20..90102761d8 100644
--- a/test/components/DateInput_spec.jsx
+++ b/test/components/DateInput_spec.jsx
@@ -38,7 +38,7 @@ describe('DateInput', () => {
         });
       });
 
-      describe('props.readOnly is falsey', () => {
+      describe('props.readOnly is falsy', () => {
         it('does not set readOnly', () => {
           const wrapper = shallow(<DateInput id="date" readOnly={false} />).dive();
           expect(!!wrapper.find('input').prop('readOnly')).to.equal(false);
@@ -73,7 +73,7 @@ describe('DateInput', () => {
         });
       });
 
-      describe('props.screenReaderMessage is falsey', () => {
+      describe('props.screenReaderMessage is falsy', () => {
         beforeEach(() => {
           wrapper = shallow(<DateInput id={inputId} />).dive();
         });
diff --git a/test/components/DateRangePicker_spec.jsx b/test/components/DateRangePicker_spec.jsx
index fcf7a77fa1..382aabc032 100644
--- a/test/components/DateRangePicker_spec.jsx
+++ b/test/components/DateRangePicker_spec.jsx
@@ -374,7 +374,7 @@ describe('DateRangePicker', () => {
       });
     });
 
-    describe('focusedInput is falsey', () => {
+    describe('focusedInput is falsy', () => {
       it('calls onFocusChange', () => {
         const onFocusChangeStub = sinon.stub();
         const wrapper = shallow((
diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index b96956ebc2..eaadb03fcf 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -597,7 +597,7 @@ describe('DayPickerRangeController', () => {
           });
         });
 
-        describe('new start date is falsey', () => {
+        describe('new start date is falsy', () => {
           it('does not call addModifierToRange with `after-hovered-start`', () => {
             const startDate = moment();
             const addModifierToRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifierToRange');
@@ -2020,7 +2020,7 @@ describe('DayPickerRangeController', () => {
         expect(firstFocusableDay.isSame(today, 'day')).to.equal(true);
       });
 
-      it('returns first day of arg month if startDate is falsey', () => {
+      it('returns first day of arg month if startDate is falsy', () => {
         sinon.stub(DayPickerRangeController.prototype, 'isBlocked').returns(false);
         const wrapper = shallow((
           <DayPickerRangeController
@@ -2037,7 +2037,7 @@ describe('DayPickerRangeController', () => {
     });
 
     describe('focusedInput === END_DATE', () => {
-      it('returns endDate if exists and is not blocked and startDate is falsey', () => {
+      it('returns endDate if exists and is not blocked and startDate is falsy', () => {
         sinon.stub(DayPickerRangeController.prototype, 'isBlocked').returns(false);
         const endDate = moment().add(10, 'days');
         const wrapper = shallow((
@@ -2070,7 +2070,7 @@ describe('DayPickerRangeController', () => {
         expect(firstFocusableDay.isSame(startDate.clone().add(minimumNights, 'days'), 'day')).to.equal(true);
       });
 
-      it('returns first day of arg month if startDate and endDate are falsey', () => {
+      it('returns first day of arg month if startDate and endDate are falsy', () => {
         sinon.stub(DayPickerRangeController.prototype, 'isBlocked').returns(false);
         const wrapper = shallow((
           <DayPickerRangeController
@@ -2711,7 +2711,7 @@ describe('DayPickerRangeController', () => {
         expect(wrapper.instance().isDayAfterHoveredStartDate(testDate)).to.equal(true);
       });
 
-      it('returns false if props.startDate is falsey', () => {
+      it('returns false if props.startDate is falsy', () => {
         const testDate = moment(today).add(1, 'days');
         const wrapper = shallow(<DayPickerRangeController startDate={null} />);
         wrapper.setState({
@@ -2775,7 +2775,7 @@ describe('DayPickerRangeController', () => {
     });
 
     describe('#isHovered', () => {
-      it('returns false if focusedInput is falsey', () => {
+      it('returns false if focusedInput is falsy', () => {
         const wrapper = shallow(<DayPickerRangeController focusedInput={null} />);
         wrapper.setState({
           hoverDate: today,
diff --git a/test/components/DayPickerSingleDateController_spec.jsx b/test/components/DayPickerSingleDateController_spec.jsx
index 053ba19771..bd25ae87d6 100644
--- a/test/components/DayPickerSingleDateController_spec.jsx
+++ b/test/components/DayPickerSingleDateController_spec.jsx
@@ -844,7 +844,7 @@ describe('DayPickerSingleDateController', () => {
   });
 
   describe('#getFirstFocusableDay', () => {
-    it('returns first day of arg month if not blocked and props.date is falsey', () => {
+    it('returns first day of arg month if not blocked and props.date is falsy', () => {
       sinon.stub(DayPickerSingleDateController.prototype, 'isBlocked').returns(false);
       const wrapper = shallow((
         <DayPickerSingleDateController
diff --git a/test/components/DayPicker_spec.jsx b/test/components/DayPicker_spec.jsx
index 0402562477..38bbb5cfb4 100644
--- a/test/components/DayPicker_spec.jsx
+++ b/test/components/DayPicker_spec.jsx
@@ -80,7 +80,7 @@ describe('DayPicker', () => {
           expect(CalendarMonthGridComponent.prop('isAnimating')).to.equal(true);
         });
 
-        it('is false if state.monthTransition is falsey', () => {
+        it('is false if state.monthTransition is falsy', () => {
           const wrapper = shallow(<DayPicker />).dive();
           wrapper.setState({ monthTransition: null });
           const CalendarMonthGridComponent = wrapper.find(CalendarMonthGrid);
@@ -400,7 +400,7 @@ describe('DayPicker', () => {
       });
     });
 
-    describe('focusedDate is falsey', () => {
+    describe('focusedDate is falsy', () => {
       it('does not call maybeTransitionPrevMonth', () => {
         const maybeTransitionPrevMonthSpy = sinon.spy(PureDayPicker.prototype, 'maybeTransitionPrevMonth');
         const wrapper = shallow(<DayPicker />).dive();
@@ -496,7 +496,7 @@ describe('DayPicker', () => {
       });
     });
 
-    describe('props.getFirstFocusableDay is falsey', () => {
+    describe('props.getFirstFocusableDay is falsy', () => {
       it('returns undefined if no arg', () => {
         const wrapper = shallow(<DayPicker />).dive();
         expect(wrapper.instance().getFocusedDay()).to.equal(undefined);
@@ -741,7 +741,7 @@ describe('DayPicker', () => {
           expect(adjustDayPickerHeightSpy).to.have.property('callCount', 2);
         });
 
-        it('does not call adjustDayPickerHeight if state.monthTransition is falsey', () => {
+        it('does not call adjustDayPickerHeight if state.monthTransition is falsy', () => {
           const wrapper = mount(<DayPicker orientation={HORIZONTAL_ORIENTATION} />);
           wrapper.setState({
             monthTransition: null,
@@ -757,7 +757,7 @@ describe('DayPicker', () => {
           expect(updateStateAfterMonthTransitionSpy).to.have.property('callCount', 1);
         });
 
-        it('does not call updateStateAfterMonthTransition if state.monthTransition is falsey', () => {
+        it('does not call updateStateAfterMonthTransition if state.monthTransition is falsy', () => {
           const wrapper = mount(<DayPicker orientation={HORIZONTAL_ORIENTATION} />);
           wrapper.setState({
             monthTransition: null,
@@ -775,7 +775,7 @@ describe('DayPicker', () => {
           expect(adjustDayPickerHeightSpy.called).to.equal(false);
         });
 
-        it('does not call adjustDayPickerHeight if state.monthTransition is falsey', () => {
+        it('does not call adjustDayPickerHeight if state.monthTransition is falsy', () => {
           const wrapper = mount(<DayPicker orientation={VERTICAL_ORIENTATION} />);
           wrapper.setState({
             monthTransition: null,
@@ -791,7 +791,7 @@ describe('DayPicker', () => {
           expect(updateStateAfterMonthTransitionSpy).to.have.property('callCount', 1);
         });
 
-        it('does not call updateStateAfterMonthTransition if state.monthTransition is falsey', () => {
+        it('does not call updateStateAfterMonthTransition if state.monthTransition is falsy', () => {
           const wrapper = mount(<DayPicker orientation={VERTICAL_ORIENTATION} />);
           wrapper.setState({
             monthTransition: null,
diff --git a/test/components/SingleDatePickerInput_spec.jsx b/test/components/SingleDatePickerInput_spec.jsx
index 054b60a658..cd82e7ba6f 100644
--- a/test/components/SingleDatePickerInput_spec.jsx
+++ b/test/components/SingleDatePickerInput_spec.jsx
@@ -7,7 +7,7 @@ import SingleDatePickerInput from '../../src/components/SingleDatePickerInput';
 
 describe('SingleDatePickerInput', () => {
   describe('clear date', () => {
-    describe('props.showClearDate is falsey', () => {
+    describe('props.showClearDate is falsy', () => {
       it('does not render a clear date button', () => {
         const wrapper = shallow(<SingleDatePickerInput id="date" showClearDate={false} />).dive();
         expect(wrapper.find('button')).to.have.lengthOf(0);
@@ -36,7 +36,7 @@ describe('SingleDatePickerInput', () => {
   });
 
   describe('show calendar icon', () => {
-    describe('props.showInputIcon is falsey', () => {
+    describe('props.showInputIcon is falsy', () => {
       it('does not have a calendar button', () => {
         const wrapper = shallow((
           <SingleDatePickerInput id="date" showDefaultInputIcon={false} />
diff --git a/test/components/SingleDatePicker_spec.jsx b/test/components/SingleDatePicker_spec.jsx
index cedd6f3eb5..59ba1311e2 100644
--- a/test/components/SingleDatePicker_spec.jsx
+++ b/test/components/SingleDatePicker_spec.jsx
@@ -105,7 +105,7 @@ describe('SingleDatePicker', () => {
           expect(wrapper.find(Portal)).to.have.length(1);
         });
 
-        it('is not rendered if props.focused is falsey', () => {
+        it('is not rendered if props.focused is falsy', () => {
           const wrapper = shallow((
             <SingleDatePicker
               onDateChange={() => {}}
@@ -144,7 +144,7 @@ describe('SingleDatePicker', () => {
           expect(wrapper.find(Portal)).to.have.length(1);
         });
 
-        it('is not rendered when props.focused is falsey', () => {
+        it('is not rendered when props.focused is falsy', () => {
           const wrapper = shallow((
             <SingleDatePicker
               onDateChange={() => {}}
diff --git a/test/utils/getInputHeight_spec.js b/test/utils/getInputHeight_spec.js
index c5155669d0..d7d9adee93 100644
--- a/test/utils/getInputHeight_spec.js
+++ b/test/utils/getInputHeight_spec.js
@@ -20,7 +20,7 @@ const theme = {
 };
 
 describe('#getInputHeight', () => {
-  it('returns the expected value with falsey second arg', () => {
+  it('returns the expected value with falsy second arg', () => {
     const inputHeight = getInputHeight(theme);
     expect(inputHeight).to.equal(55);
   });
diff --git a/test/utils/getPhrase_spec.jsx b/test/utils/getPhrase_spec.jsx
index 7c06af346f..b204065324 100644
--- a/test/utils/getPhrase_spec.jsx
+++ b/test/utils/getPhrase_spec.jsx
@@ -3,7 +3,7 @@ import sinon from 'sinon-sandbox';
 import getPhrase from '../../src/utils/getPhrase';
 
 describe('getPhrase', () => {
-  it('returns empty string when arg is falsey', () => {
+  it('returns empty string when arg is falsy', () => {
     expect(getPhrase()).to.equal('');
   });
 

From 85d5f3d8698473d5bd5fdf999404e8e2098bdca4 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Fri, 29 Dec 2017 23:26:37 -0800
Subject: [PATCH 050/618] [Refactor] destructure this.props more; ensure no
 `this.props` as the receiver

---
 src/components/CalendarMonthGrid.jsx              |  3 ++-
 src/components/DateRangePickerInputController.jsx |  5 +++--
 src/components/DayPicker.jsx                      | 12 +++++++-----
 src/components/DayPickerRangeController.jsx       | 14 +++++++++++---
 4 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/components/CalendarMonthGrid.jsx b/src/components/CalendarMonthGrid.jsx
index dfd5552abc..d94e87b33a 100644
--- a/src/components/CalendarMonthGrid.jsx
+++ b/src/components/CalendarMonthGrid.jsx
@@ -199,7 +199,8 @@ class CalendarMonthGrid extends React.Component {
   }
 
   onTransitionEnd() {
-    this.props.onMonthTransitionEnd();
+    const { onMonthTransitionEnd } = this.props;
+    onMonthTransitionEnd();
   }
 
   setContainerRef(ref) {
diff --git a/src/components/DateRangePickerInputController.jsx b/src/components/DateRangePickerInputController.jsx
index aa5843214d..94e384b9ff 100644
--- a/src/components/DateRangePickerInputController.jsx
+++ b/src/components/DateRangePickerInputController.jsx
@@ -216,8 +216,9 @@ export default class DateRangePickerInputController extends React.Component {
   }
 
   onStartDateFocus() {
-    if (!this.props.disabled) {
-      this.props.onFocusChange(START_DATE);
+    const { disabled, onFocusChange } = this.props;
+    if (!disabled) {
+      onFocusChange(START_DATE);
     }
   }
 
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 9b8414ec07..a06e109457 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -488,18 +488,20 @@ class DayPicker extends React.Component {
   }
 
   isHorizontal() {
-    return this.props.orientation === HORIZONTAL_ORIENTATION;
+    const { orientation } = this.props;
+    return orientation === HORIZONTAL_ORIENTATION;
   }
 
   isVertical() {
-    return this.props.orientation === VERTICAL_ORIENTATION ||
-      this.props.orientation === VERTICAL_SCROLLABLE;
+    const { orientation } = this.props;
+    return orientation === VERTICAL_ORIENTATION || orientation === VERTICAL_SCROLLABLE;
   }
 
   updateStateAfterMonthTransition() {
     const {
       onPrevMonthClick,
       onNextMonthClick,
+      isRTL,
     } = this.props;
 
     const {
@@ -532,7 +534,7 @@ class DayPicker extends React.Component {
     this.setState({
       currentMonth: newMonth,
       monthTransition: null,
-      translationValue: (this.props.isRTL && this.isHorizontal()) ? -calendarMonthWidth : 0,
+      translationValue: (isRTL && this.isHorizontal()) ? -calendarMonthWidth : 0,
       nextFocusedDate: null,
       focusedDate: newFocusedDate,
     }, () => {
@@ -705,7 +707,7 @@ class DayPicker extends React.Component {
       weekHeaders.push(this.renderWeekHeader(i));
     }
 
-    const verticalScrollable = this.props.orientation === VERTICAL_SCROLLABLE;
+    const verticalScrollable = orientation === VERTICAL_SCROLLABLE;
     const firstVisibleMonthIndex = this.getFirstVisibleIndex();
     const horizontalWidth = (calendarMonthWidth * numberOfMonths) + (2 * DAY_PICKER_PADDING);
 
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 0a03216a1c..6204ac7e11 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -415,11 +415,19 @@ export default class DayPickerRangeController extends React.Component {
   }
 
   onDayClick(day, e) {
-    const { keepOpenOnDateSelect, minimumNights, onBlur } = this.props;
+    const {
+      keepOpenOnDateSelect,
+      minimumNights,
+      onBlur,
+      focusedInput,
+      onFocusChange,
+      onClose,
+      onDatesChange,
+    } = this.props;
+
     if (e) e.preventDefault();
     if (this.isBlocked(day)) return;
 
-    const { focusedInput, onFocusChange, onClose } = this.props;
     let { startDate, endDate } = this.props;
 
     if (focusedInput === START_DATE) {
@@ -448,7 +456,7 @@ export default class DayPickerRangeController extends React.Component {
       }
     }
 
-    this.props.onDatesChange({ startDate, endDate });
+    onDatesChange({ startDate, endDate });
     onBlur();
   }
 

From fb6f04c81af1d371fc3cee9e790d0b2d719c2cc4 Mon Sep 17 00:00:00 2001
From: Ben Thompson <git@iambenthompson.com>
Date: Sun, 31 Dec 2017 00:53:43 -0500
Subject: [PATCH 051/618] Requires startDateId, endDateId on DateRangePicker

Based on #866
---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 54614a0721..1333774ae6 100644
--- a/README.md
+++ b/README.md
@@ -103,7 +103,9 @@ Here is the minimum *REQUIRED* setup you need to get the `DateRangePicker` worki
 ```jsx
 <DateRangePicker
   startDate={this.state.startDate} // momentPropTypes.momentObj or null,
+  startDateId=// PropTypes.string.isRequired,
   endDate={this.state.endDate} // momentPropTypes.momentObj or null,
+  endDateId=// PropTypes.string.isRequired,
   onDatesChange={({ startDate, endDate }) => this.setState({ startDate, endDate })} // PropTypes.func.isRequired,
   focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null,
   onFocusChange={focusedInput => this.setState({ focusedInput })} // PropTypes.func.isRequired,
@@ -113,9 +115,7 @@ Here is the minimum *REQUIRED* setup you need to get the `DateRangePicker` worki
 The following is a list of other *OPTIONAL* props you may provide to the `DateRangePicker` to customize appearance and behavior to your heart's desire. Again, please explore the [storybook](http://airbnb.io/react-dates/?selectedKind=DRP%20-%20Input%20Props&selectedStory=default&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel) for more information on what each of these props do.
 ```js
 // input related props
-startDateId: PropTypes.string.isRequired,
 startDatePlaceholderText: PropTypes.string,
-endDateId: PropTypes.string.isRequired,
 endDatePlaceholderText: PropTypes.string,
 disabled: PropTypes.bool,
 required: PropTypes.bool,

From 7d9cad100b7681d91ec5d06fff4e3b00f62e71a5 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Sun, 31 Dec 2017 22:02:21 -0800
Subject: [PATCH 052/618] =?UTF-8?q?[Tests]=20fix=20more=20tests=20that=20f?=
 =?UTF-8?q?ail=20when=20it=E2=80=99s=20January=201st?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 test/components/DayPickerRangeController_spec.jsx      | 2 +-
 test/components/DayPickerSingleDateController_spec.jsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index eaadb03fcf..1d3d854831 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -1851,7 +1851,7 @@ describe('DayPickerRangeController', () => {
         currentMonth: today,
       });
       wrapper.instance().onPrevMonthClick();
-      expect(wrapper.state().currentMonth.month()).to.equal(today.month() - 1);
+      expect(wrapper.state().currentMonth.month()).to.equal(today.clone().subtract(1, 'month').month());
     });
 
     it('new visibleDays has previous month', () => {
diff --git a/test/components/DayPickerSingleDateController_spec.jsx b/test/components/DayPickerSingleDateController_spec.jsx
index bd25ae87d6..9bbaef9ab5 100644
--- a/test/components/DayPickerSingleDateController_spec.jsx
+++ b/test/components/DayPickerSingleDateController_spec.jsx
@@ -690,7 +690,7 @@ describe('DayPickerSingleDateController', () => {
         currentMonth: today,
       });
       wrapper.instance().onPrevMonthClick();
-      expect(wrapper.state().currentMonth.month()).to.equal(today.month() - 1);
+      expect(wrapper.state().currentMonth.month()).to.equal(today.clone().subtract(1, 'month').month());
     });
 
     it('new visibleDays has previous month', () => {

From 9780545c35831d793032538243bf560f254bbe60 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Mon, 1 Jan 2018 21:47:43 -0800
Subject: [PATCH 053/618] [Dev Deps] update `sinon`, `nyc`, `node-sass`,
 `moment`, `karma-firefox-launcher`, `karma-webpack`, `cross-env`, `enzyme`,
 `enzyme-adapter-react-helper`, `eslint`, `eslint-plugin-jsx-a11y`,
 `eslint-plugin-react`, `@storybook/react`, `@storybook/addon-links`,
 `@storybook/addon-info`, `@storybook/addon-options`

---
 package.json | 33 +++++++++++++++++----------------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/package.json b/package.json
index ff6c97989c..05e832927a 100644
--- a/package.json
+++ b/package.json
@@ -52,10 +52,10 @@
   "homepage": "https://github.com/airbnb/react-dates#readme",
   "devDependencies": {
     "@storybook/addon-actions": "^3.2.12",
-    "@storybook/addon-info": "^3.2.9",
-    "@storybook/addon-links": "^3.2.12",
-    "@storybook/addon-options": "^3.2.6",
-    "@storybook/react": "^3.2.8",
+    "@storybook/addon-info": "^3.3.3",
+    "@storybook/addon-links": "^3.3.3",
+    "@storybook/addon-options": "^3.3.3",
+    "@storybook/react": "^3.3.3",
     "airbnb-js-shims": "^1.3.0",
     "aphrodite": "^1.2.5",
     "babel-cli": "^6.26.0",
@@ -71,14 +71,14 @@
     "chai": "^4.1.2",
     "clean-css": "^4.1.9",
     "coveralls": "^2.13.3",
-    "cross-env": "^5.1.1",
-    "enzyme": "^3.2.0",
-    "enzyme-adapter-react-helper": "^1.0.3",
-    "eslint": "^4.11.0",
+    "cross-env": "^5.1.3",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-helper": "^1.2.2",
+    "eslint": "^4.14.0",
     "eslint-config-airbnb": "^16.1.0",
     "eslint-plugin-import": "^2.8.0",
-    "eslint-plugin-jsx-a11y": "^6.0.2",
-    "eslint-plugin-react": "^7.4.0",
+    "eslint-plugin-jsx-a11y": "^6.0.3",
+    "eslint-plugin-react": "^7.5.1",
     "eslint-plugin-react-with-styles": "^1.1.1",
     "git-directory-deploy": "^1.5.1",
     "imports-loader": "^0.7.1",
@@ -86,16 +86,16 @@
     "json-loader": "^0.5.7",
     "karma": "^1.7.1",
     "karma-chai": "^0.1.0",
-    "karma-firefox-launcher": "^1.0.1",
+    "karma-firefox-launcher": "^1.1.0",
     "karma-mocha": "^1.3.0",
     "karma-sinon": "^1.0.5",
-    "karma-webpack": "^2.0.5",
+    "karma-webpack": "^2.0.9",
     "mocha": "^3.5.3",
     "mocha-wrap": "^2.1.1",
-    "moment": "^2.19.2",
+    "moment": "^2.20.1",
     "moment-jalaali": "^0.7.2",
-    "node-sass": "^4.5.3",
-    "nyc": "^11.2.1",
+    "node-sass": "^4.7.2",
+    "nyc": "^11.4.1",
     "raw-loader": "^0.5.1",
     "react": "^0.14 || ^15.5.4 || ^16.1.1",
     "react-dom": "^0.14 || ^15.5.4 || ^16.1.1",
@@ -104,7 +104,7 @@
     "rimraf": "^2.6.2",
     "safe-publish-latest": "^1.1.1",
     "sass-loader": "^6.0.6",
-    "sinon": "^4.1.2",
+    "sinon": "^4.1.3",
     "sinon-sandbox": "^1.0.2",
     "style-loader": "^0.19.0",
     "webpack": "^2.6.1"
@@ -130,6 +130,7 @@
   },
   "greenkeeper": {
     "ignore": [
+      "mocha",
       "webpack"
     ]
   }

From c388b4b71b21ee9630f673f5334660be8a17b9d2 Mon Sep 17 00:00:00 2001
From: Erin Doyle <edoyle@cashstar.com>
Date: Fri, 22 Dec 2017 14:42:11 -0500
Subject: [PATCH 054/618] Modified the throttling of the onKeyDown handler
 updates

---
 src/components/DateInput.jsx | 5 ++---
 src/components/DayPicker.jsx | 9 ++++++++-
 src/constants.js             | 2 ++
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
index 180344f3e7..1b27130e2b 100644
--- a/src/components/DateInput.jsx
+++ b/src/components/DateInput.jsx
@@ -13,6 +13,7 @@ import {
   FANG_HEIGHT_PX,
   FANG_WIDTH_PX,
   DEFAULT_VERTICAL_SPACING,
+  MODIFIER_KEY_NAMES,
 } from '../constants';
 
 const FANG_PATH_TOP = `M0,${FANG_HEIGHT_PX} ${FANG_WIDTH_PX},${FANG_HEIGHT_PX} ${FANG_WIDTH_PX / 2},0z`;
@@ -20,8 +21,6 @@ const FANG_STROKE_TOP = `M0,${FANG_HEIGHT_PX} ${FANG_WIDTH_PX / 2},0 ${FANG_WIDT
 const FANG_PATH_BOTTOM = `M0,0 ${FANG_WIDTH_PX},0 ${FANG_WIDTH_PX / 2},${FANG_HEIGHT_PX}z`;
 const FANG_STROKE_BOTTOM = `M0,0 ${FANG_WIDTH_PX / 2},${FANG_HEIGHT_PX} ${FANG_WIDTH_PX},0`;
 
-const MODIFIER_NAMES = ['Shift', 'Control', 'Alt', 'Meta'];
-
 const propTypes = forbidExtraProps({
   ...withStylesPropTypes,
   id: PropTypes.string.isRequired,
@@ -129,7 +128,7 @@ class DateInput extends React.Component {
 
   onKeyDown(e) {
     e.stopPropagation();
-    if (!MODIFIER_NAMES.includes(e.key)) {
+    if (!MODIFIER_KEY_NAMES.includes(e.key)) {
       this.throttledKeyDown(e);
     }
   }
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index a06e109457..c2ff958b82 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -32,6 +32,7 @@ import {
   VERTICAL_ORIENTATION,
   VERTICAL_SCROLLABLE,
   DAY_SIZE,
+  MODIFIER_KEY_NAMES,
 } from '../constants';
 
 const MONTH_PADDING = 23;
@@ -173,6 +174,7 @@ class DayPicker extends React.Component {
     this.calendarMonthGridHeight = 0;
 
     this.onKeyDown = this.onKeyDown.bind(this);
+    this.throttledKeyDown = throttle(this.onFinalKeyDown, 200, { trailing: false });
     this.onPrevMonthClick = this.onPrevMonthClick.bind(this);
     this.onNextMonthClick = this.onNextMonthClick.bind(this);
     this.multiplyScrollableMonths = this.multiplyScrollableMonths.bind(this);
@@ -251,7 +253,12 @@ class DayPicker extends React.Component {
 
   onKeyDown(e) {
     e.stopPropagation();
+    if (!MODIFIER_KEY_NAMES.includes(e.key)) {
+      this.throttledKeyDown(e);
+    }
+  }
 
+  onFinalKeyDown(e) {
     this.setState({ withMouseInteractions: false });
 
     const { onBlur, isRTL } = this.props;
@@ -778,7 +785,7 @@ class DayPicker extends React.Component {
             {...css(styles.DayPicker_focusRegion)}
             ref={this.setContainerRef}
             onClick={(e) => { e.stopPropagation(); }}
-            onKeyDown={throttle(this.onKeyDown, 300)}
+            onKeyDown={this.onKeyDown}
             onMouseUp={() => { this.setState({ withMouseInteractions: true }); }}
             role="region"
             tabIndex={-1}
diff --git a/src/constants.js b/src/constants.js
index 0e8bb5a4b2..6f9ab9b348 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -25,3 +25,5 @@ export const WEEKDAYS = [0, 1, 2, 3, 4, 5, 6];
 export const FANG_WIDTH_PX = 20;
 export const FANG_HEIGHT_PX = 10;
 export const DEFAULT_VERTICAL_SPACING = 22;
+
+export const MODIFIER_KEY_NAMES = ['Shift', 'Control', 'Alt', 'Meta'];

From 0150880b35d953fc931696185644eb4729b34762 Mon Sep 17 00:00:00 2001
From: Erin Doyle <edoyle@cashstar.com>
Date: Fri, 22 Dec 2017 15:12:00 -0500
Subject: [PATCH 055/618] Cleaned up the onKeyDown handler when the Keyboard
 Shortcuts panel is open so that the correct keys are being used to close the
 panel.

---
 src/components/DayPickerKeyboardShortcuts.jsx   | 17 ++++++++---------
 .../DayPickerKeyboardShortcuts_spec.jsx         |  7 +++----
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/components/DayPickerKeyboardShortcuts.jsx b/src/components/DayPickerKeyboardShortcuts.jsx
index eacb6d5640..d571a82cc7 100644
--- a/src/components/DayPickerKeyboardShortcuts.jsx
+++ b/src/components/DayPickerKeyboardShortcuts.jsx
@@ -3,11 +3,10 @@ import PropTypes from 'prop-types';
 import { forbidExtraProps } from 'airbnb-prop-types';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 
-import KeyboardShortcutRow from './KeyboardShortcutRow';
-
 import { DayPickerKeyboardShortcutsPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
 
+import KeyboardShortcutRow from './KeyboardShortcutRow';
 import CloseButton from './CloseButton';
 
 export const TOP_LEFT = 'top-left';
@@ -97,35 +96,35 @@ class DayPickerKeyboardShortcuts extends React.Component {
   }
 
   onKeyDown(e) {
+    e.stopPropagation();
+
     const { closeKeyboardShortcutsPanel } = this.props;
     // Because the close button is the only focusable element inside of the panel, this
-    // amount to a very basic focus trap. The user can exit the panel by "pressing" the
+    // amounts to a very basic focus trap. The user can exit the panel by "pressing" the
     // close button or hitting escape
     switch (e.key) {
-      case 'Space':
+      case 'Enter':
+      case ' ':
+      case 'Spacebar': // for older browsers
       case 'Escape':
-        e.stopPropagation();
         closeKeyboardShortcutsPanel();
         break;
 
-      // only stopPropagation here - this allows the up and down arrows continue their
+      // do nothing - this allows the up and down arrows continue their
       // default behavior of scrolling the content of the Keyboard Shortcuts Panel
       // which is needed when only a single month is shown for instance.
       case 'ArrowUp':
       case 'ArrowDown':
-        e.stopPropagation();
         break;
 
       // completely block the rest of the keys that have functionality outside of this panel
       case 'Tab':
-      case 'Enter':
       case 'Home':
       case 'End':
       case 'PageUp':
       case 'PageDown':
       case 'ArrowLeft':
       case 'ArrowRight':
-        e.stopPropagation();
         e.preventDefault();
         break;
 
diff --git a/test/components/DayPickerKeyboardShortcuts_spec.jsx b/test/components/DayPickerKeyboardShortcuts_spec.jsx
index 35f15c237e..8550e5271a 100644
--- a/test/components/DayPickerKeyboardShortcuts_spec.jsx
+++ b/test/components/DayPickerKeyboardShortcuts_spec.jsx
@@ -216,7 +216,7 @@ describe('DayPickerKeyboardShortcuts', () => {
         });
 
         it('onKeyDown Space calls e.stopPropagation and onShowKeyboardShortcutsButtonClick', () => {
-          closeButton.prop('onKeyDown')({ ...event, key: 'Space' });
+          closeButton.prop('onKeyDown')({ ...event, key: ' ' });
           expect(event.stopPropagation.callCount).to.equal(1);
           expect(closeKeyboardShortcutsPanelStub.callCount).to.equal(1);
         });
@@ -227,11 +227,10 @@ describe('DayPickerKeyboardShortcuts', () => {
           expect(closeKeyboardShortcutsPanelStub.callCount).to.equal(1);
         });
 
-        it('onKeyDown Enter calls e.stopPropagation and e.preventDefault and NOT onShowKeyboardShortcutsButtonClick', () => {
+        it('onKeyDown Enter calls e.stopPropagation and onShowKeyboardShortcutsButtonClick', () => {
           closeButton.prop('onKeyDown')({ ...event, key: 'Enter' });
           expect(event.stopPropagation.callCount).to.equal(1);
-          expect(event.preventDefault.callCount).to.equal(1);
-          expect(closeKeyboardShortcutsPanelStub.notCalled).to.equal(true);
+          expect(closeKeyboardShortcutsPanelStub.callCount).to.equal(1);
         });
 
         it('onKeyDown Tab calls e.stopPropagation and e.preventDefault and NOT onShowKeyboardShortcutsButtonClick', () => {

From db515e777e8f65d917802019268194c259376bce Mon Sep 17 00:00:00 2001
From: Erin Doyle <edoyle@cashstar.com>
Date: Fri, 22 Dec 2017 16:29:39 -0500
Subject: [PATCH 056/618] Changed the MODIFIER_KEY_NAMES constant from an array
 to a Set

---
 src/components/DateInput.jsx | 2 +-
 src/components/DayPicker.jsx | 2 +-
 src/constants.js             | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
index 1b27130e2b..0e36647501 100644
--- a/src/components/DateInput.jsx
+++ b/src/components/DateInput.jsx
@@ -128,7 +128,7 @@ class DateInput extends React.Component {
 
   onKeyDown(e) {
     e.stopPropagation();
-    if (!MODIFIER_KEY_NAMES.includes(e.key)) {
+    if (!MODIFIER_KEY_NAMES.has(e.key)) {
       this.throttledKeyDown(e);
     }
   }
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index c2ff958b82..2ec875befd 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -253,7 +253,7 @@ class DayPicker extends React.Component {
 
   onKeyDown(e) {
     e.stopPropagation();
-    if (!MODIFIER_KEY_NAMES.includes(e.key)) {
+    if (!MODIFIER_KEY_NAMES.has(e.key)) {
       this.throttledKeyDown(e);
     }
   }
diff --git a/src/constants.js b/src/constants.js
index 6f9ab9b348..8a6a798116 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -26,4 +26,4 @@ export const FANG_WIDTH_PX = 20;
 export const FANG_HEIGHT_PX = 10;
 export const DEFAULT_VERTICAL_SPACING = 22;
 
-export const MODIFIER_KEY_NAMES = ['Shift', 'Control', 'Alt', 'Meta'];
+export const MODIFIER_KEY_NAMES = new Set(['Shift', 'Control', 'Alt', 'Meta']);

From 91d9b82b4d3ac1d50b3efeff9aae8f37899b7c26 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Sun, 7 Jan 2018 22:27:03 -0800
Subject: [PATCH 057/618] [Dev Deps] update `@storybook/react`,
 `@storybook/addon-links`, `@storybook/addon-info`,
 `@storybook/addon-options`, `@storybook/addon-actions`, `airbnb-js-shims`

---
 package.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 05e832927a..a88c577f37 100644
--- a/package.json
+++ b/package.json
@@ -51,12 +51,12 @@
   },
   "homepage": "https://github.com/airbnb/react-dates#readme",
   "devDependencies": {
-    "@storybook/addon-actions": "^3.2.12",
-    "@storybook/addon-info": "^3.3.3",
-    "@storybook/addon-links": "^3.3.3",
-    "@storybook/addon-options": "^3.3.3",
-    "@storybook/react": "^3.3.3",
-    "airbnb-js-shims": "^1.3.0",
+    "@storybook/addon-actions": "^3.3.5",
+    "@storybook/addon-info": "^3.3.5",
+    "@storybook/addon-links": "^3.3.5",
+    "@storybook/addon-options": "^3.3.5",
+    "@storybook/react": "^3.3.5",
+    "airbnb-js-shims": "^1.4.0",
     "aphrodite": "^1.2.5",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",

From e1949f2b3c8bf5fb25dcec0010d1f39c6e624e1a Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Sun, 7 Jan 2018 22:55:03 -0800
Subject: [PATCH 058/618] [Dev Deps] update `babel-loader`,
 `babel-plugin-inline-react-svg`, `eslint`

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index a88c577f37..144b4dcf91 100644
--- a/package.json
+++ b/package.json
@@ -61,7 +61,7 @@
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",
     "babel-loader": "^6.4.1",
-    "babel-plugin-inline-react-svg": "^0.5.1",
+    "babel-plugin-inline-react-svg": "^0.5.2",
     "babel-plugin-inline-svg": "^0.1.0",
     "babel-plugin-istanbul": "^4.1.5",
     "babel-plugin-syntax-jsx": "^6.18.0",
@@ -74,7 +74,7 @@
     "cross-env": "^5.1.3",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-helper": "^1.2.2",
-    "eslint": "^4.14.0",
+    "eslint": "^4.15.0",
     "eslint-config-airbnb": "^16.1.0",
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",

From da7bb3678f26c6a5ba86f928549a4e0461bd8f19 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Sun, 7 Jan 2018 22:57:05 -0800
Subject: [PATCH 059/618] [Deps] update `consolidated-events`, `object.assign`,
 `prop-types`, `react-addons-shallow-compare`, `react-portal`

---
 package.json | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 144b4dcf91..b7a47f0ced 100644
--- a/package.json
+++ b/package.json
@@ -111,17 +111,17 @@
   },
   "dependencies": {
     "airbnb-prop-types": "^2.8.1",
-    "consolidated-events": "^1.1.0",
+    "consolidated-events": "^1.1.1",
     "is-touch-device": "^1.0.1",
     "lodash": "^4.1.1",
-    "object.assign": "^4.0.4",
+    "object.assign": "^4.1.0",
     "object.values": "^1.0.4",
-    "prop-types": "^15.5.10",
-    "react-addons-shallow-compare": "^15.5.2",
+    "prop-types": "^15.6.0",
+    "react-addons-shallow-compare": "^15.6.2",
     "react-moment-proptypes": "^1.5.0",
-    "react-portal": "^4.1.0",
-    "react-with-styles-interface-css": "^3.0.0",
-    "react-with-styles": "=2.2.0"
+    "react-portal": "^4.1.2",
+    "react-with-styles": "=2.2.0",
+    "react-with-styles-interface-css": "^3.0.0"
   },
   "peerDependencies": {
     "moment": "^2.18.1",

From 048612ad7fa82ff1cfba8716195567c7026797f5 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Mon, 8 Jan 2018 16:49:20 -0800
Subject: [PATCH 060/618] Version 16.0.2

---
 CHANGELOG.md | 4 ++++
 package.json | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9fdebf024e..283f7b972b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Change Log
 
+## 16.0.2
+- [fix] Fix keyboard navigation issues ([#916](https://github.com/airbnb/react-dates/pull/916))
+- [fix] Fix React warnings when events are referenced later ([#682](https://github.com/airbnb/react-dates/pull/682))
+
 ## 16.0.1
 - [fix] Add back missing onKeyDown method to `CalendarDay` ([#901](https://github.com/airbnb/react-dates/pull/901))
 
diff --git a/package.json b/package.json
index b7a47f0ced..30774d22ec 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "16.0.1",
+  "version": "16.0.2",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From e6cf29eb84fa5b6b3d9b7b3e8c25f5f6655bb235 Mon Sep 17 00:00:00 2001
From: Erin Doyle <edoyle@cashstar.com>
Date: Fri, 15 Dec 2017 19:21:17 -0500
Subject: [PATCH 061/618] Added the setting of the CalendarDay aria-label with
 a dateIsSelected phrase when the day is the selected day.

---
 src/components/CalendarDay.jsx                 | 16 ++++++++++------
 src/components/CustomizableCalendarDay.jsx     | 16 ++++++++++------
 src/defaultPhrases.js                          |  9 ++++++---
 test/components/CalendarDay_spec.jsx           | 18 ++++++++++++++++++
 .../CustomizableCalendarDay_spec.jsx           | 18 ++++++++++++++++++
 5 files changed, 62 insertions(+), 15 deletions(-)

diff --git a/src/components/CalendarDay.jsx b/src/components/CalendarDay.jsx
index 83cde243cf..d568a68a3c 100644
--- a/src/components/CalendarDay.jsx
+++ b/src/components/CalendarDay.jsx
@@ -110,17 +110,12 @@ class CalendarDay extends React.Component {
       phrases: {
         chooseAvailableDate,
         dateIsUnavailable,
+        dateIsSelected,
       },
     } = this.props;
 
     if (!day) return <td />;
 
-    const formattedDate = { date: day.format(ariaLabelFormat) };
-
-    const ariaLabel = modifiers.has(BLOCKED_MODIFIER)
-      ? getPhrase(dateIsUnavailable, formattedDate)
-      : getPhrase(chooseAvailableDate, formattedDate);
-
     const daySizeStyles = {
       width: daySize,
       height: daySize - 1,
@@ -145,6 +140,15 @@ class CalendarDay extends React.Component {
 
     const isOutsideRange = modifiers.has('blocked-out-of-range');
 
+    const formattedDate = { date: day.format(ariaLabelFormat) };
+
+    let ariaLabel = getPhrase(chooseAvailableDate, formattedDate);
+    if (modifiers.has(BLOCKED_MODIFIER)) {
+      ariaLabel = getPhrase(dateIsUnavailable, formattedDate);
+    } else if (selected) {
+      ariaLabel = getPhrase(dateIsSelected, formattedDate);
+    }
+
     return (
       <td
         {...css(
diff --git a/src/components/CustomizableCalendarDay.jsx b/src/components/CustomizableCalendarDay.jsx
index 867347b66c..b3e43889bc 100644
--- a/src/components/CustomizableCalendarDay.jsx
+++ b/src/components/CustomizableCalendarDay.jsx
@@ -155,6 +155,7 @@ class CustomizableCalendarDay extends React.Component {
       phrases: {
         chooseAvailableDate,
         dateIsUnavailable,
+        dateIsSelected,
       },
 
       defaultStyles: defaultStylesWithHover,
@@ -177,12 +178,6 @@ class CustomizableCalendarDay extends React.Component {
 
     if (!day) return <td />;
 
-    const formattedDate = { date: day.format(ariaLabelFormat) };
-
-    const ariaLabel = modifiers.has(BLOCKED_MODIFIER)
-      ? getPhrase(dateIsUnavailable, formattedDate)
-      : getPhrase(chooseAvailableDate, formattedDate);
-
     const daySizeStyles = {
       width: daySize,
       height: daySize - 1,
@@ -207,6 +202,15 @@ class CustomizableCalendarDay extends React.Component {
 
     const isOutsideRange = modifiers.has('blocked-out-of-range');
 
+    const formattedDate = { date: day.format(ariaLabelFormat) };
+
+    let ariaLabel = getPhrase(chooseAvailableDate, formattedDate);
+    if (modifiers.has(BLOCKED_MODIFIER)) {
+      ariaLabel = getPhrase(dateIsUnavailable, formattedDate);
+    } else if (selected) {
+      ariaLabel = getPhrase(dateIsSelected, formattedDate);
+    }
+
     const defaultStyles = getStyles(defaultStylesWithHover, isHovered);
     const outsideStyles = getStyles(outsideStylesWithHover, isHovered);
     const todayStyles = getStyles(todayStylesWithHover, isHovered);
diff --git a/src/defaultPhrases.js b/src/defaultPhrases.js
index 985677751e..acc6a45ca0 100644
--- a/src/defaultPhrases.js
+++ b/src/defaultPhrases.js
@@ -25,13 +25,11 @@ const returnFocusToInput = 'Return to the date input field.';
 const keyboardNavigationInstructions = `Press the down arrow key to interact with the calendar and
   select a date. Press the question mark key to get the keyboard shortcuts for changing dates.`;
 
-// eslint-disable-next-line camelcase
 const chooseAvailableStartDate = ({ date }) => `Choose ${date} as your check-in date. It's available.`;
-
-// eslint-disable-next-line camelcase
 const chooseAvailableEndDate = ({ date }) => `Choose ${date} as your check-out date. It's available.`;
 const chooseAvailableDate = ({ date }) => date;
 const dateIsUnavailable = ({ date }) => `Not available. ${date}`;
+const dateIsSelected = ({ date }) => `Selected. ${date}`;
 
 export default {
   calendarLabel,
@@ -63,6 +61,7 @@ export default {
   chooseAvailableStartDate,
   chooseAvailableEndDate,
   dateIsUnavailable,
+  dateIsSelected,
 };
 
 export const DateRangePickerPhrases = {
@@ -93,6 +92,7 @@ export const DateRangePickerPhrases = {
   chooseAvailableStartDate,
   chooseAvailableEndDate,
   dateIsUnavailable,
+  dateIsSelected,
 };
 
 export const DateRangePickerInputPhrases = {
@@ -127,6 +127,7 @@ export const SingleDatePickerPhrases = {
   keyboardNavigationInstructions,
   chooseAvailableDate,
   dateIsUnavailable,
+  dateIsSelected,
 };
 
 export const SingleDatePickerInputPhrases = {
@@ -159,6 +160,7 @@ export const DayPickerPhrases = {
   chooseAvailableEndDate,
   chooseAvailableDate,
   dateIsUnavailable,
+  dateIsSelected,
 };
 
 export const DayPickerKeyboardShortcutsPhrases = {
@@ -189,4 +191,5 @@ export const DayPickerNavigationPhrases = {
 export const CalendarDayPhrases = {
   chooseAvailableDate,
   dateIsUnavailable,
+  dateIsSelected,
 };
diff --git a/test/components/CalendarDay_spec.jsx b/test/components/CalendarDay_spec.jsx
index 61cd4aeaa1..9cc4c832b0 100644
--- a/test/components/CalendarDay_spec.jsx
+++ b/test/components/CalendarDay_spec.jsx
@@ -59,6 +59,7 @@ describe('CalendarDay', () => {
 
       beforeEach(() => {
         phrases.chooseAvailableDate = sinon.stub().returns('chooseAvailableDate text');
+        phrases.dateIsSelected = sinon.stub().returns('dateIsSelected text');
         phrases.dateIsUnavailable = sinon.stub().returns('dateIsUnavailable text');
       });
 
@@ -75,6 +76,23 @@ describe('CalendarDay', () => {
         expect(wrapper.prop('aria-label')).to.equal('chooseAvailableDate text');
       });
 
+      it('is formatted with the dateIsSelected phrase function when day is selected', () => {
+        const selectedModifiers = new Set(['selected', 'selected-start', 'selected-end']);
+
+        selectedModifiers.forEach((selectedModifier) => {
+          const modifiers = new Set().add(selectedModifier);
+
+          const wrapper = shallow(<CalendarDay
+            modifiers={modifiers}
+            phrases={phrases}
+            day={day}
+          />).dive();
+
+          expect(phrases.dateIsSelected.calledWith(expectedFormattedDay)).to.equal(true);
+          expect(wrapper.prop('aria-label')).to.equal('dateIsSelected text');
+        });
+      });
+
       it('is formatted with the dateIsUnavailable phrase function when day is not available', () => {
         const modifiers = new Set().add(BLOCKED_MODIFIER);
 
diff --git a/test/components/CustomizableCalendarDay_spec.jsx b/test/components/CustomizableCalendarDay_spec.jsx
index 499c6d0422..d8365a2265 100644
--- a/test/components/CustomizableCalendarDay_spec.jsx
+++ b/test/components/CustomizableCalendarDay_spec.jsx
@@ -61,6 +61,7 @@ describe('CustomizableCalendarDay', () => {
 
       beforeEach(() => {
         phrases.chooseAvailableDate = sinon.stub().returns('chooseAvailableDate text');
+        phrases.dateIsSelected = sinon.stub().returns('dateIsSelected text');
         phrases.dateIsUnavailable = sinon.stub().returns('dateIsUnavailable text');
       });
 
@@ -77,6 +78,23 @@ describe('CustomizableCalendarDay', () => {
         expect(wrapper.prop('aria-label')).to.equal('chooseAvailableDate text');
       });
 
+      it('is formatted with the dateIsSelected phrase function when day is selected', () => {
+        const selectedModifiers = new Set(['selected', 'selected-start', 'selected-end']);
+
+        selectedModifiers.forEach((selectedModifier) => {
+          const modifiers = new Set().add(selectedModifier);
+
+          const wrapper = shallow(<CustomizableCalendarDay
+            modifiers={modifiers}
+            phrases={phrases}
+            day={day}
+          />).dive();
+
+          expect(phrases.dateIsSelected.calledWith(expectedFormattedDay)).to.equal(true);
+          expect(wrapper.prop('aria-label')).to.equal('dateIsSelected text');
+        });
+      });
+
       it('is formatted with the dateIsUnavailable phrase function when day is not available', () => {
         const modifiers = new Set().add(BLOCKED_MODIFIER);
 

From de495709a9754b6a3571c91a16434f924391f5cf Mon Sep 17 00:00:00 2001
From: Erin Doyle <edoyle@cashstar.com>
Date: Mon, 18 Dec 2017 15:24:19 -0500
Subject: [PATCH 062/618] Added a getCalendarDaySettings utility function that
 can be shared by CalendarDay and CustomizableCalendarDay.

---
 src/components/CalendarDay.jsx                |  50 +---
 src/components/CustomizableCalendarDay.jsx    |  50 +---
 src/utils/getCalendarDaySettings.js           |  52 ++++
 test/components/CalendarDay_spec.jsx          |   4 -
 .../CustomizableCalendarDay_spec.jsx          |   4 -
 test/utils/getCalendarDaySettings_spec.js     | 240 ++++++++++++++++++
 6 files changed, 314 insertions(+), 86 deletions(-)
 create mode 100644 src/utils/getCalendarDaySettings.js
 create mode 100644 test/utils/getCalendarDaySettings_spec.js

diff --git a/src/components/CalendarDay.jsx b/src/components/CalendarDay.jsx
index d568a68a3c..f7a362af13 100644
--- a/src/components/CalendarDay.jsx
+++ b/src/components/CalendarDay.jsx
@@ -8,9 +8,9 @@ import moment from 'moment';
 
 import { CalendarDayPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
-import getPhrase from '../utils/getPhrase';
+import getCalendarDaySettings from '../utils/getCalendarDaySettings';
 
-import { BLOCKED_MODIFIER, DAY_SIZE } from '../constants';
+import { DAY_SIZE } from '../constants';
 
 const propTypes = forbidExtraProps({
   ...withStylesPropTypes,
@@ -107,47 +107,19 @@ class CalendarDay extends React.Component {
       renderDayContents,
       tabIndex,
       styles,
-      phrases: {
-        chooseAvailableDate,
-        dateIsUnavailable,
-        dateIsSelected,
-      },
+      phrases,
     } = this.props;
 
     if (!day) return <td />;
 
-    const daySizeStyles = {
-      width: daySize,
-      height: daySize - 1,
-    };
-
-    const useDefaultCursor = (
-      modifiers.has('blocked-minimum-nights')
-      || modifiers.has('blocked-calendar')
-      || modifiers.has('blocked-out-of-range')
-    );
-
-    const selected = (
-      modifiers.has('selected')
-      || modifiers.has('selected-start')
-      || modifiers.has('selected-end')
-    );
-
-    const hoveredSpan = !selected && (
-      modifiers.has('hovered-span')
-      || modifiers.has('after-hovered-start')
-    );
-
-    const isOutsideRange = modifiers.has('blocked-out-of-range');
-
-    const formattedDate = { date: day.format(ariaLabelFormat) };
-
-    let ariaLabel = getPhrase(chooseAvailableDate, formattedDate);
-    if (modifiers.has(BLOCKED_MODIFIER)) {
-      ariaLabel = getPhrase(dateIsUnavailable, formattedDate);
-    } else if (selected) {
-      ariaLabel = getPhrase(dateIsSelected, formattedDate);
-    }
+    const {
+      daySizeStyles,
+      useDefaultCursor,
+      selected,
+      hoveredSpan,
+      isOutsideRange,
+      ariaLabel,
+    } = getCalendarDaySettings(day, ariaLabelFormat, daySize, modifiers, phrases);
 
     return (
       <td
diff --git a/src/components/CustomizableCalendarDay.jsx b/src/components/CustomizableCalendarDay.jsx
index b3e43889bc..dbf45b51e3 100644
--- a/src/components/CustomizableCalendarDay.jsx
+++ b/src/components/CustomizableCalendarDay.jsx
@@ -8,9 +8,9 @@ import moment from 'moment';
 
 import { CalendarDayPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
-import getPhrase from '../utils/getPhrase';
+import getCalendarDaySettings from '../utils/getCalendarDaySettings';
 
-import { BLOCKED_MODIFIER, DAY_SIZE } from '../constants';
+import { DAY_SIZE } from '../constants';
 
 function getStyles(stylesObj, isHovered) {
   if (!stylesObj) return null;
@@ -152,11 +152,7 @@ class CustomizableCalendarDay extends React.Component {
       tabIndex,
       renderDayContents,
       styles,
-      phrases: {
-        chooseAvailableDate,
-        dateIsUnavailable,
-        dateIsSelected,
-      },
+      phrases,
 
       defaultStyles: defaultStylesWithHover,
       outsideStyles: outsideStylesWithHover,
@@ -178,38 +174,14 @@ class CustomizableCalendarDay extends React.Component {
 
     if (!day) return <td />;
 
-    const daySizeStyles = {
-      width: daySize,
-      height: daySize - 1,
-    };
-
-    const useDefaultCursor = (
-      modifiers.has('blocked-minimum-nights')
-      || modifiers.has('blocked-calendar')
-      || modifiers.has('blocked-out-of-range')
-    );
-
-    const selected = (
-      modifiers.has('selected')
-      || modifiers.has('selected-start')
-      || modifiers.has('selected-end')
-    );
-
-    const hoveredSpan = !selected && (
-      modifiers.has('hovered-span')
-      || modifiers.has('after-hovered-start')
-    );
-
-    const isOutsideRange = modifiers.has('blocked-out-of-range');
-
-    const formattedDate = { date: day.format(ariaLabelFormat) };
-
-    let ariaLabel = getPhrase(chooseAvailableDate, formattedDate);
-    if (modifiers.has(BLOCKED_MODIFIER)) {
-      ariaLabel = getPhrase(dateIsUnavailable, formattedDate);
-    } else if (selected) {
-      ariaLabel = getPhrase(dateIsSelected, formattedDate);
-    }
+    const {
+      daySizeStyles,
+      useDefaultCursor,
+      selected,
+      hoveredSpan,
+      isOutsideRange,
+      ariaLabel,
+    } = getCalendarDaySettings(day, ariaLabelFormat, daySize, modifiers, phrases);
 
     const defaultStyles = getStyles(defaultStylesWithHover, isHovered);
     const outsideStyles = getStyles(outsideStylesWithHover, isHovered);
diff --git a/src/utils/getCalendarDaySettings.js b/src/utils/getCalendarDaySettings.js
new file mode 100644
index 0000000000..d599c67f69
--- /dev/null
+++ b/src/utils/getCalendarDaySettings.js
@@ -0,0 +1,52 @@
+import getPhrase from '../utils/getPhrase';
+import { BLOCKED_MODIFIER } from '../constants';
+
+export default function getCalendarDaySettings(day, ariaLabelFormat, daySize, modifiers, phrases) {
+  const {
+    chooseAvailableDate,
+    dateIsUnavailable,
+    dateIsSelected,
+  } = phrases;
+
+  const daySizeStyles = {
+    width: daySize,
+    height: daySize - 1,
+  };
+
+  const useDefaultCursor = (
+    modifiers.has('blocked-minimum-nights')
+    || modifiers.has('blocked-calendar')
+    || modifiers.has('blocked-out-of-range')
+  );
+
+  const selected = (
+    modifiers.has('selected')
+    || modifiers.has('selected-start')
+    || modifiers.has('selected-end')
+  );
+
+  const hoveredSpan = !selected && (
+    modifiers.has('hovered-span')
+    || modifiers.has('after-hovered-start')
+  );
+
+  const isOutsideRange = modifiers.has('blocked-out-of-range');
+
+  const formattedDate = { date: day.format(ariaLabelFormat) };
+
+  let ariaLabel = getPhrase(chooseAvailableDate, formattedDate);
+  if (modifiers.has(BLOCKED_MODIFIER)) {
+    ariaLabel = getPhrase(dateIsUnavailable, formattedDate);
+  } else if (selected) {
+    ariaLabel = getPhrase(dateIsSelected, formattedDate);
+  }
+
+  return {
+    daySizeStyles,
+    useDefaultCursor,
+    selected,
+    hoveredSpan,
+    isOutsideRange,
+    ariaLabel,
+  };
+}
diff --git a/test/components/CalendarDay_spec.jsx b/test/components/CalendarDay_spec.jsx
index 9cc4c832b0..b9780d3688 100644
--- a/test/components/CalendarDay_spec.jsx
+++ b/test/components/CalendarDay_spec.jsx
@@ -55,7 +55,6 @@ describe('CalendarDay', () => {
     describe('aria-label', () => {
       const phrases = {};
       const day = moment('10/10/2017');
-      const expectedFormattedDay = { date: 'Tuesday, October 10, 2017' };
 
       beforeEach(() => {
         phrases.chooseAvailableDate = sinon.stub().returns('chooseAvailableDate text');
@@ -72,7 +71,6 @@ describe('CalendarDay', () => {
           day={day}
         />).dive();
 
-        expect(phrases.chooseAvailableDate.calledWith(expectedFormattedDay)).to.equal(true);
         expect(wrapper.prop('aria-label')).to.equal('chooseAvailableDate text');
       });
 
@@ -88,7 +86,6 @@ describe('CalendarDay', () => {
             day={day}
           />).dive();
 
-          expect(phrases.dateIsSelected.calledWith(expectedFormattedDay)).to.equal(true);
           expect(wrapper.prop('aria-label')).to.equal('dateIsSelected text');
         });
       });
@@ -102,7 +99,6 @@ describe('CalendarDay', () => {
           day={day}
         />).dive();
 
-        expect(phrases.dateIsUnavailable.calledWith(expectedFormattedDay)).to.equal(true);
         expect(wrapper.prop('aria-label')).to.equal('dateIsUnavailable text');
       });
 
diff --git a/test/components/CustomizableCalendarDay_spec.jsx b/test/components/CustomizableCalendarDay_spec.jsx
index d8365a2265..83fc8bfa44 100644
--- a/test/components/CustomizableCalendarDay_spec.jsx
+++ b/test/components/CustomizableCalendarDay_spec.jsx
@@ -57,7 +57,6 @@ describe('CustomizableCalendarDay', () => {
     describe('aria-label', () => {
       const phrases = {};
       const day = moment('10/10/2017');
-      const expectedFormattedDay = { date: 'Tuesday, October 10, 2017' };
 
       beforeEach(() => {
         phrases.chooseAvailableDate = sinon.stub().returns('chooseAvailableDate text');
@@ -74,7 +73,6 @@ describe('CustomizableCalendarDay', () => {
           day={day}
         />).dive();
 
-        expect(phrases.chooseAvailableDate.calledWith(expectedFormattedDay)).to.equal(true);
         expect(wrapper.prop('aria-label')).to.equal('chooseAvailableDate text');
       });
 
@@ -90,7 +88,6 @@ describe('CustomizableCalendarDay', () => {
             day={day}
           />).dive();
 
-          expect(phrases.dateIsSelected.calledWith(expectedFormattedDay)).to.equal(true);
           expect(wrapper.prop('aria-label')).to.equal('dateIsSelected text');
         });
       });
@@ -104,7 +101,6 @@ describe('CustomizableCalendarDay', () => {
           day={day}
         />).dive();
 
-        expect(phrases.dateIsUnavailable.calledWith(expectedFormattedDay)).to.equal(true);
         expect(wrapper.prop('aria-label')).to.equal('dateIsUnavailable text');
       });
 
diff --git a/test/utils/getCalendarDaySettings_spec.js b/test/utils/getCalendarDaySettings_spec.js
new file mode 100644
index 0000000000..98ceacd061
--- /dev/null
+++ b/test/utils/getCalendarDaySettings_spec.js
@@ -0,0 +1,240 @@
+import moment from 'moment';
+import { expect } from 'chai';
+import sinon from 'sinon-sandbox';
+
+import getCalendarDaySettings from '../../src/utils/getCalendarDaySettings';
+import { BLOCKED_MODIFIER } from '../../src/constants';
+
+const testDay = moment('10/10/2017');
+const expectedFormattedDay = { date: 'Tuesday, October 10, 2017' };
+const testAriaLabelFormat = 'dddd, LL';
+const testDaySize = 39;
+const testModifiers = new Set();
+const testPhrases = {
+  chooseAvailableDate: sinon.stub(),
+  dateIsSelected: sinon.stub(),
+  dateIsUnavailable: sinon.stub(),
+};
+
+describe('getCalendarDaySettings', () => {
+  describe('daySizeStyles', () => {
+    const { daySizeStyles } = getCalendarDaySettings(
+      testDay,
+      testAriaLabelFormat,
+      testDaySize,
+      testModifiers,
+      testPhrases,
+    );
+
+    it('includes width equal to daySize', () => {
+      expect(daySizeStyles.width).to.equal(testDaySize);
+    });
+
+    it('includes height equal to daySize - 1', () => {
+      expect(daySizeStyles.height).to.equal(testDaySize - 1);
+    });
+  });
+
+  describe('useDefaultCursor', () => {
+    it('should be true when day is some kind of blocked', () => {
+      const blockedModifiers = new Set([
+        'blocked-minimum-nights',
+        'blocked-calendar',
+        'blocked-out-of-range',
+      ]);
+
+      blockedModifiers.forEach((blockedModifier) => {
+        const modifiers = new Set([blockedModifier]);
+        const { useDefaultCursor } = getCalendarDaySettings(
+          testDay,
+          testAriaLabelFormat,
+          testDaySize,
+          modifiers,
+          testPhrases,
+        );
+        expect(useDefaultCursor).to.equal(true);
+      });
+    });
+
+    it('should be false when day is not blocked', () => {
+      const modifiers = new Set(['some-kind-of-not-blocked']);
+      const { useDefaultCursor } = getCalendarDaySettings(
+        testDay,
+        testAriaLabelFormat,
+        testDaySize,
+        modifiers,
+        testPhrases,
+      );
+      expect(useDefaultCursor).to.equal(false);
+    });
+  });
+
+  describe('selected', () => {
+    it('should be true when day is some kind of selected', () => {
+      const selectedModifiers = new Set([
+        'selected',
+        'selected-start',
+        'selected-end',
+      ]);
+
+      selectedModifiers.forEach((selectedModifier) => {
+        const modifiers = new Set([selectedModifier]);
+        const { selected } = getCalendarDaySettings(
+          testDay,
+          testAriaLabelFormat,
+          testDaySize,
+          modifiers,
+          testPhrases,
+        );
+        expect(selected).to.equal(true);
+      });
+    });
+
+    it('should be false when day is not selected', () => {
+      const modifiers = new Set(['some-kind-of-not-selected']);
+      const { selected } = getCalendarDaySettings(
+        testDay,
+        testAriaLabelFormat,
+        testDaySize,
+        modifiers,
+        testPhrases,
+      );
+      expect(selected).to.equal(false);
+    });
+  });
+
+  describe('hoveredSpan', () => {
+    it('should be true when day is not selected and hovered-span', () => {
+      const modifiers = new Set(['hovered-span']);
+      const { hoveredSpan } = getCalendarDaySettings(
+        testDay,
+        testAriaLabelFormat,
+        testDaySize,
+        modifiers,
+        testPhrases,
+      );
+      expect(hoveredSpan).to.equal(true);
+    });
+
+    it('should be true when day is not selected and after-hovered-start', () => {
+      const modifiers = new Set(['hovered-span']);
+      const { hoveredSpan } = getCalendarDaySettings(
+        testDay,
+        testAriaLabelFormat,
+        testDaySize,
+        modifiers,
+        testPhrases,
+      );
+      expect(hoveredSpan).to.equal(true);
+    });
+
+    it('should be false when day is some kind of selected', () => {
+      const selectedModifiers = new Set([
+        'selected',
+        'selected-start',
+        'selected-end',
+      ]);
+
+      selectedModifiers.forEach((selectedModifier) => {
+        const modifiers = new Set([selectedModifier]);
+        const { hoveredSpan } = getCalendarDaySettings(
+          testDay,
+          testAriaLabelFormat,
+          testDaySize,
+          modifiers,
+          testPhrases,
+        );
+        expect(hoveredSpan).to.equal(false);
+      });
+    });
+  });
+
+  describe('isOutsideRange', () => {
+    it('should be true when blocked-out-of-range', () => {
+      const modifiers = new Set(['blocked-out-of-range']);
+      const { isOutsideRange } = getCalendarDaySettings(
+        testDay,
+        testAriaLabelFormat,
+        testDaySize,
+        modifiers,
+        testPhrases,
+      );
+      expect(isOutsideRange).to.equal(true);
+    });
+
+    it('should be false when not blocked-out-of-range', () => {
+      const modifiers = new Set();
+      const { isOutsideRange } = getCalendarDaySettings(
+        testDay,
+        testAriaLabelFormat,
+        testDaySize,
+        modifiers,
+        testPhrases,
+      );
+      expect(isOutsideRange).to.equal(false);
+    });
+  });
+
+  describe('ariaLabel', () => {
+    const phrases = {};
+
+    beforeEach(() => {
+      phrases.chooseAvailableDate = sinon.stub().returns('chooseAvailableDate text');
+      phrases.dateIsSelected = sinon.stub().returns('dateIsSelected text');
+      phrases.dateIsUnavailable = sinon.stub().returns('dateIsUnavailable text');
+    });
+
+    afterEach(() => {
+      sinon.restore();
+    });
+
+    it('is formatted with the chooseAvailableDate phrase function when day is available', () => {
+      const modifiers = new Set();
+
+      const { ariaLabel } = getCalendarDaySettings(
+        testDay,
+        testAriaLabelFormat,
+        testDaySize,
+        modifiers,
+        phrases,
+      );
+
+      expect(phrases.chooseAvailableDate.calledWith(expectedFormattedDay)).to.equal(true);
+      expect(ariaLabel).to.equal('chooseAvailableDate text');
+    });
+
+    it('is formatted with the dateIsSelected phrase function when day is selected', () => {
+      const selectedModifiers = new Set(['selected', 'selected-start', 'selected-end']);
+
+      selectedModifiers.forEach((selectedModifier) => {
+        const modifiers = new Set().add(selectedModifier);
+
+        const { ariaLabel } = getCalendarDaySettings(
+          testDay,
+          testAriaLabelFormat,
+          testDaySize,
+          modifiers,
+          phrases,
+        );
+
+        expect(phrases.dateIsSelected.calledWith(expectedFormattedDay)).to.equal(true);
+        expect(ariaLabel).to.equal('dateIsSelected text');
+      });
+    });
+
+    it('is formatted with the dateIsUnavailable phrase function when day is not available', () => {
+      const modifiers = new Set().add(BLOCKED_MODIFIER);
+
+      const { ariaLabel } = getCalendarDaySettings(
+        testDay,
+        testAriaLabelFormat,
+        testDaySize,
+        modifiers,
+        phrases,
+      );
+
+      expect(phrases.dateIsUnavailable.calledWith(expectedFormattedDay)).to.equal(true);
+      expect(ariaLabel).to.equal('dateIsUnavailable text');
+    });
+  });
+});

From c9979779bcebec061c30f8ca93682a66bafe3c07 Mon Sep 17 00:00:00 2001
From: Erin Doyle <edoyle@cashstar.com>
Date: Mon, 18 Dec 2017 15:43:37 -0500
Subject: [PATCH 063/618] Tests clean up

---
 test/components/CalendarDay_spec.jsx          | 42 ++++++++------
 .../CustomizableCalendarDay_spec.jsx          | 58 +++++++++++--------
 2 files changed, 58 insertions(+), 42 deletions(-)

diff --git a/test/components/CalendarDay_spec.jsx b/test/components/CalendarDay_spec.jsx
index b9780d3688..e062954d9a 100644
--- a/test/components/CalendarDay_spec.jsx
+++ b/test/components/CalendarDay_spec.jsx
@@ -33,7 +33,7 @@ describe('CalendarDay', () => {
     });
 
     it('passes modifiers to renderDayContents', () => {
-      const modifiers = new Set().add(BLOCKED_MODIFIER);
+      const modifiers = new Set([BLOCKED_MODIFIER]);
       const renderDayContents = (day, mods) => `${day.format('dddd')}${mods.has(BLOCKED_MODIFIER) ? 'BLOCKED' : ''}`;
       const expected = `${moment().format('dddd')}BLOCKED`;
       const wrapper =
@@ -65,11 +65,13 @@ describe('CalendarDay', () => {
       it('is formatted with the chooseAvailableDate phrase function when day is available', () => {
         const modifiers = new Set();
 
-        const wrapper = shallow(<CalendarDay
-          modifiers={modifiers}
-          phrases={phrases}
-          day={day}
-        />).dive();
+        const wrapper = shallow((
+          <CalendarDay
+            modifiers={modifiers}
+            phrases={phrases}
+            day={day}
+          />
+        )).dive();
 
         expect(wrapper.prop('aria-label')).to.equal('chooseAvailableDate text');
       });
@@ -78,26 +80,30 @@ describe('CalendarDay', () => {
         const selectedModifiers = new Set(['selected', 'selected-start', 'selected-end']);
 
         selectedModifiers.forEach((selectedModifier) => {
-          const modifiers = new Set().add(selectedModifier);
+          const modifiers = new Set([selectedModifier]);
 
-          const wrapper = shallow(<CalendarDay
-            modifiers={modifiers}
-            phrases={phrases}
-            day={day}
-          />).dive();
+          const wrapper = shallow((
+            <CalendarDay
+              modifiers={modifiers}
+              phrases={phrases}
+              day={day}
+            />
+          )).dive();
 
           expect(wrapper.prop('aria-label')).to.equal('dateIsSelected text');
         });
       });
 
       it('is formatted with the dateIsUnavailable phrase function when day is not available', () => {
-        const modifiers = new Set().add(BLOCKED_MODIFIER);
+        const modifiers = new Set([BLOCKED_MODIFIER]);
 
-        const wrapper = shallow(<CalendarDay
-          modifiers={modifiers}
-          phrases={phrases}
-          day={day}
-        />).dive();
+        const wrapper = shallow((
+          <CalendarDay
+            modifiers={modifiers}
+            phrases={phrases}
+            day={day}
+          />
+        )).dive();
 
         expect(wrapper.prop('aria-label')).to.equal('dateIsUnavailable text');
       });
diff --git a/test/components/CustomizableCalendarDay_spec.jsx b/test/components/CustomizableCalendarDay_spec.jsx
index 83fc8bfa44..9534defead 100644
--- a/test/components/CustomizableCalendarDay_spec.jsx
+++ b/test/components/CustomizableCalendarDay_spec.jsx
@@ -33,7 +33,7 @@ describe('CustomizableCalendarDay', () => {
     });
 
     it('passes modifiers to renderDay', () => {
-      const modifiers = new Set().add(BLOCKED_MODIFIER);
+      const modifiers = new Set([BLOCKED_MODIFIER]);
       const renderDay = (day, mods) => `${day.format('dddd')}${mods.has(BLOCKED_MODIFIER) ? 'BLOCKED' : ''}`;
       const expected = `${moment().format('dddd')}BLOCKED`;
       const wrapper = shallow(<CustomizableCalendarDay
@@ -67,11 +67,13 @@ describe('CustomizableCalendarDay', () => {
       it('is formatted with the chooseAvailableDate phrase function when day is available', () => {
         const modifiers = new Set();
 
-        const wrapper = shallow(<CustomizableCalendarDay
-          modifiers={modifiers}
-          phrases={phrases}
-          day={day}
-        />).dive();
+        const wrapper = shallow((
+          <CustomizableCalendarDay
+            modifiers={modifiers}
+            phrases={phrases}
+            day={day}
+          />
+        )).dive();
 
         expect(wrapper.prop('aria-label')).to.equal('chooseAvailableDate text');
       });
@@ -80,26 +82,30 @@ describe('CustomizableCalendarDay', () => {
         const selectedModifiers = new Set(['selected', 'selected-start', 'selected-end']);
 
         selectedModifiers.forEach((selectedModifier) => {
-          const modifiers = new Set().add(selectedModifier);
+          const modifiers = new Set([selectedModifier]);
 
-          const wrapper = shallow(<CustomizableCalendarDay
-            modifiers={modifiers}
-            phrases={phrases}
-            day={day}
-          />).dive();
+          const wrapper = shallow((
+            <CustomizableCalendarDay
+              modifiers={modifiers}
+              phrases={phrases}
+              day={day}
+            />
+          )).dive();
 
           expect(wrapper.prop('aria-label')).to.equal('dateIsSelected text');
         });
       });
 
       it('is formatted with the dateIsUnavailable phrase function when day is not available', () => {
-        const modifiers = new Set().add(BLOCKED_MODIFIER);
+        const modifiers = new Set([BLOCKED_MODIFIER]);
 
-        const wrapper = shallow(<CustomizableCalendarDay
-          modifiers={modifiers}
-          phrases={phrases}
-          day={day}
-        />).dive();
+        const wrapper = shallow((
+          <CustomizableCalendarDay
+            modifiers={modifiers}
+            phrases={phrases}
+            day={day}
+          />
+        )).dive();
 
         expect(wrapper.prop('aria-label')).to.equal('dateIsUnavailable text');
       });
@@ -234,9 +240,11 @@ describe('CustomizableCalendarDay', () => {
 
     it('calls props.onDayMouseEnter', () => {
       const onMouseEnterStub = sinon.stub();
-      const wrapper = shallow(<CustomizableCalendarDay
-        onDayMouseEnter={onMouseEnterStub}
-      />).dive();
+      const wrapper = shallow((
+        <CustomizableCalendarDay
+          onDayMouseEnter={onMouseEnterStub}
+        />
+      )).dive();
       wrapper.instance().onDayMouseEnter();
       expect(onMouseEnterStub).to.have.property('callCount', 1);
     });
@@ -263,9 +271,11 @@ describe('CustomizableCalendarDay', () => {
 
     it('calls props.onDayMouseLeave', () => {
       const onMouseLeaveStub = sinon.stub();
-      const wrapper = shallow(<CustomizableCalendarDay
-        onDayMouseLeave={onMouseLeaveStub}
-      />).dive();
+      const wrapper = shallow((
+        <CustomizableCalendarDay
+          onDayMouseLeave={onMouseLeaveStub}
+        />
+      )).dive();
       wrapper.instance().onDayMouseLeave();
       expect(onMouseLeaveStub).to.have.property('callCount', 1);
     });

From 44f384273c7f869753d73b66d10ed36cd7eb61cc Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Wed, 10 Jan 2018 01:10:19 -0800
Subject: [PATCH 064/618] [Dev Deps] update `sinon`

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 30774d22ec..032a138672 100644
--- a/package.json
+++ b/package.json
@@ -104,7 +104,7 @@
     "rimraf": "^2.6.2",
     "safe-publish-latest": "^1.1.1",
     "sass-loader": "^6.0.6",
-    "sinon": "^4.1.3",
+    "sinon": "^4.1.4",
     "sinon-sandbox": "^1.0.2",
     "style-loader": "^0.19.0",
     "webpack": "^2.6.1"

From 6ccee38879a41951f474cda421fb87466ceff81e Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Wed, 3 Jan 2018 14:12:22 -0800
Subject: [PATCH 065/618] Hide invisible first month using `visibility: hidden`

---
 src/components/CalendarMonthGrid.jsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/CalendarMonthGrid.jsx b/src/components/CalendarMonthGrid.jsx
index d94e87b33a..8dfd8ee940 100644
--- a/src/components/CalendarMonthGrid.jsx
+++ b/src/components/CalendarMonthGrid.jsx
@@ -301,6 +301,7 @@ class CalendarMonthGrid extends React.Component {
                   position: 'absolute',
                   top: -this.calendarMonthHeights[0],
                 },
+                !isVisible && !isAnimating && styles.CalendarMonthGrid_month__hidden,
               )}
             >
               <CalendarMonth
@@ -372,4 +373,8 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     opacity: 0,
     pointerEvents: 'none',
   },
+
+  CalendarMonthGrid_month__hidden: {
+    visibility: 'hidden',
+  },
 }))(CalendarMonthGrid);

From 32913a2621c973952e27c9e05f4bbe050a3726f2 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Tue, 16 Jan 2018 12:49:51 -0800
Subject: [PATCH 066/618] Add example id values for startDateId/endDateId

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 1333774ae6..b3253f426b 100644
--- a/README.md
+++ b/README.md
@@ -103,9 +103,9 @@ Here is the minimum *REQUIRED* setup you need to get the `DateRangePicker` worki
 ```jsx
 <DateRangePicker
   startDate={this.state.startDate} // momentPropTypes.momentObj or null,
-  startDateId=// PropTypes.string.isRequired,
+  startDateId="your_unique_start_date_id" // PropTypes.string.isRequired,
   endDate={this.state.endDate} // momentPropTypes.momentObj or null,
-  endDateId=// PropTypes.string.isRequired,
+  endDateId="your_unique_end_date_id" // PropTypes.string.isRequired,
   onDatesChange={({ startDate, endDate }) => this.setState({ startDate, endDate })} // PropTypes.func.isRequired,
   focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null,
   onFocusChange={focusedInput => this.setState({ focusedInput })} // PropTypes.func.isRequired,

From 26b6786444e098812ef00a147bbc5feeb6f68a5d Mon Sep 17 00:00:00 2001
From: codejunkienick <nickdeveloper@protonmail.com>
Date: Thu, 28 Dec 2017 13:22:42 +0500
Subject: [PATCH 067/618] fix typo

---
 src/components/DateInput.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
index 0e36647501..946384c01f 100644
--- a/src/components/DateInput.jsx
+++ b/src/components/DateInput.jsx
@@ -235,7 +235,7 @@ class DateInput extends React.Component {
               openDirection === OPEN_DOWN && {
                 top: inputHeight + verticalSpacing - FANG_HEIGHT_PX - 1,
               },
-              openDirection === OPEN_DOWN && {
+              openDirection === OPEN_UP && {
                 bottom: inputHeight + verticalSpacing - FANG_HEIGHT_PX - 1,
               },
             )}

From 361a31b04723abc59b9ad60f2d9b09cb451f72c6 Mon Sep 17 00:00:00 2001
From: Dmytriy Lytvynenko <>
Date: Sun, 7 Jan 2018 20:00:11 +0200
Subject: [PATCH 068/618] Fix issue with clear dates after manually changing
 date by highlighting text

---
 src/components/DateInput.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
index 946384c01f..e7c7707fd8 100644
--- a/src/components/DateInput.jsx
+++ b/src/components/DateInput.jsx
@@ -93,7 +93,7 @@ class DateInput extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (!this.props.displayValue && nextProps.displayValue) {
+    if (nextProps.displayValue) {
       this.setState({
         dateString: '',
       });

From 67985dcc9d02159ad21351bf20f7b60876e2d1e8 Mon Sep 17 00:00:00 2001
From: Dmytriy Lytvynenko <>
Date: Sun, 7 Jan 2018 22:22:37 +0200
Subject: [PATCH 069/618] Update condition and move onChange to setState
 callback

---
 src/components/DateInput.jsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
index e7c7707fd8..cbba041ff8 100644
--- a/src/components/DateInput.jsx
+++ b/src/components/DateInput.jsx
@@ -93,7 +93,7 @@ class DateInput extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.displayValue) {
+    if (this.state.dateString && nextProps.displayValue) {
       this.setState({
         dateString: '',
       });
@@ -121,8 +121,7 @@ class DateInput extends React.Component {
     if (dateString[dateString.length - 1] === '?') {
       onKeyDownQuestionMark(e);
     } else {
-      this.setState({ dateString });
-      onChange(dateString);
+      this.setState({ dateString }, () => onChange(dateString));
     }
   }
 

From 2f6f2cc782f28e2228057a8591206fa8814a339b Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Tue, 16 Jan 2018 10:05:07 -0800
Subject: [PATCH 070/618] Add DateInput regression test

---
 test/components/DateInput_spec.jsx | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/test/components/DateInput_spec.jsx b/test/components/DateInput_spec.jsx
index 90102761d8..1ca40249d5 100644
--- a/test/components/DateInput_spec.jsx
+++ b/test/components/DateInput_spec.jsx
@@ -89,6 +89,28 @@ describe('DateInput', () => {
     });
   });
 
+  describe('#componentWillReceiveProps', () => {
+    describe('nextProps.displayValue exists', () => {
+      it('sets state.dateString to \'\'', () => {
+        const dateString = 'foo123';
+        const wrapper = shallow(<DateInput id="date" />).dive();
+        wrapper.setState({ dateString });
+        wrapper.instance().componentWillReceiveProps({ displayValue: '1991-07-13' });
+        expect(wrapper.state()).to.have.property('dateString', '');
+      });
+    });
+
+    describe('nextProps.displayValue does not exist', () => {
+      it('does not change state.dateString', () => {
+        const dateString = 'foo123';
+        const wrapper = shallow(<DateInput id="date" />).dive();
+        wrapper.setState({ dateString });
+        wrapper.instance().componentWillReceiveProps({ displayValue: null });
+        expect(wrapper.state()).to.have.property('dateString', dateString);
+      });
+    });
+  });
+
   describe('#onChange', () => {
     const evt = { target: { value: 'foobar' } };
     it('sets state.dateString to e.target.value', () => {

From 90b25bf38c7fd9afa5d10ab604bc4274a5fa796b Mon Sep 17 00:00:00 2001
From: Ben Rudolph <rudolphben@gmail.com>
Date: Wed, 17 Jan 2018 11:01:00 -0800
Subject: [PATCH 071/618] Add small property to docs

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index b3253f426b..48c9ecdd07 100644
--- a/README.md
+++ b/README.md
@@ -128,6 +128,7 @@ customArrowIcon: PropTypes.node,
 customCloseIcon: PropTypes.node,
 noBorder: PropTypes.bool,
 block: PropTypes.bool,
+small: PropTypes.bool,
 
 // calendar presentation and interaction related props
 renderMonth: PropTypes.func,

From 9f0b8fb8b9968b10b50bd23ddf51cb737e256ede Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Wed, 17 Jan 2018 13:44:09 -0800
Subject: [PATCH 072/618] Version 16.1.0

---
 CHANGELOG.md | 6 ++++++
 package.json | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 283f7b972b..0624ccf3ef 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Change Log
 
+## 16.1.0
+- [fix] Allow for changing of the input value via highlight and replace ([#955](https://github.com/airbnb/react-dates/pull/955))
+- [fix] Fix OPEN_UP styling ([#925](https://github.com/airbnb/react-dates/pull/925))
+- [fix] Don't read invisible months to the screen reader ([#940](https://github.com/airbnb/react-dates/pull/940))
+- [new] Add phrase for aria-label for the selected day ([#905](https://github.com/airbnb/react-dates/pull/905))
+
 ## 16.0.2
 - [fix] Fix keyboard navigation issues ([#916](https://github.com/airbnb/react-dates/pull/916))
 - [fix] Fix React warnings when events are referenced later ([#682](https://github.com/airbnb/react-dates/pull/682))
diff --git a/package.json b/package.json
index 032a138672..21691b92d8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "16.0.2",
+  "version": "16.1.0",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 14771e343a97003b40acb3e07453e083376db39d Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Wed, 17 Jan 2018 13:32:21 -0800
Subject: [PATCH 073/618] Add regular option to DRP and SDP

---
 README.md                                         | 3 +++
 examples/DateRangePickerWrapper.jsx               | 1 +
 examples/SingleDatePickerWrapper.jsx              | 1 +
 src/components/DateInput.jsx                      | 8 ++++++++
 src/components/DateRangePicker.jsx                | 3 +++
 src/components/DateRangePickerInput.jsx           | 5 +++++
 src/components/DateRangePickerInputController.jsx | 4 ++++
 src/components/SingleDatePicker.jsx               | 3 +++
 src/components/SingleDatePickerInput.jsx          | 5 +++++
 src/shapes/DateRangePickerShape.js                | 1 +
 src/shapes/SingleDatePickerShape.js               | 1 +
 stories/DateRangePicker_input.js                  | 8 ++++++++
 stories/SingleDatePicker_input.js                 | 7 +++++++
 13 files changed, 50 insertions(+)

diff --git a/README.md b/README.md
index 48c9ecdd07..11cdbf6b90 100644
--- a/README.md
+++ b/README.md
@@ -129,6 +129,7 @@ customCloseIcon: PropTypes.node,
 noBorder: PropTypes.bool,
 block: PropTypes.bool,
 small: PropTypes.bool,
+regular: PropTypes.bool,
 
 // calendar presentation and interaction related props
 renderMonth: PropTypes.func,
@@ -203,6 +204,8 @@ showDefaultInputIcon: PropTypes.bool,
 customInputIcon: PropTypes.node,
 noBorder: PropTypes.bool,
 block: PropTypes.bool,
+small: PropTypes.bool,
+regular: PropTypes.bool,
 
 // calendar presentation and interaction related props
 renderMonth: PropTypes.func,
diff --git a/examples/DateRangePickerWrapper.jsx b/examples/DateRangePickerWrapper.jsx
index ba0018e69c..9a43817293 100644
--- a/examples/DateRangePickerWrapper.jsx
+++ b/examples/DateRangePickerWrapper.jsx
@@ -49,6 +49,7 @@ const defaultProps = {
   customCloseIcon: null,
   block: false,
   small: false,
+  regular: false,
 
   // calendar presentation and interaction related props
   renderMonth: null,
diff --git a/examples/SingleDatePickerWrapper.jsx b/examples/SingleDatePickerWrapper.jsx
index 328b12a0b6..4c3d91ec32 100644
--- a/examples/SingleDatePickerWrapper.jsx
+++ b/examples/SingleDatePickerWrapper.jsx
@@ -40,6 +40,7 @@ const defaultProps = {
   customInputIcon: null,
   block: false,
   small: false,
+  regular: false,
   verticalSpacing: undefined,
 
   // calendar presentation and interaction related props
diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
index cbba041ff8..10bf83f714 100644
--- a/src/components/DateInput.jsx
+++ b/src/components/DateInput.jsx
@@ -35,6 +35,7 @@ const propTypes = forbidExtraProps({
   showCaret: PropTypes.bool,
   verticalSpacing: nonNegativeInteger,
   small: PropTypes.bool,
+  regular: PropTypes.bool,
 
   onChange: PropTypes.func,
   onFocus: PropTypes.func,
@@ -60,6 +61,7 @@ const defaultProps = {
   showCaret: false,
   verticalSpacing: DEFAULT_VERTICAL_SPACING,
   small: false,
+  regular: false,
 
   onChange() {},
   onFocus() {},
@@ -178,6 +180,7 @@ class DateInput extends React.Component {
       openDirection,
       verticalSpacing,
       small,
+      regular,
       styles,
       theme: { reactDates },
     } = this.props;
@@ -204,6 +207,7 @@ class DateInput extends React.Component {
           {...css(
             styles.DateInput_input,
             small && styles.DateInput_input__small,
+            regular && styles.DateInput_input__regular,
             readOnly && styles.DateInput_input__readOnly,
             focused && styles.DateInput_input__focused,
             disabled && styles.DateInput_input__disabled,
@@ -316,6 +320,10 @@ export default withStyles(({
     paddingRight: spacing.displayTextPaddingRight_small,
   },
 
+  DateInput_input__regular: {
+    fontWeight: 'auto',
+  },
+
   DateInput_input__readOnly: {
     userSelect: 'none',
   },
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 0b4484de24..b523a2c814 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -64,6 +64,7 @@ const defaultProps = {
   noBorder: false,
   block: false,
   small: false,
+  regular: false,
 
   // calendar presentation and interaction related props
   renderMonth: null,
@@ -460,6 +461,7 @@ class DateRangePicker extends React.Component {
       block,
       verticalSpacing,
       small,
+      regular,
       styles,
     } = this.props;
 
@@ -515,6 +517,7 @@ class DateRangePicker extends React.Component {
             noBorder={noBorder}
             block={block}
             small={small}
+            regular={regular}
             verticalSpacing={verticalSpacing}
           />
 
diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index ebf041c4d5..a07c9cf540 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -61,6 +61,7 @@ const propTypes = forbidExtraProps({
   noBorder: PropTypes.bool,
   block: PropTypes.bool,
   small: PropTypes.bool,
+  regular: PropTypes.bool,
   verticalSpacing: nonNegativeInteger,
 
   // accessibility
@@ -107,6 +108,7 @@ const defaultProps = {
   noBorder: false,
   block: false,
   small: false,
+  regular: false,
   verticalSpacing: undefined,
 
   // accessibility
@@ -155,6 +157,7 @@ function DateRangePickerInput({
   block,
   verticalSpacing,
   small,
+  regular,
   styles,
 }) {
   const calendarIcon = customInputIcon || (
@@ -230,6 +233,7 @@ function DateRangePickerInput({
         onKeyDownQuestionMark={onKeyDownQuestionMark}
         verticalSpacing={verticalSpacing}
         small={small}
+        regular={regular}
       />
 
       <div
@@ -259,6 +263,7 @@ function DateRangePickerInput({
         onKeyDownQuestionMark={onKeyDownQuestionMark}
         verticalSpacing={verticalSpacing}
         small={small}
+        regular={regular}
       />
 
       {showClearDates && (
diff --git a/src/components/DateRangePickerInputController.jsx b/src/components/DateRangePickerInputController.jsx
index 94e384b9ff..54062c5162 100644
--- a/src/components/DateRangePickerInputController.jsx
+++ b/src/components/DateRangePickerInputController.jsx
@@ -44,6 +44,7 @@ const propTypes = forbidExtraProps({
   noBorder: PropTypes.bool,
   block: PropTypes.bool,
   small: PropTypes.bool,
+  regular: PropTypes.bool,
   verticalSpacing: nonNegativeInteger,
 
   keepOpenOnDateSelect: PropTypes.bool,
@@ -95,6 +96,7 @@ const defaultProps = {
   noBorder: false,
   block: false,
   small: false,
+  regular: false,
   verticalSpacing: undefined,
 
   keepOpenOnDateSelect: false,
@@ -273,6 +275,7 @@ export default class DateRangePickerInputController extends React.Component {
       noBorder,
       block,
       small,
+      regular,
       verticalSpacing,
     } = this.props;
 
@@ -316,6 +319,7 @@ export default class DateRangePickerInputController extends React.Component {
         noBorder={noBorder}
         block={block}
         small={small}
+        regular={regular}
         verticalSpacing={verticalSpacing}
       />
     );
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index 58b79446b1..952cfcdcf7 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -60,6 +60,7 @@ const defaultProps = {
   noBorder: false,
   block: false,
   small: false,
+  regular: false,
   verticalSpacing: DEFAULT_VERTICAL_SPACING,
 
   // calendar presentation and interaction related props
@@ -479,6 +480,7 @@ class SingleDatePicker extends React.Component {
       noBorder,
       block,
       small,
+      regular,
       verticalSpacing,
       styles,
     } = this.props;
@@ -528,6 +530,7 @@ class SingleDatePicker extends React.Component {
             noBorder={noBorder}
             block={block}
             small={small}
+            regular={regular}
             verticalSpacing={verticalSpacing}
           />
 
diff --git a/src/components/SingleDatePickerInput.jsx b/src/components/SingleDatePickerInput.jsx
index af362629f5..f68a371b03 100644
--- a/src/components/SingleDatePickerInput.jsx
+++ b/src/components/SingleDatePickerInput.jsx
@@ -37,6 +37,7 @@ const propTypes = forbidExtraProps({
   noBorder: PropTypes.bool,
   block: PropTypes.bool,
   small: PropTypes.bool,
+  regular: PropTypes.bool,
   verticalSpacing: nonNegativeInteger,
 
   onChange: PropTypes.func,
@@ -70,6 +71,8 @@ const defaultProps = {
   isRTL: false,
   noBorder: false,
   block: false,
+  small: false,
+  regular: false,
   verticalSpacing: undefined,
 
   onChange() {},
@@ -113,6 +116,7 @@ function SingleDatePickerInput({
   noBorder,
   block,
   small,
+  regular,
   verticalSpacing,
   styles,
 }) {
@@ -174,6 +178,7 @@ function SingleDatePickerInput({
         openDirection={openDirection}
         verticalSpacing={verticalSpacing}
         small={small}
+        regular={regular}
       />
 
       {showClearDate && (
diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js
index d1f0d9b2a7..4e713b1fbe 100644
--- a/src/shapes/DateRangePickerShape.js
+++ b/src/shapes/DateRangePickerShape.js
@@ -41,6 +41,7 @@ export default {
   noBorder: PropTypes.bool,
   block: PropTypes.bool,
   small: PropTypes.bool,
+  regular: PropTypes.bool,
 
   // calendar presentation and interaction related props
   renderMonth: PropTypes.func,
diff --git a/src/shapes/SingleDatePickerShape.js b/src/shapes/SingleDatePickerShape.js
index b464549d76..2361ad08eb 100644
--- a/src/shapes/SingleDatePickerShape.js
+++ b/src/shapes/SingleDatePickerShape.js
@@ -34,6 +34,7 @@ export default {
   noBorder: PropTypes.bool,
   block: PropTypes.bool,
   small: PropTypes.bool,
+  regular: PropTypes.bool,
   verticalSpacing: nonNegativeInteger,
 
   // calendar presentation and interaction related props
diff --git a/stories/DateRangePicker_input.js b/stories/DateRangePicker_input.js
index 420cdcea91..395c1a6971 100644
--- a/stories/DateRangePicker_input.js
+++ b/stories/DateRangePicker_input.js
@@ -142,4 +142,12 @@ storiesOf('DRP - Input Props', module)
       showClearDates
       small
     />
+  ))
+  .addWithInfo('regular styling', () => (
+    <DateRangePickerWrapper
+      initialStartDate={moment().add(3, 'days')}
+      initialEndDate={moment().add(10, 'days')}
+      showClearDates
+      regular
+    />
   ));
diff --git a/stories/SingleDatePicker_input.js b/stories/SingleDatePicker_input.js
index f5e88b8c82..3e368f0835 100644
--- a/stories/SingleDatePicker_input.js
+++ b/stories/SingleDatePicker_input.js
@@ -91,4 +91,11 @@ storiesOf('SDP - Input Props', module)
       showClearDate
       small
     />
+  ))
+  .addWithInfo('regular styling', () => (
+    <SingleDatePickerWrapper
+      initialDate={moment().add(3, 'days')}
+      showClearDate
+      regular
+    />
   ));

From d188c27f30870bd6e97561e205f0d64b808bab11 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Thu, 18 Jan 2018 16:44:14 -0800
Subject: [PATCH 074/618] Quick fixes for CustomizableCalendarDay

---
 src/components/CustomizableCalendarDay.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/CustomizableCalendarDay.jsx b/src/components/CustomizableCalendarDay.jsx
index dbf45b51e3..5218b811a2 100644
--- a/src/components/CustomizableCalendarDay.jsx
+++ b/src/components/CustomizableCalendarDay.jsx
@@ -224,7 +224,7 @@ class CustomizableCalendarDay extends React.Component {
           styles.CalendarDay,
           useDefaultCursor && styles.CalendarDay__defaultCursor,
           daySizeStyles,
-          ...hasCustomStyles && [
+          ...!!hasCustomStyles && [
             defaultStyles,
             isOutsideDay && outsideStyles,
             modifiers.has('today') && todayStyles,
@@ -253,6 +253,7 @@ class CustomizableCalendarDay extends React.Component {
             modifiers.has('last-in-range') && styles.CalendarDay__last_in_range,
             modifiers.has('selected-start') && styles.CalendarDay__selected_start,
             modifiers.has('selected-end') && styles.CalendarDay__selected_end,
+            selected && styles.CalendarDay__selected,
             isOutsideRange && (blockedOutOfRangeStyles || styles.CalendarDay__blocked_out_of_range),
           ],
         )}

From bc338d248e79be4da0995c2264e13a105ccdbed1 Mon Sep 17 00:00:00 2001
From: Jake Clements <jclements@opentable.com>
Date: Fri, 19 Jan 2018 11:40:53 +1100
Subject: [PATCH 075/618] Add date-offset picker

---
 examples/DayPickerRangeControllerWrapper.jsx  |   4 +
 src/components/CalendarDay.jsx                |   7 ++
 src/components/DayPickerRangeController.jsx   | 104 +++++++++++++-----
 src/theme/DefaultTheme.js                     |   1 +
 src/utils/getSelectedDateOffset.js            |   6 +
 stories/DayPickerRangeController.js           |  35 ++++++
 .../DayPickerRangeController_spec.jsx         |  60 ++++++++++
 test/utils/getSelectedDateOffset_spec.js      |  32 ++++++
 8 files changed, 221 insertions(+), 28 deletions(-)
 create mode 100644 src/utils/getSelectedDateOffset.js
 create mode 100644 test/utils/getSelectedDateOffset_spec.js

diff --git a/examples/DayPickerRangeControllerWrapper.jsx b/examples/DayPickerRangeControllerWrapper.jsx
index 29e04b639f..16199d3c0c 100644
--- a/examples/DayPickerRangeControllerWrapper.jsx
+++ b/examples/DayPickerRangeControllerWrapper.jsx
@@ -18,6 +18,8 @@ const propTypes = forbidExtraProps({
   autoFocusEndDate: PropTypes.bool,
   initialStartDate: momentPropTypes.momentObj,
   initialEndDate: momentPropTypes.momentObj,
+  startDateOffset: PropTypes.func,
+  endDateOffset: PropTypes.func,
 
   keepOpenOnDateSelect: PropTypes.bool,
   minimumNights: PropTypes.number,
@@ -53,6 +55,8 @@ const defaultProps = {
   autoFocusEndDate: false,
   initialStartDate: null,
   initialEndDate: null,
+  startDateOffset: undefined,
+  endDateOffset: undefined,
 
   // day presentation and interaction related props
   renderCalendarDay: undefined,
diff --git a/src/components/CalendarDay.jsx b/src/components/CalendarDay.jsx
index f7a362af13..5ea590a222 100644
--- a/src/components/CalendarDay.jsx
+++ b/src/components/CalendarDay.jsx
@@ -129,6 +129,7 @@ class CalendarDay extends React.Component {
           styles.CalendarDay__default,
           isOutsideDay && styles.CalendarDay__outside,
           modifiers.has('today') && styles.CalendarDay__today,
+          modifiers.has('hovered-offset') && styles.CalendarDay__hovered_offset,
           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,
@@ -189,6 +190,12 @@ export default withStyles(({ reactDates: { color, font } }) => ({
     },
   },
 
+  CalendarDay__hovered_offset: {
+    background: color.core.borderBright,
+    border: `1px double ${color.core.borderLight}`,
+    color: 'inherit',
+  },
+
   CalendarDay__outside: {
     border: 0,
 
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 6204ac7e11..4272e36478 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -18,6 +18,8 @@ import isBeforeDay from '../utils/isBeforeDay';
 import getVisibleDays from '../utils/getVisibleDays';
 import isDayVisible from '../utils/isDayVisible';
 
+import getSelectedDateOffset from '../utils/getSelectedDateOffset';
+
 import toISODateString from '../utils/toISODateString';
 import toISOMonthString from '../utils/toISOMonthString';
 
@@ -39,6 +41,8 @@ const propTypes = forbidExtraProps({
   startDate: momentPropTypes.momentObj,
   endDate: momentPropTypes.momentObj,
   onDatesChange: PropTypes.func,
+  startDateOffset: PropTypes.func,
+  endDateOffset: PropTypes.func,
 
   focusedInput: FocusedInputShape,
   onFocusChange: PropTypes.func,
@@ -92,6 +96,8 @@ const defaultProps = {
   startDate: undefined, // TODO: use null
   endDate: undefined, // TODO: use null
   onDatesChange() {},
+  startDateOffset: undefined,
+  endDateOffset: undefined,
 
   focusedInput: null,
   onFocusChange() {},
@@ -170,6 +176,7 @@ export default class DayPickerRangeController extends React.Component {
       'last-in-range': day => this.isLastInRange(day),
       hovered: day => this.isHovered(day),
       'hovered-span': day => this.isInHoveredSpan(day),
+      'hovered-offset': day => this.isInHoveredSpan(day),
       'after-hovered-start': day => this.isDayAfterHoveredStartDate(day),
     };
 
@@ -423,6 +430,8 @@ export default class DayPickerRangeController extends React.Component {
       onFocusChange,
       onClose,
       onDatesChange,
+      startDateOffset,
+      endDateOffset,
     } = this.props;
 
     if (e) e.preventDefault();
@@ -430,7 +439,15 @@ export default class DayPickerRangeController extends React.Component {
 
     let { startDate, endDate } = this.props;
 
-    if (focusedInput === START_DATE) {
+    if (startDateOffset || endDateOffset) {
+      startDate = getSelectedDateOffset(startDateOffset, day);
+      endDate = getSelectedDateOffset(endDateOffset, day);
+
+      if (!keepOpenOnDateSelect) {
+        onFocusChange(null);
+        onClose({ startDate, endDate });
+      }
+    } else if (focusedInput === START_DATE) {
       onFocusChange(END_DATE);
 
       startDate = day;
@@ -467,51 +484,78 @@ export default class DayPickerRangeController extends React.Component {
       endDate,
       focusedInput,
       minimumNights,
+      startDateOffset,
+      endDateOffset,
     } = this.props;
     const { hoverDate, visibleDays } = this.state;
+    let dateOffset = null;
 
     if (focusedInput) {
+      const hasOffset = startDateOffset || endDateOffset;
       let modifiers = {};
-      modifiers = this.deleteModifier(modifiers, hoverDate, 'hovered');
-      modifiers = this.addModifier(modifiers, day, 'hovered');
 
-      if (startDate && !endDate && focusedInput === END_DATE) {
-        if (isAfterDay(hoverDate, startDate)) {
-          const endSpan = hoverDate.clone().add(1, 'day');
-          modifiers = this.deleteModifierFromRange(modifiers, startDate, endSpan, 'hovered-span');
-        }
+      if (hasOffset) {
+        const start = getSelectedDateOffset(startDateOffset, day);
+        const end = getSelectedDateOffset(endDateOffset, day, rangeDay => rangeDay.add(1, 'day'));
 
-        if (!this.isBlocked(day) && isAfterDay(day, startDate)) {
-          const endSpan = day.clone().add(1, 'day');
-          modifiers = this.addModifierToRange(modifiers, startDate, endSpan, 'hovered-span');
+        dateOffset = {
+          start,
+          end,
+        };
+
+        if (this.state.dateOffset && this.state.dateOffset.start && this.state.dateOffset.end) {
+          modifiers = this.deleteModifierFromRange(modifiers, this.state.dateOffset.start, this.state.dateOffset.end, 'hovered-offset');
         }
+        modifiers = this.addModifierToRange(modifiers, start, end, 'hovered-offset');
       }
 
-      if (!startDate && endDate && focusedInput === START_DATE) {
-        if (isBeforeDay(hoverDate, endDate)) {
-          modifiers = this.deleteModifierFromRange(modifiers, hoverDate, endDate, 'hovered-span');
+      if (!hasOffset) {
+        modifiers = this.deleteModifier(modifiers, hoverDate, 'hovered');
+        modifiers = this.addModifier(modifiers, day, 'hovered');
+
+        if (startDate && !endDate && focusedInput === END_DATE) {
+          if (isAfterDay(hoverDate, startDate)) {
+            const endSpan = hoverDate.clone().add(1, 'day');
+            modifiers = this.deleteModifierFromRange(modifiers, startDate, endSpan, 'hovered-span');
+          }
+
+          if (!this.isBlocked(day) && isAfterDay(day, startDate)) {
+            const endSpan = day.clone().add(1, 'day');
+            modifiers = this.addModifierToRange(modifiers, startDate, endSpan, 'hovered-span');
+          }
         }
 
-        if (!this.isBlocked(day) && isBeforeDay(day, endDate)) {
-          modifiers = this.addModifierToRange(modifiers, day, endDate, 'hovered-span');
+        if (!startDate && endDate && focusedInput === START_DATE) {
+          if (isBeforeDay(hoverDate, endDate)) {
+            modifiers = this.deleteModifierFromRange(modifiers, hoverDate, endDate, 'hovered-span');
+          }
+
+          if (!this.isBlocked(day) && isBeforeDay(day, endDate)) {
+            modifiers = this.addModifierToRange(modifiers, day, endDate, 'hovered-span');
+          }
         }
-      }
 
-      if (startDate) {
-        if (isSameDay(day, startDate)) {
-          const newStartSpan = startDate.clone().add(1, 'day');
-          const newEndSpan = startDate.clone().add(minimumNights + 1, 'days');
-          modifiers = this.addModifierToRange(
-            modifiers,
-            newStartSpan,
-            newEndSpan,
-            'after-hovered-start',
-          );
+        if (startDate) {
+          const startSpan = startDate.clone().add(1, 'day');
+          const endSpan = startDate.clone().add(minimumNights + 1, 'days');
+          modifiers = this.deleteModifierFromRange(modifiers, startSpan, endSpan, 'after-hovered-start');
+
+          if (isSameDay(day, startDate)) {
+            const newStartSpan = startDate.clone().add(1, 'day');
+            const newEndSpan = startDate.clone().add(minimumNights + 1, 'days');
+            modifiers = this.addModifierToRange(
+              modifiers,
+              newStartSpan,
+              newEndSpan,
+              'after-hovered-start',
+            );
+          }
         }
       }
 
       this.setState({
         hoverDate: day,
+        dateOffset,
         visibleDays: {
           ...visibleDays,
           ...modifiers,
@@ -522,12 +566,16 @@ export default class DayPickerRangeController extends React.Component {
 
   onDayMouseLeave(day) {
     const { startDate, endDate, minimumNights } = this.props;
-    const { hoverDate, visibleDays } = this.state;
+    const { hoverDate, visibleDays, dateOffset } = this.state;
     if (this.isTouchDevice || !hoverDate) return;
 
     let modifiers = {};
     modifiers = this.deleteModifier(modifiers, hoverDate, 'hovered');
 
+    if (dateOffset) {
+      modifiers = this.deleteModifierFromRange(modifiers, this.state.dateOffset.start, this.state.dateOffset.end, 'hovered-offset');
+    }
+
     if (startDate && !endDate && isAfterDay(hoverDate, startDate)) {
       const endSpan = hoverDate.clone().add(1, 'day');
       modifiers = this.deleteModifierFromRange(modifiers, startDate, endSpan, 'hovered-span');
diff --git a/src/theme/DefaultTheme.js b/src/theme/DefaultTheme.js
index d2e278aeac..81216ac40a 100644
--- a/src/theme/DefaultTheme.js
+++ b/src/theme/DefaultTheme.js
@@ -9,6 +9,7 @@ const core = {
   border: '#dbdbdb',
   borderLight: '#e4e7e7',
   borderLighter: '#eceeee',
+  borderBright: '#f4f5f5',
 
   primary: '#00a699',
   primaryShade_1: '#33dacd',
diff --git a/src/utils/getSelectedDateOffset.js b/src/utils/getSelectedDateOffset.js
new file mode 100644
index 0000000000..6200f9b65d
--- /dev/null
+++ b/src/utils/getSelectedDateOffset.js
@@ -0,0 +1,6 @@
+const defaultModifier = day => day;
+
+export default function getSelectedDateOffset(fn, day, modifier = defaultModifier) {
+  if (!fn) return day;
+  return modifier(fn(day.clone()));
+}
diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
index ca1c7fb446..657e78c57b 100644
--- a/stories/DayPickerRangeController.js
+++ b/stories/DayPickerRangeController.js
@@ -86,6 +86,41 @@ storiesOf('DayPickerRangeController', module)
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
     />
   ))
+  .addWithInfo('with 7 days range selection', () => (
+    <DayPickerRangeControllerWrapper
+      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
+      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
+      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
+      startDateOffset={day => day.subtract(3, 'days')}
+      endDateOffset={day => day.add(3, 'days')}
+    />
+  ))
+  .addWithInfo('with 45 days range selection', () => (
+    <DayPickerRangeControllerWrapper
+      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
+      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
+      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
+      startDateOffset={day => day.subtract(22, 'days')}
+      endDateOffset={day => day.add(22, 'days')}
+    />
+  ))
+  .addWithInfo('with 4 days after today range selection', () => (
+    <DayPickerRangeControllerWrapper
+      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
+      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
+      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
+      endDateOffset={day => day.add(4, 'days')}
+    />
+  ))
+  .addWithInfo('with current week range selection', () => (
+    <DayPickerRangeControllerWrapper
+      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
+      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
+      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
+      startDateOffset={day => day.startOf('week')}
+      endDateOffset={day => day.endOf('week')}
+    />
+  ))
   .addWithInfo('with custom inputs', () => (
     <DayPickerRangeControllerWrapper
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index 1d3d854831..646466db6e 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -1476,6 +1476,54 @@ describe('DayPickerRangeController', () => {
         );
       });
     });
+
+    describe('props.startDateOffset / props.endDateOffset', () => {
+      it('calls props.onDatesChange with startDate === startDateOffset(date) and endDate === endDateOffset(date)', () => {
+        const clickDate = moment(today).clone().add(2, 'days');
+        const onDatesChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <DayPickerRangeController
+            onDatesChange={onDatesChangeStub}
+            startDateOffset={day => day.subtract(2, 'days')}
+            endDateOffset={day => day.add(4, 'days')}
+          />
+        ));
+        wrapper.instance().onDayClick(clickDate);
+        const args = onDatesChangeStub.getCall(0).args[0];
+        expect(args.startDate.format()).to.equal(clickDate.clone().subtract(2, 'days').format());
+        expect(args.endDate.format()).to.equal(clickDate.clone().add(4, 'days').format());
+      });
+
+      it('calls props.onDatesChange with startDate === startDateOffset(date) and endDate === selectedDate when endDateOffset not provided', () => {
+        const clickDate = moment(today).clone().add(2, 'days');
+        const onDatesChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <DayPickerRangeController
+            onDatesChange={onDatesChangeStub}
+            startDateOffset={day => day.subtract(5, 'days')}
+          />
+        ));
+        wrapper.instance().onDayClick(clickDate);
+        const args = onDatesChangeStub.getCall(0).args[0];
+        expect(args.startDate.format()).to.equal(clickDate.clone().subtract(5, 'days').format());
+        expect(args.endDate.format()).to.equal(clickDate.format());
+      });
+
+      it('calls props.onDatesChange with startDate === selectedDate and endDate === endDateOffset(date) when startDateOffset not provided', () => {
+        const clickDate = moment(today).clone().add(12, 'days');
+        const onDatesChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <DayPickerRangeController
+            onDatesChange={onDatesChangeStub}
+            endDateOffset={day => day.add(12, 'days')}
+          />
+        ));
+        wrapper.instance().onDayClick(clickDate);
+        const args = onDatesChangeStub.getCall(0).args[0];
+        expect(args.startDate.format()).to.equal(clickDate.format());
+        expect(args.endDate.format()).to.equal(clickDate.clone().add(12, 'days').format());
+      });
+    });
   });
 
   describe('#onDayMouseEnter', () => {
@@ -1485,6 +1533,18 @@ describe('DayPickerRangeController', () => {
       expect(wrapper.state().hoverDate).to.equal(today);
     });
 
+    it('sets state.dateOffset to the start and end date range when range included', () => {
+      const wrapper = shallow((
+        <DayPickerRangeController
+          focusedInput={START_DATE}
+          endDateOffset={day => day.add(2, 'days')}
+        />
+      ));
+      wrapper.instance().onDayMouseEnter(today);
+      expect(wrapper.state().dateOffset.start.format()).to.equal(today.format());
+      expect(wrapper.state().dateOffset.end.format()).to.equal(today.clone().add(3, 'days').format());
+    });
+
     describe('modifiers', () => {
       it('calls addModifier', () => {
         const addModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifier');
diff --git a/test/utils/getSelectedDateOffset_spec.js b/test/utils/getSelectedDateOffset_spec.js
new file mode 100644
index 0000000000..dfaff4b2c7
--- /dev/null
+++ b/test/utils/getSelectedDateOffset_spec.js
@@ -0,0 +1,32 @@
+import { expect } from 'chai';
+import moment from 'moment';
+
+import getSelectedDateOffset from '../../src/utils/getSelectedDateOffset';
+
+const today = moment();
+
+describe('#getSelectedDateOffset', () => {
+  it('returns a function modified moment object', () => {
+    const fn = day => day.add(2, 'days');
+    const modifiedDay = getSelectedDateOffset(fn, today);
+    expect(modifiedDay.format()).to.equal(today.clone().add(2, 'days').format());
+  });
+
+  it('returns the passed day when function is undefined', () => {
+    const modifiedDay = getSelectedDateOffset(undefined, today);
+    expect(modifiedDay.format()).to.equal(today.format());
+  });
+
+  it('modifies the returned day using the modifier callback', () => {
+    const fn = day => day.add(2, 'days');
+    const modifier = day => day.subtract(2, 'days');
+    const modifiedDay = getSelectedDateOffset(fn, today, modifier);
+    expect(modifiedDay.format()).to.equal(today.clone().format());
+  });
+
+  it('does not apply the modifier if function is undefined', () => {
+    const modifier = day => day.subtract(2, 'days');
+    const modifiedDay = getSelectedDateOffset(undefined, today, modifier);
+    expect(modifiedDay.format()).to.equal(today.format());
+  });
+});

From bd5ca6c361066cc702a3a006458fcfdf8a836e97 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Thu, 18 Jan 2018 17:07:53 -0800
Subject: [PATCH 076/618] Version 16.1.1

---
 CHANGELOG.md | 3 +++
 package.json | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0624ccf3ef..4dc1349498 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # Change Log
 
+## 16.1.1
+- [fix] Address some small bugs with `CustomizableCalendarDay` ([#962](https://github.com/airbnb/react-dates/pull/962))
+
 ## 16.1.0
 - [fix] Allow for changing of the input value via highlight and replace ([#955](https://github.com/airbnb/react-dates/pull/955))
 - [fix] Fix OPEN_UP styling ([#925](https://github.com/airbnb/react-dates/pull/925))
diff --git a/package.json b/package.json
index 21691b92d8..005f3d2749 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "16.1.0",
+  "version": "16.1.1",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 285033d793bcb58d8c3d8acd8025369088b551fb Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Fri, 19 Jan 2018 13:14:08 -0800
Subject: [PATCH 077/618] Move all styles in the CCD (custom and default) to
 rely on custom styles

---
 src/components/CustomizableCalendarDay.jsx | 324 ++++++++-------------
 1 file changed, 120 insertions(+), 204 deletions(-)

diff --git a/src/components/CustomizableCalendarDay.jsx b/src/components/CustomizableCalendarDay.jsx
index 5218b811a2..8f19902f7c 100644
--- a/src/components/CustomizableCalendarDay.jsx
+++ b/src/components/CustomizableCalendarDay.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import shallowCompare from 'react-addons-shallow-compare';
 import momentPropTypes from 'react-moment-proptypes';
-import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
+import { forbidExtraProps, nonNegativeInteger, or } from 'airbnb-prop-types';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 import moment from 'moment';
 
@@ -11,6 +11,9 @@ import getPhrasePropTypes from '../utils/getPhrasePropTypes';
 import getCalendarDaySettings from '../utils/getCalendarDaySettings';
 
 import { DAY_SIZE } from '../constants';
+import DefaultTheme from '../theme/DefaultTheme';
+
+const { reactDates: { color } } = DefaultTheme;
 
 function getStyles(stylesObj, isHovered) {
   if (!stylesObj) return null;
@@ -25,12 +28,12 @@ function getStyles(stylesObj, isHovered) {
 
 const DayStyleShape = PropTypes.shape({
   background: PropTypes.string,
-  border: PropTypes.string,
+  border: or([PropTypes.string, PropTypes.number]),
   color: PropTypes.string,
 
   hover: PropTypes.shape({
     background: PropTypes.string,
-    border: PropTypes.string,
+    border: or([PropTypes.string, PropTypes.number]),
     color: PropTypes.string,
   }),
 });
@@ -82,6 +85,105 @@ const defaultProps = {
   renderDayContents: null,
   ariaLabelFormat: 'dddd, LL',
 
+  // style defaults
+  defaultStyles: {
+    border: `1px solid ${color.core.borderLight}`,
+    color: color.text,
+    background: color.background,
+
+    hover: {
+      background: color.core.borderLight,
+      border: `1px double ${color.core.borderLight}`,
+      color: 'inherit',
+    },
+  },
+  outsideStyles: {
+    background: color.outside.backgroundColor,
+    border: 0,
+    color: color.outside.color,
+  },
+  todayStyles: {},
+  highlightedCalendarStyles: {
+    background: color.highlighted.backgroundColor,
+    color: color.highlighted.color,
+
+    hover: {
+      background: color.highlighted.backgroundColor_hover,
+      color: color.highlighted.color_active,
+    },
+  },
+  blockedMinNightsStyles: {
+    background: color.minimumNights.backgroundColor,
+    border: `1px solid ${color.minimumNights.borderColor}`,
+    color: color.minimumNights.color,
+
+    hover: {
+      background: color.minimumNights.backgroundColor_hover,
+      color: color.minimumNights.color_active,
+    },
+  },
+  blockedCalendarStyles: {
+    background: color.blocked_calendar.backgroundColor,
+    border: `1px solid ${color.blocked_calendar.borderColor}`,
+    color: color.blocked_calendar.color,
+
+    hover: {
+      background: color.blocked_calendar.backgroundColor_hover,
+      border: `1px solid ${color.blocked_calendar.borderColor}`,
+      color: color.blocked_calendar.color_active,
+    },
+  },
+  blockedOutOfRangeStyles: {
+    background: color.blocked_out_of_range.backgroundColor,
+    border: `1px solid ${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 ${color.blocked_out_of_range.borderColor}`,
+      color: color.blocked_out_of_range.color_active,
+    },
+  },
+  hoveredSpanStyles: {
+    background: color.hoveredSpan.backgroundColor,
+    border: `1px solid ${color.hoveredSpan.borderColor}`,
+    color: color.hoveredSpan.color,
+
+    hover: {
+      background: color.hoveredSpan.backgroundColor_hover,
+      border: `1px solid ${color.hoveredSpan.borderColor}`,
+      color: color.hoveredSpan.color_active,
+    },
+  },
+  selectedSpanStyles: {
+    background: color.selectedSpan.backgroundColor,
+    border: `1px solid ${color.selectedSpan.borderColor}`,
+    color: color.selectedSpan.color,
+
+    hover: {
+      background: color.selectedSpan.backgroundColor_hover,
+      border: `1px solid ${color.selectedSpan.borderColor}`,
+      color: color.selectedSpan.color_active,
+    },
+  },
+  lastInRangeStyles: {
+    borderRight: color.core.primary,
+  },
+  selectedStartStyles: {},
+  selectedEndStyles: {},
+  selectedStyles: {
+    background: color.selected.backgroundColor,
+    border: `1px solid ${color.selected.borderColor}`,
+    color: color.selected.color,
+
+    hover: {
+      background: color.selected.backgroundColor_hover,
+      border: `1px solid ${color.selected.borderColor}`,
+      color: color.selected.color_active,
+    },
+  },
+  afterHoveredStartStyles: {},
+
   // internationalization
   phrases: CalendarDayPhrases,
 };
@@ -198,64 +300,26 @@ class CustomizableCalendarDay extends React.Component {
     const selectedStyles = getStyles(selectedStylesWithHover, isHovered);
     const afterHoveredStartStyles = getStyles(afterHoveredStartStylesWithHover, isHovered);
 
-    const hasCustomSelectedStyles =
-      defaultStyles ||
-      (selected && selectedStyles) ||
-      (modifiers.has('selected-start') && selectedStartStyles) ||
-      (modifiers.has('selected-end') && selectedEndStyles);
-    const hasCustomHoveredStyles =
-      (modifiers.has('hovered-span') && hoveredSpanStyles) ||
-      (modifiers.has('after-hovered-start') && afterHoveredStartStyles);
-    const hasCustomStyles =
-      (isOutsideDay && outsideStyles) ||
-      (modifiers.has('today') && todayStyles) ||
-      (modifiers.has('highlighted-calendar') && highlightedCalendarStyles) ||
-      (modifiers.has('blocked-minimum-nights') && blockedMinNightsStyles) ||
-      (modifiers.has('blocked-calendar') && blockedCalendarStyles) ||
-      (modifiers.has('last-in-range') && lastInRangeStyles) ||
-      (modifiers.has('selected-span') && selectedSpanStyles) ||
-      (isOutsideRange && blockedOutOfRangeStyles) ||
-      hasCustomSelectedStyles ||
-      hasCustomHoveredStyles;
-
     return (
       <td
         {...css(
           styles.CalendarDay,
           useDefaultCursor && styles.CalendarDay__defaultCursor,
           daySizeStyles,
-          ...!!hasCustomStyles && [
-            defaultStyles,
-            isOutsideDay && outsideStyles,
-            modifiers.has('today') && todayStyles,
-            modifiers.has('highlighted-calendar') && highlightedCalendarStyles,
-            modifiers.has('blocked-minimum-nights') && blockedMinNightsStyles,
-            modifiers.has('blocked-calendar') && blockedCalendarStyles,
-            hoveredSpan && hoveredSpanStyles,
-            modifiers.has('after-hovered-start') && afterHoveredStartStyles,
-            modifiers.has('selected-span') && selectedSpanStyles,
-            modifiers.has('last-in-range') && lastInRangeStyles,
-            modifiers.has('selected-start') && selectedStartStyles,
-            modifiers.has('selected-end') && selectedEndStyles,
-            selected && selectedStyles,
-            isOutsideRange && blockedOutOfRangeStyles,
-          ],
-
-          ...!hasCustomStyles && [
-            styles.CalendarDay__default,
-            isOutsideDay && styles.CalendarDay__outside,
-            modifiers.has('today') && styles.CalendarDay__today,
-            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('selected-span') && styles.CalendarDay__selected_span,
-            modifiers.has('last-in-range') && styles.CalendarDay__last_in_range,
-            modifiers.has('selected-start') && styles.CalendarDay__selected_start,
-            modifiers.has('selected-end') && styles.CalendarDay__selected_end,
-            selected && styles.CalendarDay__selected,
-            isOutsideRange && (blockedOutOfRangeStyles || styles.CalendarDay__blocked_out_of_range),
-          ],
+          defaultStyles,
+          isOutsideDay && outsideStyles,
+          modifiers.has('today') && todayStyles,
+          modifiers.has('highlighted-calendar') && highlightedCalendarStyles,
+          modifiers.has('blocked-minimum-nights') && blockedMinNightsStyles,
+          modifiers.has('blocked-calendar') && blockedCalendarStyles,
+          hoveredSpan && hoveredSpanStyles,
+          modifiers.has('after-hovered-start') && afterHoveredStartStyles,
+          modifiers.has('selected-span') && selectedSpanStyles,
+          modifiers.has('last-in-range') && lastInRangeStyles,
+          modifiers.has('selected-start') && selectedStartStyles,
+          modifiers.has('selected-end') && selectedEndStyles,
+          selected && selectedStyles,
+          isOutsideRange && blockedOutOfRangeStyles,
         )}
         role="button" // eslint-disable-line jsx-a11y/no-noninteractive-element-to-interactive-role
         ref={this.setButtonRef}
@@ -277,7 +341,7 @@ CustomizableCalendarDay.propTypes = propTypes;
 CustomizableCalendarDay.defaultProps = defaultProps;
 
 export { CustomizableCalendarDay as PureCustomizableCalendarDay };
-export default withStyles(({ reactDates: { color, font } }) => ({
+export default withStyles(({ reactDates: { font } }) => ({
   CalendarDay: {
     boxSizing: 'border-box',
     cursor: 'pointer',
@@ -292,152 +356,4 @@ export default withStyles(({ reactDates: { color, font } }) => ({
   CalendarDay__defaultCursor: {
     cursor: 'default',
   },
-
-  CalendarDay__default: {
-    border: `1px solid ${color.core.borderLight}`,
-    color: color.text,
-    background: color.background,
-
-    ':hover': {
-      background: color.core.borderLight,
-      border: `1px double ${color.core.borderLight}`,
-      color: 'inherit',
-    },
-  },
-
-  CalendarDay__outside: {
-    border: 0,
-
-    background: color.outside.backgroundColor,
-    color: color.outside.color,
-  },
-
-  CalendarDay__blocked_minimum_nights: {
-    background: color.minimumNights.backgroundColor,
-    border: `1px solid ${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 solid ${color.selectedSpan.borderColor}`,
-    color: color.selectedSpan.color,
-
-    ':hover': {
-      background: color.selectedSpan.backgroundColor_hover,
-      border: `1px solid ${color.selectedSpan.borderColor}`,
-      color: color.selectedSpan.color_active,
-    },
-
-    ':active': {
-      background: color.selectedSpan.backgroundColor_active,
-      border: `1px solid ${color.selectedSpan.borderColor}`,
-      color: color.selectedSpan.color_active,
-    },
-  },
-
-  CalendarDay__last_in_range: {
-    borderRight: color.core.primary,
-  },
-
-  CalendarDay__selected: {
-    background: color.selected.backgroundColor,
-    border: `1px solid ${color.selected.borderColor}`,
-    color: color.selected.color,
-
-    ':hover': {
-      background: color.selected.backgroundColor_hover,
-      border: `1px solid ${color.selected.borderColor}`,
-      color: color.selected.color_active,
-    },
-
-    ':active': {
-      background: color.selected.backgroundColor_active,
-      border: `1px solid ${color.selected.borderColor}`,
-      color: color.selected.color_active,
-    },
-  },
-
-  CalendarDay__hovered_span: {
-    background: color.hoveredSpan.backgroundColor,
-    border: `1px solid ${color.hoveredSpan.borderColor}`,
-    color: color.hoveredSpan.color,
-
-    ':hover': {
-      background: color.hoveredSpan.backgroundColor_hover,
-      border: `1px solid ${color.hoveredSpan.borderColor}`,
-      color: color.hoveredSpan.color_active,
-    },
-
-    ':active': {
-      background: color.hoveredSpan.backgroundColor_active,
-      border: `1px solid ${color.hoveredSpan.borderColor}`,
-      color: color.hoveredSpan.color_active,
-    },
-  },
-
-  CalendarDay__blocked_calendar: {
-    background: color.blocked_calendar.backgroundColor,
-    border: `1px solid ${color.blocked_calendar.borderColor}`,
-    color: color.blocked_calendar.color,
-
-    ':hover': {
-      background: color.blocked_calendar.backgroundColor_hover,
-      border: `1px solid ${color.blocked_calendar.borderColor}`,
-      color: color.blocked_calendar.color_active,
-    },
-
-    ':active': {
-      background: color.blocked_calendar.backgroundColor_active,
-      border: `1px solid ${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 ${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 ${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 ${color.blocked_out_of_range.borderColor}`,
-      color: color.blocked_out_of_range.color_active,
-    },
-  },
-
-  CalendarDay__selected_start: {},
-  CalendarDay__selected_end: {},
-  CalendarDay__today: {},
 }))(CustomizableCalendarDay);

From ccd0d20f3f3549e3218451c06d5836417bd89ee0 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Fri, 19 Jan 2018 14:06:18 -0800
Subject: [PATCH 078/618] Version 16.2.0

---
 CHANGELOG.md | 4 ++++
 package.json | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4dc1349498..24a0e3cb10 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Change Log
 
+## 16.2.0
+- [new] Add `startDateOffset`/`endDateOffset` props to `DayPickerRangeController` ([#884](https://github.com/airbnb/react-dates/pull/884))
+- [fix] Make all styles inline in `CustomizableCalendarDay` ([#964](https://github.com/airbnb/react-dates/pull/964))
+
 ## 16.1.1
 - [fix] Address some small bugs with `CustomizableCalendarDay` ([#962](https://github.com/airbnb/react-dates/pull/962))
 
diff --git a/package.json b/package.json
index 005f3d2749..6f9b923674 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "16.1.1",
+  "version": "16.2.0",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 700557ef7243b1eb7d9280dd5632340a3e3b8a50 Mon Sep 17 00:00:00 2001
From: Comron Sattari <comron@gmail.com>
Date: Wed, 17 Jan 2018 15:39:29 -0800
Subject: [PATCH 079/618] Add keepFocusOnInput prop to maintain input focus
 even on touch devices

---
 examples/SingleDatePickerWrapper.jsx      |  1 +
 src/components/DateRangePicker.jsx        | 12 +++++--
 src/components/SingleDatePicker.jsx       |  6 +++-
 src/shapes/DateRangePickerShape.js        |  1 +
 src/shapes/SingleDatePickerShape.js       |  1 +
 test/components/DateRangePicker_spec.jsx  | 44 ++++++++++++++++++++++-
 test/components/SingleDatePicker_spec.jsx | 41 ++++++++++++++++++++-
 7 files changed, 101 insertions(+), 5 deletions(-)

diff --git a/examples/SingleDatePickerWrapper.jsx b/examples/SingleDatePickerWrapper.jsx
index 4c3d91ec32..9e65e6ef16 100644
--- a/examples/SingleDatePickerWrapper.jsx
+++ b/examples/SingleDatePickerWrapper.jsx
@@ -42,6 +42,7 @@ const defaultProps = {
   small: false,
   regular: false,
   verticalSpacing: undefined,
+  keepFocusOnInput: false,
 
   // calendar presentation and interaction related props
   renderMonth: null,
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index b523a2c814..967df454e2 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -65,6 +65,7 @@ const defaultProps = {
   block: false,
   small: false,
   regular: false,
+  keepFocusOnInput: false,
 
   // calendar presentation and interaction related props
   renderMonth: null,
@@ -188,10 +189,17 @@ class DateRangePicker extends React.Component {
   }
 
   onDateRangePickerInputFocus(focusedInput) {
-    const { onFocusChange, withPortal, withFullScreenPortal } = this.props;
+    const {
+      onFocusChange,
+      withPortal,
+      withFullScreenPortal,
+      keepFocusOnInput,
+    } = this.props;
 
     if (focusedInput) {
-      const moveFocusToDayPicker = withPortal || withFullScreenPortal || this.isTouchDevice;
+      const withAnyPortal = withPortal || withFullScreenPortal;
+      const moveFocusToDayPicker = withAnyPortal || (this.isTouchDevice && !keepFocusOnInput);
+
       if (moveFocusToDayPicker) {
         this.onDayPickerFocus();
       } else {
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index 952cfcdcf7..c2f37aad1d 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -62,6 +62,7 @@ const defaultProps = {
   small: false,
   regular: false,
   verticalSpacing: DEFAULT_VERTICAL_SPACING,
+  keepFocusOnInput: false,
 
   // calendar presentation and interaction related props
   orientation: HORIZONTAL_ORIENTATION,
@@ -193,9 +194,12 @@ class SingleDatePicker extends React.Component {
       onFocusChange,
       withPortal,
       withFullScreenPortal,
+      keepFocusOnInput,
     } = this.props;
 
-    const moveFocusToDayPicker = withPortal || withFullScreenPortal || this.isTouchDevice;
+    const withAnyPortal = withPortal || withFullScreenPortal;
+    const moveFocusToDayPicker = withAnyPortal || (this.isTouchDevice && !keepFocusOnInput);
+
     if (moveFocusToDayPicker) {
       this.onDayPickerFocus();
     } else {
diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js
index 4e713b1fbe..5c7ff7f945 100644
--- a/src/shapes/DateRangePickerShape.js
+++ b/src/shapes/DateRangePickerShape.js
@@ -42,6 +42,7 @@ export default {
   block: PropTypes.bool,
   small: PropTypes.bool,
   regular: PropTypes.bool,
+  keepFocusOnInput: PropTypes.bool,
 
   // calendar presentation and interaction related props
   renderMonth: PropTypes.func,
diff --git a/src/shapes/SingleDatePickerShape.js b/src/shapes/SingleDatePickerShape.js
index 2361ad08eb..2adfb77175 100644
--- a/src/shapes/SingleDatePickerShape.js
+++ b/src/shapes/SingleDatePickerShape.js
@@ -36,6 +36,7 @@ export default {
   small: PropTypes.bool,
   regular: PropTypes.bool,
   verticalSpacing: nonNegativeInteger,
+  keepFocusOnInput: PropTypes.bool,
 
   // calendar presentation and interaction related props
   renderMonth: PropTypes.func,
diff --git a/test/components/DateRangePicker_spec.jsx b/test/components/DateRangePicker_spec.jsx
index 382aabc032..46f813a42b 100644
--- a/test/components/DateRangePicker_spec.jsx
+++ b/test/components/DateRangePicker_spec.jsx
@@ -263,8 +263,10 @@ describe('DateRangePicker', () => {
 
     describe('new focusedInput is truthy', () => {
       let onDayPickerFocusSpy;
+      let onDayPickerBlurSpy;
       beforeEach(() => {
         onDayPickerFocusSpy = sinon.spy(PureDateRangePicker.prototype, 'onDayPickerFocus');
+        onDayPickerBlurSpy = sinon.spy(PureDateRangePicker.prototype, 'onDayPickerBlur');
       });
 
       afterEach(() => {
@@ -297,8 +299,48 @@ describe('DateRangePicker', () => {
         expect(onDayPickerFocusSpy.callCount).to.equal(1);
       });
 
+      it('calls onDayPickerFocus if focusedInput and isTouchDevice', () => {
+        const wrapper = shallow((
+          <DateRangePicker
+            {...requiredProps}
+            onDatesChange={sinon.stub()}
+            onFocusChange={sinon.stub()}
+          />
+        )).dive();
+        wrapper.instance().isTouchDevice = true;
+        wrapper.instance().onDateRangePickerInputFocus(START_DATE);
+        expect(onDayPickerFocusSpy.callCount).to.equal(1);
+      });
+
+      it('calls onDayPickerBlur if focusedInput and !withPortal/!withFullScreenPortal and keepFocusOnInput', () => {
+        const wrapper = shallow((
+          <DateRangePicker
+            {...requiredProps}
+            onDateChange={sinon.stub()}
+            onFocusChange={sinon.stub()}
+            keepFocusOnInput
+          />
+        )).dive();
+        wrapper.instance().isTouchDevice = true;
+        wrapper.instance().onDateRangePickerInputFocus(START_DATE);
+        expect(onDayPickerBlurSpy.callCount).to.equal(1);
+      });
+
+      it('calls onDayPickerFocus if focusedInput and withPortal/withFullScreenPortal and keepFocusOnInput', () => {
+        const wrapper = shallow((
+          <DateRangePicker
+            {...requiredProps}
+            onDateChange={sinon.stub()}
+            onFocusChange={sinon.stub()}
+            keepFocusOnInput
+            withFullScreenPortal
+          />
+        )).dive();
+        wrapper.instance().onDateRangePickerInputFocus(START_DATE);
+        expect(onDayPickerFocusSpy.callCount).to.equal(1);
+      });
+
       it('calls onDayPickerBlur if focusedInput and !withPortal/!withFullScreenPortal', () => {
-        const onDayPickerBlurSpy = sinon.spy(PureDateRangePicker.prototype, 'onDayPickerBlur');
         const wrapper = shallow((
           <DateRangePicker
             {...requiredProps}
diff --git a/test/components/SingleDatePicker_spec.jsx b/test/components/SingleDatePicker_spec.jsx
index 59ba1311e2..147e94b96b 100644
--- a/test/components/SingleDatePicker_spec.jsx
+++ b/test/components/SingleDatePicker_spec.jsx
@@ -369,8 +369,10 @@ describe('SingleDatePicker', () => {
 
   describe('#onFocus', () => {
     let onDayPickerFocusSpy;
+    let onDayPickerBlurSpy;
     beforeEach(() => {
       onDayPickerFocusSpy = sinon.spy(PureSingleDatePicker.prototype, 'onDayPickerFocus');
+      onDayPickerBlurSpy = sinon.spy(PureSingleDatePicker.prototype, 'onDayPickerBlur');
     });
 
     it('calls props.onFocusChange once', () => {
@@ -415,8 +417,45 @@ describe('SingleDatePicker', () => {
       expect(onDayPickerFocusSpy.callCount).to.equal(1);
     });
 
+    it('calls onDayPickerFocus if isTouchDevice', () => {
+      const wrapper = shallow((
+        <SingleDatePicker
+          onDateChange={sinon.stub()}
+          onFocusChange={sinon.stub()}
+        />
+      )).dive();
+      wrapper.instance().isTouchDevice = true;
+      wrapper.instance().onFocus();
+      expect(onDayPickerFocusSpy.callCount).to.equal(1);
+    });
+
+    it('calls onDayPickerBlur if !withPortal/!withFullScreenPortal and keepFocusOnInput', () => {
+      const wrapper = shallow((
+        <SingleDatePicker
+          onDateChange={sinon.stub()}
+          onFocusChange={sinon.stub()}
+          keepFocusOnInput
+        />
+      )).dive();
+      wrapper.instance().isTouchDevice = true;
+      wrapper.instance().onFocus();
+      expect(onDayPickerBlurSpy.callCount).to.equal(1);
+    });
+
+    it('calls onDayPickerFocus if withPortal/withFullScreenPortal and keepFocusOnInput', () => {
+      const wrapper = shallow((
+        <SingleDatePicker
+          onDateChange={sinon.stub()}
+          onFocusChange={sinon.stub()}
+          keepFocusOnInput
+          withFullScreenPortal
+        />
+      )).dive();
+      wrapper.instance().onFocus();
+      expect(onDayPickerFocusSpy.callCount).to.equal(1);
+    });
+
     it('calls onDayPickerBlur if !withPortal/!withFullScreenPortal', () => {
-      const onDayPickerBlurSpy = sinon.spy(PureSingleDatePicker.prototype, 'onDayPickerBlur');
       const wrapper = shallow((
         <SingleDatePicker
           onDateChange={sinon.stub()}

From 9689f078fee01afde504715605291af13fe4bd60 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Mon, 22 Jan 2018 17:39:28 -0800
Subject: [PATCH 080/618] Modify block styling to mean full width on the
 SingleDatePicker

---
 src/components/DateInput.jsx             | 8 ++++++++
 src/components/SingleDatePickerInput.jsx | 1 +
 2 files changed, 9 insertions(+)

diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
index 10bf83f714..6056e05867 100644
--- a/src/components/DateInput.jsx
+++ b/src/components/DateInput.jsx
@@ -35,6 +35,7 @@ const propTypes = forbidExtraProps({
   showCaret: PropTypes.bool,
   verticalSpacing: nonNegativeInteger,
   small: PropTypes.bool,
+  block: PropTypes.bool,
   regular: PropTypes.bool,
 
   onChange: PropTypes.func,
@@ -61,6 +62,7 @@ const defaultProps = {
   showCaret: false,
   verticalSpacing: DEFAULT_VERTICAL_SPACING,
   small: false,
+  block: false,
   regular: false,
 
   onChange() {},
@@ -181,6 +183,7 @@ class DateInput extends React.Component {
       verticalSpacing,
       small,
       regular,
+      block,
       styles,
       theme: { reactDates },
     } = this.props;
@@ -197,6 +200,7 @@ class DateInput extends React.Component {
         {...css(
           styles.DateInput,
           small && styles.DateInput__small,
+          block && styles.DateInput__block,
           withFang && styles.DateInput__withFang,
           disabled && styles.DateInput__disabled,
           withFang && openDirection === OPEN_DOWN && styles.DateInput__openDown,
@@ -286,6 +290,10 @@ export default withStyles(({
     width: sizing.inputWidth_small,
   },
 
+  DateInput__block: {
+    width: '100%',
+  },
+
   DateInput__disabled: {
     background: color.disabled,
     color: color.textDisabled,
diff --git a/src/components/SingleDatePickerInput.jsx b/src/components/SingleDatePickerInput.jsx
index f68a371b03..ac62a00e12 100644
--- a/src/components/SingleDatePickerInput.jsx
+++ b/src/components/SingleDatePickerInput.jsx
@@ -179,6 +179,7 @@ function SingleDatePickerInput({
         verticalSpacing={verticalSpacing}
         small={small}
         regular={regular}
+        block={block}
       />
 
       {showClearDate && (

From fea1be8d4b3f40ecbdf43f88d6c2ca5a3bbcc26b Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Wed, 24 Jan 2018 10:54:45 -0800
Subject: [PATCH 081/618] Version 16.2.1

---
 CHANGELOG.md | 3 +++
 package.json | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 24a0e3cb10..45d8629ae1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # Change Log
 
+## 16.2.1
+- [fix] SDP `block` styling also makes the input full width ([#972](https://github.com/airbnb/react-dates/pull/972))
+
 ## 16.2.0
 - [new] Add `startDateOffset`/`endDateOffset` props to `DayPickerRangeController` ([#884](https://github.com/airbnb/react-dates/pull/884))
 - [fix] Make all styles inline in `CustomizableCalendarDay` ([#964](https://github.com/airbnb/react-dates/pull/964))
diff --git a/package.json b/package.json
index 6f9b923674..78252ca51f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "16.2.0",
+  "version": "16.2.1",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 0571caa357337a5031bb460b49aecfc96f37ea7a Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Wed, 24 Jan 2018 22:16:30 -0800
Subject: [PATCH 082/618] Fix specificity issues with selected styles on the
 CustomizableCalendarDay

---
 src/components/CustomizableCalendarDay.jsx | 10 +++++-----
 stories/DateRangePicker_day.js             | 16 ++++++++++++++++
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/components/CustomizableCalendarDay.jsx b/src/components/CustomizableCalendarDay.jsx
index 8f19902f7c..2d85acb539 100644
--- a/src/components/CustomizableCalendarDay.jsx
+++ b/src/components/CustomizableCalendarDay.jsx
@@ -63,9 +63,9 @@ const propTypes = forbidExtraProps({
   hoveredSpanStyles: DayStyleShape,
   selectedSpanStyles: DayStyleShape,
   lastInRangeStyles: DayStyleShape,
+  selectedStyles: DayStyleShape,
   selectedStartStyles: DayStyleShape,
   selectedEndStyles: DayStyleShape,
-  selectedStyles: DayStyleShape,
   afterHoveredStartStyles: DayStyleShape,
 
   // internationalization
@@ -169,8 +169,6 @@ const defaultProps = {
   lastInRangeStyles: {
     borderRight: color.core.primary,
   },
-  selectedStartStyles: {},
-  selectedEndStyles: {},
   selectedStyles: {
     background: color.selected.backgroundColor,
     border: `1px solid ${color.selected.borderColor}`,
@@ -182,6 +180,8 @@ const defaultProps = {
       color: color.selected.color_active,
     },
   },
+  selectedStartStyles: {},
+  selectedEndStyles: {},
   afterHoveredStartStyles: {},
 
   // internationalization
@@ -266,9 +266,9 @@ class CustomizableCalendarDay extends React.Component {
       hoveredSpanStyles: hoveredSpanStylesWithHover,
       selectedSpanStyles: selectedSpanStylesWithHover,
       lastInRangeStyles: lastInRangeStylesWithHover,
+      selectedStyles: selectedStylesWithHover,
       selectedStartStyles: selectedStartStylesWithHover,
       selectedEndStyles: selectedEndStylesWithHover,
-      selectedStyles: selectedStylesWithHover,
       afterHoveredStartStyles: afterHoveredStartStylesWithHover,
     } = this.props;
 
@@ -316,9 +316,9 @@ class CustomizableCalendarDay extends React.Component {
           modifiers.has('after-hovered-start') && afterHoveredStartStyles,
           modifiers.has('selected-span') && selectedSpanStyles,
           modifiers.has('last-in-range') && lastInRangeStyles,
+          selected && selectedStyles,
           modifiers.has('selected-start') && selectedStartStyles,
           modifiers.has('selected-end') && selectedEndStyles,
-          selected && selectedStyles,
           isOutsideRange && blockedOutOfRangeStyles,
         )}
         role="button" // eslint-disable-line jsx-a11y/no-noninteractive-element-to-interactive-role
diff --git a/stories/DateRangePicker_day.js b/stories/DateRangePicker_day.js
index abf69d78b1..218b10fe6c 100644
--- a/stories/DateRangePicker_day.js
+++ b/stories/DateRangePicker_day.js
@@ -38,11 +38,26 @@ const hoveredStyles = {
   color: '#fff',
 };
 
+const blockedStyles = {
+  background: '#fff',
+  border: '1px double #e4e7e7',
+  color: '#dce0e0',
+
+  hover: {
+    background: '#fff',
+    border: '1px double #e4e7e7',
+    color: '#dce0e0',
+  },
+};
+
 const customDayStyles = {
   selectedStartStyles: selectedStyles,
   selectedEndStyles: selectedStyles,
   hoveredSpanStyles: hoveredStyles,
   afterHoveredStartStyles: hoveredStyles,
+  blockedMinNightsStyles: blockedStyles,
+  blockedCalendarStyles: blockedStyles,
+  blockedOutOfRangeStyles: blockedStyles,
 
   selectedSpanStyles: {
     background: '#9b32a2',
@@ -116,6 +131,7 @@ storiesOf('DRP - Day Props', module)
   ))
   .addWithInfo('one-off custom styling', () => (
     <DateRangePickerWrapper
+      minimumNights={3}
       renderCalendarDay={props => <CustomizableCalendarDay {...props} {...customDayStyles} />}
       autoFocus
     />

From 625b5d96b8049176065a860b1abd12d324dbe6a3 Mon Sep 17 00:00:00 2001
From: "greenkeeper[bot]" <greenkeeper[bot]@users.noreply.github.com>
Date: Fri, 26 Jan 2018 21:35:57 +0000
Subject: [PATCH 083/618] chore(package): update style-loader to version 0.20.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 78252ca51f..da5cc77ff0 100644
--- a/package.json
+++ b/package.json
@@ -106,7 +106,7 @@
     "sass-loader": "^6.0.6",
     "sinon": "^4.1.4",
     "sinon-sandbox": "^1.0.2",
-    "style-loader": "^0.19.0",
+    "style-loader": "^0.20.0",
     "webpack": "^2.6.1"
   },
   "dependencies": {

From 36a8998a119153b6e197aa92ea6570e7482fc63a Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Fri, 26 Jan 2018 16:17:48 -0800
Subject: [PATCH 084/618] Add modifiers for firstDayOfWeek and lastDayOfWeek

---
 src/components/CalendarDay.jsx                |  4 +++
 src/components/CustomizableCalendarDay.jsx    | 10 ++++++
 src/components/DayPickerRangeController.jsx   | 12 +++++++
 .../DayPickerSingleDateController.jsx         | 12 +++++++
 .../DayPickerRangeController_spec.jsx         | 36 +++++++++++++++++++
 .../DayPickerSingleDateController_spec.jsx    | 36 +++++++++++++++++++
 6 files changed, 110 insertions(+)

diff --git a/src/components/CalendarDay.jsx b/src/components/CalendarDay.jsx
index 5ea590a222..1d55754444 100644
--- a/src/components/CalendarDay.jsx
+++ b/src/components/CalendarDay.jsx
@@ -129,6 +129,8 @@ class CalendarDay extends React.Component {
           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('highlighted-calendar') && styles.CalendarDay__highlighted_calendar,
           modifiers.has('blocked-minimum-nights') && styles.CalendarDay__blocked_minimum_nights,
@@ -331,4 +333,6 @@ export default withStyles(({ reactDates: { color, font } }) => ({
   CalendarDay__selected_start: {},
   CalendarDay__selected_end: {},
   CalendarDay__today: {},
+  CalendarDay__firstDayOfWeek: {},
+  CalendarDay__lastDayOfWeek: {},
 }))(CalendarDay);
diff --git a/src/components/CustomizableCalendarDay.jsx b/src/components/CustomizableCalendarDay.jsx
index 2d85acb539..690b308b55 100644
--- a/src/components/CustomizableCalendarDay.jsx
+++ b/src/components/CustomizableCalendarDay.jsx
@@ -56,6 +56,8 @@ const propTypes = forbidExtraProps({
   defaultStyles: DayStyleShape,
   outsideStyles: DayStyleShape,
   todayStyles: DayStyleShape,
+  firstDayOfWeekStyles: DayStyleShape,
+  lastDayOfWeekStyles: DayStyleShape,
   highlightedCalendarStyles: DayStyleShape,
   blockedMinNightsStyles: DayStyleShape,
   blockedCalendarStyles: DayStyleShape,
@@ -183,6 +185,8 @@ const defaultProps = {
   selectedStartStyles: {},
   selectedEndStyles: {},
   afterHoveredStartStyles: {},
+  firstDayOfWeekStyles: {},
+  lastDayOfWeekStyles: {},
 
   // internationalization
   phrases: CalendarDayPhrases,
@@ -259,6 +263,8 @@ class CustomizableCalendarDay extends React.Component {
       defaultStyles: defaultStylesWithHover,
       outsideStyles: outsideStylesWithHover,
       todayStyles: todayStylesWithHover,
+      firstDayOfWeekStyles: firstDayOfWeekStylesWithHover,
+      lastDayOfWeekStyles: lastDayOfWeekStylesWithHover,
       highlightedCalendarStyles: highlightedCalendarStylesWithHover,
       blockedMinNightsStyles: blockedMinNightsStylesWithHover,
       blockedCalendarStyles: blockedCalendarStylesWithHover,
@@ -288,6 +294,8 @@ class CustomizableCalendarDay extends React.Component {
     const defaultStyles = getStyles(defaultStylesWithHover, isHovered);
     const outsideStyles = getStyles(outsideStylesWithHover, isHovered);
     const todayStyles = getStyles(todayStylesWithHover, isHovered);
+    const firstDayOfWeekStyles = getStyles(firstDayOfWeekStylesWithHover, isHovered);
+    const lastDayOfWeekStyles = getStyles(lastDayOfWeekStylesWithHover, isHovered);
     const highlightedCalendarStyles = getStyles(highlightedCalendarStylesWithHover, isHovered);
     const blockedMinNightsStyles = getStyles(blockedMinNightsStylesWithHover, isHovered);
     const blockedCalendarStyles = getStyles(blockedCalendarStylesWithHover, isHovered);
@@ -309,6 +317,8 @@ class CustomizableCalendarDay extends React.Component {
           defaultStyles,
           isOutsideDay && outsideStyles,
           modifiers.has('today') && todayStyles,
+          modifiers.has('first-day-of-week') && firstDayOfWeekStyles,
+          modifiers.has('last-day-of-week') && lastDayOfWeekStyles,
           modifiers.has('highlighted-calendar') && highlightedCalendarStyles,
           modifiers.has('blocked-minimum-nights') && blockedMinNightsStyles,
           modifiers.has('blocked-calendar') && blockedCalendarStyles,
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 4272e36478..a83897a351 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -178,6 +178,8 @@ export default class DayPickerRangeController extends React.Component {
       'hovered-span': day => this.isInHoveredSpan(day),
       'hovered-offset': day => this.isInHoveredSpan(day),
       'after-hovered-start': day => this.isDayAfterHoveredStartDate(day),
+      'first-day-of-week': day => this.isFirstDayOfWeek(day),
+      'last-day-of-week': day => this.isLastDayOfWeek(day),
     };
 
     const { currentMonth, visibleDays } = this.getStateForNewMonth(props);
@@ -942,6 +944,16 @@ export default class DayPickerRangeController extends React.Component {
     return isSameDay(day, this.today);
   }
 
+  isFirstDayOfWeek(day) {
+    const { firstDayOfWeek } = this.props;
+    return day.day() === (firstDayOfWeek || moment.localeData().firstDayOfWeek());
+  }
+
+  isLastDayOfWeek(day) {
+    const { firstDayOfWeek } = this.props;
+    return day.day() === ((firstDayOfWeek || moment.localeData().firstDayOfWeek()) + 6) % 7;
+  }
+
   render() {
     const {
       numberOfMonths,
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 0773f89f15..62b4d5eb70 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -148,6 +148,8 @@ export default class DayPickerSingleDateController extends React.Component {
       valid: day => !this.isBlocked(day),
       hovered: day => this.isHovered(day),
       selected: day => this.isSelected(day),
+      'first-day-of-week': day => this.isFirstDayOfWeek(day),
+      'last-day-of-week': day => this.isLastDayOfWeek(day),
     };
 
     const { currentMonth, visibleDays } = this.getStateForNewMonth(props);
@@ -571,6 +573,16 @@ export default class DayPickerSingleDateController extends React.Component {
     return isSameDay(day, this.today);
   }
 
+  isFirstDayOfWeek(day) {
+    const { firstDayOfWeek } = this.props;
+    return day.day() === (firstDayOfWeek || moment.localeData().firstDayOfWeek());
+  }
+
+  isLastDayOfWeek(day) {
+    const { firstDayOfWeek } = this.props;
+    return day.day() === ((firstDayOfWeek || moment.localeData().firstDayOfWeek()) + 6) % 7;
+  }
+
   render() {
     const {
       numberOfMonths,
diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index 646466db6e..256d6a5e3e 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -3124,5 +3124,41 @@ describe('DayPickerRangeController', () => {
         expect(wrapper.instance().isToday(moment(today).subtract(1, 'months'))).to.equal(false);
       });
     });
+
+    describe('#isFirstDayOfWeek', () => {
+      it('returns true if first day of this week', () => {
+        const wrapper = shallow(<DayPickerRangeController />);
+        expect(wrapper.instance().isFirstDayOfWeek(moment().startOf('week'))).to.equal(true);
+      });
+
+      it('returns true if same day as firstDayOfWeek prop', () => {
+        const firstDayOfWeek = 3;
+        const wrapper = shallow(<DayPickerRangeController firstDayOfWeek={firstDayOfWeek} />);
+        expect(wrapper.instance().isFirstDayOfWeek(moment().startOf('week').day(firstDayOfWeek))).to.equal(true);
+      });
+
+      it('returns false if not the first day of the week', () => {
+        const wrapper = shallow(<DayPickerRangeController />);
+        expect(wrapper.instance().isFirstDayOfWeek(moment().endOf('week'))).to.equal(false);
+      });
+    });
+
+    describe('#isLastDayOfWeek', () => {
+      it('returns true if last day of week', () => {
+        const wrapper = shallow(<DayPickerRangeController />);
+        expect(wrapper.instance().isLastDayOfWeek(moment().endOf('week'))).to.equal(true);
+      });
+
+      it('returns true if 6 days after firstDayOfWeek prop', () => {
+        const firstDayOfWeek = 3;
+        const wrapper = shallow(<DayPickerRangeController firstDayOfWeek={firstDayOfWeek} />);
+        expect(wrapper.instance().isLastDayOfWeek(moment().day(firstDayOfWeek).add(6, 'days'))).to.equal(true);
+      });
+
+      it('returns false if not last of week', () => {
+        const wrapper = shallow(<DayPickerRangeController />);
+        expect(wrapper.instance().isLastDayOfWeek(moment().startOf('week').add(1, 'day'))).to.equal(false);
+      });
+    });
   });
 });
diff --git a/test/components/DayPickerSingleDateController_spec.jsx b/test/components/DayPickerSingleDateController_spec.jsx
index 9bbaef9ab5..2fc9b3a067 100644
--- a/test/components/DayPickerSingleDateController_spec.jsx
+++ b/test/components/DayPickerSingleDateController_spec.jsx
@@ -1344,6 +1344,42 @@ describe('DayPickerSingleDateController', () => {
         expect(wrapper.instance().isToday(moment(today).subtract(1, 'months'))).to.equal(false);
       });
     });
+
+    describe('#isFirstDayOfWeek', () => {
+      it('returns true if first day of this week', () => {
+        const wrapper = shallow(<DayPickerSingleDateController />);
+        expect(wrapper.instance().isFirstDayOfWeek(moment().startOf('week'))).to.equal(true);
+      });
+
+      it('returns true if same day as firstDayOfWeek prop', () => {
+        const firstDayOfWeek = 3;
+        const wrapper = shallow(<DayPickerSingleDateController firstDayOfWeek={firstDayOfWeek} />);
+        expect(wrapper.instance().isFirstDayOfWeek(moment().startOf('week').day(firstDayOfWeek))).to.equal(true);
+      });
+
+      it('returns false if not the first day of the week', () => {
+        const wrapper = shallow(<DayPickerSingleDateController />);
+        expect(wrapper.instance().isFirstDayOfWeek(moment().endOf('week'))).to.equal(false);
+      });
+    });
+
+    describe('#isLastDayOfWeek', () => {
+      it('returns true if last day of week', () => {
+        const wrapper = shallow(<DayPickerSingleDateController />);
+        expect(wrapper.instance().isLastDayOfWeek(moment().endOf('week'))).to.equal(true);
+      });
+
+      it('returns true if 6 days after firstDayOfWeek prop', () => {
+        const firstDayOfWeek = 3;
+        const wrapper = shallow(<DayPickerSingleDateController firstDayOfWeek={firstDayOfWeek} />);
+        expect(wrapper.instance().isLastDayOfWeek(moment().day(firstDayOfWeek).add(6, 'days'))).to.equal(true);
+      });
+
+      it('returns false if not last of week', () => {
+        const wrapper = shallow(<DayPickerSingleDateController />);
+        expect(wrapper.instance().isLastDayOfWeek(moment().startOf('week').add(1, 'day'))).to.equal(false);
+      });
+    });
   });
 
   describe('initialVisibleMonth', () => {

From 71051e77104d4b7aa93e70a49a6d920bcccc3e33 Mon Sep 17 00:00:00 2001
From: Marie P-W <marie.wermuth@gmail.com>
Date: Tue, 30 Jan 2018 11:29:37 +0100
Subject: [PATCH 085/618] Add props to make calendar info panel position
 configurable

---
 src/components/DateRangePicker.jsx            |   7 +
 src/components/DayPicker.jsx                  | 215 ++++++++++++------
 src/components/DayPickerRangeController.jsx   |   9 +
 .../DayPickerSingleDateController.jsx         |   9 +
 src/components/SingleDatePicker.jsx           |   7 +
 src/constants.js                              |   5 +
 src/shapes/CalendarInfoPositionShape.js       |  10 +
 src/shapes/DateRangePickerShape.js            |   2 +
 src/shapes/SingleDatePickerShape.js           |   2 +
 stories/DateRangePicker_calendar.js           |  39 +++-
 stories/SingleDatePicker_calendar.js          |  39 +++-
 11 files changed, 265 insertions(+), 79 deletions(-)
 create mode 100644 src/shapes/CalendarInfoPositionShape.js

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 967df454e2..b3784b622d 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -33,6 +33,10 @@ import {
   OPEN_UP,
   DAY_SIZE,
   ICON_BEFORE_POSITION,
+  INFO_POSITION_TOP,
+  INFO_POSITION_BOTTOM,
+  INFO_POSITION_LEFT,
+  INFO_POSITION_RIGHT,
   FANG_HEIGHT_PX,
   DEFAULT_VERTICAL_SPACING,
 } from '../constants';
@@ -80,6 +84,7 @@ const defaultProps = {
   keepOpenOnDateSelect: false,
   reopenPickerOnClearDates: false,
   renderCalendarInfo: null,
+  calendarInfoPosition: INFO_POSITION_TOP,
   hideKeyboardShortcutsPanel: false,
   daySize: DAY_SIZE,
   isRTL: false,
@@ -329,6 +334,7 @@ class DateRangePicker extends React.Component {
       renderCalendarDay,
       renderDayContents,
       renderCalendarInfo,
+      calendarInfoPosition,
       firstDayOfWeek,
       initialVisibleMonth,
       hideKeyboardShortcutsPanel,
@@ -409,6 +415,7 @@ class DateRangePicker extends React.Component {
           renderCalendarDay={renderCalendarDay}
           renderDayContents={renderDayContents}
           renderCalendarInfo={renderCalendarInfo}
+          calendarInfoPosition={calendarInfoPosition}
           isFocused={isDayPickerFocused}
           showKeyboardShortcuts={showKeyboardShortcuts}
           onBlur={this.onDayPickerBlur}
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 2ec875befd..30fd082098 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -21,17 +21,23 @@ import DayPickerKeyboardShortcuts, {
 } from './DayPickerKeyboardShortcuts';
 
 import getCalendarMonthWidth from '../utils/getCalendarMonthWidth';
+import calculateDimension from '../utils/calculateDimension';
 import getActiveElement from '../utils/getActiveElement';
 import isDayVisible from '../utils/isDayVisible';
 
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
+import CalendarInfoPositionShape from '../shapes/CalendarInfoPositionShape';
 
 import {
   HORIZONTAL_ORIENTATION,
   VERTICAL_ORIENTATION,
   VERTICAL_SCROLLABLE,
   DAY_SIZE,
+  INFO_POSITION_TOP,
+  INFO_POSITION_BOTTOM,
+  INFO_POSITION_LEFT,
+  INFO_POSITION_RIGHT,
   MODIFIER_KEY_NAMES,
 } from '../constants';
 
@@ -53,6 +59,7 @@ const propTypes = forbidExtraProps({
   initialVisibleMonth: PropTypes.func,
   firstDayOfWeek: DayOfWeekShape,
   renderCalendarInfo: PropTypes.func,
+  calendarInfoPosition: CalendarInfoPositionShape,
   hideKeyboardShortcutsPanel: PropTypes.bool,
   daySize: nonNegativeInteger,
   isRTL: PropTypes.bool,
@@ -102,6 +109,7 @@ export const defaultProps = {
   initialVisibleMonth: () => moment(),
   firstDayOfWeek: null,
   renderCalendarInfo: null,
+  calendarInfoPosition: INFO_POSITION_TOP,
   hideKeyboardShortcutsPanel: false,
   daySize: DAY_SIZE,
   isRTL: false,
@@ -183,6 +191,7 @@ class DayPicker extends React.Component {
     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.setCalendarMonthHeights = this.setCalendarMonthHeights.bind(this);
@@ -449,6 +458,10 @@ class DayPicker extends React.Component {
     this.container = ref;
   }
 
+  setCalendarInfoRef(ref) {
+    this.calendarInfo = ref;
+  }
+
   setTransitionContainerRef(ref) {
     this.transitionContainer = ref;
   }
@@ -694,6 +707,7 @@ class DayPicker extends React.Component {
       renderCalendarDay,
       renderDayContents,
       renderCalendarInfo,
+      calendarInfoPosition,
       hideKeyboardShortcutsPanel,
       onOutsideClick,
       monthFormat,
@@ -714,18 +728,6 @@ class DayPicker extends React.Component {
       weekHeaders.push(this.renderWeekHeader(i));
     }
 
-    const verticalScrollable = orientation === VERTICAL_SCROLLABLE;
-    const firstVisibleMonthIndex = this.getFirstVisibleIndex();
-    const horizontalWidth = (calendarMonthWidth * numberOfMonths) + (2 * DAY_PICKER_PADDING);
-
-    const dayPickerStyle = {
-      width: this.isHorizontal() && horizontalWidth,
-
-      // These values are to center the datepicker (approximately) on the page
-      marginLeft: this.isHorizontal() && withPortal && -horizontalWidth / 2,
-      marginTop: this.isHorizontal() && withPortal && -calendarMonthWidth / 2,
-    };
-
     let height;
     if (this.isHorizontal()) {
       height = this.calendarMonthGridHeight;
@@ -736,7 +738,7 @@ class DayPicker extends React.Component {
     }
 
     const transitionContainerStyle = {
-      width: this.isHorizontal() && horizontalWidth,
+      width: this.isHorizontal() && fullHorizontalWidth,
       height,
     };
 
@@ -753,6 +755,48 @@ class DayPicker extends React.Component {
 
     const isHorizontalAndAnimating = this.isHorizontal() && isCalendarMonthGridAnimating;
 
+    const calendarInfoPositionTop = calendarInfoPosition === INFO_POSITION_TOP;
+    const calendarInfoPositionBottom = calendarInfoPosition === INFO_POSITION_BOTTOM;
+    const calendarInfoPositionLeft = calendarInfoPosition === INFO_POSITION_LEFT;
+    const calendarInfoPositionRight = calendarInfoPosition === INFO_POSITION_RIGHT;
+
+    const calendarInfoStyle = {
+      minHeight: height
+    };
+
+    const calendarInfo = renderCalendarInfo && (
+      <div
+        ref={this.setCalendarInfoRef}
+        {...css(
+          (calendarInfoPositionLeft || calendarInfoPositionRight) && calendarInfoStyle,
+          (calendarInfoPositionLeft || calendarInfoPositionRight) && styles.DayPicker_calendarInfo__horizontal,
+        )}
+      >
+        { renderCalendarInfo() }
+      </div>
+    );
+
+    const calendarInfoWith = renderCalendarInfo && (calendarInfoPositionLeft || calendarInfoPositionRight)
+      ? calculateDimension(this.calendarInfo, 'width', true, true)
+      : 0;
+
+    const verticalScrollable = orientation === VERTICAL_SCROLLABLE;
+    const firstVisibleMonthIndex = this.getFirstVisibleIndex();
+    const dayPickerWrapperHorizontalWidth = (calendarMonthWidth * numberOfMonths) + (2 * DAY_PICKER_PADDING);
+    const fullHorizontalWidth = (calendarMonthWidth * numberOfMonths) + (2 * DAY_PICKER_PADDING) + calendarInfoWith;
+
+    const dayPickerWrapperStyle = {
+      width: dayPickerWrapperHorizontalWidth
+    };
+
+    const dayPickerStyle = {
+      width: this.isHorizontal() && fullHorizontalWidth,
+
+      // These values are to center the datepicker (approximately) on the page
+      marginLeft: this.isHorizontal() && withPortal && -fullHorizontalWidth / 2,
+      marginTop: this.isHorizontal() && withPortal && -calendarMonthWidth / 2,
+    };
+
     return (
       <div
         role="application"
@@ -770,81 +814,92 @@ class DayPicker extends React.Component {
         )}
       >
         <OutsideClickHandler onOutsideClick={onOutsideClick}>
+          {(calendarInfoPositionTop || calendarInfoPositionLeft) && calendarInfo}
+
           <div
             {...css(
-              styles.DayPicker_weekHeaders,
-              this.isHorizontal() && styles.DayPicker_weekHeaders__horizontal,
+              dayPickerWrapperStyle,
+              (calendarInfoPositionLeft || calendarInfoPositionRight) && styles.DayPicker_wrapper__horizontal,
             )}
-            aria-hidden="true"
-            role="presentation"
-          >
-            {weekHeaders}
-          </div>
-
-          <div // eslint-disable-line jsx-a11y/no-noninteractive-element-interactions
-            {...css(styles.DayPicker_focusRegion)}
-            ref={this.setContainerRef}
-            onClick={(e) => { e.stopPropagation(); }}
-            onKeyDown={this.onKeyDown}
-            onMouseUp={() => { this.setState({ withMouseInteractions: true }); }}
-            role="region"
-            tabIndex={-1}
           >
-            {!verticalScrollable && this.renderNavigation()}
 
             <div
               {...css(
-                styles.DayPicker_transitionContainer,
-                isHorizontalAndAnimating && styles.DayPicker_transitionContainer__horizontal,
-                this.isVertical() && styles.DayPicker_transitionContainer__vertical,
-                verticalScrollable && styles.DayPicker_transitionContainer__verticalScrollable,
-                transitionContainerStyle,
+                styles.DayPicker_weekHeaders,
+                this.isHorizontal() && styles.DayPicker_weekHeaders__horizontal,
               )}
-              ref={this.setTransitionContainerRef}
+              aria-hidden="true"
+              role="presentation"
             >
-              <CalendarMonthGrid
-                setCalendarMonthHeights={this.setCalendarMonthHeights}
-                transformValue={transformValue}
-                enableOutsideDays={enableOutsideDays}
-                firstVisibleMonthIndex={firstVisibleMonthIndex}
-                initialMonth={currentMonth}
-                isAnimating={isCalendarMonthGridAnimating}
-                modifiers={modifiers}
-                orientation={orientation}
-                numberOfMonths={numberOfMonths * scrollableMonthMultiple}
-                onDayClick={onDayClick}
-                onDayMouseEnter={onDayMouseEnter}
-                onDayMouseLeave={onDayMouseLeave}
-                renderMonth={renderMonth}
-                renderCalendarDay={renderCalendarDay}
-                renderDayContents={renderDayContents}
-                onMonthTransitionEnd={this.updateStateAfterMonthTransition}
-                monthFormat={monthFormat}
-                daySize={daySize}
-                firstDayOfWeek={firstDayOfWeek}
-                isFocused={shouldFocusDate}
-                focusedDate={focusedDate}
-                phrases={phrases}
-                isRTL={isRTL}
-                dayAriaLabelFormat={dayAriaLabelFormat}
-                transitionDuration={transitionDuration}
-              />
-              {verticalScrollable && this.renderNavigation()}
+              {weekHeaders}
+            </div>
+
+            <div // eslint-disable-line jsx-a11y/no-noninteractive-element-interactions
+              {...css(styles.DayPicker_focusRegion)}
+              ref={this.setContainerRef}
+              onClick={(e) => { e.stopPropagation(); }}
+              onKeyDown={this.onKeyDown}
+              onMouseUp={() => { this.setState({ withMouseInteractions: true }); }}
+              role="region"
+              tabIndex={-1}
+            >
+              {!verticalScrollable && this.renderNavigation()}
+
+              <div
+                {...css(
+                  styles.DayPicker_transitionContainer,
+                  isHorizontalAndAnimating && styles.DayPicker_transitionContainer__horizontal,
+                  this.isVertical() && styles.DayPicker_transitionContainer__vertical,
+                  verticalScrollable && styles.DayPicker_transitionContainer__verticalScrollable,
+                  transitionContainerStyle,
+                )}
+                ref={this.setTransitionContainerRef}
+              >
+                <CalendarMonthGrid
+                  setCalendarMonthHeights={this.setCalendarMonthHeights}
+                  transformValue={transformValue}
+                  enableOutsideDays={enableOutsideDays}
+                  firstVisibleMonthIndex={firstVisibleMonthIndex}
+                  initialMonth={currentMonth}
+                  isAnimating={isCalendarMonthGridAnimating}
+                  modifiers={modifiers}
+                  orientation={orientation}
+                  numberOfMonths={numberOfMonths * scrollableMonthMultiple}
+                  onDayClick={onDayClick}
+                  onDayMouseEnter={onDayMouseEnter}
+                  onDayMouseLeave={onDayMouseLeave}
+                  renderMonth={renderMonth}
+                  renderCalendarDay={renderCalendarDay}
+                  renderDayContents={renderDayContents}
+                  onMonthTransitionEnd={this.updateStateAfterMonthTransition}
+                  monthFormat={monthFormat}
+                  daySize={daySize}
+                  firstDayOfWeek={firstDayOfWeek}
+                  isFocused={shouldFocusDate}
+                  focusedDate={focusedDate}
+                  phrases={phrases}
+                  isRTL={isRTL}
+                  dayAriaLabelFormat={dayAriaLabelFormat}
+                  transitionDuration={transitionDuration}
+                />
+                {verticalScrollable && this.renderNavigation()}
+              </div>
+
+              {!isTouch && !hideKeyboardShortcutsPanel &&
+                <DayPickerKeyboardShortcuts
+                  block={this.isVertical() && !withPortal}
+                  buttonLocation={keyboardShortcutButtonLocation}
+                  showKeyboardShortcutsPanel={showKeyboardShortcuts}
+                  openKeyboardShortcutsPanel={this.openKeyboardShortcutsPanel}
+                  closeKeyboardShortcutsPanel={this.closeKeyboardShortcutsPanel}
+                  phrases={phrases}
+                />
+              }
             </div>
 
-            {!isTouch && !hideKeyboardShortcutsPanel &&
-              <DayPickerKeyboardShortcuts
-                block={this.isVertical() && !withPortal}
-                buttonLocation={keyboardShortcutButtonLocation}
-                showKeyboardShortcutsPanel={showKeyboardShortcuts}
-                openKeyboardShortcutsPanel={this.openKeyboardShortcutsPanel}
-                closeKeyboardShortcutsPanel={this.closeKeyboardShortcutsPanel}
-                phrases={phrases}
-              />
-            }
           </div>
 
-          {renderCalendarInfo && renderCalendarInfo()}
+          {(calendarInfoPositionBottom || calendarInfoPositionRight) && calendarInfo}
         </OutsideClickHandler>
       </div>
     );
@@ -894,6 +949,16 @@ export default withStyles(({ reactDates: { color, font, zIndex } }) => ({
     outline: 'none',
   },
 
+  DayPicker_calendarInfo__horizontal: {
+    display: 'table-cell',
+    verticalAlign: 'top',
+  },
+
+  DayPicker_wrapper__horizontal: {
+    display: 'table-cell',
+    verticalAlign: 'top',
+  },
+
   DayPicker_weekHeaders: {
     position: 'relative',
   },
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 4272e36478..41866708ef 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -26,6 +26,7 @@ import toISOMonthString from '../utils/toISOMonthString';
 import FocusedInputShape from '../shapes/FocusedInputShape';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
+import CalendarInfoPositionShape from '../shapes/CalendarInfoPositionShape';
 
 import {
   START_DATE,
@@ -33,6 +34,10 @@ import {
   HORIZONTAL_ORIENTATION,
   VERTICAL_SCROLLABLE,
   DAY_SIZE,
+  INFO_POSITION_TOP,
+  INFO_POSITION_BOTTOM,
+  INFO_POSITION_LEFT,
+  INFO_POSITION_RIGHT,
 } from '../constants';
 
 import DayPicker from './DayPicker';
@@ -74,6 +79,7 @@ const propTypes = forbidExtraProps({
   renderCalendarDay: PropTypes.func,
   renderDayContents: PropTypes.func,
   renderCalendarInfo: PropTypes.func,
+  calendarInfoPosition: CalendarInfoPositionShape,
   firstDayOfWeek: DayOfWeekShape,
   verticalHeight: nonNegativeInteger,
   transitionDuration: nonNegativeInteger,
@@ -129,6 +135,7 @@ const defaultProps = {
   renderCalendarDay: undefined,
   renderDayContents: null,
   renderCalendarInfo: null,
+  calendarInfoPosition: INFO_POSITION_TOP,
   firstDayOfWeek: null,
   verticalHeight: null,
   noBorder: false,
@@ -960,6 +967,7 @@ export default class DayPickerRangeController extends React.Component {
       renderCalendarDay,
       renderDayContents,
       renderCalendarInfo,
+      calendarInfoPosition,
       onBlur,
       isFocused,
       showKeyboardShortcuts,
@@ -998,6 +1006,7 @@ export default class DayPickerRangeController extends React.Component {
         renderCalendarDay={renderCalendarDay}
         renderDayContents={renderDayContents}
         renderCalendarInfo={renderCalendarInfo}
+        calendarInfoPosition={calendarInfoPosition}
         firstDayOfWeek={firstDayOfWeek}
         hideKeyboardShortcutsPanel={hideKeyboardShortcutsPanel}
         isFocused={isFocused}
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 0773f89f15..4bf0d9f369 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -20,11 +20,16 @@ import toISOMonthString from '../utils/toISOMonthString';
 
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
+import CalendarInfoPositionShape from '../shapes/CalendarInfoPositionShape';
 
 import {
   HORIZONTAL_ORIENTATION,
   VERTICAL_SCROLLABLE,
   DAY_SIZE,
+  INFO_POSITION_TOP,
+  INFO_POSITION_BOTTOM,
+  INFO_POSITION_LEFT,
+  INFO_POSITION_RIGHT,
 } from '../constants';
 
 import DayPicker from './DayPicker';
@@ -66,6 +71,7 @@ const propTypes = forbidExtraProps({
   renderCalendarDay: PropTypes.func,
   renderDayContents: PropTypes.func,
   renderCalendarInfo: PropTypes.func,
+  calendarInfoPosition: CalendarInfoPositionShape,
 
   // accessibility
   onBlur: PropTypes.func,
@@ -118,6 +124,7 @@ const defaultProps = {
   renderCalendarDay: undefined,
   renderDayContents: null,
   renderCalendarInfo: null,
+  calendarInfoPosition: INFO_POSITION_TOP,
 
   // accessibility
   onBlur() {},
@@ -588,6 +595,7 @@ export default class DayPickerSingleDateController extends React.Component {
       renderCalendarDay,
       renderDayContents,
       renderCalendarInfo,
+      calendarInfoPosition,
       isFocused,
       isRTL,
       phrases,
@@ -626,6 +634,7 @@ export default class DayPickerSingleDateController extends React.Component {
         renderCalendarDay={renderCalendarDay}
         renderDayContents={renderDayContents}
         renderCalendarInfo={renderCalendarInfo}
+        calendarInfoPosition={calendarInfoPosition}
         isFocused={isFocused}
         getFirstFocusableDay={this.getFirstFocusableDay}
         onBlur={onBlur}
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index c2f37aad1d..85b2a8f5be 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -31,6 +31,10 @@ import {
   OPEN_UP,
   DAY_SIZE,
   ICON_BEFORE_POSITION,
+  INFO_POSITION_TOP,
+  INFO_POSITION_BOTTOM,
+  INFO_POSITION_LEFT,
+  INFO_POSITION_RIGHT,
   FANG_HEIGHT_PX,
   DEFAULT_VERTICAL_SPACING,
 } from '../constants';
@@ -77,6 +81,7 @@ const defaultProps = {
   keepOpenOnDateSelect: false,
   reopenPickerOnClearDate: false,
   renderCalendarInfo: null,
+  calendarInfoPosition: INFO_POSITION_TOP,
   hideKeyboardShortcutsPanel: false,
   daySize: DAY_SIZE,
   isRTL: false,
@@ -360,6 +365,7 @@ class SingleDatePicker extends React.Component {
       renderCalendarDay,
       renderDayContents,
       renderCalendarInfo,
+      calendarInfoPosition,
       hideKeyboardShortcutsPanel,
       firstDayOfWeek,
       customCloseIcon,
@@ -430,6 +436,7 @@ class SingleDatePicker extends React.Component {
           renderCalendarDay={renderCalendarDay}
           renderDayContents={renderDayContents}
           renderCalendarInfo={renderCalendarInfo}
+          calendarInfoPosition={calendarInfoPosition}
           isFocused={isDayPickerFocused}
           showKeyboardShortcuts={showKeyboardShortcuts}
           onBlur={this.onDayPickerBlur}
diff --git a/src/constants.js b/src/constants.js
index 8a6a798116..64c95467e3 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -12,6 +12,11 @@ export const VERTICAL_SCROLLABLE = 'verticalScrollable';
 export const ICON_BEFORE_POSITION = 'before';
 export const ICON_AFTER_POSITION = 'after';
 
+export const INFO_POSITION_TOP = 'top'
+export const INFO_POSITION_BOTTOM = 'bottom'
+export const INFO_POSITION_LEFT = 'left'
+export const INFO_POSITION_RIGHT  = 'right'
+
 export const ANCHOR_LEFT = 'left';
 export const ANCHOR_RIGHT = 'right';
 
diff --git a/src/shapes/CalendarInfoPositionShape.js b/src/shapes/CalendarInfoPositionShape.js
new file mode 100644
index 0000000000..42c32e09b6
--- /dev/null
+++ b/src/shapes/CalendarInfoPositionShape.js
@@ -0,0 +1,10 @@
+import PropTypes from 'prop-types';
+
+import {
+  INFO_POSITION_TOP,
+  INFO_POSITION_BOTTOM,
+  INFO_POSITION_LEFT,
+  INFO_POSITION_RIGHT,
+} from '../constants';
+
+export default PropTypes.oneOf([INFO_POSITION_TOP, INFO_POSITION_BOTTOM, INFO_POSITION_LEFT, INFO_POSITION_RIGHT]);
diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js
index 5c7ff7f945..962ce954f4 100644
--- a/src/shapes/DateRangePickerShape.js
+++ b/src/shapes/DateRangePickerShape.js
@@ -11,6 +11,7 @@ import OrientationShape from '../shapes/OrientationShape';
 import anchorDirectionShape from '../shapes/AnchorDirectionShape';
 import openDirectionShape from '../shapes/OpenDirectionShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
+import CalendarInfoPositionShape from '../shapes/CalendarInfoPositionShape';
 
 export default {
   // required props for a functional interactive DateRangePicker
@@ -60,6 +61,7 @@ export default {
   keepOpenOnDateSelect: PropTypes.bool,
   reopenPickerOnClearDates: PropTypes.bool,
   renderCalendarInfo: PropTypes.func,
+  calendarInfoPosition: CalendarInfoPositionShape,
   hideKeyboardShortcutsPanel: PropTypes.bool,
   verticalHeight: nonNegativeInteger,
   transitionDuration: nonNegativeInteger,
diff --git a/src/shapes/SingleDatePickerShape.js b/src/shapes/SingleDatePickerShape.js
index 2adfb77175..c9987584b8 100644
--- a/src/shapes/SingleDatePickerShape.js
+++ b/src/shapes/SingleDatePickerShape.js
@@ -10,6 +10,7 @@ import OrientationShape from '../shapes/OrientationShape';
 import anchorDirectionShape from '../shapes/AnchorDirectionShape';
 import openDirectionShape from '../shapes/OpenDirectionShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
+import CalendarInfoPositionShape from '../shapes/CalendarInfoPositionShape';
 
 export default {
   // required props for a functional interactive SingleDatePicker
@@ -52,6 +53,7 @@ export default {
   keepOpenOnDateSelect: PropTypes.bool,
   reopenPickerOnClearDate: PropTypes.bool,
   renderCalendarInfo: PropTypes.func,
+  calendarInfoPosition: CalendarInfoPositionShape,
   hideKeyboardShortcutsPanel: PropTypes.bool,
   daySize: nonNegativeInteger,
   isRTL: PropTypes.bool,
diff --git a/stories/DateRangePicker_calendar.js b/stories/DateRangePicker_calendar.js
index 4c085c4c52..43796f0a4f 100644
--- a/stories/DateRangePicker_calendar.js
+++ b/stories/DateRangePicker_calendar.js
@@ -36,7 +36,6 @@ const TestCustomInfoPanel = () => (
   <div
     style={{
       padding: '10px 21px',
-      borderTop: '1px solid #dce0e0',
       color: '#484848',
     }}
   >
@@ -130,7 +129,7 @@ storiesOf('DRP - Calendar Props', module)
       autoFocus
     />
   ))
-  .addWithInfo('with info panel', () => (
+  .addWithInfo('with info panel default', () => (
     <DateRangePickerWrapper
       renderCalendarInfo={() => (
         <TestCustomInfoPanel />
@@ -138,6 +137,42 @@ storiesOf('DRP - Calendar Props', module)
       autoFocus
     />
   ))
+  .addWithInfo('with info panel left', () => (
+    <DateRangePickerWrapper
+      calendarInfoPosition="left"
+      renderCalendarInfo={() => (
+        <TestCustomInfoPanel />
+      )}
+      autoFocus
+    />
+  ))
+  .addWithInfo('with info panel right', () => (
+    <DateRangePickerWrapper
+      calendarInfoPosition="right"
+      renderCalendarInfo={() => (
+        <TestCustomInfoPanel />
+      )}
+      autoFocus
+    />
+  ))
+  .addWithInfo('with info panel bottom', () => (
+    <DateRangePickerWrapper
+      calendarInfoPosition="bottom"
+      renderCalendarInfo={() => (
+        <TestCustomInfoPanel />
+      )}
+      autoFocus
+    />
+  ))
+  .addWithInfo('with info panel top', () => (
+    <DateRangePickerWrapper
+      calendarInfoPosition="top"
+      renderCalendarInfo={() => (
+        <TestCustomInfoPanel />
+      )}
+      autoFocus
+    />
+  ))
   .addWithInfo('with keyboard shorcuts panel hidden', () => (
     <DateRangePickerWrapper
       hideKeyboardShortcutsPanel
diff --git a/stories/SingleDatePicker_calendar.js b/stories/SingleDatePicker_calendar.js
index af2e07c990..1d7c9581ba 100644
--- a/stories/SingleDatePicker_calendar.js
+++ b/stories/SingleDatePicker_calendar.js
@@ -36,7 +36,6 @@ const TestCustomInfoPanel = () => (
   <div
     style={{
       padding: '10px 21px',
-      borderTop: '1px solid #dce0e0',
       color: '#484848',
     }}
   >
@@ -121,8 +120,44 @@ storiesOf('SDP - Calendar Props', module)
       autoFocus
     />
   ))
-  .addWithInfo('with info panel', () => (
+  .addWithInfo('with info panel default', () => (
     <SingleDatePickerWrapper
+      renderCalendarInfo={() => (
+        <TestCustomInfoPanel borderPosition='borderBottom'/>
+      )}
+      autoFocus
+    />
+  ))
+  .addWithInfo('with info panel left', () => (
+    <SingleDatePickerWrapper
+      calendarInfoPosition="left"
+      renderCalendarInfo={() => (
+        <TestCustomInfoPanel />
+      )}
+      autoFocus
+    />
+  ))
+  .addWithInfo('with info panel right', () => (
+    <SingleDatePickerWrapper
+      calendarInfoPosition="right"
+      renderCalendarInfo={() => (
+        <TestCustomInfoPanel />
+      )}
+      autoFocus
+    />
+  ))
+  .addWithInfo('with info panel bottom', () => (
+    <SingleDatePickerWrapper
+      calendarInfoPosition="bottom"
+      renderCalendarInfo={() => (
+        <TestCustomInfoPanel />
+      )}
+      autoFocus
+    />
+  ))
+  .addWithInfo('with info panel top', () => (
+    <SingleDatePickerWrapper
+      calendarInfoPosition="top"
       renderCalendarInfo={() => (
         <TestCustomInfoPanel />
       )}

From 62ef8c343ff0e5ede3a6a6228be20b9b2aab967a Mon Sep 17 00:00:00 2001
From: Marie P-W <marie.wermuth@gmail.com>
Date: Tue, 30 Jan 2018 13:07:15 +0100
Subject: [PATCH 086/618] Fix #989 - Fix linting

---
 src/components/DateRangePicker.jsx               | 3 ---
 src/components/DayPickerRangeController.jsx      | 3 ---
 src/components/DayPickerSingleDateController.jsx | 3 ---
 src/components/SingleDatePicker.jsx              | 3 ---
 src/constants.js                                 | 8 ++++----
 src/shapes/CalendarInfoPositionShape.js          | 7 ++++++-
 6 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index b3784b622d..f4959f024d 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -34,9 +34,6 @@ import {
   DAY_SIZE,
   ICON_BEFORE_POSITION,
   INFO_POSITION_TOP,
-  INFO_POSITION_BOTTOM,
-  INFO_POSITION_LEFT,
-  INFO_POSITION_RIGHT,
   FANG_HEIGHT_PX,
   DEFAULT_VERTICAL_SPACING,
 } from '../constants';
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 41866708ef..ffb21b1a74 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -35,9 +35,6 @@ import {
   VERTICAL_SCROLLABLE,
   DAY_SIZE,
   INFO_POSITION_TOP,
-  INFO_POSITION_BOTTOM,
-  INFO_POSITION_LEFT,
-  INFO_POSITION_RIGHT,
 } from '../constants';
 
 import DayPicker from './DayPicker';
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 4bf0d9f369..4510f0b1ca 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -27,9 +27,6 @@ import {
   VERTICAL_SCROLLABLE,
   DAY_SIZE,
   INFO_POSITION_TOP,
-  INFO_POSITION_BOTTOM,
-  INFO_POSITION_LEFT,
-  INFO_POSITION_RIGHT,
 } from '../constants';
 
 import DayPicker from './DayPicker';
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index 85b2a8f5be..f6f78ddaf2 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -32,9 +32,6 @@ import {
   DAY_SIZE,
   ICON_BEFORE_POSITION,
   INFO_POSITION_TOP,
-  INFO_POSITION_BOTTOM,
-  INFO_POSITION_LEFT,
-  INFO_POSITION_RIGHT,
   FANG_HEIGHT_PX,
   DEFAULT_VERTICAL_SPACING,
 } from '../constants';
diff --git a/src/constants.js b/src/constants.js
index 64c95467e3..273c8074f8 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -12,10 +12,10 @@ export const VERTICAL_SCROLLABLE = 'verticalScrollable';
 export const ICON_BEFORE_POSITION = 'before';
 export const ICON_AFTER_POSITION = 'after';
 
-export const INFO_POSITION_TOP = 'top'
-export const INFO_POSITION_BOTTOM = 'bottom'
-export const INFO_POSITION_LEFT = 'left'
-export const INFO_POSITION_RIGHT  = 'right'
+export const INFO_POSITION_TOP = 'top';
+export const INFO_POSITION_BOTTOM = 'bottom';
+export const INFO_POSITION_LEFT = 'left';
+export const INFO_POSITION_RIGHT = 'right';
 
 export const ANCHOR_LEFT = 'left';
 export const ANCHOR_RIGHT = 'right';
diff --git a/src/shapes/CalendarInfoPositionShape.js b/src/shapes/CalendarInfoPositionShape.js
index 42c32e09b6..c2f433ecb4 100644
--- a/src/shapes/CalendarInfoPositionShape.js
+++ b/src/shapes/CalendarInfoPositionShape.js
@@ -7,4 +7,9 @@ import {
   INFO_POSITION_RIGHT,
 } from '../constants';
 
-export default PropTypes.oneOf([INFO_POSITION_TOP, INFO_POSITION_BOTTOM, INFO_POSITION_LEFT, INFO_POSITION_RIGHT]);
+export default PropTypes.oneOf([
+  INFO_POSITION_TOP,
+  INFO_POSITION_BOTTOM,
+  INFO_POSITION_LEFT,
+  INFO_POSITION_RIGHT,
+]);

From f24ef36cdf2f87b9812f5b828aa62f8c5ae14e46 Mon Sep 17 00:00:00 2001
From: Marie P-W <marie.wermuth@gmail.com>
Date: Tue, 30 Jan 2018 13:34:43 +0100
Subject: [PATCH 087/618] Fix #989 - Fix linting

---
 src/components/DayPicker.jsx | 20 +++++++-------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 30fd082098..fbeb23c621 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -759,34 +759,28 @@ class DayPicker extends React.Component {
     const calendarInfoPositionBottom = calendarInfoPosition === INFO_POSITION_BOTTOM;
     const calendarInfoPositionLeft = calendarInfoPosition === INFO_POSITION_LEFT;
     const calendarInfoPositionRight = calendarInfoPosition === INFO_POSITION_RIGHT;
-
-    const calendarInfoStyle = {
-      minHeight: height
-    };
+    const calendarInfoIsInline = calendarInfoPositionLeft || calendarInfoPositionRight;
 
     const calendarInfo = renderCalendarInfo && (
       <div
         ref={this.setCalendarInfoRef}
-        {...css(
-          (calendarInfoPositionLeft || calendarInfoPositionRight) && calendarInfoStyle,
-          (calendarInfoPositionLeft || calendarInfoPositionRight) && styles.DayPicker_calendarInfo__horizontal,
-        )}
+        {...css((calendarInfoIsInline) && styles.DayPicker_calendarInfo__horizontal)}
       >
         { renderCalendarInfo() }
       </div>
     );
 
-    const calendarInfoWith = renderCalendarInfo && (calendarInfoPositionLeft || calendarInfoPositionRight)
+    const calendarInfoWith = renderCalendarInfo && calendarInfoIsInline
       ? calculateDimension(this.calendarInfo, 'width', true, true)
       : 0;
 
     const verticalScrollable = orientation === VERTICAL_SCROLLABLE;
     const firstVisibleMonthIndex = this.getFirstVisibleIndex();
-    const dayPickerWrapperHorizontalWidth = (calendarMonthWidth * numberOfMonths) + (2 * DAY_PICKER_PADDING);
-    const fullHorizontalWidth = (calendarMonthWidth * numberOfMonths) + (2 * DAY_PICKER_PADDING) + calendarInfoWith;
+    const wrapperHorizontalWidth = (calendarMonthWidth * numberOfMonths) + (2 * DAY_PICKER_PADDING);
+    const fullHorizontalWidth = wrapperHorizontalWidth + calendarInfoWith;
 
     const dayPickerWrapperStyle = {
-      width: dayPickerWrapperHorizontalWidth
+      width: wrapperHorizontalWidth,
     };
 
     const dayPickerStyle = {
@@ -819,7 +813,7 @@ class DayPicker extends React.Component {
           <div
             {...css(
               dayPickerWrapperStyle,
-              (calendarInfoPositionLeft || calendarInfoPositionRight) && styles.DayPicker_wrapper__horizontal,
+              (calendarInfoIsInline) && styles.DayPicker_wrapper__horizontal,
             )}
           >
 

From efcd0f5b33c695ebd6e74d7d30ed6186b245009f Mon Sep 17 00:00:00 2001
From: Marie P-W <marie.wermuth@gmail.com>
Date: Tue, 30 Jan 2018 13:43:33 +0100
Subject: [PATCH 088/618] Fix #989 - Fix linting

---
 src/components/DayPicker.jsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index fbeb23c621..43c7842852 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -728,6 +728,7 @@ class DayPicker extends React.Component {
       weekHeaders.push(this.renderWeekHeader(i));
     }
 
+    const verticalScrollable = orientation === VERTICAL_SCROLLABLE;
     let height;
     if (this.isHorizontal()) {
       height = this.calendarMonthGridHeight;
@@ -737,11 +738,6 @@ class DayPicker extends React.Component {
       height = verticalHeight || 1.75 * calendarMonthWidth;
     }
 
-    const transitionContainerStyle = {
-      width: this.isHorizontal() && fullHorizontalWidth,
-      height,
-    };
-
     const isCalendarMonthGridAnimating = monthTransition !== null;
     const transformType = this.isVertical() ? 'translateY' : 'translateX';
     const transformValue = `${transformType}(${translationValue}px)`;
@@ -774,11 +770,15 @@ class DayPicker extends React.Component {
       ? calculateDimension(this.calendarInfo, 'width', true, true)
       : 0;
 
-    const verticalScrollable = orientation === VERTICAL_SCROLLABLE;
     const firstVisibleMonthIndex = this.getFirstVisibleIndex();
     const wrapperHorizontalWidth = (calendarMonthWidth * numberOfMonths) + (2 * DAY_PICKER_PADDING);
     const fullHorizontalWidth = wrapperHorizontalWidth + calendarInfoWith;
 
+    const transitionContainerStyle = {
+      width: this.isHorizontal() && wrapperHorizontalWidth,
+      height,
+    };
+
     const dayPickerWrapperStyle = {
       width: wrapperHorizontalWidth,
     };

From 51ea6e07d997cc6f5d4e472c1d39d97fe55b9573 Mon Sep 17 00:00:00 2001
From: LiranCohen <iliran11@gmail.com>
Date: Tue, 30 Jan 2018 16:39:00 +0200
Subject: [PATCH 089/618] avoid pitfall of executing the callback before state
 finished update.

---
 src/components/DayPickerSingleDateController.jsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 62b4d5eb70..94ea461544 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -362,9 +362,10 @@ export default class DayPickerSingleDateController extends React.Component {
         ...newVisibleDays,
         ...this.getModifiers(prevMonthVisibleDays),
       },
+    },()=>{
+      onPrevMonthClick(prevMonth.clone());
     });
 
-    onPrevMonthClick(prevMonth.clone());
   }
 
   onNextMonthClick() {
@@ -386,9 +387,9 @@ export default class DayPickerSingleDateController extends React.Component {
         ...newVisibleDays,
         ...this.getModifiers(nextMonthVisibleDays),
       },
+    },() => {
+      onNextMonthClick(newCurrentMonth.clone());
     });
-
-    onNextMonthClick(newCurrentMonth.clone());
   }
 
 

From 1d05379c36133e0a19f03690825c9652a80ecbe3 Mon Sep 17 00:00:00 2001
From: LiranCohen <iliran11@gmail.com>
Date: Tue, 30 Jan 2018 17:04:03 +0200
Subject: [PATCH 090/618] style fixes.

---
 src/components/DayPickerSingleDateController.jsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 94ea461544..893dea5efe 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -362,10 +362,9 @@ export default class DayPickerSingleDateController extends React.Component {
         ...newVisibleDays,
         ...this.getModifiers(prevMonthVisibleDays),
       },
-    },()=>{
+    }, () => {
       onPrevMonthClick(prevMonth.clone());
     });
-
   }
 
   onNextMonthClick() {
@@ -387,7 +386,7 @@ export default class DayPickerSingleDateController extends React.Component {
         ...newVisibleDays,
         ...this.getModifiers(nextMonthVisibleDays),
       },
-    },() => {
+    }, () => {
       onNextMonthClick(newCurrentMonth.clone());
     });
   }

From ddbb26bebdbc4b20fa786accf202eafce21d86b4 Mon Sep 17 00:00:00 2001
From: Marie P-W <marie.wermuth@gmail.com>
Date: Wed, 31 Jan 2018 11:22:59 +0100
Subject: [PATCH 091/618] Fix jsx curly braces | #989

---
 src/components/DayPicker.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 43c7842852..3ffa212570 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -762,7 +762,7 @@ class DayPicker extends React.Component {
         ref={this.setCalendarInfoRef}
         {...css((calendarInfoIsInline) && styles.DayPicker_calendarInfo__horizontal)}
       >
-        { renderCalendarInfo() }
+        {renderCalendarInfo()}
       </div>
     );
 

From 3e4847807ae75d55157c7717c0e4dfcab603c7a4 Mon Sep 17 00:00:00 2001
From: Marie P-W <marie.wermuth@gmail.com>
Date: Wed, 31 Jan 2018 11:46:49 +0100
Subject: [PATCH 092/618] Fix - cache in a variable value of
 `this.horizontal()` instead of multiple calls | #989

---
 src/components/DayPicker.jsx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 3ffa212570..f18777fd01 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -722,6 +722,8 @@ class DayPicker extends React.Component {
       transitionDuration,
     } = this.props;
 
+    const isHorizontal = this.isHorizontal();
+
     const numOfWeekHeaders = this.isVertical() ? 1 : numberOfMonths;
     const weekHeaders = [];
     for (let i = 0; i < numOfWeekHeaders; i += 1) {
@@ -730,7 +732,7 @@ class DayPicker extends React.Component {
 
     const verticalScrollable = orientation === VERTICAL_SCROLLABLE;
     let height;
-    if (this.isHorizontal()) {
+    if (isHorizontal) {
       height = this.calendarMonthGridHeight;
     } else if (this.isVertical() && !verticalScrollable && !withPortal) {
       // If the user doesn't set a desired height,
@@ -749,7 +751,7 @@ class DayPicker extends React.Component {
       keyboardShortcutButtonLocation = withPortal ? TOP_LEFT : TOP_RIGHT;
     }
 
-    const isHorizontalAndAnimating = this.isHorizontal() && isCalendarMonthGridAnimating;
+    const isHorizontalAndAnimating = isHorizontal && isCalendarMonthGridAnimating;
 
     const calendarInfoPositionTop = calendarInfoPosition === INFO_POSITION_TOP;
     const calendarInfoPositionBottom = calendarInfoPosition === INFO_POSITION_BOTTOM;
@@ -775,7 +777,7 @@ class DayPicker extends React.Component {
     const fullHorizontalWidth = wrapperHorizontalWidth + calendarInfoWith;
 
     const transitionContainerStyle = {
-      width: this.isHorizontal() && wrapperHorizontalWidth,
+      width: isHorizontal && wrapperHorizontalWidth,
       height,
     };
 
@@ -784,11 +786,11 @@ class DayPicker extends React.Component {
     };
 
     const dayPickerStyle = {
-      width: this.isHorizontal() && fullHorizontalWidth,
+      width: isHorizontal && fullHorizontalWidth,
 
       // These values are to center the datepicker (approximately) on the page
-      marginLeft: this.isHorizontal() && withPortal && -fullHorizontalWidth / 2,
-      marginTop: this.isHorizontal() && withPortal && -calendarMonthWidth / 2,
+      marginLeft: isHorizontal && withPortal && -fullHorizontalWidth / 2,
+      marginTop: isHorizontal && withPortal && -calendarMonthWidth / 2,
     };
 
     return (
@@ -797,10 +799,10 @@ class DayPicker extends React.Component {
         aria-label={phrases.calendarLabel}
         {...css(
           styles.DayPicker,
-          this.isHorizontal() && styles.DayPicker__horizontal,
+          isHorizontal && styles.DayPicker__horizontal,
           this.isVertical() && styles.DayPicker__vertical,
           verticalScrollable && styles.DayPicker__verticalScrollable,
-          this.isHorizontal() && withPortal && styles.DayPicker_portal__horizontal,
+          isHorizontal && withPortal && styles.DayPicker_portal__horizontal,
           this.isVertical() && withPortal && styles.DayPicker_portal__vertical,
           dayPickerStyle,
           !hasSetHeight && styles.DayPicker__hidden,
@@ -820,7 +822,7 @@ class DayPicker extends React.Component {
             <div
               {...css(
                 styles.DayPicker_weekHeaders,
-                this.isHorizontal() && styles.DayPicker_weekHeaders__horizontal,
+                isHorizontal && styles.DayPicker_weekHeaders__horizontal,
               )}
               aria-hidden="true"
               role="presentation"

From 5959b048d531f40ff7c0c0b61ea6951fa21cd086 Mon Sep 17 00:00:00 2001
From: Marie P-W <marie.wermuth@gmail.com>
Date: Wed, 31 Jan 2018 11:48:25 +0100
Subject: [PATCH 093/618] Fix - Change implicit ternaries to explicit ternaries
  | #989

---
 src/components/DayPicker.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index f18777fd01..44b640044c 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -789,8 +789,8 @@ class DayPicker extends React.Component {
       width: isHorizontal && fullHorizontalWidth,
 
       // These values are to center the datepicker (approximately) on the page
-      marginLeft: isHorizontal && withPortal && -fullHorizontalWidth / 2,
-      marginTop: isHorizontal && withPortal && -calendarMonthWidth / 2,
+      marginLeft: isHorizontal && withPortal ? -fullHorizontalWidth / 2 : null,
+      marginTop: isHorizontal && withPortal ? -calendarMonthWidth / 2 : null,
     };
 
     return (

From 58e68967c0e17e2de788c3822fad517b77685cc8 Mon Sep 17 00:00:00 2001
From: iliran11 <iliran11@gmail.com>
Date: Thu, 1 Feb 2018 02:09:11 +0200
Subject: [PATCH 094/618] ensuring callback is called on monthChange on
 DayPickerRangeController

---
 src/components/DayPickerRangeController.jsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index a83897a351..51638820da 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -621,9 +621,9 @@ export default class DayPickerRangeController extends React.Component {
         ...newVisibleDays,
         ...this.getModifiers(prevMonthVisibleDays),
       },
+    }, () => {
+      onPrevMonthClick(newCurrentMonth.clone());
     });
-
-    onPrevMonthClick(newCurrentMonth.clone());
   }
 
   onNextMonthClick() {
@@ -645,9 +645,10 @@ export default class DayPickerRangeController extends React.Component {
         ...newVisibleDays,
         ...this.getModifiers(nextMonthVisibleDays),
       },
+    }, () => {
+      onNextMonthClick(newCurrentMonth.clone());
     });
 
-    onNextMonthClick(newCurrentMonth.clone());
   }
 
   onMultiplyScrollableMonths() {

From bf257556c7d27c3b734dd3c1dd5cc5ba908330cd Mon Sep 17 00:00:00 2001
From: iliran11 <iliran11@gmail.com>
Date: Thu, 1 Feb 2018 03:10:20 +0200
Subject: [PATCH 095/618] remove padded line

---
 src/components/DayPickerRangeController.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 51638820da..6319e4577a 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -648,7 +648,6 @@ export default class DayPickerRangeController extends React.Component {
     }, () => {
       onNextMonthClick(newCurrentMonth.clone());
     });
-
   }
 
   onMultiplyScrollableMonths() {

From 1ab4911505c870e5a84ee13ac6b3748b9548cf00 Mon Sep 17 00:00:00 2001
From: Marie P-W <marie.wermuth@gmail.com>
Date: Thu, 1 Feb 2018 10:24:31 +0100
Subject: [PATCH 096/618] Fix - Set default panel info position to bottom
 instead of top | #989

---
 src/components/DateRangePicker.jsx               | 4 ++--
 src/components/DayPicker.jsx                     | 2 +-
 src/components/DayPickerRangeController.jsx      | 4 ++--
 src/components/DayPickerSingleDateController.jsx | 4 ++--
 src/components/SingleDatePicker.jsx              | 4 ++--
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index f4959f024d..14fdd1d1c4 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -33,7 +33,7 @@ import {
   OPEN_UP,
   DAY_SIZE,
   ICON_BEFORE_POSITION,
-  INFO_POSITION_TOP,
+  INFO_POSITION_BOTTOM,
   FANG_HEIGHT_PX,
   DEFAULT_VERTICAL_SPACING,
 } from '../constants';
@@ -81,7 +81,7 @@ const defaultProps = {
   keepOpenOnDateSelect: false,
   reopenPickerOnClearDates: false,
   renderCalendarInfo: null,
-  calendarInfoPosition: INFO_POSITION_TOP,
+  calendarInfoPosition: INFO_POSITION_BOTTOM,
   hideKeyboardShortcutsPanel: false,
   daySize: DAY_SIZE,
   isRTL: false,
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 44b640044c..ed6c73354b 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -109,7 +109,7 @@ export const defaultProps = {
   initialVisibleMonth: () => moment(),
   firstDayOfWeek: null,
   renderCalendarInfo: null,
-  calendarInfoPosition: INFO_POSITION_TOP,
+  calendarInfoPosition: INFO_POSITION_BOTTOM,
   hideKeyboardShortcutsPanel: false,
   daySize: DAY_SIZE,
   isRTL: false,
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index ffb21b1a74..269171aba4 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -34,7 +34,7 @@ import {
   HORIZONTAL_ORIENTATION,
   VERTICAL_SCROLLABLE,
   DAY_SIZE,
-  INFO_POSITION_TOP,
+  INFO_POSITION_BOTTOM,
 } from '../constants';
 
 import DayPicker from './DayPicker';
@@ -132,7 +132,7 @@ const defaultProps = {
   renderCalendarDay: undefined,
   renderDayContents: null,
   renderCalendarInfo: null,
-  calendarInfoPosition: INFO_POSITION_TOP,
+  calendarInfoPosition: INFO_POSITION_BOTTOM,
   firstDayOfWeek: null,
   verticalHeight: null,
   noBorder: false,
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 4510f0b1ca..541c526e97 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -26,7 +26,7 @@ import {
   HORIZONTAL_ORIENTATION,
   VERTICAL_SCROLLABLE,
   DAY_SIZE,
-  INFO_POSITION_TOP,
+  INFO_POSITION_BOTTOM,
 } from '../constants';
 
 import DayPicker from './DayPicker';
@@ -121,7 +121,7 @@ const defaultProps = {
   renderCalendarDay: undefined,
   renderDayContents: null,
   renderCalendarInfo: null,
-  calendarInfoPosition: INFO_POSITION_TOP,
+  calendarInfoPosition: INFO_POSITION_BOTTOM,
 
   // accessibility
   onBlur() {},
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index f6f78ddaf2..eae7fa9579 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -31,7 +31,7 @@ import {
   OPEN_UP,
   DAY_SIZE,
   ICON_BEFORE_POSITION,
-  INFO_POSITION_TOP,
+  INFO_POSITION_BOTTOM,
   FANG_HEIGHT_PX,
   DEFAULT_VERTICAL_SPACING,
 } from '../constants';
@@ -78,7 +78,7 @@ const defaultProps = {
   keepOpenOnDateSelect: false,
   reopenPickerOnClearDate: false,
   renderCalendarInfo: null,
-  calendarInfoPosition: INFO_POSITION_TOP,
+  calendarInfoPosition: INFO_POSITION_BOTTOM,
   hideKeyboardShortcutsPanel: false,
   daySize: DAY_SIZE,
   isRTL: false,

From ff10fff33faf03b5fa41771fa8e977f5c4e63989 Mon Sep 17 00:00:00 2001
From: Marie P-W <marie.wermuth@gmail.com>
Date: Fri, 2 Feb 2018 14:13:15 +0100
Subject: [PATCH 097/618] In order to be more appropriate with RTL world,
 replace "left | right" by "before | after" - #989

---
 src/components/DayPicker.jsx            | 14 +++++++-------
 src/constants.js                        |  4 ++--
 src/shapes/CalendarInfoPositionShape.js |  8 ++++----
 stories/DateRangePicker_calendar.js     |  8 ++++----
 stories/SingleDatePicker_calendar.js    |  8 ++++----
 5 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index ed6c73354b..1f98c200a6 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -36,8 +36,8 @@ import {
   DAY_SIZE,
   INFO_POSITION_TOP,
   INFO_POSITION_BOTTOM,
-  INFO_POSITION_LEFT,
-  INFO_POSITION_RIGHT,
+  INFO_POSITION_BEFORE,
+  INFO_POSITION_AFTER,
   MODIFIER_KEY_NAMES,
 } from '../constants';
 
@@ -755,9 +755,9 @@ class DayPicker extends React.Component {
 
     const calendarInfoPositionTop = calendarInfoPosition === INFO_POSITION_TOP;
     const calendarInfoPositionBottom = calendarInfoPosition === INFO_POSITION_BOTTOM;
-    const calendarInfoPositionLeft = calendarInfoPosition === INFO_POSITION_LEFT;
-    const calendarInfoPositionRight = calendarInfoPosition === INFO_POSITION_RIGHT;
-    const calendarInfoIsInline = calendarInfoPositionLeft || calendarInfoPositionRight;
+    const calendarInfoPositionBefore = calendarInfoPosition === INFO_POSITION_BEFORE;
+    const calendarInfoPositionAfter = calendarInfoPosition === INFO_POSITION_AFTER;
+    const calendarInfoIsInline = calendarInfoPositionBefore || calendarInfoPositionAfter;
 
     const calendarInfo = renderCalendarInfo && (
       <div
@@ -810,7 +810,7 @@ class DayPicker extends React.Component {
         )}
       >
         <OutsideClickHandler onOutsideClick={onOutsideClick}>
-          {(calendarInfoPositionTop || calendarInfoPositionLeft) && calendarInfo}
+          {(calendarInfoPositionTop || calendarInfoPositionBefore) && calendarInfo}
 
           <div
             {...css(
@@ -895,7 +895,7 @@ class DayPicker extends React.Component {
 
           </div>
 
-          {(calendarInfoPositionBottom || calendarInfoPositionRight) && calendarInfo}
+          {(calendarInfoPositionBottom || calendarInfoPositionAfter) && calendarInfo}
         </OutsideClickHandler>
       </div>
     );
diff --git a/src/constants.js b/src/constants.js
index 273c8074f8..de308b98e5 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -14,8 +14,8 @@ export const ICON_AFTER_POSITION = 'after';
 
 export const INFO_POSITION_TOP = 'top';
 export const INFO_POSITION_BOTTOM = 'bottom';
-export const INFO_POSITION_LEFT = 'left';
-export const INFO_POSITION_RIGHT = 'right';
+export const INFO_POSITION_BEFORE = 'before';
+export const INFO_POSITION_AFTER = 'after';
 
 export const ANCHOR_LEFT = 'left';
 export const ANCHOR_RIGHT = 'right';
diff --git a/src/shapes/CalendarInfoPositionShape.js b/src/shapes/CalendarInfoPositionShape.js
index c2f433ecb4..4afd9bbca0 100644
--- a/src/shapes/CalendarInfoPositionShape.js
+++ b/src/shapes/CalendarInfoPositionShape.js
@@ -3,13 +3,13 @@ import PropTypes from 'prop-types';
 import {
   INFO_POSITION_TOP,
   INFO_POSITION_BOTTOM,
-  INFO_POSITION_LEFT,
-  INFO_POSITION_RIGHT,
+  INFO_POSITION_BEFORE,
+  INFO_POSITION_AFTER,
 } from '../constants';
 
 export default PropTypes.oneOf([
   INFO_POSITION_TOP,
   INFO_POSITION_BOTTOM,
-  INFO_POSITION_LEFT,
-  INFO_POSITION_RIGHT,
+  INFO_POSITION_BEFORE,
+  INFO_POSITION_AFTER,
 ]);
diff --git a/stories/DateRangePicker_calendar.js b/stories/DateRangePicker_calendar.js
index 43796f0a4f..11817b419d 100644
--- a/stories/DateRangePicker_calendar.js
+++ b/stories/DateRangePicker_calendar.js
@@ -137,18 +137,18 @@ storiesOf('DRP - Calendar Props', module)
       autoFocus
     />
   ))
-  .addWithInfo('with info panel left', () => (
+  .addWithInfo('with info panel before', () => (
     <DateRangePickerWrapper
-      calendarInfoPosition="left"
+      calendarInfoPosition="before"
       renderCalendarInfo={() => (
         <TestCustomInfoPanel />
       )}
       autoFocus
     />
   ))
-  .addWithInfo('with info panel right', () => (
+  .addWithInfo('with info panel after', () => (
     <DateRangePickerWrapper
-      calendarInfoPosition="right"
+      calendarInfoPosition="after"
       renderCalendarInfo={() => (
         <TestCustomInfoPanel />
       )}
diff --git a/stories/SingleDatePicker_calendar.js b/stories/SingleDatePicker_calendar.js
index 1d7c9581ba..4c982f3059 100644
--- a/stories/SingleDatePicker_calendar.js
+++ b/stories/SingleDatePicker_calendar.js
@@ -128,18 +128,18 @@ storiesOf('SDP - Calendar Props', module)
       autoFocus
     />
   ))
-  .addWithInfo('with info panel left', () => (
+  .addWithInfo('with info panel before', () => (
     <SingleDatePickerWrapper
-      calendarInfoPosition="left"
+      calendarInfoPosition="before"
       renderCalendarInfo={() => (
         <TestCustomInfoPanel />
       )}
       autoFocus
     />
   ))
-  .addWithInfo('with info panel right', () => (
+  .addWithInfo('with info panel after', () => (
     <SingleDatePickerWrapper
-      calendarInfoPosition="right"
+      calendarInfoPosition="after"
       renderCalendarInfo={() => (
         <TestCustomInfoPanel />
       )}

From 7d0c38a93bd8b353970f34fb544316d9a6038396 Mon Sep 17 00:00:00 2001
From: Toru Kobayashi <koba0004@gmail.com>
Date: Sat, 3 Feb 2018 14:29:34 +0900
Subject: [PATCH 098/618] Fix failed tests on Saturday

---
 test/components/DayPickerRangeController_spec.jsx      | 1 +
 test/components/DayPickerSingleDateController_spec.jsx | 1 +
 2 files changed, 2 insertions(+)

diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index 256d6a5e3e..53d5b96acf 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -2219,6 +2219,7 @@ describe('DayPickerRangeController', () => {
       sinon.stub(DayPickerRangeController.prototype, 'isHovered').returns(false);
       sinon.stub(DayPickerRangeController.prototype, 'isInHoveredSpan').returns(false);
       sinon.stub(DayPickerRangeController.prototype, 'isDayAfterHoveredStartDate').returns(false);
+      sinon.stub(DayPickerRangeController.prototype, 'isLastDayOfWeek').returns(false);
       const wrapper = shallow((
         <DayPickerRangeController
           onDatesChange={sinon.stub()}
diff --git a/test/components/DayPickerSingleDateController_spec.jsx b/test/components/DayPickerSingleDateController_spec.jsx
index 2fc9b3a067..5d77fed742 100644
--- a/test/components/DayPickerSingleDateController_spec.jsx
+++ b/test/components/DayPickerSingleDateController_spec.jsx
@@ -936,6 +936,7 @@ describe('DayPickerSingleDateController', () => {
       const isDayHighlightedStub = sinon.stub().returns(false);
       sinon.stub(DayPickerSingleDateController.prototype, 'isSelected').returns(false);
       sinon.stub(DayPickerSingleDateController.prototype, 'isHovered').returns(false);
+      sinon.stub(DayPickerSingleDateController.prototype, 'isLastDayOfWeek').returns(false);
       const wrapper = shallow((
         <DayPickerSingleDateController
           onDateChange={sinon.stub()}

From 37d6f4cf8fe6f54254daeecccb88177e29220817 Mon Sep 17 00:00:00 2001
From: Toru Kobayashi <koba0004@gmail.com>
Date: Sun, 4 Feb 2018 13:27:59 +0900
Subject: [PATCH 099/618] Fix failed tests on Sunday

---
 test/components/DayPickerRangeController_spec.jsx      | 1 +
 test/components/DayPickerSingleDateController_spec.jsx | 1 +
 2 files changed, 2 insertions(+)

diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index 53d5b96acf..5f4965b56d 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -2219,6 +2219,7 @@ describe('DayPickerRangeController', () => {
       sinon.stub(DayPickerRangeController.prototype, 'isHovered').returns(false);
       sinon.stub(DayPickerRangeController.prototype, 'isInHoveredSpan').returns(false);
       sinon.stub(DayPickerRangeController.prototype, 'isDayAfterHoveredStartDate').returns(false);
+      sinon.stub(DayPickerRangeController.prototype, 'isFirstDayOfWeek').returns(false);
       sinon.stub(DayPickerRangeController.prototype, 'isLastDayOfWeek').returns(false);
       const wrapper = shallow((
         <DayPickerRangeController
diff --git a/test/components/DayPickerSingleDateController_spec.jsx b/test/components/DayPickerSingleDateController_spec.jsx
index 5d77fed742..81a950077f 100644
--- a/test/components/DayPickerSingleDateController_spec.jsx
+++ b/test/components/DayPickerSingleDateController_spec.jsx
@@ -936,6 +936,7 @@ describe('DayPickerSingleDateController', () => {
       const isDayHighlightedStub = sinon.stub().returns(false);
       sinon.stub(DayPickerSingleDateController.prototype, 'isSelected').returns(false);
       sinon.stub(DayPickerSingleDateController.prototype, 'isHovered').returns(false);
+      sinon.stub(DayPickerSingleDateController.prototype, 'isFirstDayOfWeek').returns(false);
       sinon.stub(DayPickerSingleDateController.prototype, 'isLastDayOfWeek').returns(false);
       const wrapper = shallow((
         <DayPickerSingleDateController

From 566e98490be1fb05e66bd8b0eeed6e1dd480bfec Mon Sep 17 00:00:00 2001
From: Toru Kobayashi <koba0004@gmail.com>
Date: Sat, 3 Feb 2018 14:00:40 +0900
Subject: [PATCH 100/618] Set defaultProps for dayAriaLabelFormat

---
 src/components/CalendarMonth.jsx                 | 1 +
 src/components/CalendarMonthGrid.jsx             | 1 +
 src/components/DayPicker.jsx                     | 1 +
 src/components/DayPickerRangeController.jsx      | 1 +
 src/components/DayPickerSingleDateController.jsx | 1 +
 5 files changed, 5 insertions(+)

diff --git a/src/components/CalendarMonth.jsx b/src/components/CalendarMonth.jsx
index dce3a944d9..6a2a1bf8ff 100644
--- a/src/components/CalendarMonth.jsx
+++ b/src/components/CalendarMonth.jsx
@@ -77,6 +77,7 @@ const defaultProps = {
   // i18n
   monthFormat: 'MMMM YYYY', // english locale
   phrases: CalendarDayPhrases,
+  dayAriaLabelFormat: undefined,
 };
 
 class CalendarMonth extends React.Component {
diff --git a/src/components/CalendarMonthGrid.jsx b/src/components/CalendarMonthGrid.jsx
index 8dfd8ee940..5c13583227 100644
--- a/src/components/CalendarMonthGrid.jsx
+++ b/src/components/CalendarMonthGrid.jsx
@@ -86,6 +86,7 @@ const defaultProps = {
   // i18n
   monthFormat: 'MMMM YYYY', // english locale
   phrases: CalendarDayPhrases,
+  dayAriaLabelFormat: undefined,
 };
 
 function getMonths(initialMonth, numberOfMonths, withoutTransitionMonths) {
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 2ec875befd..3f55f317fd 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -137,6 +137,7 @@ export const defaultProps = {
   monthFormat: 'MMMM YYYY',
   weekDayFormat: 'dd',
   phrases: DayPickerPhrases,
+  dayAriaLabelFormat: undefined,
 };
 
 class DayPicker extends React.Component {
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 6319e4577a..d86d4d12ea 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -143,6 +143,7 @@ const defaultProps = {
   monthFormat: 'MMMM YYYY',
   weekDayFormat: 'dd',
   phrases: DayPickerPhrases,
+  dayAriaLabelFormat: undefined,
 
   isRTL: false,
 };
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 893dea5efe..bc159ab1d0 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -128,6 +128,7 @@ const defaultProps = {
   monthFormat: 'MMMM YYYY',
   weekDayFormat: 'dd',
   phrases: DayPickerPhrases,
+  dayAriaLabelFormat: undefined,
 
   isRTL: false,
 };

From ef87d78c584f62387f32db04bfe51be33313c08d Mon Sep 17 00:00:00 2001
From: Marie P-W <marie.wermuth@gmail.com>
Date: Thu, 8 Feb 2018 11:02:01 +0100
Subject: [PATCH 101/618] Fix CSS transition problem due to width calculation |
 #989

---
 src/components/DayPicker.jsx | 44 +++++++++++++++++++++++++++++++-----
 1 file changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 1f98c200a6..3c3475bf49 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -176,10 +176,12 @@ class DayPicker extends React.Component {
       isTouchDevice: isTouchDevice(),
       withMouseInteractions: true,
       hasSetHeight: false,
+      calendarInfoWidth: 0,
     };
 
     this.calendarMonthHeights = [];
     this.calendarMonthGridHeight = 0;
+    this.timeout = null;
 
     this.onKeyDown = this.onKeyDown.bind(this);
     this.throttledKeyDown = throttle(this.onFinalKeyDown, 200, { trailing: false });
@@ -198,7 +200,14 @@ class DayPicker extends React.Component {
   }
 
   componentDidMount() {
-    this.setState({ isTouchDevice: isTouchDevice() });
+    if (this.calendarInfo) {
+      this.setState({
+        isTouchDevice: isTouchDevice(),
+        calendarInfoWidth: calculateDimension(this.calendarInfo, 'width', true, true),
+      });
+    } else {
+      this.setState({ isTouchDevice: isTouchDevice() });
+    }
   }
 
   componentWillReceiveProps(nextProps) {
@@ -251,6 +260,23 @@ class DayPicker extends React.Component {
     return shallowCompare(this, nextProps, nextState);
   }
 
+  componentWillUpdate() {
+    // Calculating the dimensions trigger a DOM repaint which
+    // breaks the CSS transition.
+    // The setTimeout will wait until the transition ends.
+    if (this.calendarInfo) {
+      const { calendarInfoWidth } = this.state;
+      this.timeout = setTimeout(() => {
+        const calendarInfoPanelWidth = calculateDimension(this.calendarInfo, 'width', true, true);
+        if (calendarInfoWidth !== calendarInfoPanelWidth) {
+          this.setState({
+            calendarInfoWidth: calendarInfoPanelWidth,
+          });
+        }
+      }, 200);
+    }
+  }
+
   componentDidUpdate(prevProps) {
     const { isFocused } = this.props;
     const { focusedDate } = this.state;
@@ -260,6 +286,10 @@ class DayPicker extends React.Component {
     }
   }
 
+  componentWillUnmount() {
+    clearTimeout(this.timeout);
+  }
+
   onKeyDown(e) {
     e.stopPropagation();
     if (!MODIFIER_KEY_NAMES.has(e.key)) {
@@ -691,6 +721,7 @@ class DayPicker extends React.Component {
       showKeyboardShortcuts,
       isTouchDevice: isTouch,
       hasSetHeight,
+      calendarInfoWidth,
     } = this.state;
 
     const {
@@ -768,13 +799,14 @@ class DayPicker extends React.Component {
       </div>
     );
 
-    const calendarInfoWith = renderCalendarInfo && calendarInfoIsInline
-      ? calculateDimension(this.calendarInfo, 'width', true, true)
+    const calendarInfoPanelWidth = renderCalendarInfo && calendarInfoIsInline
+      ? calendarInfoWidth
       : 0;
 
     const firstVisibleMonthIndex = this.getFirstVisibleIndex();
     const wrapperHorizontalWidth = (calendarMonthWidth * numberOfMonths) + (2 * DAY_PICKER_PADDING);
-    const fullHorizontalWidth = wrapperHorizontalWidth + calendarInfoWith;
+    // Adding `1px` because of whitespace between 2 inline-block
+    const fullHorizontalWidth = wrapperHorizontalWidth + calendarInfoPanelWidth + 1;
 
     const transitionContainerStyle = {
       width: isHorizontal && wrapperHorizontalWidth,
@@ -946,12 +978,12 @@ export default withStyles(({ reactDates: { color, font, zIndex } }) => ({
   },
 
   DayPicker_calendarInfo__horizontal: {
-    display: 'table-cell',
+    display: 'inline-block',
     verticalAlign: 'top',
   },
 
   DayPicker_wrapper__horizontal: {
-    display: 'table-cell',
+    display: 'inline-block',
     verticalAlign: 'top',
   },
 

From 1fd9aef2e791c17ddedd37c7993c30ed49a62725 Mon Sep 17 00:00:00 2001
From: Marie P-W <marie.wermuth@gmail.com>
Date: Thu, 8 Feb 2018 11:02:47 +0100
Subject: [PATCH 102/618] Add another example to be sure that calendar info
 panel works with portal | #989

---
 stories/SingleDatePicker_calendar.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/stories/SingleDatePicker_calendar.js b/stories/SingleDatePicker_calendar.js
index 4c982f3059..f1bb98b2ea 100644
--- a/stories/SingleDatePicker_calendar.js
+++ b/stories/SingleDatePicker_calendar.js
@@ -84,6 +84,16 @@ storiesOf('SDP - Calendar Props', module)
       autoFocus
     />
   ))
+  .addWithInfo('horizontal with portal and info panel', () => (
+    <SingleDatePickerWrapper
+      withPortal
+      autoFocus
+      calendarInfoPosition="after"
+      renderCalendarInfo={() => (
+        <TestCustomInfoPanel />
+      )}
+    />
+  ))
   .addWithInfo('horizontal with fullscreen portal', () => (
     <SingleDatePickerWrapper withFullScreenPortal autoFocus />
   ))

From ce7c1c09cc8f8e039824a90db2745c9f0341a438 Mon Sep 17 00:00:00 2001
From: Marie P-W <marie.wermuth@gmail.com>
Date: Fri, 9 Feb 2018 06:58:24 +0100
Subject: [PATCH 103/618] Fix Use props value instead of a hardcoded one + Use
 more meaningful variable name | #989

---
 src/components/DayPicker.jsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 3c3475bf49..d5dfdd6182 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -181,7 +181,7 @@ class DayPicker extends React.Component {
 
     this.calendarMonthHeights = [];
     this.calendarMonthGridHeight = 0;
-    this.timeout = null;
+    this.setCalendarInfoWidthTimeout = null;
 
     this.onKeyDown = this.onKeyDown.bind(this);
     this.throttledKeyDown = throttle(this.onFinalKeyDown, 200, { trailing: false });
@@ -261,19 +261,20 @@ class DayPicker extends React.Component {
   }
 
   componentWillUpdate() {
+    const { transitionDuration } = this.props;
     // Calculating the dimensions trigger a DOM repaint which
     // breaks the CSS transition.
     // The setTimeout will wait until the transition ends.
     if (this.calendarInfo) {
       const { calendarInfoWidth } = this.state;
-      this.timeout = setTimeout(() => {
+      this.setCalendarInfoWidthTimeout = setTimeout(() => {
         const calendarInfoPanelWidth = calculateDimension(this.calendarInfo, 'width', true, true);
         if (calendarInfoWidth !== calendarInfoPanelWidth) {
           this.setState({
             calendarInfoWidth: calendarInfoPanelWidth,
           });
         }
-      }, 200);
+      }, transitionDuration);
     }
   }
 
@@ -287,7 +288,7 @@ class DayPicker extends React.Component {
   }
 
   componentWillUnmount() {
-    clearTimeout(this.timeout);
+    clearTimeout(this.setCalendarInfoWidthTimeout);
   }
 
   onKeyDown(e) {

From 3c75774e5351fe0a76bb222d5e2f309d31d665c0 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Tue, 13 Feb 2018 14:08:50 -0800
Subject: [PATCH 104/618] Version 16.3.0

---
 CHANGELOG.md | 6 ++++++
 package.json | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 45d8629ae1..1c1a865d82 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Change Log
 
+## 16.3.0
+- [new] customInfoPanel position prop ([#989](https://github.com/airbnb/react-dates/pull/989))
+- [fix] Fix CustomizableCalendarDay selected/selected-start/selected-end specificity issues ([#979](https://github.com/airbnb/react-dates/pull/979))
+- [fix] Add modifiers for `firstDayOfWeek` and `lastDayOfWeek` ([#988](https://github.com/airbnb/react-dates/pull/988))
+- [fix] Ensure callbacks only trigger after state has been updates ([#990](https://github.com/airbnb/react-dates/pull/990))
+
 ## 16.2.1
 - [fix] SDP `block` styling also makes the input full width ([#972](https://github.com/airbnb/react-dates/pull/972))
 
diff --git a/package.json b/package.json
index 78252ca51f..7c68bdd109 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "16.2.1",
+  "version": "16.3.0",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 180608244247c5d0c55fdeaf17b52ac73a1c2828 Mon Sep 17 00:00:00 2001
From: Alireza valizade <alirezavalizade0@gmail.com>
Date: Thu, 15 Feb 2018 10:36:06 +0330
Subject: [PATCH 105/618] update persian example - use jalali date in inputs -
 change direction to RTL

---
 examples/DateRangePickerWrapper.jsx | 13 ++++++++++++-
 stories/DateRangePicker.js          |  3 +++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/examples/DateRangePickerWrapper.jsx b/examples/DateRangePickerWrapper.jsx
index 9a43817293..67f3e45a33 100644
--- a/examples/DateRangePickerWrapper.jsx
+++ b/examples/DateRangePickerWrapper.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import momentPropTypes from 'react-moment-proptypes';
 import moment from 'moment';
+import momentJalaali from 'moment-jalaali';
 import omit from 'lodash/omit';
 
 import DateRangePicker from '../src/components/DateRangePicker';
@@ -15,6 +16,7 @@ const propTypes = {
   // example props for the demo
   autoFocus: PropTypes.bool,
   autoFocusEndDate: PropTypes.bool,
+  isPersianDateRangePicker: PropTypes.bool,
   initialStartDate: momentPropTypes.momentObj,
   initialEndDate: momentPropTypes.momentObj,
 
@@ -31,6 +33,7 @@ const defaultProps = {
   // example props for the demo
   autoFocus: false,
   autoFocusEndDate: false,
+  isPersianDateRangePicker: false,
   initialStartDate: null,
   initialEndDate: null,
 
@@ -108,7 +111,14 @@ class DateRangePickerWrapper extends React.Component {
   }
 
   onDatesChange({ startDate, endDate }) {
-    this.setState({ startDate, endDate });
+    if (this.props.isPersianDateRangePicker) {
+      this.setState({
+        startDate: startDate && momentJalaali(startDate),
+        endDate: endDate && momentJalaali(endDate),
+      });
+    } else {
+      this.setState({ startDate, endDate });
+    }
   }
 
   onFocusChange(focusedInput) {
@@ -126,6 +136,7 @@ class DateRangePickerWrapper extends React.Component {
       'autoFocusEndDate',
       'initialStartDate',
       'initialEndDate',
+      'isPersianDateRangePicker',
     ]);
 
     return (
diff --git a/stories/DateRangePicker.js b/stories/DateRangePicker.js
index f24d00d5bf..e7d5329eb8 100644
--- a/stories/DateRangePicker.js
+++ b/stories/DateRangePicker.js
@@ -84,8 +84,11 @@ storiesOf('DateRangePicker (DRP)', module)
   })
   .addWithInfo('non-english locale (Persian)', () => {
     moment.locale('fa');
+    momentJalaali.loadPersian({ dialect: 'persian-modern', usePersianDigits: true });
     return (
       <DateRangePickerWrapper
+        isRTL
+        isPersianDateRangePicker
         renderMonth={month => momentJalaali(month).format('jMMMM jYYYY')}
         renderDayContents={day => momentJalaali(day).format('jD')}
       />

From 522ede3e6817a67de98ec64a1882c89bcae719b2 Mon Sep 17 00:00:00 2001
From: Alireza valizade <alirezavalizade0@gmail.com>
Date: Thu, 15 Feb 2018 10:43:03 +0330
Subject: [PATCH 106/618] change placeholder text in persian example

---
 stories/DateRangePicker.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/stories/DateRangePicker.js b/stories/DateRangePicker.js
index e7d5329eb8..8c6aee984b 100644
--- a/stories/DateRangePicker.js
+++ b/stories/DateRangePicker.js
@@ -89,6 +89,8 @@ storiesOf('DateRangePicker (DRP)', module)
       <DateRangePickerWrapper
         isRTL
         isPersianDateRangePicker
+        startDatePlaceholderText="تاریخ شروع"
+        endDatePlaceholderText="تاریخ پایان"
         renderMonth={month => momentJalaali(month).format('jMMMM jYYYY')}
         renderDayContents={day => momentJalaali(day).format('jD')}
       />

From d901f26cbc9d59a776cb2dd7ab5adc640fa6783d Mon Sep 17 00:00:00 2001
From: Toru Kobayashi <koba0004@gmail.com>
Date: Sat, 27 Jan 2018 17:27:39 +0900
Subject: [PATCH 107/618] Add dayAriaLabelFormat prop into DateRangePicker

---
 src/components/DateRangePicker.jsx | 2 ++
 src/shapes/DateRangePickerShape.js | 1 +
 2 files changed, 3 insertions(+)

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 14fdd1d1c4..15fbba1253 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -338,6 +338,7 @@ class DateRangePicker extends React.Component {
       customCloseIcon,
       onClose,
       phrases,
+      dayAriaLabelFormat,
       isRTL,
       weekDayFormat,
       styles,
@@ -417,6 +418,7 @@ class DateRangePicker extends React.Component {
           showKeyboardShortcuts={showKeyboardShortcuts}
           onBlur={this.onDayPickerBlur}
           phrases={phrases}
+          dayAriaLabelFormat={dayAriaLabelFormat}
           isRTL={isRTL}
           firstDayOfWeek={firstDayOfWeek}
           weekDayFormat={weekDayFormat}
diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js
index 962ce954f4..58d8ae308b 100644
--- a/src/shapes/DateRangePickerShape.js
+++ b/src/shapes/DateRangePickerShape.js
@@ -87,4 +87,5 @@ export default {
   monthFormat: PropTypes.string,
   weekDayFormat: PropTypes.string,
   phrases: PropTypes.shape(getPhrasePropTypes(DateRangePickerPhrases)),
+  dayAriaLabelFormat: PropTypes.string,
 };

From f285b9de74a59e5ef9f19e8df82f310c4780e839 Mon Sep 17 00:00:00 2001
From: Toru Kobayashi <koba0004@gmail.com>
Date: Sat, 27 Jan 2018 17:28:02 +0900
Subject: [PATCH 108/618] Add dayAriaLabelFormat prop into SingleDatePicker

---
 src/components/SingleDatePicker.jsx | 2 ++
 src/shapes/SingleDatePickerShape.js | 1 +
 2 files changed, 3 insertions(+)

diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index eae7fa9579..745ab41b20 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -367,6 +367,7 @@ class SingleDatePicker extends React.Component {
       firstDayOfWeek,
       customCloseIcon,
       phrases,
+      dayAriaLabelFormat,
       daySize,
       isRTL,
       isOutsideRange,
@@ -438,6 +439,7 @@ class SingleDatePicker extends React.Component {
           showKeyboardShortcuts={showKeyboardShortcuts}
           onBlur={this.onDayPickerBlur}
           phrases={phrases}
+          dayAriaLabelFormat={dayAriaLabelFormat}
           daySize={daySize}
           isRTL={isRTL}
           isOutsideRange={isOutsideRange}
diff --git a/src/shapes/SingleDatePickerShape.js b/src/shapes/SingleDatePickerShape.js
index c9987584b8..6b2f40961b 100644
--- a/src/shapes/SingleDatePickerShape.js
+++ b/src/shapes/SingleDatePickerShape.js
@@ -81,4 +81,5 @@ export default {
   monthFormat: PropTypes.string,
   weekDayFormat: PropTypes.string,
   phrases: PropTypes.shape(getPhrasePropTypes(SingleDatePickerPhrases)),
+  dayAriaLabelFormat: PropTypes.string,
 };

From e1ee04e68d622f054a71f187e9ff3c6ae7368a36 Mon Sep 17 00:00:00 2001
From: Toru Kobayashi <koba0004@gmail.com>
Date: Sat, 27 Jan 2018 17:28:42 +0900
Subject: [PATCH 109/618] Add dayAriaLabelFormat into README

---
 README.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/README.md b/README.md
index 11cdbf6b90..d8cd154a3b 100644
--- a/README.md
+++ b/README.md
@@ -170,6 +170,7 @@ displayFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
 monthFormat: PropTypes.string,
 weekDayFormat: PropTypes.string,
 phrases: PropTypes.shape(getPhrasePropTypes(DateRangePickerPhrases)),
+dayAriaLabelFormat: PropTypes.string,
 ```
 
 #### SingleDatePicker
@@ -245,6 +246,7 @@ displayFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
 monthFormat: PropTypes.string,
 weekDayFormat: PropTypes.string,
 phrases: PropTypes.shape(getPhrasePropTypes(SingleDatePickerPhrases)),
+dayAriaLabelFormat: PropTypes.string,
 ```
 
 #### DayPickerRangeController
@@ -295,6 +297,7 @@ The following is a list of other *OPTIONAL* props you may provide to the `DayPic
   monthFormat: PropTypes.string,
   weekDayFormat: PropTypes.string,
   phrases: PropTypes.shape(getPhrasePropTypes(DayPickerPhrases)),
+  dayAriaLabelFormat: PropTypes.string,
 />
 ```
 

From b97db462229ea7523cf0939ded56b6fa6b8c371d Mon Sep 17 00:00:00 2001
From: Toru Kobayashi <koba0004@gmail.com>
Date: Fri, 2 Feb 2018 22:52:51 +0900
Subject: [PATCH 110/618] set a defaultProp for dayAriaLabelFormat

---
 src/components/DateRangePicker.jsx  | 1 +
 src/components/SingleDatePicker.jsx | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 15fbba1253..3fcfe962d2 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -113,6 +113,7 @@ const defaultProps = {
   monthFormat: 'MMMM YYYY',
   weekDayFormat: 'dd',
   phrases: DateRangePickerPhrases,
+  dayAriaLabelFormat: undefined,
 };
 
 class DateRangePicker extends React.Component {
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index 745ab41b20..062e74b2a8 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -109,6 +109,7 @@ const defaultProps = {
   monthFormat: 'MMMM YYYY',
   weekDayFormat: 'dd',
   phrases: SingleDatePickerPhrases,
+  dayAriaLabelFormat: undefined,
 };
 
 class SingleDatePicker extends React.Component {

From 96889d4aada3adbab9c14ebc603a981928533043 Mon Sep 17 00:00:00 2001
From: "greenkeeper[bot]" <greenkeeper[bot]@users.noreply.github.com>
Date: Fri, 16 Feb 2018 01:00:02 +0000
Subject: [PATCH 111/618] fix(package): update react-with-styles-interface-css
 to version 4.0.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 7c68bdd109..67fff09dfa 100644
--- a/package.json
+++ b/package.json
@@ -121,7 +121,7 @@
     "react-moment-proptypes": "^1.5.0",
     "react-portal": "^4.1.2",
     "react-with-styles": "=2.2.0",
-    "react-with-styles-interface-css": "^3.0.0"
+    "react-with-styles-interface-css": "^4.0.0"
   },
   "peerDependencies": {
     "moment": "^2.18.1",

From f9b2ad5990603674fd0ad7a0ac476cf3253ef857 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Sat, 17 Feb 2018 22:28:02 -0800
Subject: [PATCH 112/618] [Dev Deps] update `eslint`, `eslint-plugin-react`,
 `enzyme-adapter-react-helper`, `airbnb-js-shims`, `sinon`

---
 package.json                                 | 10 +++++-----
 test/components/DayPickerNavigation_spec.jsx |  4 +---
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 7c68bdd109..55b1b74c7a 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,7 @@
     "@storybook/addon-links": "^3.3.5",
     "@storybook/addon-options": "^3.3.5",
     "@storybook/react": "^3.3.5",
-    "airbnb-js-shims": "^1.4.0",
+    "airbnb-js-shims": "^1.4.1",
     "aphrodite": "^1.2.5",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",
@@ -73,12 +73,12 @@
     "coveralls": "^2.13.3",
     "cross-env": "^5.1.3",
     "enzyme": "^3.3.0",
-    "enzyme-adapter-react-helper": "^1.2.2",
-    "eslint": "^4.15.0",
+    "enzyme-adapter-react-helper": "^1.2.3",
+    "eslint": "^4.18.0",
     "eslint-config-airbnb": "^16.1.0",
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.5.1",
+    "eslint-plugin-react": "^7.6.1",
     "eslint-plugin-react-with-styles": "^1.1.1",
     "git-directory-deploy": "^1.5.1",
     "imports-loader": "^0.7.1",
@@ -104,7 +104,7 @@
     "rimraf": "^2.6.2",
     "safe-publish-latest": "^1.1.1",
     "sass-loader": "^6.0.6",
-    "sinon": "^4.1.4",
+    "sinon": "^4.3.0",
     "sinon-sandbox": "^1.0.2",
     "style-loader": "^0.19.0",
     "webpack": "^2.6.1"
diff --git a/test/components/DayPickerNavigation_spec.jsx b/test/components/DayPickerNavigation_spec.jsx
index e11b49ee22..eddcb0f5cc 100644
--- a/test/components/DayPickerNavigation_spec.jsx
+++ b/test/components/DayPickerNavigation_spec.jsx
@@ -4,9 +4,7 @@ import sinon from 'sinon-sandbox';
 import { shallow } from 'enzyme';
 
 import DayPickerNavigation from '../../src/components/DayPickerNavigation';
-import {
-  VERTICAL_SCROLLABLE,
-} from '../../src/constants';
+import { VERTICAL_SCROLLABLE } from '../../src/constants';
 
 describe('DayPickerNavigation', () => {
   describe('#render', () => {

From 775ae041a93512c2fd740357b92c8f08121de4e3 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Sat, 17 Feb 2018 22:53:40 -0800
Subject: [PATCH 113/618] [Dev Deps] update `@storybook/addon-actions`,
 `@storybook/addon-info`, `@storybook/addon-links`,
 `@storybook/addon-options`, `@storybook/react`

---
 package.json | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 55b1b74c7a..5ef161c5dc 100644
--- a/package.json
+++ b/package.json
@@ -51,11 +51,11 @@
   },
   "homepage": "https://github.com/airbnb/react-dates#readme",
   "devDependencies": {
-    "@storybook/addon-actions": "^3.3.5",
-    "@storybook/addon-info": "^3.3.5",
-    "@storybook/addon-links": "^3.3.5",
-    "@storybook/addon-options": "^3.3.5",
-    "@storybook/react": "^3.3.5",
+    "@storybook/addon-actions": "^3.3.13",
+    "@storybook/addon-info": "^3.3.13",
+    "@storybook/addon-links": "^3.3.13",
+    "@storybook/addon-options": "^3.3.13",
+    "@storybook/react": "^3.3.13",
     "airbnb-js-shims": "^1.4.1",
     "aphrodite": "^1.2.5",
     "babel-cli": "^6.26.0",

From 9da9349b77ffde33a00ecd99497979b3f201ac14 Mon Sep 17 00:00:00 2001
From: Alireza valizade <alirezavalizade0@gmail.com>
Date: Sun, 18 Feb 2018 10:47:42 +0330
Subject: [PATCH 114/618] add stateDateWrapper for examples

---
 examples/DateRangePickerWrapper.jsx | 21 +++++++++------------
 stories/DateRangePicker.js          |  2 +-
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/examples/DateRangePickerWrapper.jsx b/examples/DateRangePickerWrapper.jsx
index 67f3e45a33..a6f507ace0 100644
--- a/examples/DateRangePickerWrapper.jsx
+++ b/examples/DateRangePickerWrapper.jsx
@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import momentPropTypes from 'react-moment-proptypes';
 import moment from 'moment';
-import momentJalaali from 'moment-jalaali';
 import omit from 'lodash/omit';
 
 import DateRangePicker from '../src/components/DateRangePicker';
@@ -16,7 +15,7 @@ const propTypes = {
   // example props for the demo
   autoFocus: PropTypes.bool,
   autoFocusEndDate: PropTypes.bool,
-  isPersianDateRangePicker: PropTypes.bool,
+  stateDateWrapper: PropTypes.func,
   initialStartDate: momentPropTypes.momentObj,
   initialEndDate: momentPropTypes.momentObj,
 
@@ -33,7 +32,6 @@ const defaultProps = {
   // example props for the demo
   autoFocus: false,
   autoFocusEndDate: false,
-  isPersianDateRangePicker: false,
   initialStartDate: null,
   initialEndDate: null,
 
@@ -87,6 +85,8 @@ const defaultProps = {
   displayFormat: () => moment.localeData().longDateFormat('L'),
   monthFormat: 'MMMM YYYY',
   phrases: DateRangePickerPhrases,
+
+  stateDateWrapper: date => date,
 };
 
 class DateRangePickerWrapper extends React.Component {
@@ -111,14 +111,11 @@ class DateRangePickerWrapper extends React.Component {
   }
 
   onDatesChange({ startDate, endDate }) {
-    if (this.props.isPersianDateRangePicker) {
-      this.setState({
-        startDate: startDate && momentJalaali(startDate),
-        endDate: endDate && momentJalaali(endDate),
-      });
-    } else {
-      this.setState({ startDate, endDate });
-    }
+    const { stateDateWrapper } = this.props;
+    this.setState({
+      startDate: startDate && stateDateWrapper(startDate),
+      endDate: endDate && stateDateWrapper(endDate),
+    });
   }
 
   onFocusChange(focusedInput) {
@@ -136,7 +133,7 @@ class DateRangePickerWrapper extends React.Component {
       'autoFocusEndDate',
       'initialStartDate',
       'initialEndDate',
-      'isPersianDateRangePicker',
+      'stateDateWrapper',
     ]);
 
     return (
diff --git a/stories/DateRangePicker.js b/stories/DateRangePicker.js
index 8c6aee984b..5dcf3833fc 100644
--- a/stories/DateRangePicker.js
+++ b/stories/DateRangePicker.js
@@ -88,7 +88,7 @@ storiesOf('DateRangePicker (DRP)', module)
     return (
       <DateRangePickerWrapper
         isRTL
-        isPersianDateRangePicker
+        stateDateWrapper={momentJalaali}
         startDatePlaceholderText="تاریخ شروع"
         endDatePlaceholderText="تاریخ پایان"
         renderMonth={month => momentJalaali(month).format('jMMMM jYYYY')}

From 209db72fca5b47a128066b91064e7047fcbe762a Mon Sep 17 00:00:00 2001
From: Felix Schindler <mail@felixschindler.de>
Date: Mon, 19 Feb 2018 14:55:00 +0100
Subject: [PATCH 115/618] fix: remove react-addons-shallow-compare peer
 dependencie from readme

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 11cdbf6b90..f020cb85af 100644
--- a/README.md
+++ b/README.md
@@ -37,7 +37,7 @@ Ensure packages are installed with correct version numbers by running:
   Which produces and runs a command like:
 
   ```sh
-  npm install --save react-dates moment@>=#.## react@>=#.## react-dom@>=#.## react-addons-shallow-compare@>=#.##
+  npm install --save react-dates moment@>=#.## react@>=#.## react-dom@>=#.##
   ```
 
 ### Initialize

From 60bf6f6b4a38be8ba261045e0891b5a28f232e5f Mon Sep 17 00:00:00 2001
From: "greenkeeper[bot]" <greenkeeper[bot]@users.noreply.github.com>
Date: Tue, 20 Feb 2018 19:26:10 +0000
Subject: [PATCH 116/618] chore(package): update imports-loader to version
 0.8.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 3a8ac90501..b6fabccc82 100644
--- a/package.json
+++ b/package.json
@@ -81,7 +81,7 @@
     "eslint-plugin-react": "^7.6.1",
     "eslint-plugin-react-with-styles": "^1.1.1",
     "git-directory-deploy": "^1.5.1",
-    "imports-loader": "^0.7.1",
+    "imports-loader": "^0.8.0",
     "in-publish": "^2.0.0",
     "json-loader": "^0.5.7",
     "karma": "^1.7.1",

From f953b03a468310d9dbf0d2fc04c38b022da6d963 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Tue, 20 Feb 2018 14:30:02 -0800
Subject: [PATCH 117/618] Bump RWS and RWS interfaces

---
 package.json                    |  6 +++---
 scripts/buildCSS.js             | 10 ++--------
 scripts/renderAllComponents.jsx | 18 ++++++++++++++++++
 3 files changed, 23 insertions(+), 11 deletions(-)
 create mode 100644 scripts/renderAllComponents.jsx

diff --git a/package.json b/package.json
index 3a8ac90501..15eda6734b 100644
--- a/package.json
+++ b/package.json
@@ -99,8 +99,8 @@
     "raw-loader": "^0.5.1",
     "react": "^0.14 || ^15.5.4 || ^16.1.1",
     "react-dom": "^0.14 || ^15.5.4 || ^16.1.1",
-    "react-with-styles-interface-aphrodite": "^3.1.1",
-    "react-with-styles-interface-css-compiler": "^1.1.0",
+    "react-with-styles-interface-aphrodite": "^4.0.1",
+    "react-with-styles-interface-css-compiler": "^1.1.2",
     "rimraf": "^2.6.2",
     "safe-publish-latest": "^1.1.1",
     "sass-loader": "^6.0.6",
@@ -120,7 +120,7 @@
     "react-addons-shallow-compare": "^15.6.2",
     "react-moment-proptypes": "^1.5.0",
     "react-portal": "^4.1.2",
-    "react-with-styles": "=2.2.0",
+    "react-with-styles": "^3.1.0",
     "react-with-styles-interface-css": "^4.0.0"
   },
   "peerDependencies": {
diff --git a/scripts/buildCSS.js b/scripts/buildCSS.js
index 0efc8b315d..bd83e854e7 100644
--- a/scripts/buildCSS.js
+++ b/scripts/buildCSS.js
@@ -16,14 +16,8 @@ require('../test/_helpers/ignoreSVGStrings');
 registerMaxSpecificity(0);
 registerCSSInterfaceWithDefaultTheme();
 
-const DateRangePickerPath = './examples/DateRangePickerWrapper.jsx';
-const SingleDatePickerPath = './examples/SingleDatePickerWrapper.jsx';
-const PresetDateRangePickerPath = './examples/PresetDateRangePicker.jsx';
-
-const dateRangePickerCSS = compileCSS(DateRangePickerPath);
-const singleDatePickerCSS = compileCSS(SingleDatePickerPath);
-const presetDatePickerCSS = compileCSS(PresetDateRangePickerPath);
-const CSS = dateRangePickerCSS + singleDatePickerCSS + presetDatePickerCSS;
+const path = './scripts/renderAllComponents.jsx';
+const CSS = compileCSS(path);
 
 const format = new CleanCSS({
   level: optimizeForProduction ? 2 : 0,
diff --git a/scripts/renderAllComponents.jsx b/scripts/renderAllComponents.jsx
new file mode 100644
index 0000000000..c1dd61a832
--- /dev/null
+++ b/scripts/renderAllComponents.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import DateRangePickerWrapper from '../examples/DateRangePickerWrapper';
+import SingleDatePickerWrapper from '../examples/SingleDatePickerWrapper';
+import PresetDateRangePickerWrapper from '../examples/PresetDateRangePicker';
+
+function App() {
+  return (
+    <div>
+      <DateRangePickerWrapper />
+      <SingleDatePickerWrapper />
+      <PresetDateRangePickerWrapper />
+    </div>
+  );
+}
+
+ReactDOM.render(<App />, document.querySelector('#root'));

From 40b7f6fdc2a2249d79e0f1563b41d93b5f2582f4 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Fri, 23 Feb 2018 13:40:21 -0800
Subject: [PATCH 118/618] Version 16.3.1

---
 CHANGELOG.md | 3 +++
 package.json | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1c1a865d82..b1d3b94701 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # Change Log
 
+## 16.3.1
+- [deps] Bump react-with-styles dependency ([#1041](https://github.com/airbnb/react-dates/pull/1041))
+
 ## 16.3.0
 - [new] customInfoPanel position prop ([#989](https://github.com/airbnb/react-dates/pull/989))
 - [fix] Fix CustomizableCalendarDay selected/selected-start/selected-end specificity issues ([#979](https://github.com/airbnb/react-dates/pull/979))
diff --git a/package.json b/package.json
index 15eda6734b..b868ee6754 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "16.3.0",
+  "version": "16.3.1",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From d99b1a9d6a85d9bcae56c5ef88cb0b4381685199 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Fri, 23 Feb 2018 17:42:51 -0800
Subject: [PATCH 119/618] Revert "Bump RWS and RWS interfaces"

---
 package.json                    |  6 +++---
 scripts/buildCSS.js             | 10 ++++++++--
 scripts/renderAllComponents.jsx | 18 ------------------
 3 files changed, 11 insertions(+), 23 deletions(-)
 delete mode 100644 scripts/renderAllComponents.jsx

diff --git a/package.json b/package.json
index b868ee6754..1af3f61cb8 100644
--- a/package.json
+++ b/package.json
@@ -99,8 +99,8 @@
     "raw-loader": "^0.5.1",
     "react": "^0.14 || ^15.5.4 || ^16.1.1",
     "react-dom": "^0.14 || ^15.5.4 || ^16.1.1",
-    "react-with-styles-interface-aphrodite": "^4.0.1",
-    "react-with-styles-interface-css-compiler": "^1.1.2",
+    "react-with-styles-interface-aphrodite": "^3.1.1",
+    "react-with-styles-interface-css-compiler": "^1.1.0",
     "rimraf": "^2.6.2",
     "safe-publish-latest": "^1.1.1",
     "sass-loader": "^6.0.6",
@@ -120,7 +120,7 @@
     "react-addons-shallow-compare": "^15.6.2",
     "react-moment-proptypes": "^1.5.0",
     "react-portal": "^4.1.2",
-    "react-with-styles": "^3.1.0",
+    "react-with-styles": "=2.2.0",
     "react-with-styles-interface-css": "^4.0.0"
   },
   "peerDependencies": {
diff --git a/scripts/buildCSS.js b/scripts/buildCSS.js
index bd83e854e7..0efc8b315d 100644
--- a/scripts/buildCSS.js
+++ b/scripts/buildCSS.js
@@ -16,8 +16,14 @@ require('../test/_helpers/ignoreSVGStrings');
 registerMaxSpecificity(0);
 registerCSSInterfaceWithDefaultTheme();
 
-const path = './scripts/renderAllComponents.jsx';
-const CSS = compileCSS(path);
+const DateRangePickerPath = './examples/DateRangePickerWrapper.jsx';
+const SingleDatePickerPath = './examples/SingleDatePickerWrapper.jsx';
+const PresetDateRangePickerPath = './examples/PresetDateRangePicker.jsx';
+
+const dateRangePickerCSS = compileCSS(DateRangePickerPath);
+const singleDatePickerCSS = compileCSS(SingleDatePickerPath);
+const presetDatePickerCSS = compileCSS(PresetDateRangePickerPath);
+const CSS = dateRangePickerCSS + singleDatePickerCSS + presetDatePickerCSS;
 
 const format = new CleanCSS({
   level: optimizeForProduction ? 2 : 0,
diff --git a/scripts/renderAllComponents.jsx b/scripts/renderAllComponents.jsx
deleted file mode 100644
index c1dd61a832..0000000000
--- a/scripts/renderAllComponents.jsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-import DateRangePickerWrapper from '../examples/DateRangePickerWrapper';
-import SingleDatePickerWrapper from '../examples/SingleDatePickerWrapper';
-import PresetDateRangePickerWrapper from '../examples/PresetDateRangePicker';
-
-function App() {
-  return (
-    <div>
-      <DateRangePickerWrapper />
-      <SingleDatePickerWrapper />
-      <PresetDateRangePickerWrapper />
-    </div>
-  );
-}
-
-ReactDOM.render(<App />, document.querySelector('#root'));

From 66bf0318c2be37d93a2a4ddc193fe1ddb36cc2ef Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Fri, 23 Feb 2018 17:44:54 -0800
Subject: [PATCH 120/618] Version 16.3.2

---
 CHANGELOG.md | 3 +++
 package.json | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b1d3b94701..a601674622 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # Change Log
 
+## 16.3.2
+- [Revert] Bump react-with-styles dependency ([#1041](https://github.com/airbnb/react-dates/pull/1041))
+
 ## 16.3.1
 - [deps] Bump react-with-styles dependency ([#1041](https://github.com/airbnb/react-dates/pull/1041))
 
diff --git a/package.json b/package.json
index 1af3f61cb8..4e0095e058 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "16.3.1",
+  "version": "16.3.2",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 2b6e2aa96f01294a08ef0dff17fbf703b2e5c0f8 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Fri, 23 Feb 2018 19:44:46 -0800
Subject: [PATCH 121/618] =?UTF-8?q?Revert=20"Update=20react-with-styles-in?=
 =?UTF-8?q?terface-css=20to=20the=20latest=20version=20=F0=9F=9A=80"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4e0095e058..1b42d2d08b 100644
--- a/package.json
+++ b/package.json
@@ -121,7 +121,7 @@
     "react-moment-proptypes": "^1.5.0",
     "react-portal": "^4.1.2",
     "react-with-styles": "=2.2.0",
-    "react-with-styles-interface-css": "^4.0.0"
+    "react-with-styles-interface-css": "^3.0.0"
   },
   "peerDependencies": {
     "moment": "^2.18.1",

From 2401b46964327f1e82a569a5208c95f75ade5102 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Fri, 23 Feb 2018 19:47:04 -0800
Subject: [PATCH 122/618] Version 16.3.3

---
 CHANGELOG.md | 6 +++++-
 package.json | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a601674622..6b49626473 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,10 +1,14 @@
 # Change Log
 
+## 16.3.3
+- [revert] Reverts 'Bump react-with-style-interface-css dependency ([#1043](https://github.com/airbnb/react-dates/pull/1043))'
+
 ## 16.3.2
-- [Revert] Bump react-with-styles dependency ([#1041](https://github.com/airbnb/react-dates/pull/1041))
+- [revert] Reverts 'Bump react-with-styles dependency ([#1041](https://github.com/airbnb/react-dates/pull/1041))'
 
 ## 16.3.1
 - [deps] Bump react-with-styles dependency ([#1041](https://github.com/airbnb/react-dates/pull/1041))
+- [deps] Bump react-with-style-interface-css dependency ([#1043](https://github.com/airbnb/react-dates/pull/1043))
 
 ## 16.3.0
 - [new] customInfoPanel position prop ([#989](https://github.com/airbnb/react-dates/pull/989))
diff --git a/package.json b/package.json
index 1b42d2d08b..562835aa86 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "16.3.2",
+  "version": "16.3.3",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 072566b71c681791872e2220f872c678a4e05854 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Sat, 24 Feb 2018 22:43:30 -0800
Subject: [PATCH 123/618] Revert "Revert "Bump RWS and RWS interfaces""

This reverts commit d99b1a9d6a85d9bcae56c5ef88cb0b4381685199.
---
 package.json                    |  8 ++++----
 scripts/buildCSS.js             | 10 ++--------
 scripts/renderAllComponents.jsx | 18 ++++++++++++++++++
 3 files changed, 24 insertions(+), 12 deletions(-)
 create mode 100644 scripts/renderAllComponents.jsx

diff --git a/package.json b/package.json
index 562835aa86..867e06e474 100644
--- a/package.json
+++ b/package.json
@@ -99,8 +99,8 @@
     "raw-loader": "^0.5.1",
     "react": "^0.14 || ^15.5.4 || ^16.1.1",
     "react-dom": "^0.14 || ^15.5.4 || ^16.1.1",
-    "react-with-styles-interface-aphrodite": "^3.1.1",
-    "react-with-styles-interface-css-compiler": "^1.1.0",
+    "react-with-styles-interface-aphrodite": "^4.0.1",
+    "react-with-styles-interface-css-compiler": "^1.1.2",
     "rimraf": "^2.6.2",
     "safe-publish-latest": "^1.1.1",
     "sass-loader": "^6.0.6",
@@ -120,8 +120,8 @@
     "react-addons-shallow-compare": "^15.6.2",
     "react-moment-proptypes": "^1.5.0",
     "react-portal": "^4.1.2",
-    "react-with-styles": "=2.2.0",
-    "react-with-styles-interface-css": "^3.0.0"
+    "react-with-styles": "^3.1.0",
+    "react-with-styles-interface-css": "^4.0.0"
   },
   "peerDependencies": {
     "moment": "^2.18.1",
diff --git a/scripts/buildCSS.js b/scripts/buildCSS.js
index 0efc8b315d..bd83e854e7 100644
--- a/scripts/buildCSS.js
+++ b/scripts/buildCSS.js
@@ -16,14 +16,8 @@ require('../test/_helpers/ignoreSVGStrings');
 registerMaxSpecificity(0);
 registerCSSInterfaceWithDefaultTheme();
 
-const DateRangePickerPath = './examples/DateRangePickerWrapper.jsx';
-const SingleDatePickerPath = './examples/SingleDatePickerWrapper.jsx';
-const PresetDateRangePickerPath = './examples/PresetDateRangePicker.jsx';
-
-const dateRangePickerCSS = compileCSS(DateRangePickerPath);
-const singleDatePickerCSS = compileCSS(SingleDatePickerPath);
-const presetDatePickerCSS = compileCSS(PresetDateRangePickerPath);
-const CSS = dateRangePickerCSS + singleDatePickerCSS + presetDatePickerCSS;
+const path = './scripts/renderAllComponents.jsx';
+const CSS = compileCSS(path);
 
 const format = new CleanCSS({
   level: optimizeForProduction ? 2 : 0,
diff --git a/scripts/renderAllComponents.jsx b/scripts/renderAllComponents.jsx
new file mode 100644
index 0000000000..c1dd61a832
--- /dev/null
+++ b/scripts/renderAllComponents.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import DateRangePickerWrapper from '../examples/DateRangePickerWrapper';
+import SingleDatePickerWrapper from '../examples/SingleDatePickerWrapper';
+import PresetDateRangePickerWrapper from '../examples/PresetDateRangePicker';
+
+function App() {
+  return (
+    <div>
+      <DateRangePickerWrapper />
+      <SingleDatePickerWrapper />
+      <PresetDateRangePickerWrapper />
+    </div>
+  );
+}
+
+ReactDOM.render(<App />, document.querySelector('#root'));

From 84c8d85507da3dfbedfa3051ce6882d588ec4130 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Sat, 24 Feb 2018 22:46:11 -0800
Subject: [PATCH 124/618] Bump react-with-styles-interface-css to latest

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 867e06e474..164d6b8130 100644
--- a/package.json
+++ b/package.json
@@ -121,7 +121,7 @@
     "react-moment-proptypes": "^1.5.0",
     "react-portal": "^4.1.2",
     "react-with-styles": "^3.1.0",
-    "react-with-styles-interface-css": "^4.0.0"
+    "react-with-styles-interface-css": "^4.0.1"
   },
   "peerDependencies": {
     "moment": "^2.18.1",

From adad180c23cdc66f92d67a50da20d415480b1b3b Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Sat, 24 Feb 2018 23:06:34 -0800
Subject: [PATCH 125/618] Version 16.3.4

---
 CHANGELOG.md | 3 +++
 package.json | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6b49626473..a661bdfee6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # Change Log
 
+## 16.3.4
+- [fix] Bumps all the RWS libraries again, now with less breakage!
+
 ## 16.3.3
 - [revert] Reverts 'Bump react-with-style-interface-css dependency ([#1043](https://github.com/airbnb/react-dates/pull/1043))'
 
diff --git a/package.json b/package.json
index 164d6b8130..3b4004a3bd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "16.3.3",
+  "version": "16.3.4",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From eabc2f0241aa5c113a62a1df557148b08fa47e94 Mon Sep 17 00:00:00 2001
From: "greenkeeper[bot]" <greenkeeper[bot]@users.noreply.github.com>
Date: Sun, 25 Feb 2018 17:39:06 +0000
Subject: [PATCH 126/618] chore(package): update babel-loader to version 7.1.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 3b4004a3bd..5ac002af7d 100644
--- a/package.json
+++ b/package.json
@@ -60,7 +60,7 @@
     "aphrodite": "^1.2.5",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",
-    "babel-loader": "^6.4.1",
+    "babel-loader": "^7.1.3",
     "babel-plugin-inline-react-svg": "^0.5.2",
     "babel-plugin-inline-svg": "^0.1.0",
     "babel-plugin-istanbul": "^4.1.5",

From c96534896d8fe5c28ddc1f1090ef43dfaeebb5d6 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Sun, 25 Feb 2018 10:29:51 -0800
Subject: [PATCH 127/618] render all components including the DayPicker
 components

---
 scripts/renderAllComponents.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/scripts/renderAllComponents.jsx b/scripts/renderAllComponents.jsx
index c1dd61a832..a93b079b95 100644
--- a/scripts/renderAllComponents.jsx
+++ b/scripts/renderAllComponents.jsx
@@ -8,9 +8,9 @@ import PresetDateRangePickerWrapper from '../examples/PresetDateRangePicker';
 function App() {
   return (
     <div>
-      <DateRangePickerWrapper />
-      <SingleDatePickerWrapper />
-      <PresetDateRangePickerWrapper />
+      <DateRangePickerWrapper autoFocus />
+      <SingleDatePickerWrapper autoFocus />
+      <PresetDateRangePickerWrapper autoFocus />
     </div>
   );
 }

From 4b5f557eae4787adaa509c0f37fce80ba3341967 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Sun, 25 Feb 2018 10:37:57 -0800
Subject: [PATCH 128/618] Version 16.3.5

---
 CHANGELOG.md | 3 +++
 package.json | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a661bdfee6..d524e01130 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # Change Log
 
+## 16.3.5 (I promise this one is good)
+- [fix] Includes all necessary CSS ([c965348](https://github.com/airbnb/react-dates/commit/c96534896d8fe5c28ddc1f1090ef43dfaeebb5d6))
+
 ## 16.3.4
 - [fix] Bumps all the RWS libraries again, now with less breakage!
 
diff --git a/package.json b/package.json
index 3b4004a3bd..912a2a0161 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "16.3.4",
+  "version": "16.3.5",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From ddf6c002d103ea4d7ef36798174005e6454a6961 Mon Sep 17 00:00:00 2001
From: Dmitry Borody <dmitriy.borodiy@gmail.com>
Date: Sun, 25 Feb 2018 19:45:12 +0100
Subject: [PATCH 129/618] Fix styles not being applied to close button in
 SingleDatePicker component

---
 src/components/SingleDatePicker.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index eae7fa9579..b58d5614e1 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -451,12 +451,12 @@ class SingleDatePicker extends React.Component {
 
         {withFullScreenPortal && (
           <button
+            {...css(styles.SingleDatePicker_closeButton)}
             aria-label={phrases.closeDatePicker}
-            className="SingleDatePicker__close"
             type="button"
             onClick={this.onClearFocus}
           >
-            <div className="SingleDatePicker__close-icon">
+            <div {...css(styles.SingleDatePicker_closeButton_svg)}>
               {closeIcon}
             </div>
           </button>

From f11c74ed13dd26d76f824b7f1b2deb631952c822 Mon Sep 17 00:00:00 2001
From: andrew_hunt <andrew.hunt@airbnb.com>
Date: Tue, 27 Feb 2018 13:54:58 -0800
Subject: [PATCH 130/618] fix vertical width

---
 src/components/DayPicker.jsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 872e656106..db1a50042b 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -816,7 +816,7 @@ class DayPicker extends React.Component {
     };
 
     const dayPickerWrapperStyle = {
-      width: wrapperHorizontalWidth,
+      width: isHorizontal && wrapperHorizontalWidth,
     };
 
     const dayPickerStyle = {
@@ -834,7 +834,6 @@ class DayPicker extends React.Component {
         {...css(
           styles.DayPicker,
           isHorizontal && styles.DayPicker__horizontal,
-          this.isVertical() && styles.DayPicker__vertical,
           verticalScrollable && styles.DayPicker__verticalScrollable,
           isHorizontal && withPortal && styles.DayPicker_portal__horizontal,
           this.isVertical() && withPortal && styles.DayPicker_portal__vertical,
@@ -849,7 +848,7 @@ class DayPicker extends React.Component {
           <div
             {...css(
               dayPickerWrapperStyle,
-              (calendarInfoIsInline) && styles.DayPicker_wrapper__horizontal,
+              calendarInfoIsInline && isHorizontal && styles.DayPicker_wrapper__horizontal,
             )}
           >
 

From 4a63d52f06442442627be3fa4a8f571abdb5f302 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Tue, 27 Feb 2018 23:18:16 +0000
Subject: [PATCH 131/618] Version 16.3.6

---
 CHANGELOG.md | 3 +++
 package.json | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d524e01130..0538216835 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # Change Log
 
+## 16.3.6
+- [fix] Address width issues for vertical DayPickers ([#1055](https://github.com/airbnb/react-dates/pull/1055))
+
 ## 16.3.5 (I promise this one is good)
 - [fix] Includes all necessary CSS ([c965348](https://github.com/airbnb/react-dates/commit/c96534896d8fe5c28ddc1f1090ef43dfaeebb5d6))
 
diff --git a/package.json b/package.json
index 912a2a0161..98ccafe47b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "16.3.5",
+  "version": "16.3.6",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From e4ef7e4c8829074804151de4a0cb35cbfa068226 Mon Sep 17 00:00:00 2001
From: Niklas Mack <nigi.m4.a1@gmail.com>
Date: Thu, 1 Mar 2018 14:12:55 +0100
Subject: [PATCH 132/618] Fix style of CloseIcon in SingleDatePicker

---
 src/components/SingleDatePickerInput.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SingleDatePickerInput.jsx b/src/components/SingleDatePickerInput.jsx
index ac62a00e12..aa8390937b 100644
--- a/src/components/SingleDatePickerInput.jsx
+++ b/src/components/SingleDatePickerInput.jsx
@@ -127,7 +127,7 @@ function SingleDatePickerInput({
     <CloseButton
       {...css(
         styles.SingleDatePickerInput_clearDate_svg,
-        styles.SingleDatePickerInput_clearDate_svg__small,
+        small && styles.SingleDatePickerInput_clearDate_svg__small,
       )}
     />
   );

From d0777e73ac0cf6c2f8b7ce0e762004ae6c105e90 Mon Sep 17 00:00:00 2001
From: Sasha Bayan <sashabayan@gmail.com>
Date: Thu, 1 Mar 2018 16:37:57 -0800
Subject: [PATCH 133/618] fix typo: shorcut --> shortcut

---
 stories/DateRangePicker_calendar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/stories/DateRangePicker_calendar.js b/stories/DateRangePicker_calendar.js
index 11817b419d..d6b515630a 100644
--- a/stories/DateRangePicker_calendar.js
+++ b/stories/DateRangePicker_calendar.js
@@ -173,7 +173,7 @@ storiesOf('DRP - Calendar Props', module)
       autoFocus
     />
   ))
-  .addWithInfo('with keyboard shorcuts panel hidden', () => (
+  .addWithInfo('with keyboard shortcuts panel hidden', () => (
     <DateRangePickerWrapper
       hideKeyboardShortcutsPanel
       autoFocus

From 34cd619e9136a93ae6ffc3e0de017789fbf1f147 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joa=CC=83o=20Vieira?= <joaoguerravieira@gmail.com>
Date: Thu, 8 Mar 2018 17:54:56 +0000
Subject: [PATCH 134/618] Add appendToBody and preventScroll props to DRP and
 SDP.

---
 src/components/DateRangePicker.jsx      |  61 +++++++---
 src/components/SingleDatePicker.jsx     |  64 ++++++++---
 src/shapes/DateRangePickerShape.js      |   2 +
 src/shapes/SingleDatePickerShape.js     |   2 +
 src/utils/ScrollManager.js              |  63 +++++++++++
 src/utils/getDetachedContainerStyles.js |   9 ++
 stories/DateRangePicker_calendar.js     | 141 +++++++-----------------
 stories/SingleDatePicker_calendar.js    |  15 +++
 8 files changed, 231 insertions(+), 126 deletions(-)
 create mode 100644 src/utils/ScrollManager.js
 create mode 100644 src/utils/getDetachedContainerStyles.js

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 14fdd1d1c4..8c783a90b1 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -7,21 +7,20 @@ import { forbidExtraProps } from 'airbnb-prop-types';
 import { addEventListener } from 'consolidated-events';
 import isTouchDevice from 'is-touch-device';
 
+import DateRangePickerShape from '../shapes/DateRangePickerShape';
 import { DateRangePickerPhrases } from '../defaultPhrases';
 
-import OutsideClickHandler from './OutsideClickHandler';
 import getResponsiveContainerStyles from '../utils/getResponsiveContainerStyles';
+import getDetachedContainerStyles from '../utils/getDetachedContainerStyles';
 import getInputHeight from '../utils/getInputHeight';
-
 import isInclusivelyAfterDay from '../utils/isInclusivelyAfterDay';
+import ScrollManager from '../utils/ScrollManager';
 
 import DateRangePickerInputController from './DateRangePickerInputController';
 import DayPickerRangeController from './DayPickerRangeController';
-
+import OutsideClickHandler from './OutsideClickHandler';
 import CloseButton from './CloseButton';
 
-import DateRangePickerShape from '../shapes/DateRangePickerShape';
-
 import {
   START_DATE,
   END_DATE,
@@ -76,6 +75,8 @@ const defaultProps = {
   horizontalMargin: 0,
   withPortal: false,
   withFullScreenPortal: false,
+  appendToBody: false,
+  preventScroll: false,
   initialVisibleMonth: null,
   numberOfMonths: 2,
   keepOpenOnDateSelect: false,
@@ -134,11 +135,18 @@ class DateRangePicker extends React.Component {
     this.showKeyboardShortcutsPanel = this.showKeyboardShortcutsPanel.bind(this);
 
     this.responsivizePickerPosition = this.responsivizePickerPosition.bind(this);
+    this.disableScroll = this.disableScroll.bind(this);
+    this.enableScroll = this.enableScroll.bind(this);
 
     this.setDayPickerContainerRef = this.setDayPickerContainerRef.bind(this);
+    this.setContainerRef = this.setContainerRef.bind(this);
   }
 
   componentDidMount() {
+    if (this.props.appendToBody || this.props.preventScroll) {
+      this.scrollManager = new ScrollManager(this.container);
+    }
+
     this.removeEventListener = addEventListener(
       window,
       'resize',
@@ -146,6 +154,7 @@ class DateRangePicker extends React.Component {
       { passive: true },
     );
     this.responsivizePickerPosition();
+    this.disableScroll();
 
     if (this.props.focusedInput) {
       this.setState({
@@ -164,14 +173,19 @@ class DateRangePicker extends React.Component {
     if (!prevProps.focusedInput && this.props.focusedInput && this.isOpened()) {
       // The date picker just changed from being closed to being open.
       this.responsivizePickerPosition();
+      this.disableScroll();
+    } else if (prevProps.focusedInput && !this.props.focusedInput && !this.isOpened()) {
+      // The date picker just changed from being open to being closed.
+      this.enableScroll();
     }
   }
 
   componentWillUnmount() {
     if (this.removeEventListener) this.removeEventListener();
+    this.enableScroll();
   }
 
-  onOutsideClick() {
+  onOutsideClick(event) {
     const {
       onFocusChange,
       onClose,
@@ -179,6 +193,7 @@ class DateRangePicker extends React.Component {
       endDate,
     } = this.props;
     if (!this.isOpened()) return;
+    if (this.props.appendToBody && this.dayPickerContainer.contains(event.target)) return;
 
     this.setState({
       isDateRangePickerInputFocused: false,
@@ -235,11 +250,24 @@ class DateRangePicker extends React.Component {
     this.dayPickerContainer = ref;
   }
 
+  setContainerRef(ref) {
+    this.container = ref;
+  }
+
   isOpened() {
     const { focusedInput } = this.props;
     return focusedInput === START_DATE || focusedInput === END_DATE;
   }
 
+  disableScroll() {
+    if (!this.isOpened()) return;
+    if (this.scrollManager) this.scrollManager.disableScroll();
+  }
+
+  enableScroll() {
+    if (this.scrollManager) this.scrollManager.enableScroll();
+  }
+
   responsivizePickerPosition() {
     // It's possible the portal props have been changed in response to window resizes
     // So let's ensure we reset this back to the base state each time
@@ -254,6 +282,7 @@ class DateRangePicker extends React.Component {
       horizontalMargin,
       withPortal,
       withFullScreenPortal,
+      appendToBody,
     } = this.props;
     const { dayPickerContainerStyles } = this.state;
 
@@ -266,12 +295,15 @@ class DateRangePicker extends React.Component {
         : containerRect[ANCHOR_LEFT];
 
       this.setState({
-        dayPickerContainerStyles: getResponsiveContainerStyles(
-          anchorDirection,
-          currentOffset,
-          containerEdge,
-          horizontalMargin,
-        ),
+        dayPickerContainerStyles: {
+          ...getResponsiveContainerStyles(
+            anchorDirection,
+            currentOffset,
+            containerEdge,
+            horizontalMargin,
+          ),
+          ...(appendToBody && getDetachedContainerStyles(this.container)),
+        },
       });
     }
   }
@@ -285,13 +317,13 @@ class DateRangePicker extends React.Component {
   }
 
   maybeRenderDayPickerWithPortal() {
-    const { withPortal, withFullScreenPortal } = this.props;
+    const { withPortal, withFullScreenPortal, appendToBody } = this.props;
 
     if (!this.isOpened()) {
       return null;
     }
 
-    if (withPortal || withFullScreenPortal) {
+    if (withPortal || withFullScreenPortal || appendToBody) {
       return (
         <Portal>
           {this.renderDayPicker()}
@@ -485,6 +517,7 @@ class DateRangePicker extends React.Component {
 
     return (
       <div
+        ref={this.setContainerRef}
         {...css(
           styles.DateRangePicker,
           block && styles.DateRangePicker__block,
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index b58d5614e1..a082db09d6 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -9,19 +9,19 @@ import isTouchDevice from 'is-touch-device';
 import SingleDatePickerShape from '../shapes/SingleDatePickerShape';
 import { SingleDatePickerPhrases } from '../defaultPhrases';
 
-import OutsideClickHandler from './OutsideClickHandler';
 import toMomentObject from '../utils/toMomentObject';
 import toLocalizedDateString from '../utils/toLocalizedDateString';
 import getResponsiveContainerStyles from '../utils/getResponsiveContainerStyles';
+import getDetachedContainerStyles from '../utils/getDetachedContainerStyles';
 import getInputHeight from '../utils/getInputHeight';
+import isInclusivelyAfterDay from '../utils/isInclusivelyAfterDay';
+import ScrollManager from '../utils/ScrollManager';
 
 import SingleDatePickerInput from './SingleDatePickerInput';
 import DayPickerSingleDateController from './DayPickerSingleDateController';
-
+import OutsideClickHandler from './OutsideClickHandler';
 import CloseButton from './CloseButton';
 
-import isInclusivelyAfterDay from '../utils/isInclusivelyAfterDay';
-
 import {
   HORIZONTAL_ORIENTATION,
   VERTICAL_ORIENTATION,
@@ -72,6 +72,8 @@ const defaultProps = {
   horizontalMargin: 0,
   withPortal: false,
   withFullScreenPortal: false,
+  appendToBody: false,
+  preventScroll: false,
   initialVisibleMonth: null,
   firstDayOfWeek: null,
   numberOfMonths: 2,
@@ -134,12 +136,19 @@ class SingleDatePicker extends React.Component {
     this.clearDate = this.clearDate.bind(this);
 
     this.responsivizePickerPosition = this.responsivizePickerPosition.bind(this);
+    this.disableScroll = this.disableScroll.bind(this);
+    this.enableScroll = this.enableScroll.bind(this);
 
     this.setDayPickerContainerRef = this.setDayPickerContainerRef.bind(this);
+    this.setContainerRef = this.setContainerRef.bind(this);
   }
 
   /* istanbul ignore next */
   componentDidMount() {
+    if (this.props.appendToBody || this.props.preventScroll) {
+      this.scrollManager = new ScrollManager(this.container);
+    }
+
     this.removeEventListener = addEventListener(
       window,
       'resize',
@@ -147,6 +156,7 @@ class SingleDatePicker extends React.Component {
       { passive: true },
     );
     this.responsivizePickerPosition();
+    this.disableScroll();
 
     if (this.props.focused) {
       this.setState({
@@ -160,12 +170,16 @@ class SingleDatePicker extends React.Component {
   componentDidUpdate(prevProps) {
     if (!prevProps.focused && this.props.focused) {
       this.responsivizePickerPosition();
+      this.disableScroll();
+    } else if (prevProps.focused && !this.props.focused) {
+      this.enableScroll();
     }
   }
 
   /* istanbul ignore next */
   componentWillUnmount() {
     if (this.removeEventListener) this.removeEventListener();
+    this.enableScroll();
   }
 
   onChange(dateString) {
@@ -213,7 +227,7 @@ class SingleDatePicker extends React.Component {
     }
   }
 
-  onClearFocus() {
+  onClearFocus(event) {
     const {
       date,
       focused,
@@ -221,6 +235,7 @@ class SingleDatePicker extends React.Component {
       onClose,
     } = this.props;
     if (!focused) return;
+    if (this.props.appendToBody && this.dayPickerContainer.contains(event.target)) return;
 
     this.setState({
       isInputFocused: false,
@@ -264,6 +279,10 @@ class SingleDatePicker extends React.Component {
     this.dayPickerContainer = ref;
   }
 
+  setContainerRef(ref) {
+    this.container = ref;
+  }
+
   clearDate() {
     const { onDateChange, reopenPickerOnClearDate, onFocusChange } = this.props;
     onDateChange(null);
@@ -272,6 +291,15 @@ class SingleDatePicker extends React.Component {
     }
   }
 
+  disableScroll() {
+    if (!this.props.focused) return;
+    if (this.scrollManager) this.scrollManager.disableScroll();
+  }
+
+  enableScroll() {
+    if (this.scrollManager) this.scrollManager.enableScroll();
+  }
+
   /* istanbul ignore next */
   responsivizePickerPosition() {
     // It's possible the portal props have been changed in response to window resizes
@@ -283,6 +311,7 @@ class SingleDatePicker extends React.Component {
       horizontalMargin,
       withPortal,
       withFullScreenPortal,
+      appendToBody,
       focused,
     } = this.props;
     const { dayPickerContainerStyles } = this.state;
@@ -301,12 +330,15 @@ class SingleDatePicker extends React.Component {
         : containerRect[ANCHOR_LEFT];
 
       this.setState({
-        dayPickerContainerStyles: getResponsiveContainerStyles(
-          anchorDirection,
-          currentOffset,
-          containerEdge,
-          horizontalMargin,
-        ),
+        dayPickerContainerStyles: {
+          ...getResponsiveContainerStyles(
+            anchorDirection,
+            currentOffset,
+            containerEdge,
+            horizontalMargin,
+          ),
+          ...(appendToBody && getDetachedContainerStyles(this.container)),
+        },
       });
     }
   }
@@ -320,13 +352,18 @@ class SingleDatePicker extends React.Component {
   }
 
   maybeRenderDayPickerWithPortal() {
-    const { focused, withPortal, withFullScreenPortal } = this.props;
+    const {
+      focused,
+      withPortal,
+      withFullScreenPortal,
+      appendToBody,
+    } = this.props;
 
     if (!focused) {
       return null;
     }
 
-    if (withPortal || withFullScreenPortal) {
+    if (withPortal || withFullScreenPortal || appendToBody) {
       return (
         <Portal>
           {this.renderDayPicker()}
@@ -503,6 +540,7 @@ class SingleDatePicker extends React.Component {
 
     return (
       <div
+        ref={this.setContainerRef}
         {...css(
           styles.SingleDatePicker,
           block && styles.SingleDatePicker__block,
diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js
index 962ce954f4..af60164378 100644
--- a/src/shapes/DateRangePickerShape.js
+++ b/src/shapes/DateRangePickerShape.js
@@ -53,6 +53,8 @@ export default {
   horizontalMargin: PropTypes.number,
   withPortal: PropTypes.bool,
   withFullScreenPortal: PropTypes.bool,
+  appendToBody: PropTypes.bool,
+  preventScroll: PropTypes.bool,
   daySize: nonNegativeInteger,
   isRTL: PropTypes.bool,
   firstDayOfWeek: DayOfWeekShape,
diff --git a/src/shapes/SingleDatePickerShape.js b/src/shapes/SingleDatePickerShape.js
index c9987584b8..074b21547d 100644
--- a/src/shapes/SingleDatePickerShape.js
+++ b/src/shapes/SingleDatePickerShape.js
@@ -47,6 +47,8 @@ export default {
   horizontalMargin: PropTypes.number,
   withPortal: PropTypes.bool,
   withFullScreenPortal: PropTypes.bool,
+  appendToBody: PropTypes.bool,
+  preventScroll: PropTypes.bool,
   initialVisibleMonth: PropTypes.func,
   firstDayOfWeek: DayOfWeekShape,
   numberOfMonths: PropTypes.number,
diff --git a/src/utils/ScrollManager.js b/src/utils/ScrollManager.js
new file mode 100644
index 0000000000..a7674932c8
--- /dev/null
+++ b/src/utils/ScrollManager.js
@@ -0,0 +1,63 @@
+import { addEventListener } from 'consolidated-events';
+
+// Get closest parent element that scrolls.
+function getScrollParent(node) {
+  if (node === null) return null;
+
+  const parent = node.parentElement;
+
+  if (parent == null) return null;
+
+  const { overflowY } = window.getComputedStyle(parent);
+  const isScrollable = overflowY !== 'visible' && overflowY !== 'hidden';
+
+  if (isScrollable && parent.scrollHeight > parent.clientHeight) {
+    return parent;
+  }
+
+  return getScrollParent(parent) || window;
+}
+
+// Get all ancestor elements that scroll.
+function getScrollAncestors(node, acc = []) {
+  const scrollParent = getScrollParent(node);
+  if (scrollParent == null) return acc;
+  return getScrollAncestors(scrollParent, [...acc, scrollParent]);
+}
+
+// Keep scrollTop property of given node as it was in the beginning.
+function preventScroll(node) {
+  const fixedScrollTop = node.scrollTop;
+  let waitingUpdate = false;
+
+  const update = () => {
+    waitingUpdate = false;
+    node.scrollTo(0, fixedScrollTop);
+  };
+
+  const onScroll = () => {
+    if (!waitingUpdate) requestAnimationFrame(update);
+    waitingUpdate = true;
+  };
+
+  return onScroll;
+}
+
+// Stateful class that disables/enables scrolling for all ancestors of a given
+// element.
+export default class ScrollManager {
+  constructor(node) {
+    this.scrollAncestors = getScrollAncestors(node);
+  }
+
+  disableScroll() {
+    this.removeListeners = this.scrollAncestors.map(node =>
+      addEventListener(node, 'scroll', preventScroll(node), {
+        passive: true,
+      }));
+  }
+
+  enableScroll() {
+    this.removeListeners.forEach(removeListener => removeListener());
+  }
+}
diff --git a/src/utils/getDetachedContainerStyles.js b/src/utils/getDetachedContainerStyles.js
new file mode 100644
index 0000000000..f25d200a89
--- /dev/null
+++ b/src/utils/getDetachedContainerStyles.js
@@ -0,0 +1,9 @@
+export default function getDetachedContainerStyles(referenceEl) {
+  const referenceRect = referenceEl.getBoundingClientRect();
+  const offsetX = referenceRect.x;
+  const offsetY = referenceRect.y;
+
+  return {
+    transform: `translateX(${offsetX}px) translateY(${offsetY}px)`,
+  };
+}
diff --git a/stories/DateRangePicker_calendar.js b/stories/DateRangePicker_calendar.js
index d6b515630a..c1b7314e12 100644
--- a/stories/DateRangePicker_calendar.js
+++ b/stories/DateRangePicker_calendar.js
@@ -44,39 +44,22 @@ const TestCustomInfoPanel = () => (
 );
 
 storiesOf('DRP - Calendar Props', module)
-  .addWithInfo('default', () => (
-    <DateRangePickerWrapper autoFocus />
-  ))
+  .addWithInfo('default', () => <DateRangePickerWrapper autoFocus />)
   .addWithInfo('open up', () => (
     <div style={{ marginTop: '450px' }}>
-      <DateRangePickerWrapper
-        openDirection={OPEN_UP}
-        autoFocus
-      />
+      <DateRangePickerWrapper openDirection={OPEN_UP} autoFocus />
     </div>
   ))
-  .addWithInfo('single month', () => (
-    <DateRangePickerWrapper numberOfMonths={1} autoFocus />
-  ))
-  .addWithInfo('3 months', () => (
-    <DateRangePickerWrapper numberOfMonths={3} autoFocus />
-  ))
-  .addWithInfo('with custom day size', () => (
-    <DateRangePickerWrapper daySize={50} autoFocus />
-  ))
+  .addWithInfo('single month', () => <DateRangePickerWrapper numberOfMonths={1} autoFocus />)
+  .addWithInfo('3 months', () => <DateRangePickerWrapper numberOfMonths={3} autoFocus />)
+  .addWithInfo('with custom day size', () => <DateRangePickerWrapper daySize={50} autoFocus />)
   .addWithInfo('anchored right', () => (
     <div style={{ float: 'right' }}>
-      <DateRangePickerWrapper
-        anchorDirection={ANCHOR_RIGHT}
-        autoFocus
-      />
+      <DateRangePickerWrapper anchorDirection={ANCHOR_RIGHT} autoFocus />
     </div>
   ))
   .addWithInfo('vertical', () => (
-    <DateRangePickerWrapper
-      orientation={VERTICAL_ORIENTATION}
-      autoFocus
-    />
+    <DateRangePickerWrapper orientation={VERTICAL_ORIENTATION} autoFocus />
   ))
   .addWithInfo('vertical anchored right', () => (
     <div style={{ float: 'right' }}>
@@ -87,136 +70,96 @@ storiesOf('DRP - Calendar Props', module)
       />
     </div>
   ))
-  .addWithInfo('horizontal with portal', () => (
-    <DateRangePickerWrapper
-      withPortal
-      autoFocus
-    />
-  ))
+  .addWithInfo('horizontal with portal', () => <DateRangePickerWrapper withPortal autoFocus />)
   .addWithInfo('horizontal with fullscreen portal', () => (
     <DateRangePickerWrapper withFullScreenPortal autoFocus />
   ))
   .addWithInfo('vertical with full screen portal', () => (
-    <DateRangePickerWrapper
-      orientation={VERTICAL_ORIENTATION}
-      withFullScreenPortal
-      autoFocus
-    />
+    <DateRangePickerWrapper orientation={VERTICAL_ORIENTATION} withFullScreenPortal autoFocus />
+  ))
+  .addWithInfo('prevent scroll', () => (
+    <div style={{ height: '100vh' }}>
+      <div>This content scrolls.</div>
+      <DateRangePickerWrapper preventScroll autoFocus />
+    </div>
+  ))
+  .addWithInfo('appended to body', () => <DateRangePickerWrapper appendToBody autoFocus />)
+  .addWithInfo('appended to body (in scrollable container)', () => (
+    <div style={{ height: 200, overflow: 'auto', background: 'whitesmoke' }}>
+      <div>This content scrolls.</div>
+      <div style={{ marginBottom: 300 }}>
+        <DateRangePickerWrapper appendToBody autoFocus />
+      </div>
+    </div>
   ))
   .addWithInfo('does not autoclose the DayPicker on date selection', () => (
-    <DateRangePickerWrapper
-      keepOpenOnDateSelect
-      autoFocus
-    />
+    <DateRangePickerWrapper keepOpenOnDateSelect autoFocus />
   ))
   .addWithInfo('with custom month navigation', () => (
-    <DateRangePickerWrapper
-      navPrev={<TestPrevIcon />}
-      navNext={<TestNextIcon />}
-      autoFocus
-    />
+    <DateRangePickerWrapper navPrev={<TestPrevIcon />} navNext={<TestNextIcon />} autoFocus />
   ))
   .addWithInfo('with outside days enabled', () => (
-    <DateRangePickerWrapper
-      numberOfMonths={1}
-      enableOutsideDays
-      autoFocus
-    />
+    <DateRangePickerWrapper numberOfMonths={1} enableOutsideDays autoFocus />
   ))
   .addWithInfo('with month specified on open', () => (
-    <DateRangePickerWrapper
-      initialVisibleMonth={() => moment().add(10, 'months')}
-      autoFocus
-    />
+    <DateRangePickerWrapper initialVisibleMonth={() => moment().add(10, 'months')} autoFocus />
   ))
   .addWithInfo('with info panel default', () => (
-    <DateRangePickerWrapper
-      renderCalendarInfo={() => (
-        <TestCustomInfoPanel />
-      )}
-      autoFocus
-    />
+    <DateRangePickerWrapper renderCalendarInfo={() => <TestCustomInfoPanel />} autoFocus />
   ))
   .addWithInfo('with info panel before', () => (
     <DateRangePickerWrapper
       calendarInfoPosition="before"
-      renderCalendarInfo={() => (
-        <TestCustomInfoPanel />
-      )}
+      renderCalendarInfo={() => <TestCustomInfoPanel />}
       autoFocus
     />
   ))
   .addWithInfo('with info panel after', () => (
     <DateRangePickerWrapper
       calendarInfoPosition="after"
-      renderCalendarInfo={() => (
-        <TestCustomInfoPanel />
-      )}
+      renderCalendarInfo={() => <TestCustomInfoPanel />}
       autoFocus
     />
   ))
   .addWithInfo('with info panel bottom', () => (
     <DateRangePickerWrapper
       calendarInfoPosition="bottom"
-      renderCalendarInfo={() => (
-        <TestCustomInfoPanel />
-      )}
+      renderCalendarInfo={() => <TestCustomInfoPanel />}
       autoFocus
     />
   ))
   .addWithInfo('with info panel top', () => (
     <DateRangePickerWrapper
       calendarInfoPosition="top"
-      renderCalendarInfo={() => (
-        <TestCustomInfoPanel />
-      )}
+      renderCalendarInfo={() => <TestCustomInfoPanel />}
       autoFocus
     />
   ))
   .addWithInfo('with keyboard shortcuts panel hidden', () => (
-    <DateRangePickerWrapper
-      hideKeyboardShortcutsPanel
-      autoFocus
-    />
+    <DateRangePickerWrapper hideKeyboardShortcutsPanel autoFocus />
   ))
   .addWithInfo('with RTL support (and anchor right)', () => (
     <div style={{ float: 'right' }}>
-      <DateRangePickerWrapper
-        anchorDirection={ANCHOR_RIGHT}
-        isRTL
-        autoFocus
-      />
+      <DateRangePickerWrapper anchorDirection={ANCHOR_RIGHT} isRTL autoFocus />
     </div>
   ))
   .addWithInfo('vertical with RTL support', () => (
-    <DateRangePickerWrapper
-      orientation={VERTICAL_ORIENTATION}
-      isRTL
-      autoFocus
-    />
+    <DateRangePickerWrapper orientation={VERTICAL_ORIENTATION} isRTL autoFocus />
   ))
   .addWithInfo('with custom first day of week', () => (
-    <DateRangePickerWrapper
-      firstDayOfWeek={3}
-      autoFocus
-    />
+    <DateRangePickerWrapper firstDayOfWeek={3} autoFocus />
   ))
   .addWithInfo('with onClose handler', () => (
     <DateRangePickerWrapper
-      onClose={({ startDate, endDate }) => alert(`onClose: startDate = ${startDate}, endDate = ${endDate}`)}
+      onClose={({ startDate, endDate }) =>
+        alert(`onClose: startDate = ${startDate}, endDate = ${endDate}`)
+      }
       autoFocus
     />
   ))
   .addWithInfo('with no animation', () => (
-    <DateRangePickerWrapper
-      transitionDuration={0}
-      autoFocus
-    />
+    <DateRangePickerWrapper transitionDuration={0} autoFocus />
   ))
   .addWithInfo('with custom vertical spacing', () => (
-    <DateRangePickerWrapper
-      verticalSpacing={0}
-      autoFocus
-    />
+    <DateRangePickerWrapper verticalSpacing={0} autoFocus />
   ));
-
diff --git a/stories/SingleDatePicker_calendar.js b/stories/SingleDatePicker_calendar.js
index f1bb98b2ea..6645114d8c 100644
--- a/stories/SingleDatePicker_calendar.js
+++ b/stories/SingleDatePicker_calendar.js
@@ -104,6 +104,21 @@ storiesOf('SDP - Calendar Props', module)
       autoFocus
     />
   ))
+  .addWithInfo('prevent scroll', () => (
+    <div style={{ height: '100vh' }}>
+      <div>This content scrolls.</div>
+      <SingleDatePickerWrapper preventScroll autoFocus />
+    </div>
+  ))
+  .addWithInfo('appended to body', () => <SingleDatePickerWrapper appendToBody autoFocus />)
+  .addWithInfo('appended to body (in scrollable container)', () => (
+    <div style={{ height: 200, overflow: 'auto', background: 'whitesmoke' }}>
+      <div>This content scrolls.</div>
+      <div style={{ marginBottom: 300 }}>
+        <SingleDatePickerWrapper appendToBody autoFocus />
+      </div>
+    </div>
+  ))
   .addWithInfo('does not autoclose the DayPicker on date selection', () => (
     <SingleDatePickerWrapper
       keepOpenOnDateSelect

From 74e8f1ac4e37c8150da92754e9d4e08b1a146114 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joa=CC=83o=20Vieira?= <joaoguerravieira@gmail.com>
Date: Fri, 9 Mar 2018 11:26:15 +0000
Subject: [PATCH 135/618] Prevent scroll via CSS. Rename preventScroll to
 disableScroll. Fix Safari and Edge.

---
 src/components/DateRangePicker.jsx      | 20 +++-----
 src/components/SingleDatePicker.jsx     | 20 +++-----
 src/shapes/DateRangePickerShape.js      |  2 +-
 src/shapes/SingleDatePickerShape.js     |  2 +-
 src/utils/ScrollManager.js              | 63 -------------------------
 src/utils/disableScroll.js              | 37 +++++++++++++++
 src/utils/getDetachedContainerStyles.js |  4 +-
 stories/DateRangePicker_calendar.js     |  4 +-
 stories/SingleDatePicker_calendar.js    |  4 +-
 9 files changed, 57 insertions(+), 99 deletions(-)
 delete mode 100644 src/utils/ScrollManager.js
 create mode 100644 src/utils/disableScroll.js

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 8c783a90b1..9139f46229 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -14,7 +14,7 @@ import getResponsiveContainerStyles from '../utils/getResponsiveContainerStyles'
 import getDetachedContainerStyles from '../utils/getDetachedContainerStyles';
 import getInputHeight from '../utils/getInputHeight';
 import isInclusivelyAfterDay from '../utils/isInclusivelyAfterDay';
-import ScrollManager from '../utils/ScrollManager';
+import disableScroll from '../utils/disableScroll';
 
 import DateRangePickerInputController from './DateRangePickerInputController';
 import DayPickerRangeController from './DayPickerRangeController';
@@ -76,7 +76,7 @@ const defaultProps = {
   withPortal: false,
   withFullScreenPortal: false,
   appendToBody: false,
-  preventScroll: false,
+  disableScroll: false,
   initialVisibleMonth: null,
   numberOfMonths: 2,
   keepOpenOnDateSelect: false,
@@ -136,17 +136,12 @@ class DateRangePicker extends React.Component {
 
     this.responsivizePickerPosition = this.responsivizePickerPosition.bind(this);
     this.disableScroll = this.disableScroll.bind(this);
-    this.enableScroll = this.enableScroll.bind(this);
 
     this.setDayPickerContainerRef = this.setDayPickerContainerRef.bind(this);
     this.setContainerRef = this.setContainerRef.bind(this);
   }
 
   componentDidMount() {
-    if (this.props.appendToBody || this.props.preventScroll) {
-      this.scrollManager = new ScrollManager(this.container);
-    }
-
     this.removeEventListener = addEventListener(
       window,
       'resize',
@@ -176,13 +171,13 @@ class DateRangePicker extends React.Component {
       this.disableScroll();
     } else if (prevProps.focusedInput && !this.props.focusedInput && !this.isOpened()) {
       // The date picker just changed from being open to being closed.
-      this.enableScroll();
+      if (this.enableScroll) this.enableScroll();
     }
   }
 
   componentWillUnmount() {
     if (this.removeEventListener) this.removeEventListener();
-    this.enableScroll();
+    if (this.enableScroll) this.enableScroll();
   }
 
   onOutsideClick(event) {
@@ -260,12 +255,9 @@ class DateRangePicker extends React.Component {
   }
 
   disableScroll() {
+    if (!this.props.appendToBody && !this.props.disableScroll) return;
     if (!this.isOpened()) return;
-    if (this.scrollManager) this.scrollManager.disableScroll();
-  }
-
-  enableScroll() {
-    if (this.scrollManager) this.scrollManager.enableScroll();
+    this.enableScroll = disableScroll(this.container);
   }
 
   responsivizePickerPosition() {
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index a082db09d6..18ba324356 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -15,7 +15,7 @@ import getResponsiveContainerStyles from '../utils/getResponsiveContainerStyles'
 import getDetachedContainerStyles from '../utils/getDetachedContainerStyles';
 import getInputHeight from '../utils/getInputHeight';
 import isInclusivelyAfterDay from '../utils/isInclusivelyAfterDay';
-import ScrollManager from '../utils/ScrollManager';
+import disableScroll from '../utils/disableScroll';
 
 import SingleDatePickerInput from './SingleDatePickerInput';
 import DayPickerSingleDateController from './DayPickerSingleDateController';
@@ -73,7 +73,7 @@ const defaultProps = {
   withPortal: false,
   withFullScreenPortal: false,
   appendToBody: false,
-  preventScroll: false,
+  disableScroll: false,
   initialVisibleMonth: null,
   firstDayOfWeek: null,
   numberOfMonths: 2,
@@ -137,7 +137,6 @@ class SingleDatePicker extends React.Component {
 
     this.responsivizePickerPosition = this.responsivizePickerPosition.bind(this);
     this.disableScroll = this.disableScroll.bind(this);
-    this.enableScroll = this.enableScroll.bind(this);
 
     this.setDayPickerContainerRef = this.setDayPickerContainerRef.bind(this);
     this.setContainerRef = this.setContainerRef.bind(this);
@@ -145,10 +144,6 @@ class SingleDatePicker extends React.Component {
 
   /* istanbul ignore next */
   componentDidMount() {
-    if (this.props.appendToBody || this.props.preventScroll) {
-      this.scrollManager = new ScrollManager(this.container);
-    }
-
     this.removeEventListener = addEventListener(
       window,
       'resize',
@@ -172,14 +167,14 @@ class SingleDatePicker extends React.Component {
       this.responsivizePickerPosition();
       this.disableScroll();
     } else if (prevProps.focused && !this.props.focused) {
-      this.enableScroll();
+      if (this.enableScroll) this.enableScroll();
     }
   }
 
   /* istanbul ignore next */
   componentWillUnmount() {
     if (this.removeEventListener) this.removeEventListener();
-    this.enableScroll();
+    if (this.enableScroll) this.enableScroll();
   }
 
   onChange(dateString) {
@@ -292,12 +287,9 @@ class SingleDatePicker extends React.Component {
   }
 
   disableScroll() {
+    if (!this.props.appendToBody && !this.props.disableScroll) return;
     if (!this.props.focused) return;
-    if (this.scrollManager) this.scrollManager.disableScroll();
-  }
-
-  enableScroll() {
-    if (this.scrollManager) this.scrollManager.enableScroll();
+    this.enableScroll = disableScroll(this.container);
   }
 
   /* istanbul ignore next */
diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js
index af60164378..f39784bc3e 100644
--- a/src/shapes/DateRangePickerShape.js
+++ b/src/shapes/DateRangePickerShape.js
@@ -54,7 +54,7 @@ export default {
   withPortal: PropTypes.bool,
   withFullScreenPortal: PropTypes.bool,
   appendToBody: PropTypes.bool,
-  preventScroll: PropTypes.bool,
+  disableScroll: PropTypes.bool,
   daySize: nonNegativeInteger,
   isRTL: PropTypes.bool,
   firstDayOfWeek: DayOfWeekShape,
diff --git a/src/shapes/SingleDatePickerShape.js b/src/shapes/SingleDatePickerShape.js
index 074b21547d..c476eb8698 100644
--- a/src/shapes/SingleDatePickerShape.js
+++ b/src/shapes/SingleDatePickerShape.js
@@ -48,7 +48,7 @@ export default {
   withPortal: PropTypes.bool,
   withFullScreenPortal: PropTypes.bool,
   appendToBody: PropTypes.bool,
-  preventScroll: PropTypes.bool,
+  disableScroll: PropTypes.bool,
   initialVisibleMonth: PropTypes.func,
   firstDayOfWeek: DayOfWeekShape,
   numberOfMonths: PropTypes.number,
diff --git a/src/utils/ScrollManager.js b/src/utils/ScrollManager.js
deleted file mode 100644
index a7674932c8..0000000000
--- a/src/utils/ScrollManager.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import { addEventListener } from 'consolidated-events';
-
-// Get closest parent element that scrolls.
-function getScrollParent(node) {
-  if (node === null) return null;
-
-  const parent = node.parentElement;
-
-  if (parent == null) return null;
-
-  const { overflowY } = window.getComputedStyle(parent);
-  const isScrollable = overflowY !== 'visible' && overflowY !== 'hidden';
-
-  if (isScrollable && parent.scrollHeight > parent.clientHeight) {
-    return parent;
-  }
-
-  return getScrollParent(parent) || window;
-}
-
-// Get all ancestor elements that scroll.
-function getScrollAncestors(node, acc = []) {
-  const scrollParent = getScrollParent(node);
-  if (scrollParent == null) return acc;
-  return getScrollAncestors(scrollParent, [...acc, scrollParent]);
-}
-
-// Keep scrollTop property of given node as it was in the beginning.
-function preventScroll(node) {
-  const fixedScrollTop = node.scrollTop;
-  let waitingUpdate = false;
-
-  const update = () => {
-    waitingUpdate = false;
-    node.scrollTo(0, fixedScrollTop);
-  };
-
-  const onScroll = () => {
-    if (!waitingUpdate) requestAnimationFrame(update);
-    waitingUpdate = true;
-  };
-
-  return onScroll;
-}
-
-// Stateful class that disables/enables scrolling for all ancestors of a given
-// element.
-export default class ScrollManager {
-  constructor(node) {
-    this.scrollAncestors = getScrollAncestors(node);
-  }
-
-  disableScroll() {
-    this.removeListeners = this.scrollAncestors.map(node =>
-      addEventListener(node, 'scroll', preventScroll(node), {
-        passive: true,
-      }));
-  }
-
-  enableScroll() {
-    this.removeListeners.forEach(removeListener => removeListener());
-  }
-}
diff --git a/src/utils/disableScroll.js b/src/utils/disableScroll.js
new file mode 100644
index 0000000000..ddb0f1f8b1
--- /dev/null
+++ b/src/utils/disableScroll.js
@@ -0,0 +1,37 @@
+const documentScrollingElement = document.scrollingElement || document.documentElement;
+
+function getScrollParent(node) {
+  const parent = node.parentElement;
+
+  if (parent == null) return null;
+
+  const { overflowY } = window.getComputedStyle(parent);
+  const isScrollable = overflowY !== 'visible' && overflowY !== 'hidden';
+
+  if (isScrollable && parent.scrollHeight > parent.clientHeight) {
+    return parent;
+  }
+
+  return getScrollParent(parent) || documentScrollingElement;
+}
+
+function getScrollAncestorsOverflow(node, acc = new Map()) {
+  const scrollParent = getScrollParent(node);
+  acc.set(scrollParent, scrollParent.style.overflowY);
+
+  if (scrollParent === documentScrollingElement) return acc;
+  return getScrollAncestorsOverflow(scrollParent, acc);
+}
+
+// Get and store all ancestor elements that scroll along with its overflowY
+// CSS property, so they can be reset when enabling scroll again.
+export default function disableScroll(node) {
+  const scrollAncestorsOverflow = getScrollAncestorsOverflow(node);
+  const toggle = on =>
+    scrollAncestorsOverflow.forEach((overflowY, ancestor) => {
+      ancestor.style.setProperty('overflow-y', on ? 'hidden' : overflowY);
+    });
+
+  toggle(true);
+  return () => toggle(false);
+}
diff --git a/src/utils/getDetachedContainerStyles.js b/src/utils/getDetachedContainerStyles.js
index f25d200a89..e4f1cb3e57 100644
--- a/src/utils/getDetachedContainerStyles.js
+++ b/src/utils/getDetachedContainerStyles.js
@@ -1,7 +1,7 @@
 export default function getDetachedContainerStyles(referenceEl) {
   const referenceRect = referenceEl.getBoundingClientRect();
-  const offsetX = referenceRect.x;
-  const offsetY = referenceRect.y;
+  const offsetX = referenceRect.left;
+  const offsetY = referenceRect.top;
 
   return {
     transform: `translateX(${offsetX}px) translateY(${offsetY}px)`,
diff --git a/stories/DateRangePicker_calendar.js b/stories/DateRangePicker_calendar.js
index c1b7314e12..305f7c7d84 100644
--- a/stories/DateRangePicker_calendar.js
+++ b/stories/DateRangePicker_calendar.js
@@ -77,10 +77,10 @@ storiesOf('DRP - Calendar Props', module)
   .addWithInfo('vertical with full screen portal', () => (
     <DateRangePickerWrapper orientation={VERTICAL_ORIENTATION} withFullScreenPortal autoFocus />
   ))
-  .addWithInfo('prevent scroll', () => (
+  .addWithInfo('disable scroll', () => (
     <div style={{ height: '100vh' }}>
       <div>This content scrolls.</div>
-      <DateRangePickerWrapper preventScroll autoFocus />
+      <DateRangePickerWrapper disableScroll autoFocus />
     </div>
   ))
   .addWithInfo('appended to body', () => <DateRangePickerWrapper appendToBody autoFocus />)
diff --git a/stories/SingleDatePicker_calendar.js b/stories/SingleDatePicker_calendar.js
index 6645114d8c..342233e3af 100644
--- a/stories/SingleDatePicker_calendar.js
+++ b/stories/SingleDatePicker_calendar.js
@@ -104,10 +104,10 @@ storiesOf('SDP - Calendar Props', module)
       autoFocus
     />
   ))
-  .addWithInfo('prevent scroll', () => (
+  .addWithInfo('disable scroll', () => (
     <div style={{ height: '100vh' }}>
       <div>This content scrolls.</div>
-      <SingleDatePickerWrapper preventScroll autoFocus />
+      <SingleDatePickerWrapper disableScroll autoFocus />
     </div>
   ))
   .addWithInfo('appended to body', () => <SingleDatePickerWrapper appendToBody autoFocus />)

From bdc470d4b1d339ddda96d409e29445e281175715 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Guillaume=20Gr=C3=A9goire?=
 <guillaume.gregoire.89@gmail.com>
Date: Fri, 9 Feb 2018 12:25:49 -0600
Subject: [PATCH 136/618] Handle minimumNights when changing startDate

---
 src/components/DayPickerRangeController.jsx   |  4 +++-
 .../DayPickerRangeController_spec.jsx         | 22 +++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index d1ecf3c046..c1e954f910 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -455,11 +455,13 @@ export default class DayPickerRangeController extends React.Component {
         onClose({ startDate, endDate });
       }
     } else if (focusedInput === START_DATE) {
+      const lastAllowedStartDate = endDate && endDate.clone().subtract(minimumNights, 'days');
+
       onFocusChange(END_DATE);
 
       startDate = day;
 
-      if (isInclusivelyAfterDay(day, endDate)) {
+      if (isBeforeDay(lastAllowedStartDate, day) || isAfterDay(startDate, endDate)) {
         endDate = null;
       }
     } else if (focusedInput === END_DATE) {
diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index 5f4965b56d..c80ec7f6c1 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -1338,6 +1338,28 @@ describe('DayPickerRangeController', () => {
           })).to.equal(true);
         });
       });
+
+      describe('minimumNights is 0', () => {
+        it(
+          'calls props.onDatesChange with startDate === today and endDate === today',
+          () => {
+            const onDatesChangeStub = sinon.stub();
+            const wrapper = shallow((
+              <DayPickerRangeController
+                focusedInput={START_DATE}
+                minimumNights={0}
+                onDatesChange={onDatesChangeStub}
+                endDate={today}
+              />
+            ));
+            wrapper.instance().onDayClick(today);
+            expect(onDatesChangeStub.calledWith({
+              startDate: today,
+              endDate: today,
+            })).to.equal(true);
+          },
+        );
+      });
     });
 
     describe('props.focusedInput === END_DATE', () => {

From e07e494b0f70779ef5a96b35a3626b935412a0fd Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Fri, 26 Jan 2018 11:24:01 -0800
Subject: [PATCH 137/618] Do not apply verticalSpacing when withPortal or
 withFullScreenPortal is applied

---
 src/components/DateRangePicker.jsx  | 10 ++++++----
 src/components/SingleDatePicker.jsx | 10 ++++++----
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 14fdd1d1c4..a16ab15773 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -362,6 +362,8 @@ class DateRangePicker extends React.Component {
 
     const inputHeight = getInputHeight(reactDates, small);
 
+    const withAnyPortal = withPortal || withFullScreenPortal;
+
     return (
       <div // eslint-disable-line jsx-a11y/no-static-element-interactions
         ref={this.setDayPickerContainerRef}
@@ -371,13 +373,13 @@ class DateRangePicker extends React.Component {
           anchorDirection === ANCHOR_RIGHT && styles.DateRangePicker_picker__directionRight,
           orientation === HORIZONTAL_ORIENTATION && styles.DateRangePicker_picker__horizontal,
           orientation === VERTICAL_ORIENTATION && styles.DateRangePicker_picker__vertical,
-          openDirection === OPEN_DOWN && {
+          !withAnyPortal && openDirection === OPEN_DOWN && {
             top: inputHeight + verticalSpacing,
           },
-          openDirection === OPEN_UP && {
+          !withAnyPortal && openDirection === OPEN_UP && {
             bottom: inputHeight + verticalSpacing,
           },
-          (withPortal || withFullScreenPortal) && styles.DateRangePicker_picker__portal,
+          withAnyPortal && styles.DateRangePicker_picker__portal,
           withFullScreenPortal && styles.DateRangePicker_picker__fullScreenPortal,
           isRTL && styles.DateRangePicker_picker__rtl,
           dayPickerContainerStyles,
@@ -398,7 +400,7 @@ class DateRangePicker extends React.Component {
           endDate={endDate}
           monthFormat={monthFormat}
           renderMonth={renderMonth}
-          withPortal={withPortal || withFullScreenPortal}
+          withPortal={withAnyPortal}
           daySize={daySize}
           initialVisibleMonth={initialVisibleMonthThunk}
           hideKeyboardShortcutsPanel={hideKeyboardShortcutsPanel}
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index b58d5614e1..cd51ab8b5c 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -387,6 +387,8 @@ class SingleDatePicker extends React.Component {
 
     const inputHeight = getInputHeight(reactDates, small);
 
+    const withAnyPortal = withPortal || withFullScreenPortal;
+
     return (
       <div // eslint-disable-line jsx-a11y/no-static-element-interactions
         ref={this.setDayPickerContainerRef}
@@ -396,15 +398,15 @@ class SingleDatePicker extends React.Component {
           anchorDirection === ANCHOR_RIGHT && styles.SingleDatePicker_picker__directionRight,
           openDirection === OPEN_DOWN && styles.SingleDatePicker_picker__openDown,
           openDirection === OPEN_UP && styles.SingleDatePicker_picker__openUp,
-          openDirection === OPEN_DOWN && {
+          !withAnyPortal && openDirection === OPEN_DOWN && {
             top: inputHeight + verticalSpacing,
           },
-          openDirection === OPEN_UP && {
+          !withAnyPortal && openDirection === OPEN_UP && {
             bottom: inputHeight + verticalSpacing,
           },
           orientation === HORIZONTAL_ORIENTATION && styles.SingleDatePicker_picker__horizontal,
           orientation === VERTICAL_ORIENTATION && styles.SingleDatePicker_picker__vertical,
-          (withPortal || withFullScreenPortal) && styles.SingleDatePicker_picker__portal,
+          withAnyPortal && styles.SingleDatePicker_picker__portal,
           withFullScreenPortal && styles.SingleDatePicker_picker__fullScreenPortal,
           isRTL && styles.SingleDatePicker_picker__rtl,
           dayPickerContainerStyles,
@@ -419,7 +421,7 @@ class SingleDatePicker extends React.Component {
           enableOutsideDays={enableOutsideDays}
           numberOfMonths={numberOfMonths}
           monthFormat={monthFormat}
-          withPortal={withPortal || withFullScreenPortal}
+          withPortal={withAnyPortal}
           focused={focused}
           keepOpenOnDateSelect={keepOpenOnDateSelect}
           hideKeyboardShortcutsPanel={hideKeyboardShortcutsPanel}

From 6209ae5e92512196fead21d66c687640dd8cd916 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joa=CC=83o=20Vieira?= <joaoguerravieira@gmail.com>
Date: Mon, 12 Mar 2018 11:22:36 +0000
Subject: [PATCH 138/618] Handle different openDirection and anchorDirection.

---
 src/components/DateRangePicker.jsx      |  7 ++++++-
 src/components/SingleDatePicker.jsx     |  7 ++++++-
 src/utils/getDetachedContainerStyles.js | 16 +++++++++++++---
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 9139f46229..2abd1160b2 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -270,6 +270,7 @@ class DateRangePicker extends React.Component {
     }
 
     const {
+      openDirection,
       anchorDirection,
       horizontalMargin,
       withPortal,
@@ -294,7 +295,11 @@ class DateRangePicker extends React.Component {
             containerEdge,
             horizontalMargin,
           ),
-          ...(appendToBody && getDetachedContainerStyles(this.container)),
+          ...(appendToBody && getDetachedContainerStyles(
+            openDirection,
+            anchorDirection,
+            this.container,
+          )),
         },
       });
     }
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index 18ba324356..dbc10b6fa3 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -299,6 +299,7 @@ class SingleDatePicker extends React.Component {
     this.setState({ dayPickerContainerStyles: {} });
 
     const {
+      openDirection,
       anchorDirection,
       horizontalMargin,
       withPortal,
@@ -329,7 +330,11 @@ class SingleDatePicker extends React.Component {
             containerEdge,
             horizontalMargin,
           ),
-          ...(appendToBody && getDetachedContainerStyles(this.container)),
+          ...(appendToBody && getDetachedContainerStyles(
+            openDirection,
+            anchorDirection,
+            this.container,
+          )),
         },
       });
     }
diff --git a/src/utils/getDetachedContainerStyles.js b/src/utils/getDetachedContainerStyles.js
index e4f1cb3e57..c882837add 100644
--- a/src/utils/getDetachedContainerStyles.js
+++ b/src/utils/getDetachedContainerStyles.js
@@ -1,7 +1,17 @@
-export default function getDetachedContainerStyles(referenceEl) {
+import { OPEN_UP, ANCHOR_RIGHT } from '../constants';
+
+export default function getDetachedContainerStyles(openDirection, anchorDirection, referenceEl) {
   const referenceRect = referenceEl.getBoundingClientRect();
-  const offsetX = referenceRect.left;
-  const offsetY = referenceRect.top;
+  let offsetX = referenceRect.left;
+  let offsetY = referenceRect.top;
+
+  if (openDirection === OPEN_UP) {
+    offsetY = -(window.innerHeight - referenceRect.bottom);
+  }
+
+  if (anchorDirection === ANCHOR_RIGHT) {
+    offsetX = -(window.innerWidth - referenceRect.right);
+  }
 
   return {
     transform: `translateX(${offsetX}px) translateY(${offsetY}px)`,

From 8a51dae6eb5bbff3e909e273c672fe20943c19a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joa=CC=83o=20Vieira?= <joaoguerravieira@gmail.com>
Date: Mon, 12 Mar 2018 11:40:57 +0000
Subject: [PATCH 139/618] Fix git diff.

---
 stories/DateRangePicker_calendar.js | 128 ++++++++++++++++++++++------
 1 file changed, 100 insertions(+), 28 deletions(-)

diff --git a/stories/DateRangePicker_calendar.js b/stories/DateRangePicker_calendar.js
index 305f7c7d84..0b4f810e09 100644
--- a/stories/DateRangePicker_calendar.js
+++ b/stories/DateRangePicker_calendar.js
@@ -44,22 +44,39 @@ const TestCustomInfoPanel = () => (
 );
 
 storiesOf('DRP - Calendar Props', module)
-  .addWithInfo('default', () => <DateRangePickerWrapper autoFocus />)
+  .addWithInfo('default', () => (
+    <DateRangePickerWrapper autoFocus />
+  ))
   .addWithInfo('open up', () => (
     <div style={{ marginTop: '450px' }}>
-      <DateRangePickerWrapper openDirection={OPEN_UP} autoFocus />
+      <DateRangePickerWrapper
+        openDirection={OPEN_UP}
+        autoFocus
+      />
     </div>
   ))
-  .addWithInfo('single month', () => <DateRangePickerWrapper numberOfMonths={1} autoFocus />)
-  .addWithInfo('3 months', () => <DateRangePickerWrapper numberOfMonths={3} autoFocus />)
-  .addWithInfo('with custom day size', () => <DateRangePickerWrapper daySize={50} autoFocus />)
+  .addWithInfo('single month', () => (
+    <DateRangePickerWrapper numberOfMonths={1} autoFocus />
+  ))
+  .addWithInfo('3 months', () => (
+    <DateRangePickerWrapper numberOfMonths={3} autoFocus />
+  ))
+  .addWithInfo('with custom day size', () => (
+    <DateRangePickerWrapper daySize={50} autoFocus />
+  ))
   .addWithInfo('anchored right', () => (
     <div style={{ float: 'right' }}>
-      <DateRangePickerWrapper anchorDirection={ANCHOR_RIGHT} autoFocus />
+      <DateRangePickerWrapper
+        anchorDirection={ANCHOR_RIGHT}
+        autoFocus
+      />
     </div>
   ))
   .addWithInfo('vertical', () => (
-    <DateRangePickerWrapper orientation={VERTICAL_ORIENTATION} autoFocus />
+    <DateRangePickerWrapper
+      orientation={VERTICAL_ORIENTATION}
+      autoFocus
+    />
   ))
   .addWithInfo('vertical anchored right', () => (
     <div style={{ float: 'right' }}>
@@ -70,17 +87,26 @@ storiesOf('DRP - Calendar Props', module)
       />
     </div>
   ))
-  .addWithInfo('horizontal with portal', () => <DateRangePickerWrapper withPortal autoFocus />)
+  .addWithInfo('horizontal with portal', () => (
+    <DateRangePickerWrapper
+      withPortal
+      autoFocus
+    />
+  ))
   .addWithInfo('horizontal with fullscreen portal', () => (
     <DateRangePickerWrapper withFullScreenPortal autoFocus />
   ))
   .addWithInfo('vertical with full screen portal', () => (
-    <DateRangePickerWrapper orientation={VERTICAL_ORIENTATION} withFullScreenPortal autoFocus />
+    <DateRangePickerWrapper
+      orientation={VERTICAL_ORIENTATION}
+      withFullScreenPortal
+      autoFocus
+    />
   ))
   .addWithInfo('disable scroll', () => (
     <div style={{ height: '100vh' }}>
       <div>This content scrolls.</div>
-      <DateRangePickerWrapper disableScroll autoFocus />
+      <DateRangePickerWrapper preventScroll autoFocus />
     </div>
   ))
   .addWithInfo('appended to body', () => <DateRangePickerWrapper appendToBody autoFocus />)
@@ -93,73 +119,119 @@ storiesOf('DRP - Calendar Props', module)
     </div>
   ))
   .addWithInfo('does not autoclose the DayPicker on date selection', () => (
-    <DateRangePickerWrapper keepOpenOnDateSelect autoFocus />
+    <DateRangePickerWrapper
+      keepOpenOnDateSelect
+      autoFocus
+    />
   ))
   .addWithInfo('with custom month navigation', () => (
-    <DateRangePickerWrapper navPrev={<TestPrevIcon />} navNext={<TestNextIcon />} autoFocus />
+    <DateRangePickerWrapper
+      navPrev={<TestPrevIcon />}
+      navNext={<TestNextIcon />}
+      autoFocus
+    />
   ))
   .addWithInfo('with outside days enabled', () => (
-    <DateRangePickerWrapper numberOfMonths={1} enableOutsideDays autoFocus />
+    <DateRangePickerWrapper
+      numberOfMonths={1}
+      enableOutsideDays
+      autoFocus
+    />
   ))
   .addWithInfo('with month specified on open', () => (
-    <DateRangePickerWrapper initialVisibleMonth={() => moment().add(10, 'months')} autoFocus />
+    <DateRangePickerWrapper
+      initialVisibleMonth={() => moment().add(10, 'months')}
+      autoFocus
+    />
   ))
   .addWithInfo('with info panel default', () => (
-    <DateRangePickerWrapper renderCalendarInfo={() => <TestCustomInfoPanel />} autoFocus />
+    <DateRangePickerWrapper
+      renderCalendarInfo={() => (
+        <TestCustomInfoPanel />
+      )}
+      autoFocus
+    />
   ))
   .addWithInfo('with info panel before', () => (
     <DateRangePickerWrapper
       calendarInfoPosition="before"
-      renderCalendarInfo={() => <TestCustomInfoPanel />}
+      renderCalendarInfo={() => (
+        <TestCustomInfoPanel />
+      )}
       autoFocus
     />
   ))
   .addWithInfo('with info panel after', () => (
     <DateRangePickerWrapper
       calendarInfoPosition="after"
-      renderCalendarInfo={() => <TestCustomInfoPanel />}
+      renderCalendarInfo={() => (
+        <TestCustomInfoPanel />
+      )}
       autoFocus
     />
   ))
   .addWithInfo('with info panel bottom', () => (
     <DateRangePickerWrapper
       calendarInfoPosition="bottom"
-      renderCalendarInfo={() => <TestCustomInfoPanel />}
+      renderCalendarInfo={() => (
+        <TestCustomInfoPanel />
+      )}
       autoFocus
     />
   ))
   .addWithInfo('with info panel top', () => (
     <DateRangePickerWrapper
       calendarInfoPosition="top"
-      renderCalendarInfo={() => <TestCustomInfoPanel />}
+      renderCalendarInfo={() => (
+        <TestCustomInfoPanel />
+      )}
       autoFocus
     />
   ))
   .addWithInfo('with keyboard shortcuts panel hidden', () => (
-    <DateRangePickerWrapper hideKeyboardShortcutsPanel autoFocus />
+    <DateRangePickerWrapper
+      hideKeyboardShortcutsPanel
+      autoFocus
+    />
   ))
   .addWithInfo('with RTL support (and anchor right)', () => (
     <div style={{ float: 'right' }}>
-      <DateRangePickerWrapper anchorDirection={ANCHOR_RIGHT} isRTL autoFocus />
+      <DateRangePickerWrapper
+        anchorDirection={ANCHOR_RIGHT}
+        isRTL
+        autoFocus
+      />
     </div>
   ))
   .addWithInfo('vertical with RTL support', () => (
-    <DateRangePickerWrapper orientation={VERTICAL_ORIENTATION} isRTL autoFocus />
+    <DateRangePickerWrapper
+      orientation={VERTICAL_ORIENTATION}
+      isRTL
+      autoFocus
+    />
   ))
   .addWithInfo('with custom first day of week', () => (
-    <DateRangePickerWrapper firstDayOfWeek={3} autoFocus />
+    <DateRangePickerWrapper
+      firstDayOfWeek={3}
+      autoFocus
+    />
   ))
   .addWithInfo('with onClose handler', () => (
     <DateRangePickerWrapper
-      onClose={({ startDate, endDate }) =>
-        alert(`onClose: startDate = ${startDate}, endDate = ${endDate}`)
-      }
+      onClose={({ startDate, endDate }) => alert(`onClose: startDate = ${startDate}, endDate = ${endDate}`)}
       autoFocus
     />
   ))
   .addWithInfo('with no animation', () => (
-    <DateRangePickerWrapper transitionDuration={0} autoFocus />
+    <DateRangePickerWrapper
+      transitionDuration={0}
+      autoFocus
+    />
   ))
   .addWithInfo('with custom vertical spacing', () => (
-    <DateRangePickerWrapper verticalSpacing={0} autoFocus />
+    <DateRangePickerWrapper
+      verticalSpacing={0}
+      autoFocus
+    />
   ));
+

From 3a5f9b2fe4e498436e8d33bc6a8a9f67bd023962 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joa=CC=83o=20Vieira?= <joaoguerravieira@gmail.com>
Date: Mon, 12 Mar 2018 12:32:56 +0000
Subject: [PATCH 140/618] Fix tests.

---
 src/utils/disableScroll.js | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/utils/disableScroll.js b/src/utils/disableScroll.js
index ddb0f1f8b1..38f2d543e2 100644
--- a/src/utils/disableScroll.js
+++ b/src/utils/disableScroll.js
@@ -1,6 +1,4 @@
-const documentScrollingElement = document.scrollingElement || document.documentElement;
-
-function getScrollParent(node) {
+function getScrollParent(node, rootNode) {
   const parent = node.parentElement;
 
   if (parent == null) return null;
@@ -12,14 +10,15 @@ function getScrollParent(node) {
     return parent;
   }
 
-  return getScrollParent(parent) || documentScrollingElement;
+  return getScrollParent(parent) || rootNode;
 }
 
 function getScrollAncestorsOverflow(node, acc = new Map()) {
-  const scrollParent = getScrollParent(node);
+  const rootNode = document.scrollingElement || document.documentElement;
+  const scrollParent = getScrollParent(node, rootNode);
   acc.set(scrollParent, scrollParent.style.overflowY);
 
-  if (scrollParent === documentScrollingElement) return acc;
+  if (scrollParent === rootNode) return acc;
   return getScrollAncestorsOverflow(scrollParent, acc);
 }
 

From 6d5420dc8b408e03702d41f1bb35a13474cc1672 Mon Sep 17 00:00:00 2001
From: "greenkeeper[bot]" <greenkeeper[bot]@users.noreply.github.com>
Date: Fri, 16 Mar 2018 03:36:13 +0000
Subject: [PATCH 141/618] chore(package): update
 react-with-styles-interface-aphrodite to version 5.0.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c9c11c6ad0..99afd67d12 100644
--- a/package.json
+++ b/package.json
@@ -99,7 +99,7 @@
     "raw-loader": "^0.5.1",
     "react": "^0.14 || ^15.5.4 || ^16.1.1",
     "react-dom": "^0.14 || ^15.5.4 || ^16.1.1",
-    "react-with-styles-interface-aphrodite": "^4.0.1",
+    "react-with-styles-interface-aphrodite": "^5.0.0",
     "react-with-styles-interface-css-compiler": "^1.1.2",
     "rimraf": "^2.6.2",
     "safe-publish-latest": "^1.1.1",

From 3ea2c10e8037fad1932604bc2e3bed33f2b6bedb Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Thu, 22 Mar 2018 11:45:46 +0000
Subject: [PATCH 142/618] [Dev Deps] update `@storybook/addon-actions`,
 `@storybook/addon-info`, `@storybook/addon-links`,
 `@storybook/addon-options`, `@storybook/react`, `babel-loader`,
 `babel-plugin-transform-replace-object-assign`, `clean-css`, `cross-env`,
 `eslint`, `eslint-plugin-import`, `eslint-plugin-react`, `moment`, `nyc`,
 `react-with-styles-interface-aphrodite`, `sass-loader`, `sinon`,
 `style-loader`

---
 .babelrc     | 10 +++++-----
 package.json | 36 ++++++++++++++++++------------------
 2 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/.babelrc b/.babelrc
index 40a8fe2cba..b2c285575c 100644
--- a/.babelrc
+++ b/.babelrc
@@ -4,7 +4,7 @@
       "presets": ["airbnb"],
       "plugins": [
         "inline-react-svg",
-        ["transform-replace-object-assign", "object.assign"],
+        ["transform-replace-object-assign", { "moduleSpecifier": "object.assign" }],
         "istanbul"
       ]
     },
@@ -12,28 +12,28 @@
       "presets": ["airbnb"],
       "plugins": [
         "inline-react-svg",
-        ["transform-replace-object-assign", "object.assign"],
+        ["transform-replace-object-assign", { "moduleSpecifier": "object.assign" }],
       ],
     },
     "production": {
       "presets": ["airbnb"],
       "plugins": [
         "inline-react-svg",
-        ["transform-replace-object-assign", "object.assign"],
+        ["transform-replace-object-assign", { "moduleSpecifier": "object.assign" }],
       ],
     },
     "cjs": {
       "presets": ["airbnb"],
       "plugins": [
         "inline-react-svg",
-        ["transform-replace-object-assign", "object.assign"],
+        ["transform-replace-object-assign", { "moduleSpecifier": "object.assign" }],
       ],
     },
     "esm": {
       "presets": [["airbnb", { modules: false }]],
       "plugins": [
         "inline-react-svg",
-        ["transform-replace-object-assign", "object.assign"],
+        ["transform-replace-object-assign", { "moduleSpecifier": "object.assign" }],
       ],
     },
   },
diff --git a/package.json b/package.json
index c9c11c6ad0..e39921296b 100644
--- a/package.json
+++ b/package.json
@@ -51,34 +51,34 @@
   },
   "homepage": "https://github.com/airbnb/react-dates#readme",
   "devDependencies": {
-    "@storybook/addon-actions": "^3.3.13",
-    "@storybook/addon-info": "^3.3.13",
-    "@storybook/addon-links": "^3.3.13",
-    "@storybook/addon-options": "^3.3.13",
-    "@storybook/react": "^3.3.13",
+    "@storybook/addon-actions": "^3.3.15",
+    "@storybook/addon-info": "^3.3.15",
+    "@storybook/addon-links": "^3.3.15",
+    "@storybook/addon-options": "^3.3.15",
+    "@storybook/react": "^3.3.15",
     "airbnb-js-shims": "^1.4.1",
     "aphrodite": "^1.2.5",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.3",
+    "babel-loader": "^7.1.4",
     "babel-plugin-inline-react-svg": "^0.5.2",
     "babel-plugin-inline-svg": "^0.1.0",
     "babel-plugin-istanbul": "^4.1.5",
     "babel-plugin-syntax-jsx": "^6.18.0",
-    "babel-plugin-transform-replace-object-assign": "^0.2.1",
+    "babel-plugin-transform-replace-object-assign": "^1.0.0",
     "babel-preset-airbnb": "^2.4.0",
     "babel-register": "^6.26.0",
     "chai": "^4.1.2",
-    "clean-css": "^4.1.9",
+    "clean-css": "^4.1.11",
     "coveralls": "^2.13.3",
-    "cross-env": "^5.1.3",
+    "cross-env": "^5.1.4",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-helper": "^1.2.3",
-    "eslint": "^4.18.0",
+    "eslint": "^4.19.1",
     "eslint-config-airbnb": "^16.1.0",
-    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-import": "^2.9.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.6.1",
+    "eslint-plugin-react": "^7.7.0",
     "eslint-plugin-react-with-styles": "^1.1.1",
     "git-directory-deploy": "^1.5.1",
     "imports-loader": "^0.7.1",
@@ -92,21 +92,21 @@
     "karma-webpack": "^2.0.9",
     "mocha": "^3.5.3",
     "mocha-wrap": "^2.1.1",
-    "moment": "^2.20.1",
+    "moment": "^2.21.0",
     "moment-jalaali": "^0.7.2",
     "node-sass": "^4.7.2",
-    "nyc": "^11.4.1",
+    "nyc": "^11.6.0",
     "raw-loader": "^0.5.1",
     "react": "^0.14 || ^15.5.4 || ^16.1.1",
     "react-dom": "^0.14 || ^15.5.4 || ^16.1.1",
-    "react-with-styles-interface-aphrodite": "^4.0.1",
+    "react-with-styles-interface-aphrodite": "^4.0.2",
     "react-with-styles-interface-css-compiler": "^1.1.2",
     "rimraf": "^2.6.2",
     "safe-publish-latest": "^1.1.1",
-    "sass-loader": "^6.0.6",
-    "sinon": "^4.3.0",
+    "sass-loader": "^6.0.7",
+    "sinon": "^4.4.8",
     "sinon-sandbox": "^1.0.2",
-    "style-loader": "^0.20.0",
+    "style-loader": "^0.20.3",
     "webpack": "^2.6.1"
   },
   "dependencies": {

From c033bb307c4a176df60686db96d186d9127f0027 Mon Sep 17 00:00:00 2001
From: Thomas <PerfectPixel@users.noreply.github.com>
Date: Fri, 23 Mar 2018 18:44:47 +0100
Subject: [PATCH 143/618] Export OutsideClickHandler within the index.js

Exports OutsideClickHandler for convenience of those who implement their own inputs (#1088).
---
 src/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/index.js b/src/index.js
index e94529f3f9..674fc99cc9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -8,6 +8,7 @@ export { default as DateRangePickerShape } from './shapes/DateRangePickerShape';
 export { default as DayPicker } from './components/DayPicker';
 export { default as DayPickerRangeController } from './components/DayPickerRangeController';
 export { default as DayPickerSingleDateController } from './components/DayPickerSingleDateController';
+export { default as OutsideClickHandler } from './components/OutsideClickHandler';
 export { default as SingleDatePicker } from './components/SingleDatePicker';
 export { default as SingleDatePickerInput } from './components/SingleDatePickerInput';
 export { default as SingleDatePickerShape } from './shapes/SingleDatePickerShape';

From b603ad5dcca1d291055f12afcd8cf6dc6c8d985d Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Fri, 23 Mar 2018 12:10:11 -0700
Subject: [PATCH 144/618] Version 16.4.0

---
 CHANGELOG.md | 6 ++++++
 package.json | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0538216835..b0cf9c47bd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Change Log
 
+## 16.4.0
+- [new] Export `OutsideClickHandler` in index.js ([#1089](https://github.com/airbnb/react-dates/pull/1089))
+- [fix] Do not apply `verticalSpacing` when `withPortal` or `withFullScreenPortal` is true ([#980](https://github.com/airbnb/react-dates/pull/980))
+- [fix] Handle minimum nights when selecting `startDate` ([#1015](https://github.com/airbnb/react-dates/pull/1015))
+- [fix] Fix style of `CloseIcon` in the SDP ([#1058](https://github.com/airbnb/react-dates/pull/1058))
+
 ## 16.3.6
 - [fix] Address width issues for vertical DayPickers ([#1055](https://github.com/airbnb/react-dates/pull/1055))
 
diff --git a/package.json b/package.json
index e39921296b..c52a90da11 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "16.3.6",
+  "version": "16.4.0",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From a33fe869e3c8a4785f08e942aab639e7b117f015 Mon Sep 17 00:00:00 2001
From: "greenkeeper[bot]" <greenkeeper[bot]@users.noreply.github.com>
Date: Sun, 25 Mar 2018 13:12:40 +0000
Subject: [PATCH 145/618] chore(package): update babel-plugin-inline-svg to
 version 1.0.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 94a2824aa6..3d9c9bebe3 100644
--- a/package.json
+++ b/package.json
@@ -62,7 +62,7 @@
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.4",
     "babel-plugin-inline-react-svg": "^0.5.2",
-    "babel-plugin-inline-svg": "^0.1.0",
+    "babel-plugin-inline-svg": "^1.0.0",
     "babel-plugin-istanbul": "^4.1.5",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-replace-object-assign": "^1.0.0",

From c28737dc0240a83cc0afd609f71530740b55af92 Mon Sep 17 00:00:00 2001
From: Andrew Scheuermann <andrew.scheuermann@airbnb.com>
Date: Wed, 28 Mar 2018 12:32:52 -0700
Subject: [PATCH 146/618] export CustomizableCalendarDay styles, add story

---
 src/components/CustomizableCalendarDay.jsx | 255 +++++++++++----------
 stories/DayPickerSingleDateController.js   |  27 +++
 2 files changed, 156 insertions(+), 126 deletions(-)

diff --git a/src/components/CustomizableCalendarDay.jsx b/src/components/CustomizableCalendarDay.jsx
index 690b308b55..80c90a34ff 100644
--- a/src/components/CustomizableCalendarDay.jsx
+++ b/src/components/CustomizableCalendarDay.jsx
@@ -74,6 +74,109 @@ const propTypes = forbidExtraProps({
   phrases: PropTypes.shape(getPhrasePropTypes(CalendarDayPhrases)),
 });
 
+export const defaultStyles = {
+  border: `1px solid ${color.core.borderLight}`,
+  color: color.text,
+  background: color.background,
+
+  hover: {
+    background: color.core.borderLight,
+    border: `1px double ${color.core.borderLight}`,
+    color: 'inherit',
+  },
+};
+
+export const outsideStyles = {
+  background: color.outside.backgroundColor,
+  border: 0,
+  color: color.outside.color,
+};
+
+export const highlightedCalendarStyles = {
+  background: color.highlighted.backgroundColor,
+  color: color.highlighted.color,
+
+  hover: {
+    background: color.highlighted.backgroundColor_hover,
+    color: color.highlighted.color_active,
+  },
+};
+
+export const blockedMinNightsStyles = {
+  background: color.minimumNights.backgroundColor,
+  border: `1px solid ${color.minimumNights.borderColor}`,
+  color: color.minimumNights.color,
+
+  hover: {
+    background: color.minimumNights.backgroundColor_hover,
+    color: color.minimumNights.color_active,
+  },
+};
+
+export const blockedCalendarStyles = {
+  background: color.blocked_calendar.backgroundColor,
+  border: `1px solid ${color.blocked_calendar.borderColor}`,
+  color: color.blocked_calendar.color,
+
+  hover: {
+    background: color.blocked_calendar.backgroundColor_hover,
+    border: `1px solid ${color.blocked_calendar.borderColor}`,
+    color: color.blocked_calendar.color_active,
+  },
+};
+
+export const blockedOutOfRangeStyles = {
+  background: color.blocked_out_of_range.backgroundColor,
+  border: `1px solid ${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 ${color.blocked_out_of_range.borderColor}`,
+    color: color.blocked_out_of_range.color_active,
+  },
+};
+
+export const hoveredSpanStyles = {
+  background: color.hoveredSpan.backgroundColor,
+  border: `1px solid ${color.hoveredSpan.borderColor}`,
+  color: color.hoveredSpan.color,
+
+  hover: {
+    background: color.hoveredSpan.backgroundColor_hover,
+    border: `1px solid ${color.hoveredSpan.borderColor}`,
+    color: color.hoveredSpan.color_active,
+  },
+};
+
+export const selectedSpanStyles = {
+  background: color.selectedSpan.backgroundColor,
+  border: `1px solid ${color.selectedSpan.borderColor}`,
+  color: color.selectedSpan.color,
+
+  hover: {
+    background: color.selectedSpan.backgroundColor_hover,
+    border: `1px solid ${color.selectedSpan.borderColor}`,
+    color: color.selectedSpan.color_active,
+  },
+};
+
+export const lastInRangeStyles = {
+  borderRight: color.core.primary,
+};
+
+export const selectedStyles = {
+  background: color.selected.backgroundColor,
+  border: `1px solid ${color.selected.borderColor}`,
+  color: color.selected.color,
+
+  hover: {
+    background: color.selected.backgroundColor_hover,
+    border: `1px solid ${color.selected.borderColor}`,
+    color: color.selected.color_active,
+  },
+};
+
 const defaultProps = {
   day: moment(),
   daySize: DAY_SIZE,
@@ -88,100 +191,17 @@ const defaultProps = {
   ariaLabelFormat: 'dddd, LL',
 
   // style defaults
-  defaultStyles: {
-    border: `1px solid ${color.core.borderLight}`,
-    color: color.text,
-    background: color.background,
-
-    hover: {
-      background: color.core.borderLight,
-      border: `1px double ${color.core.borderLight}`,
-      color: 'inherit',
-    },
-  },
-  outsideStyles: {
-    background: color.outside.backgroundColor,
-    border: 0,
-    color: color.outside.color,
-  },
+  defaultStyles,
+  outsideStyles,
   todayStyles: {},
-  highlightedCalendarStyles: {
-    background: color.highlighted.backgroundColor,
-    color: color.highlighted.color,
-
-    hover: {
-      background: color.highlighted.backgroundColor_hover,
-      color: color.highlighted.color_active,
-    },
-  },
-  blockedMinNightsStyles: {
-    background: color.minimumNights.backgroundColor,
-    border: `1px solid ${color.minimumNights.borderColor}`,
-    color: color.minimumNights.color,
-
-    hover: {
-      background: color.minimumNights.backgroundColor_hover,
-      color: color.minimumNights.color_active,
-    },
-  },
-  blockedCalendarStyles: {
-    background: color.blocked_calendar.backgroundColor,
-    border: `1px solid ${color.blocked_calendar.borderColor}`,
-    color: color.blocked_calendar.color,
-
-    hover: {
-      background: color.blocked_calendar.backgroundColor_hover,
-      border: `1px solid ${color.blocked_calendar.borderColor}`,
-      color: color.blocked_calendar.color_active,
-    },
-  },
-  blockedOutOfRangeStyles: {
-    background: color.blocked_out_of_range.backgroundColor,
-    border: `1px solid ${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 ${color.blocked_out_of_range.borderColor}`,
-      color: color.blocked_out_of_range.color_active,
-    },
-  },
-  hoveredSpanStyles: {
-    background: color.hoveredSpan.backgroundColor,
-    border: `1px solid ${color.hoveredSpan.borderColor}`,
-    color: color.hoveredSpan.color,
-
-    hover: {
-      background: color.hoveredSpan.backgroundColor_hover,
-      border: `1px solid ${color.hoveredSpan.borderColor}`,
-      color: color.hoveredSpan.color_active,
-    },
-  },
-  selectedSpanStyles: {
-    background: color.selectedSpan.backgroundColor,
-    border: `1px solid ${color.selectedSpan.borderColor}`,
-    color: color.selectedSpan.color,
-
-    hover: {
-      background: color.selectedSpan.backgroundColor_hover,
-      border: `1px solid ${color.selectedSpan.borderColor}`,
-      color: color.selectedSpan.color_active,
-    },
-  },
-  lastInRangeStyles: {
-    borderRight: color.core.primary,
-  },
-  selectedStyles: {
-    background: color.selected.backgroundColor,
-    border: `1px solid ${color.selected.borderColor}`,
-    color: color.selected.color,
-
-    hover: {
-      background: color.selected.backgroundColor_hover,
-      border: `1px solid ${color.selected.borderColor}`,
-      color: color.selected.color_active,
-    },
-  },
+  highlightedCalendarStyles,
+  blockedMinNightsStyles,
+  blockedCalendarStyles,
+  blockedOutOfRangeStyles,
+  hoveredSpanStyles,
+  selectedSpanStyles,
+  lastInRangeStyles,
+  selectedStyles,
   selectedStartStyles: {},
   selectedEndStyles: {},
   afterHoveredStartStyles: {},
@@ -291,45 +311,28 @@ class CustomizableCalendarDay extends React.Component {
       ariaLabel,
     } = getCalendarDaySettings(day, ariaLabelFormat, daySize, modifiers, phrases);
 
-    const defaultStyles = getStyles(defaultStylesWithHover, isHovered);
-    const outsideStyles = getStyles(outsideStylesWithHover, isHovered);
-    const todayStyles = getStyles(todayStylesWithHover, isHovered);
-    const firstDayOfWeekStyles = getStyles(firstDayOfWeekStylesWithHover, isHovered);
-    const lastDayOfWeekStyles = getStyles(lastDayOfWeekStylesWithHover, isHovered);
-    const highlightedCalendarStyles = getStyles(highlightedCalendarStylesWithHover, isHovered);
-    const blockedMinNightsStyles = getStyles(blockedMinNightsStylesWithHover, isHovered);
-    const blockedCalendarStyles = getStyles(blockedCalendarStylesWithHover, isHovered);
-    const blockedOutOfRangeStyles = getStyles(blockedOutOfRangeStylesWithHover, isHovered);
-    const hoveredSpanStyles = getStyles(hoveredSpanStylesWithHover, isHovered);
-    const selectedSpanStyles = getStyles(selectedSpanStylesWithHover, isHovered);
-    const lastInRangeStyles = getStyles(lastInRangeStylesWithHover, isHovered);
-    const selectedStartStyles = getStyles(selectedStartStylesWithHover, isHovered);
-    const selectedEndStyles = getStyles(selectedEndStylesWithHover, isHovered);
-    const selectedStyles = getStyles(selectedStylesWithHover, isHovered);
-    const afterHoveredStartStyles = getStyles(afterHoveredStartStylesWithHover, isHovered);
-
     return (
       <td
         {...css(
           styles.CalendarDay,
           useDefaultCursor && styles.CalendarDay__defaultCursor,
           daySizeStyles,
-          defaultStyles,
-          isOutsideDay && outsideStyles,
-          modifiers.has('today') && todayStyles,
-          modifiers.has('first-day-of-week') && firstDayOfWeekStyles,
-          modifiers.has('last-day-of-week') && lastDayOfWeekStyles,
-          modifiers.has('highlighted-calendar') && highlightedCalendarStyles,
-          modifiers.has('blocked-minimum-nights') && blockedMinNightsStyles,
-          modifiers.has('blocked-calendar') && blockedCalendarStyles,
-          hoveredSpan && hoveredSpanStyles,
-          modifiers.has('after-hovered-start') && afterHoveredStartStyles,
-          modifiers.has('selected-span') && selectedSpanStyles,
-          modifiers.has('last-in-range') && lastInRangeStyles,
-          selected && selectedStyles,
-          modifiers.has('selected-start') && selectedStartStyles,
-          modifiers.has('selected-end') && selectedEndStyles,
-          isOutsideRange && blockedOutOfRangeStyles,
+          getStyles(defaultStylesWithHover, isHovered),
+          isOutsideDay && getStyles(outsideStylesWithHover, isHovered),
+          modifiers.has('today') && getStyles(todayStylesWithHover, isHovered),
+          modifiers.has('first-day-of-week') && getStyles(firstDayOfWeekStylesWithHover, isHovered),
+          modifiers.has('last-day-of-week') && getStyles(lastDayOfWeekStylesWithHover, isHovered),
+          modifiers.has('highlighted-calendar') && getStyles(highlightedCalendarStylesWithHover, isHovered),
+          modifiers.has('blocked-minimum-nights') && getStyles(blockedMinNightsStylesWithHover, isHovered),
+          modifiers.has('blocked-calendar') && getStyles(blockedCalendarStylesWithHover, isHovered),
+          hoveredSpan && getStyles(hoveredSpanStylesWithHover, isHovered),
+          modifiers.has('after-hovered-start') && getStyles(afterHoveredStartStylesWithHover, isHovered),
+          modifiers.has('selected-span') && getStyles(selectedSpanStylesWithHover, isHovered),
+          modifiers.has('last-in-range') && getStyles(lastInRangeStylesWithHover, isHovered),
+          selected && getStyles(selectedStylesWithHover, isHovered),
+          modifiers.has('selected-start') && getStyles(selectedStartStylesWithHover, isHovered),
+          modifiers.has('selected-end') && getStyles(selectedEndStylesWithHover, isHovered),
+          isOutsideRange && getStyles(blockedOutOfRangeStylesWithHover, isHovered),
         )}
         role="button" // eslint-disable-line jsx-a11y/no-noninteractive-element-to-interactive-role
         ref={this.setButtonRef}
diff --git a/stories/DayPickerSingleDateController.js b/stories/DayPickerSingleDateController.js
index 20abf7463c..f321bebbea 100644
--- a/stories/DayPickerSingleDateController.js
+++ b/stories/DayPickerSingleDateController.js
@@ -6,6 +6,7 @@ import InfoPanelDecorator, { monospace } from './InfoPanelDecorator';
 
 import isSameDay from '../src/utils/isSameDay';
 import isInclusivelyAfterDay from '../src/utils/isInclusivelyAfterDay';
+import CustomizableCalendarDay, { defaultStyles, selectedStyles } from '../src/components/CustomizableCalendarDay';
 
 import { VERTICAL_ORIENTATION } from '../src/constants';
 
@@ -206,6 +207,32 @@ storiesOf('DayPickerSingleDateController', module)
       renderDayContents={day => day.format('ddd')}
     />
   ))
+  .addWithInfo('with custom day styles', () => {
+    const customDayStyles = {
+      // extend and update styles with es6 spread operators
+      defaultStyles: {
+        ...defaultStyles,
+        color: 'blue',
+        hover: {
+          ...defaultStyles.hover,
+          color: 'blue',
+        },
+      },
+    };
+    return (
+      <DayPickerSingleDateControllerWrapper
+        onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
+        onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
+        onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
+        renderCalendarDay={props => (
+          <CustomizableCalendarDay
+            {...props}
+            {...customDayStyles}
+          />
+        )}
+      />
+    );
+  })
   .addWithInfo('with info panel', () => (
     <DayPickerSingleDateControllerWrapper
       onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}

From 3613800861d1552a6978a87e36f7eed901330a6f Mon Sep 17 00:00:00 2001
From: "greenkeeper[bot]" <greenkeeper[bot]@users.noreply.github.com>
Date: Fri, 23 Mar 2018 20:13:46 +0000
Subject: [PATCH 147/618] chore(package): update
 eslint-plugin-react-with-styles to version 2.0.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 3d9c9bebe3..cc9fbbbd0e 100644
--- a/package.json
+++ b/package.json
@@ -79,7 +79,7 @@
     "eslint-plugin-import": "^2.9.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-react": "^7.7.0",
-    "eslint-plugin-react-with-styles": "^1.1.1",
+    "eslint-plugin-react-with-styles": "^2.0.0",
     "git-directory-deploy": "^1.5.1",
     "imports-loader": "^0.7.1",
     "in-publish": "^2.0.0",

From 5f53ccf26bf6dc207806bfd0c9bf989ebf5cfde8 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Wed, 4 Apr 2018 13:56:03 -0700
Subject: [PATCH 148/618] Disable restricted css import rule

---
 .eslintrc | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/.eslintrc b/.eslintrc
index c6a4fe8e9e..7f3ac6ee19 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -22,7 +22,9 @@
 
     "react/no-did-mount-set-state": 0, // necessary for server-rendering
 
-    "react-with-styles/no-unused-styles": 2
+    "react-with-styles/no-unused-styles": 2,
+
+    "no-restricted-imports": 0, // TODO: enable with full RTL support
   },
 
   "settings": {

From 8206aaa8081d272431587b616464193f17d853c6 Mon Sep 17 00:00:00 2001
From: dart-wakar <wakar@whitelogic.in>
Date: Fri, 30 Jun 2017 07:41:06 +0530
Subject: [PATCH 149/618] Fix for the issue of selectively disabling start or
 end date in dateRangePicker

---
 examples/DateRangePickerWrapper.jsx               |  1 +
 src/components/DateRangePicker.jsx                |  3 +++
 src/components/DateRangePickerInput.jsx           | 10 ++++++++--
 src/components/DateRangePickerInputController.jsx |  4 ++++
 src/shapes/DateRangePickerShape.js                |  1 +
 5 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/examples/DateRangePickerWrapper.jsx b/examples/DateRangePickerWrapper.jsx
index 9a43817293..2097b2a056 100644
--- a/examples/DateRangePickerWrapper.jsx
+++ b/examples/DateRangePickerWrapper.jsx
@@ -40,6 +40,7 @@ const defaultProps = {
   endDateId: END_DATE,
   endDatePlaceholderText: 'End Date',
   disabled: false,
+  selectivelyDisabled: 'none',
   required: false,
   screenReaderInputMessage: '',
   showClearDates: false,
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index a16ab15773..3bcef66a21 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -53,6 +53,7 @@ const defaultProps = {
   startDatePlaceholderText: 'Start Date',
   endDatePlaceholderText: 'End Date',
   disabled: false,
+  selectivelyDisabled: 'none',
   required: false,
   readOnly: false,
   screenReaderInputMessage: '',
@@ -457,6 +458,7 @@ class DateRangePicker extends React.Component {
       customArrowIcon,
       customCloseIcon,
       disabled,
+      selectivelyDisabled,
       required,
       readOnly,
       openDirection,
@@ -511,6 +513,7 @@ class DateRangePicker extends React.Component {
             customArrowIcon={customArrowIcon}
             customCloseIcon={customCloseIcon}
             disabled={disabled}
+            selectivelyDisabled={selectivelyDisabled}
             required={required}
             readOnly={readOnly}
             openDirection={openDirection}
diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index a07c9cf540..4d56297c13 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -49,6 +49,7 @@ const propTypes = forbidExtraProps({
   isEndDateFocused: PropTypes.bool,
   showClearDates: PropTypes.bool,
   disabled: PropTypes.bool,
+  selectivelyDisabled: PropTypes.string,
   required: PropTypes.bool,
   readOnly: PropTypes.bool,
   openDirection: openDirectionShape,
@@ -96,6 +97,7 @@ const defaultProps = {
   isEndDateFocused: false,
   showClearDates: false,
   disabled: false,
+  selectivelyDisabled: 'none',
   required: false,
   readOnly: false,
   openDirection: OPEN_DOWN,
@@ -141,6 +143,7 @@ function DateRangePickerInput({
   onClearDates,
   showClearDates,
   disabled,
+  selectivelyDisabled,
   required,
   readOnly,
   showCaret,
@@ -201,6 +204,9 @@ function DateRangePickerInput({
     </button>
   );
 
+  const isStartDateDisabled = ((selectivelyDisabled === 'startDate') || disabled);
+  const isEndDateDisabled = ((selectivelyDisabled === 'endDate') || disabled);
+
   return (
     <div
       {...css(
@@ -221,7 +227,7 @@ function DateRangePickerInput({
         screenReaderMessage={screenReaderText}
         focused={isStartDateFocused}
         isFocused={isFocused}
-        disabled={disabled}
+        disabled={isStartDateDisabled}
         required={required}
         readOnly={readOnly}
         showCaret={showCaret}
@@ -251,7 +257,7 @@ function DateRangePickerInput({
         screenReaderMessage={screenReaderText}
         focused={isEndDateFocused}
         isFocused={isFocused}
-        disabled={disabled}
+        disabled={isEndDateDisabled}
         required={required}
         readOnly={readOnly}
         showCaret={showCaret}
diff --git a/src/components/DateRangePickerInputController.jsx b/src/components/DateRangePickerInputController.jsx
index 54062c5162..7b265ff7c8 100644
--- a/src/components/DateRangePickerInputController.jsx
+++ b/src/components/DateRangePickerInputController.jsx
@@ -38,6 +38,7 @@ const propTypes = forbidExtraProps({
   showDefaultInputIcon: PropTypes.bool,
   inputIconPosition: IconPositionShape,
   disabled: PropTypes.bool,
+  selectivelyDisabled: PropTypes.string,
   required: PropTypes.bool,
   readOnly: PropTypes.bool,
   openDirection: openDirectionShape,
@@ -90,6 +91,7 @@ const defaultProps = {
   showDefaultInputIcon: false,
   inputIconPosition: ICON_BEFORE_POSITION,
   disabled: false,
+  selectivelDisabled: 'none',
   required: false,
   readOnly: false,
   openDirection: OPEN_DOWN,
@@ -264,6 +266,7 @@ export default class DateRangePickerInputController extends React.Component {
       customArrowIcon,
       customCloseIcon,
       disabled,
+      selectivelyDisabled,
       required,
       readOnly,
       openDirection,
@@ -294,6 +297,7 @@ export default class DateRangePickerInputController extends React.Component {
         isEndDateFocused={isEndDateFocused}
         isFocused={isFocused}
         disabled={disabled}
+        selectivelyDisabled={selectivelyDisabled}
         required={required}
         readOnly={readOnly}
         openDirection={openDirection}
diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js
index 962ce954f4..16a5a77c95 100644
--- a/src/shapes/DateRangePickerShape.js
+++ b/src/shapes/DateRangePickerShape.js
@@ -30,6 +30,7 @@ export default {
   endDateId: PropTypes.string.isRequired,
   endDatePlaceholderText: PropTypes.string,
   disabled: PropTypes.bool,
+  selectivelyDisabled: PropTypes.string,
   required: PropTypes.bool,
   readOnly: PropTypes.bool,
   screenReaderInputMessage: PropTypes.string,

From 97267a83b3c10fa9ba47c8b136a389160687164f Mon Sep 17 00:00:00 2001
From: dart-wakar <wakar@whitelogic.in>
Date: Fri, 30 Jun 2017 08:17:25 +0530
Subject: [PATCH 150/618] Proptype of selectivelyDisabled fixed

---
 src/components/DateRangePickerInput.jsx           | 4 +++-
 src/components/DateRangePickerInputController.jsx | 6 ++++--
 src/shapes/DateRangePickerShape.js                | 2 +-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index 4d56297c13..334ab82cd3 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 
+import selectivelyDisabled from '../shapes/DateRangePickerShape';
+
 import { DateRangePickerInputPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
 import openDirectionShape from '../shapes/OpenDirectionShape';
@@ -49,7 +51,7 @@ const propTypes = forbidExtraProps({
   isEndDateFocused: PropTypes.bool,
   showClearDates: PropTypes.bool,
   disabled: PropTypes.bool,
-  selectivelyDisabled: PropTypes.string,
+  selectivelyDisabled: selectivelyDisabled,
   required: PropTypes.bool,
   readOnly: PropTypes.bool,
   openDirection: openDirectionShape,
diff --git a/src/components/DateRangePickerInputController.jsx b/src/components/DateRangePickerInputController.jsx
index 7b265ff7c8..47dd13e351 100644
--- a/src/components/DateRangePickerInputController.jsx
+++ b/src/components/DateRangePickerInputController.jsx
@@ -13,6 +13,8 @@ import DateRangePickerInput from './DateRangePickerInput';
 
 import IconPositionShape from '../shapes/IconPositionShape';
 
+import selectivelyDisabled from '../shapes/DateRangePickerShape';
+
 import toMomentObject from '../utils/toMomentObject';
 import toLocalizedDateString from '../utils/toLocalizedDateString';
 
@@ -38,7 +40,7 @@ const propTypes = forbidExtraProps({
   showDefaultInputIcon: PropTypes.bool,
   inputIconPosition: IconPositionShape,
   disabled: PropTypes.bool,
-  selectivelyDisabled: PropTypes.string,
+  selectivelyDisabled: selectivelyDisabled,
   required: PropTypes.bool,
   readOnly: PropTypes.bool,
   openDirection: openDirectionShape,
@@ -91,7 +93,7 @@ const defaultProps = {
   showDefaultInputIcon: false,
   inputIconPosition: ICON_BEFORE_POSITION,
   disabled: false,
-  selectivelDisabled: 'none',
+  selectivelyDisabled: 'none',
   required: false,
   readOnly: false,
   openDirection: OPEN_DOWN,
diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js
index 16a5a77c95..0482365934 100644
--- a/src/shapes/DateRangePickerShape.js
+++ b/src/shapes/DateRangePickerShape.js
@@ -30,7 +30,7 @@ export default {
   endDateId: PropTypes.string.isRequired,
   endDatePlaceholderText: PropTypes.string,
   disabled: PropTypes.bool,
-  selectivelyDisabled: PropTypes.string,
+  selectivelyDisabled: PropTypes.oneOf(['none','startDate','endDate']),
   required: PropTypes.bool,
   readOnly: PropTypes.bool,
   screenReaderInputMessage: PropTypes.string,

From 60708c4c8cec3e4286ae487bfa0cd2e14b92eee2 Mon Sep 17 00:00:00 2001
From: dart-wakar <wakar@whitelogic.in>
Date: Fri, 30 Jun 2017 09:15:16 +0530
Subject: [PATCH 151/618] fix to pass travis build

---
 src/components/DateRangePickerInput.jsx           | 2 +-
 src/components/DateRangePickerInputController.jsx | 2 +-
 src/shapes/DateRangePickerShape.js                | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index 334ab82cd3..1ed0baeea6 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -51,7 +51,7 @@ const propTypes = forbidExtraProps({
   isEndDateFocused: PropTypes.bool,
   showClearDates: PropTypes.bool,
   disabled: PropTypes.bool,
-  selectivelyDisabled: selectivelyDisabled,
+  selectivelyDisabled,
   required: PropTypes.bool,
   readOnly: PropTypes.bool,
   openDirection: openDirectionShape,
diff --git a/src/components/DateRangePickerInputController.jsx b/src/components/DateRangePickerInputController.jsx
index 47dd13e351..ba12fd1730 100644
--- a/src/components/DateRangePickerInputController.jsx
+++ b/src/components/DateRangePickerInputController.jsx
@@ -40,7 +40,7 @@ const propTypes = forbidExtraProps({
   showDefaultInputIcon: PropTypes.bool,
   inputIconPosition: IconPositionShape,
   disabled: PropTypes.bool,
-  selectivelyDisabled: selectivelyDisabled,
+  selectivelyDisabled,
   required: PropTypes.bool,
   readOnly: PropTypes.bool,
   openDirection: openDirectionShape,
diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js
index 0482365934..16b42d2cf4 100644
--- a/src/shapes/DateRangePickerShape.js
+++ b/src/shapes/DateRangePickerShape.js
@@ -30,7 +30,7 @@ export default {
   endDateId: PropTypes.string.isRequired,
   endDatePlaceholderText: PropTypes.string,
   disabled: PropTypes.bool,
-  selectivelyDisabled: PropTypes.oneOf(['none','startDate','endDate']),
+  selectivelyDisabled: PropTypes.oneOf(['none', 'startDate', 'endDate']),
   required: PropTypes.bool,
   readOnly: PropTypes.bool,
   screenReaderInputMessage: PropTypes.string,

From a4f275a6d4d958f6f802115f62fad6617f912fc8 Mon Sep 17 00:00:00 2001
From: dart-wakar <wakar@whitelogic.in>
Date: Fri, 30 Jun 2017 10:08:53 +0530
Subject: [PATCH 152/618] no shadow js lint fixed

---
 src/components/DateRangePickerInput.jsx           | 1 -
 src/components/DateRangePickerInputController.jsx | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index 1ed0baeea6..fcab0e84ed 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -51,7 +51,6 @@ const propTypes = forbidExtraProps({
   isEndDateFocused: PropTypes.bool,
   showClearDates: PropTypes.bool,
   disabled: PropTypes.bool,
-  selectivelyDisabled,
   required: PropTypes.bool,
   readOnly: PropTypes.bool,
   openDirection: openDirectionShape,
diff --git a/src/components/DateRangePickerInputController.jsx b/src/components/DateRangePickerInputController.jsx
index ba12fd1730..2c227b998a 100644
--- a/src/components/DateRangePickerInputController.jsx
+++ b/src/components/DateRangePickerInputController.jsx
@@ -40,7 +40,6 @@ const propTypes = forbidExtraProps({
   showDefaultInputIcon: PropTypes.bool,
   inputIconPosition: IconPositionShape,
   disabled: PropTypes.bool,
-  selectivelyDisabled,
   required: PropTypes.bool,
   readOnly: PropTypes.bool,
   openDirection: openDirectionShape,

From 73bfc2fbaa36db59e2ac1b6e562fb42c8dc3957c Mon Sep 17 00:00:00 2001
From: Alex Wild <alex.j.wild@gmail.com>
Date: Mon, 26 Mar 2018 12:30:25 -0700
Subject: [PATCH 153/618] Allow selective disabling of start or end date

---
 README.md                                     |  2 +-
 examples/DateRangePickerWrapper.jsx           |  1 -
 src/components/DateRangePicker.jsx            |  5 ++--
 src/components/DateRangePickerInput.jsx       | 15 ++++-------
 .../DateRangePickerInputController.jsx        | 26 +++++++++----------
 src/components/DayPickerRangeController.jsx   | 24 ++++++++++++-----
 src/shapes/DateRangePickerShape.js            |  4 +--
 stories/DateRangePicker_input.js              | 20 ++++++++++++++
 8 files changed, 61 insertions(+), 36 deletions(-)

diff --git a/README.md b/README.md
index f020cb85af..1a21acfe9f 100644
--- a/README.md
+++ b/README.md
@@ -117,7 +117,7 @@ The following is a list of other *OPTIONAL* props you may provide to the `DateRa
 // input related props
 startDatePlaceholderText: PropTypes.string,
 endDatePlaceholderText: PropTypes.string,
-disabled: PropTypes.bool,
+disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([START_DATE, END_DATE])]),
 required: PropTypes.bool,
 readOnly: PropTypes.bool,
 screenReaderInputMessage: PropTypes.string,
diff --git a/examples/DateRangePickerWrapper.jsx b/examples/DateRangePickerWrapper.jsx
index 2097b2a056..9a43817293 100644
--- a/examples/DateRangePickerWrapper.jsx
+++ b/examples/DateRangePickerWrapper.jsx
@@ -40,7 +40,6 @@ const defaultProps = {
   endDateId: END_DATE,
   endDatePlaceholderText: 'End Date',
   disabled: false,
-  selectivelyDisabled: 'none',
   required: false,
   screenReaderInputMessage: '',
   showClearDates: false,
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 3bcef66a21..6f7c51ea23 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -53,7 +53,6 @@ const defaultProps = {
   startDatePlaceholderText: 'Start Date',
   endDatePlaceholderText: 'End Date',
   disabled: false,
-  selectivelyDisabled: 'none',
   required: false,
   readOnly: false,
   screenReaderInputMessage: '',
@@ -346,6 +345,7 @@ class DateRangePicker extends React.Component {
       transitionDuration,
       verticalSpacing,
       small,
+      disabled,
       theme: { reactDates },
     } = this.props;
     const { dayPickerContainerStyles, isDayPickerFocused, showKeyboardShortcuts } = this.state;
@@ -425,6 +425,7 @@ class DateRangePicker extends React.Component {
           weekDayFormat={weekDayFormat}
           verticalHeight={verticalHeight}
           transitionDuration={transitionDuration}
+          disabled={disabled}
         />
 
         {withFullScreenPortal && (
@@ -458,7 +459,6 @@ class DateRangePicker extends React.Component {
       customArrowIcon,
       customCloseIcon,
       disabled,
-      selectivelyDisabled,
       required,
       readOnly,
       openDirection,
@@ -513,7 +513,6 @@ class DateRangePicker extends React.Component {
             customArrowIcon={customArrowIcon}
             customCloseIcon={customCloseIcon}
             disabled={disabled}
-            selectivelyDisabled={selectivelyDisabled}
             required={required}
             readOnly={readOnly}
             openDirection={openDirection}
diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index fcab0e84ed..675842a36f 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -3,8 +3,6 @@ import PropTypes from 'prop-types';
 import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 
-import selectivelyDisabled from '../shapes/DateRangePickerShape';
-
 import { DateRangePickerInputPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
 import openDirectionShape from '../shapes/OpenDirectionShape';
@@ -50,7 +48,7 @@ const propTypes = forbidExtraProps({
   isStartDateFocused: PropTypes.bool,
   isEndDateFocused: PropTypes.bool,
   showClearDates: PropTypes.bool,
-  disabled: PropTypes.bool,
+  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([START_DATE, END_DATE])]),
   required: PropTypes.bool,
   readOnly: PropTypes.bool,
   openDirection: openDirectionShape,
@@ -98,7 +96,6 @@ const defaultProps = {
   isEndDateFocused: false,
   showClearDates: false,
   disabled: false,
-  selectivelyDisabled: 'none',
   required: false,
   readOnly: false,
   openDirection: OPEN_DOWN,
@@ -144,7 +141,6 @@ function DateRangePickerInput({
   onClearDates,
   showClearDates,
   disabled,
-  selectivelyDisabled,
   required,
   readOnly,
   showCaret,
@@ -204,9 +200,8 @@ function DateRangePickerInput({
       {calendarIcon}
     </button>
   );
-
-  const isStartDateDisabled = ((selectivelyDisabled === 'startDate') || disabled);
-  const isEndDateDisabled = ((selectivelyDisabled === 'endDate') || disabled);
+  const startDateDisabled = disabled === START_DATE || disabled;
+  const endDateDisabled = disabled === END_DATE || disabled;
 
   return (
     <div
@@ -228,7 +223,7 @@ function DateRangePickerInput({
         screenReaderMessage={screenReaderText}
         focused={isStartDateFocused}
         isFocused={isFocused}
-        disabled={isStartDateDisabled}
+        disabled={startDateDisabled}
         required={required}
         readOnly={readOnly}
         showCaret={showCaret}
@@ -258,7 +253,7 @@ function DateRangePickerInput({
         screenReaderMessage={screenReaderText}
         focused={isEndDateFocused}
         isFocused={isFocused}
-        disabled={isEndDateDisabled}
+        disabled={endDateDisabled}
         required={required}
         readOnly={readOnly}
         showCaret={showCaret}
diff --git a/src/components/DateRangePickerInputController.jsx b/src/components/DateRangePickerInputController.jsx
index 2c227b998a..e8b08a0102 100644
--- a/src/components/DateRangePickerInputController.jsx
+++ b/src/components/DateRangePickerInputController.jsx
@@ -13,8 +13,6 @@ import DateRangePickerInput from './DateRangePickerInput';
 
 import IconPositionShape from '../shapes/IconPositionShape';
 
-import selectivelyDisabled from '../shapes/DateRangePickerShape';
-
 import toMomentObject from '../utils/toMomentObject';
 import toLocalizedDateString from '../utils/toLocalizedDateString';
 
@@ -39,7 +37,7 @@ const propTypes = forbidExtraProps({
   showCaret: PropTypes.bool,
   showDefaultInputIcon: PropTypes.bool,
   inputIconPosition: IconPositionShape,
-  disabled: PropTypes.bool,
+  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([START_DATE, END_DATE])]),
   required: PropTypes.bool,
   readOnly: PropTypes.bool,
   openDirection: openDirectionShape,
@@ -92,7 +90,6 @@ const defaultProps = {
   showDefaultInputIcon: false,
   inputIconPosition: ICON_BEFORE_POSITION,
   disabled: false,
-  selectivelyDisabled: 'none',
   required: false,
   readOnly: false,
   openDirection: OPEN_DOWN,
@@ -184,29 +181,34 @@ export default class DateRangePickerInputController extends React.Component {
       disabled,
     } = this.props;
 
-    if (!startDate && withFullScreenPortal && !disabled) {
+    if (!startDate && withFullScreenPortal && disabled !== true && disabled !== START_DATE) {
       // When the datepicker is full screen, we never want to focus the end date first
       // because there's no indication that that is the case once the datepicker is open and it
       // might confuse the user
       onFocusChange(START_DATE);
-    } else if (!disabled) {
+    } else if (disabled !== true && disabled !== END_DATE) {
       onFocusChange(END_DATE);
     }
   }
 
   onStartDateChange(startDateString) {
-    const startDate = toMomentObject(startDateString, this.getDisplayFormat());
-
     let { endDate } = this.props;
     const {
       isOutsideRange,
       minimumNights,
       onDatesChange,
       onFocusChange,
+      disabled,
     } = this.props;
-    const isStartDateValid = startDate && !isOutsideRange(startDate);
+
+    const startDate = toMomentObject(startDateString, this.getDisplayFormat());
+    const endBeforeStart = startDate &&
+      isBeforeDay(endDate, startDate.clone().add(minimumNights, 'days'));
+    const isStartDateValid = startDate && !isOutsideRange(startDate) &&
+      !(disabled === END_DATE && endBeforeStart);
+
     if (isStartDateValid) {
-      if (startDate && isBeforeDay(endDate, startDate.clone().add(minimumNights, 'days'))) {
+      if (endBeforeStart) {
         endDate = null;
       }
 
@@ -222,7 +224,7 @@ export default class DateRangePickerInputController extends React.Component {
 
   onStartDateFocus() {
     const { disabled, onFocusChange } = this.props;
-    if (!disabled) {
+    if (disabled !== true && disabled !== START_DATE) {
       onFocusChange(START_DATE);
     }
   }
@@ -267,7 +269,6 @@ export default class DateRangePickerInputController extends React.Component {
       customArrowIcon,
       customCloseIcon,
       disabled,
-      selectivelyDisabled,
       required,
       readOnly,
       openDirection,
@@ -298,7 +299,6 @@ export default class DateRangePickerInputController extends React.Component {
         isEndDateFocused={isEndDateFocused}
         isFocused={isFocused}
         disabled={disabled}
-        selectivelyDisabled={selectivelyDisabled}
         required={required}
         readOnly={readOnly}
         openDirection={openDirection}
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index c1e954f910..5bcf91951a 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -52,6 +52,7 @@ const propTypes = forbidExtraProps({
 
   keepOpenOnDateSelect: PropTypes.bool,
   minimumNights: PropTypes.number,
+  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([START_DATE, END_DATE])]),
   isOutsideRange: PropTypes.func,
   isDayBlocked: PropTypes.func,
   isDayHighlighted: PropTypes.func,
@@ -108,6 +109,7 @@ const defaultProps = {
 
   keepOpenOnDateSelect: false,
   minimumNights: 1,
+  disabled: false,
   isOutsideRange() {},
   isDayBlocked() {},
   isDayHighlighted() {},
@@ -439,6 +441,7 @@ export default class DayPickerRangeController extends React.Component {
       onDatesChange,
       startDateOffset,
       endDateOffset,
+      disabled,
     } = this.props;
 
     if (e) e.preventDefault();
@@ -456,13 +459,22 @@ export default class DayPickerRangeController extends React.Component {
       }
     } else if (focusedInput === START_DATE) {
       const lastAllowedStartDate = endDate && endDate.clone().subtract(minimumNights, 'days');
+      const startAfterEnd = isBeforeDay(lastAllowedStartDate, day) ||
+        isAfterDay(startDate, endDate);
+      const endDateDisabled = disabled === END_DATE;
 
-      onFocusChange(END_DATE);
-
-      startDate = day;
+      if (!endDateDisabled || !startAfterEnd) {
+        startDate = day;
+        if (startAfterEnd) {
+          endDate = null;
+        }
+      }
 
-      if (isBeforeDay(lastAllowedStartDate, day) || isAfterDay(startDate, endDate)) {
-        endDate = null;
+      if (endDateDisabled && !startAfterEnd) {
+        onFocusChange(null);
+        onClose({ startDate, endDate });
+      } else if (!endDateDisabled) {
+        onFocusChange(END_DATE);
       }
     } else if (focusedInput === END_DATE) {
       const firstAllowedEndDate = startDate && startDate.clone().add(minimumNights, 'days');
@@ -476,7 +488,7 @@ export default class DayPickerRangeController extends React.Component {
           onFocusChange(null);
           onClose({ startDate, endDate });
         }
-      } else {
+      } else if (disabled !== START_DATE) {
         startDate = day;
         endDate = null;
       }
diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js
index 16b42d2cf4..e74243e6d1 100644
--- a/src/shapes/DateRangePickerShape.js
+++ b/src/shapes/DateRangePickerShape.js
@@ -12,6 +12,7 @@ import anchorDirectionShape from '../shapes/AnchorDirectionShape';
 import openDirectionShape from '../shapes/OpenDirectionShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
 import CalendarInfoPositionShape from '../shapes/CalendarInfoPositionShape';
+import { START_DATE, END_DATE } from '../constants';
 
 export default {
   // required props for a functional interactive DateRangePicker
@@ -29,8 +30,7 @@ export default {
   startDatePlaceholderText: PropTypes.string,
   endDateId: PropTypes.string.isRequired,
   endDatePlaceholderText: PropTypes.string,
-  disabled: PropTypes.bool,
-  selectivelyDisabled: PropTypes.oneOf(['none', 'startDate', 'endDate']),
+  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([START_DATE, END_DATE])]),
   required: PropTypes.bool,
   readOnly: PropTypes.bool,
   screenReaderInputMessage: PropTypes.string,
diff --git a/stories/DateRangePicker_input.js b/stories/DateRangePicker_input.js
index 395c1a6971..caa87c90fc 100644
--- a/stories/DateRangePicker_input.js
+++ b/stories/DateRangePicker_input.js
@@ -2,6 +2,9 @@ import React from 'react';
 import moment from 'moment';
 import { storiesOf } from '@storybook/react';
 
+import isInclusivelyBeforeDay from '../src/utils/isInclusivelyBeforeDay';
+import isInclusivelyAfterDay from '../src/utils/isInclusivelyAfterDay';
+
 import DateRangePickerWrapper from '../examples/DateRangePickerWrapper';
 
 const TestCustomInputIcon = () => (
@@ -55,6 +58,23 @@ storiesOf('DRP - Input Props', module)
       disabled
     />
   ))
+  .addWithInfo('disabled start date', () => (
+    <DateRangePickerWrapper
+      initialStartDate={moment().add(3, 'months')}
+      initialEndDate={moment().add(3, 'months').add(10, 'days')}
+      disabled="startDate"
+      isOutsideRange={day => !isInclusivelyAfterDay(day, moment().add(3, 'months'))}
+    />
+  ))
+  .addWithInfo('disabled end date', () => (
+    <DateRangePickerWrapper
+      initialStartDate={moment().add(3, 'months')}
+      initialEndDate={moment().add(3, 'months').add(10, 'days')}
+      disabled="endDate"
+      isOutsideRange={day => !isInclusivelyAfterDay(day, moment()) ||
+        !isInclusivelyBeforeDay(day, moment().add(3, 'months').add(10, 'days'))}
+    />
+  ))
   .addWithInfo('readOnly', () => (
     <DateRangePickerWrapper
       initialStartDate={moment().add(3, 'months')}

From 3680f1185a34a577f05712b8473cc9d34b6666b6 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Thu, 5 Apr 2018 10:50:12 -0700
Subject: [PATCH 154/618] Add DisabledShape and clarify some boolean values

---
 src/components/DateRangePickerInput.jsx           |  3 ++-
 src/components/DateRangePickerInputController.jsx | 15 ++++++++-------
 src/components/DayPickerRangeController.jsx       | 15 ++++++++-------
 src/shapes/DateRangePickerShape.js                |  4 ++--
 src/shapes/DisabledShape.js                       |  5 +++++
 5 files changed, 25 insertions(+), 17 deletions(-)
 create mode 100644 src/shapes/DisabledShape.js

diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index 675842a36f..84c1ad3523 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -9,6 +9,7 @@ import openDirectionShape from '../shapes/OpenDirectionShape';
 
 import DateInput from './DateInput';
 import IconPositionShape from '../shapes/IconPositionShape';
+import DisabledShape from '../shapes/DisabledShape';
 
 import RightArrow from './RightArrow';
 import LeftArrow from './LeftArrow';
@@ -48,7 +49,7 @@ const propTypes = forbidExtraProps({
   isStartDateFocused: PropTypes.bool,
   isEndDateFocused: PropTypes.bool,
   showClearDates: PropTypes.bool,
-  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([START_DATE, END_DATE])]),
+  disabled: DisabledShape,
   required: PropTypes.bool,
   readOnly: PropTypes.bool,
   openDirection: openDirectionShape,
diff --git a/src/components/DateRangePickerInputController.jsx b/src/components/DateRangePickerInputController.jsx
index e8b08a0102..2400eed216 100644
--- a/src/components/DateRangePickerInputController.jsx
+++ b/src/components/DateRangePickerInputController.jsx
@@ -12,6 +12,7 @@ import getPhrasePropTypes from '../utils/getPhrasePropTypes';
 import DateRangePickerInput from './DateRangePickerInput';
 
 import IconPositionShape from '../shapes/IconPositionShape';
+import DisabledShape from '../shapes/DisabledShape';
 
 import toMomentObject from '../utils/toMomentObject';
 import toLocalizedDateString from '../utils/toLocalizedDateString';
@@ -37,7 +38,7 @@ const propTypes = forbidExtraProps({
   showCaret: PropTypes.bool,
   showDefaultInputIcon: PropTypes.bool,
   inputIconPosition: IconPositionShape,
-  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([START_DATE, END_DATE])]),
+  disabled: DisabledShape,
   required: PropTypes.bool,
   readOnly: PropTypes.bool,
   openDirection: openDirectionShape,
@@ -181,12 +182,12 @@ export default class DateRangePickerInputController extends React.Component {
       disabled,
     } = this.props;
 
-    if (!startDate && withFullScreenPortal && disabled !== true && disabled !== START_DATE) {
+    if (!startDate && withFullScreenPortal && (!disabled || disabled === END_DATE)) {
       // When the datepicker is full screen, we never want to focus the end date first
       // because there's no indication that that is the case once the datepicker is open and it
       // might confuse the user
       onFocusChange(START_DATE);
-    } else if (disabled !== true && disabled !== END_DATE) {
+    } else if (!disabled || disabled === START_DATE) {
       onFocusChange(END_DATE);
     }
   }
@@ -202,13 +203,13 @@ export default class DateRangePickerInputController extends React.Component {
     } = this.props;
 
     const startDate = toMomentObject(startDateString, this.getDisplayFormat());
-    const endBeforeStart = startDate &&
+    const isEndDateBeforeStartDate = startDate &&
       isBeforeDay(endDate, startDate.clone().add(minimumNights, 'days'));
     const isStartDateValid = startDate && !isOutsideRange(startDate) &&
-      !(disabled === END_DATE && endBeforeStart);
+      !(disabled === END_DATE && isEndDateBeforeStartDate);
 
     if (isStartDateValid) {
-      if (endBeforeStart) {
+      if (isEndDateBeforeStartDate) {
         endDate = null;
       }
 
@@ -224,7 +225,7 @@ export default class DateRangePickerInputController extends React.Component {
 
   onStartDateFocus() {
     const { disabled, onFocusChange } = this.props;
-    if (disabled !== true && disabled !== START_DATE) {
+    if (!disabled || disabled === END_DATE) {
       onFocusChange(START_DATE);
     }
   }
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 5bcf91951a..b8a047b71c 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -23,6 +23,7 @@ import getSelectedDateOffset from '../utils/getSelectedDateOffset';
 import toISODateString from '../utils/toISODateString';
 import toISOMonthString from '../utils/toISOMonthString';
 
+import DisabledShape from '../shapes/DisabledShape';
 import FocusedInputShape from '../shapes/FocusedInputShape';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
@@ -52,7 +53,7 @@ const propTypes = forbidExtraProps({
 
   keepOpenOnDateSelect: PropTypes.bool,
   minimumNights: PropTypes.number,
-  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([START_DATE, END_DATE])]),
+  disabled: DisabledShape,
   isOutsideRange: PropTypes.func,
   isDayBlocked: PropTypes.func,
   isDayHighlighted: PropTypes.func,
@@ -459,21 +460,21 @@ export default class DayPickerRangeController extends React.Component {
       }
     } else if (focusedInput === START_DATE) {
       const lastAllowedStartDate = endDate && endDate.clone().subtract(minimumNights, 'days');
-      const startAfterEnd = isBeforeDay(lastAllowedStartDate, day) ||
+      const isStartDateAfterEndDate = isBeforeDay(lastAllowedStartDate, day) ||
         isAfterDay(startDate, endDate);
-      const endDateDisabled = disabled === END_DATE;
+      const isEndDateDisabled = disabled === END_DATE;
 
-      if (!endDateDisabled || !startAfterEnd) {
+      if (!isEndDateDisabled || !isStartDateAfterEndDate) {
         startDate = day;
-        if (startAfterEnd) {
+        if (isStartDateAfterEndDate) {
           endDate = null;
         }
       }
 
-      if (endDateDisabled && !startAfterEnd) {
+      if (isEndDateDisabled && !isStartDateAfterEndDate) {
         onFocusChange(null);
         onClose({ startDate, endDate });
-      } else if (!endDateDisabled) {
+      } else if (!isEndDateDisabled) {
         onFocusChange(END_DATE);
       }
     } else if (focusedInput === END_DATE) {
diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js
index e74243e6d1..b8ae9a4c83 100644
--- a/src/shapes/DateRangePickerShape.js
+++ b/src/shapes/DateRangePickerShape.js
@@ -8,11 +8,11 @@ import getPhrasePropTypes from '../utils/getPhrasePropTypes';
 import FocusedInputShape from '../shapes/FocusedInputShape';
 import IconPositionShape from '../shapes/IconPositionShape';
 import OrientationShape from '../shapes/OrientationShape';
+import DisabledShape from '../shapes/DisabledShape';
 import anchorDirectionShape from '../shapes/AnchorDirectionShape';
 import openDirectionShape from '../shapes/OpenDirectionShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
 import CalendarInfoPositionShape from '../shapes/CalendarInfoPositionShape';
-import { START_DATE, END_DATE } from '../constants';
 
 export default {
   // required props for a functional interactive DateRangePicker
@@ -30,7 +30,7 @@ export default {
   startDatePlaceholderText: PropTypes.string,
   endDateId: PropTypes.string.isRequired,
   endDatePlaceholderText: PropTypes.string,
-  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([START_DATE, END_DATE])]),
+  disabled: DisabledShape,
   required: PropTypes.bool,
   readOnly: PropTypes.bool,
   screenReaderInputMessage: PropTypes.string,
diff --git a/src/shapes/DisabledShape.js b/src/shapes/DisabledShape.js
new file mode 100644
index 0000000000..9151ea0cf8
--- /dev/null
+++ b/src/shapes/DisabledShape.js
@@ -0,0 +1,5 @@
+import PropTypes from 'prop-types';
+
+import { START_DATE, END_DATE } from '../constants';
+
+export default PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([START_DATE, END_DATE])]);

From 5be41db860bc888199d353124b8b579e33ed4a26 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Thu, 5 Apr 2018 11:00:27 -0700
Subject: [PATCH 155/618] Clarify AnchorDirectionShape and OrientationShape

---
 README.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 1a21acfe9f..6a8ec9918a 100644
--- a/README.md
+++ b/README.md
@@ -112,7 +112,7 @@ Here is the minimum *REQUIRED* setup you need to get the `DateRangePicker` worki
 />
 ```
 
-The following is a list of other *OPTIONAL* props you may provide to the `DateRangePicker` to customize appearance and behavior to your heart's desire. Again, please explore the [storybook](http://airbnb.io/react-dates/?selectedKind=DRP%20-%20Input%20Props&selectedStory=default&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel) for more information on what each of these props do.
+The following is a list of other *OPTIONAL* props you may provide to the `DateRangePicker` to customize appearance and behavior to your heart's desire. All constants (indicated by `ALL_CAPS`) are provided as named exports in `react-dates/constants`. Please explore the [storybook](http://airbnb.io/react-dates/?selectedKind=DRP%20-%20Input%20Props&selectedStory=default&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel) for more information on what each of these props do. 
 ```js
 // input related props
 startDatePlaceholderText: PropTypes.string,
@@ -133,8 +133,8 @@ regular: PropTypes.bool,
 
 // calendar presentation and interaction related props
 renderMonth: PropTypes.func,
-orientation: OrientationShape,
-anchorDirection: anchorDirectionShape,
+orientation: PropTypes.oneOf([HORIZONTAL_ORIENTATION, VERTICAL_ORIENTATION]),
+anchorDirection: PropTypes.oneOf([ANCHOR_LEFT, ANCHOR_RIGHT]),
 horizontalMargin: PropTypes.number,
 withPortal: PropTypes.bool,
 withFullScreenPortal: PropTypes.bool,
@@ -189,7 +189,7 @@ Here is the minimum *REQUIRED* setup you need to get the `SingleDatePicker` work
 />
 ```
 
-The following is a list of other *OPTIONAL* props you may provide to the `SingleDatePicker` to customize appearance and behavior to your heart's desire. Again, please explore the [storybook](http://airbnb.io/react-dates/?selectedKind=SDP%20-%20Input%20Props&selectedStory=default&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel) for more information on what each of these props do.
+The following is a list of other *OPTIONAL* props you may provide to the `SingleDatePicker` to customize appearance and behavior to your heart's desire. All constants (indicated by `ALL_CAPS`) are provided as named exports in `react-dates/constants`. Please explore the [storybook](http://airbnb.io/react-dates/?selectedKind=SDP%20-%20Input%20Props&selectedStory=default&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel) for more information on what each of these props do.
 ```js
 // input related props
 id: PropTypes.string.isRequired,
@@ -209,8 +209,8 @@ regular: PropTypes.bool,
 
 // calendar presentation and interaction related props
 renderMonth: PropTypes.func,
-orientation: OrientationShape,
-anchorDirection: anchorDirectionShape,
+orientation: PropTypes.oneOf([HORIZONTAL_ORIENTATION, VERTICAL_ORIENTATION]),
+anchorDirection: PropTypes.oneOf([ANCHOR_LEFT, ANCHOR_RIGHT]),
 horizontalMargin: PropTypes.number,
 withPortal: PropTypes.bool,
 withFullScreenPortal: PropTypes.bool,

From 9e533a1a200d2798b43a9fc973e2f5b456c27611 Mon Sep 17 00:00:00 2001
From: Nogmanov Ildar <nogmanov@gmail.com>
Date: Thu, 22 Feb 2018 21:08:06 +0300
Subject: [PATCH 156/618] Update README

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index a5ac3e7350..43926dee2a 100644
--- a/README.md
+++ b/README.md
@@ -126,6 +126,7 @@ showDefaultInputIcon: PropTypes.bool,
 customInputIcon: PropTypes.node,
 customArrowIcon: PropTypes.node,
 customCloseIcon: PropTypes.node,
+inputIconPosition: PropTypes.string, // 'before' - default
 noBorder: PropTypes.bool,
 block: PropTypes.bool,
 small: PropTypes.bool,
@@ -203,6 +204,7 @@ showClearDate: PropTypes.bool,
 customCloseIcon: PropTypes.node,
 showDefaultInputIcon: PropTypes.bool,
 customInputIcon: PropTypes.node,
+inputIconPosition: PropTypes.string, // 'before' - default
 noBorder: PropTypes.bool,
 block: PropTypes.bool,
 small: PropTypes.bool,

From 064ee6b12ab049a367b4869dd530dce4b1ce4ca4 Mon Sep 17 00:00:00 2001
From: Nogmanov Ildar <nogmanov@gmail.com>
Date: Thu, 22 Feb 2018 21:14:08 +0300
Subject: [PATCH 157/618] Update stories

---
 stories/DateRangePicker_input.js  | 8 ++++++++
 stories/SingleDatePicker_input.js | 7 +++++++
 2 files changed, 15 insertions(+)

diff --git a/stories/DateRangePicker_input.js b/stories/DateRangePicker_input.js
index caa87c90fc..f873920850 100644
--- a/stories/DateRangePicker_input.js
+++ b/stories/DateRangePicker_input.js
@@ -132,6 +132,14 @@ storiesOf('DRP - Input Props', module)
       showClearDates
       customCloseIcon={<TestCustomCloseIcon />}
     />
+  ))
+    .addWithInfo('with show calendar icon after input', () => (
+    <DateRangePickerWrapper
+      initialStartDate={moment().add(3, 'days')}
+      initialEndDate={moment().add(10, 'days')}
+      showDefaultInputIcon
+      inputIconPosition="after"
+    />
   ))
   .addWithInfo('with screen reader message', () => (
     <DateRangePickerWrapper
diff --git a/stories/SingleDatePicker_input.js b/stories/SingleDatePicker_input.js
index 3e368f0835..929093eb41 100644
--- a/stories/SingleDatePicker_input.js
+++ b/stories/SingleDatePicker_input.js
@@ -66,6 +66,13 @@ storiesOf('SDP - Input Props', module)
       customInputIcon={<TestCustomInputIcon />}
     />
   ))
+  .addWithInfo('with show calendar icon after input', () => (
+    <SingleDatePickerWrapper
+      initialDate={moment().add(3, 'days')}
+      showDefaultInputIcon
+      inputIconPosition="after"
+    />
+  ))
   .addWithInfo('with screen reader message', () => (
     <SingleDatePickerWrapper
       initialDate={moment().add(3, 'days')}

From 5bf65834767e93bdc851260a397f0f93c5aebe7e Mon Sep 17 00:00:00 2001
From: Nogmanov Ildar <nogmanov@gmail.com>
Date: Thu, 22 Feb 2018 22:02:55 +0300
Subject: [PATCH 158/618] Fix formatting issue

---
 stories/DateRangePicker_input.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/stories/DateRangePicker_input.js b/stories/DateRangePicker_input.js
index f873920850..548208cce9 100644
--- a/stories/DateRangePicker_input.js
+++ b/stories/DateRangePicker_input.js
@@ -133,7 +133,7 @@ storiesOf('DRP - Input Props', module)
       customCloseIcon={<TestCustomCloseIcon />}
     />
   ))
-    .addWithInfo('with show calendar icon after input', () => (
+  .addWithInfo('with show calendar icon after input', () => (
     <DateRangePickerWrapper
       initialStartDate={moment().add(3, 'days')}
       initialEndDate={moment().add(10, 'days')}

From d8b6da4ca46118213c1eff251068bf56de27a4ef Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Thu, 5 Apr 2018 11:07:55 -0700
Subject: [PATCH 159/618] Update README to use actual PropTypes value

---
 README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 43926dee2a..b5dceca42d 100644
--- a/README.md
+++ b/README.md
@@ -112,7 +112,7 @@ Here is the minimum *REQUIRED* setup you need to get the `DateRangePicker` worki
 />
 ```
 
-The following is a list of other *OPTIONAL* props you may provide to the `DateRangePicker` to customize appearance and behavior to your heart's desire. All constants (indicated by `ALL_CAPS`) are provided as named exports in `react-dates/constants`. Please explore the [storybook](http://airbnb.io/react-dates/?selectedKind=DRP%20-%20Input%20Props&selectedStory=default&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel) for more information on what each of these props do. 
+The following is a list of other *OPTIONAL* props you may provide to the `DateRangePicker` to customize appearance and behavior to your heart's desire. All constants (indicated by `ALL_CAPS`) are provided as named exports in `react-dates/constants`. Please explore the [storybook](http://airbnb.io/react-dates/?selectedKind=DRP%20-%20Input%20Props&selectedStory=default&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel) for more information on what each of these props do.
 ```js
 // input related props
 startDatePlaceholderText: PropTypes.string,
@@ -126,7 +126,7 @@ showDefaultInputIcon: PropTypes.bool,
 customInputIcon: PropTypes.node,
 customArrowIcon: PropTypes.node,
 customCloseIcon: PropTypes.node,
-inputIconPosition: PropTypes.string, // 'before' - default
+inputIconPosition: PropTypes.oneOf([ICON_BEFORE_POSITION, ICON_AFTER_POSITION]),
 noBorder: PropTypes.bool,
 block: PropTypes.bool,
 small: PropTypes.bool,
@@ -204,7 +204,7 @@ showClearDate: PropTypes.bool,
 customCloseIcon: PropTypes.node,
 showDefaultInputIcon: PropTypes.bool,
 customInputIcon: PropTypes.node,
-inputIconPosition: PropTypes.string, // 'before' - default
+inputIconPosition: PropTypes.oneOf([ICON_BEFORE_POSITION, ICON_AFTER_POSITION]),
 noBorder: PropTypes.bool,
 block: PropTypes.bool,
 small: PropTypes.bool,

From b52908d55e1a49b11844962c0499cead666d1cb4 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Thu, 5 Apr 2018 14:07:45 -0700
Subject: [PATCH 160/618] Version 16.5.0

---
 CHANGELOG.md | 5 +++++
 package.json | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b0cf9c47bd..fc98c49086 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Change Log
 
+## 16.5.0
+- [new] Export `CustomizeableCalendarDay` default styles ([#1095](https://github.com/airbnb/react-dates/pull/1095))
+- [new] Allow selectively disabling either input in the DRP ([#](https://github.com/airbnb/react-dates/pull/606))
+- [new] Add `dayAriaLabelFormat` prop to the SDP/DRP ([#](https://github.com/airbnb/react-dates/pull/984))
+
 ## 16.4.0
 - [new] Export `OutsideClickHandler` in index.js ([#1089](https://github.com/airbnb/react-dates/pull/1089))
 - [fix] Do not apply `verticalSpacing` when `withPortal` or `withFullScreenPortal` is true ([#980](https://github.com/airbnb/react-dates/pull/980))
diff --git a/package.json b/package.json
index 2d379eac60..4c673d698a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "16.4.0",
+  "version": "16.5.0",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 8de8df09365e888d7d80356900a23067828712df Mon Sep 17 00:00:00 2001
From: Marlon Parizzotto <mparizzotto@gmail.com>
Date: Fri, 6 Apr 2018 16:49:24 -0700
Subject: [PATCH 161/618] Fixed unexpected blur call

---
 src/components/DayPicker.jsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index db1a50042b..99503ddb0c 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -594,7 +594,11 @@ class DayPicker extends React.Component {
       // if the user is navigating around using a mouse
       if (withMouseInteractions) {
         const activeElement = getActiveElement();
-        if (activeElement && activeElement !== document.body) {
+        if (
+          activeElement &&
+          activeElement !== document.body &&
+          this.container.contains(activeElement)
+        ) {
           activeElement.blur();
         }
       }

From d8ac1bcd442470885e9e2566588cb6e6a3337247 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joa=CC=83o=20Vieira?= <joaoguerravieira@gmail.com>
Date: Sat, 7 Apr 2018 17:39:35 +0100
Subject: [PATCH 162/618] Add documentation for disableScroll and
 getDetachedContainerPosition utilities.

---
 README.md                               |  4 +++
 src/utils/disableScroll.js              | 47 +++++++++++++++++++------
 src/utils/getDetachedContainerStyles.js | 20 +++++++++++
 3 files changed, 61 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index b5dceca42d..a6bad6c47c 100644
--- a/README.md
+++ b/README.md
@@ -139,6 +139,8 @@ anchorDirection: PropTypes.oneOf([ANCHOR_LEFT, ANCHOR_RIGHT]),
 horizontalMargin: PropTypes.number,
 withPortal: PropTypes.bool,
 withFullScreenPortal: PropTypes.bool,
+appendToBody: PropTypes.bool,
+disableScroll: PropTypes.bool,
 daySize: nonNegativeInteger,
 isRTL: PropTypes.bool,
 initialVisibleMonth: PropTypes.func,
@@ -217,6 +219,8 @@ anchorDirection: PropTypes.oneOf([ANCHOR_LEFT, ANCHOR_RIGHT]),
 horizontalMargin: PropTypes.number,
 withPortal: PropTypes.bool,
 withFullScreenPortal: PropTypes.bool,
+appendToBody: PropTypes.bool,
+disableScroll: PropTypes.bool,
 initialVisibleMonth: PropTypes.func,
 firstDayOfWeek: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
 numberOfMonths: PropTypes.number,
diff --git a/src/utils/disableScroll.js b/src/utils/disableScroll.js
index 38f2d543e2..88aa327657 100644
--- a/src/utils/disableScroll.js
+++ b/src/utils/disableScroll.js
@@ -1,33 +1,60 @@
+/**
+ * Recursively finds the scroll parent of a node. The scroll parrent of a node
+ * is the closest node that is scrollable. A node is scrollable if:
+ *  - it is allowed to scroll via CSS ('overflow-y' not visible or hidden);
+ *  - and its children/content are "bigger" than the node's box height.
+ *
+ * @param {HTMLElement} node Any DOM element.
+ * @param {HTMLElement} rootNode The element to return when we reach the root.
+ * @return {HTMLElement} The scroll parent element.
+ */
 function getScrollParent(node, rootNode) {
   const parent = node.parentElement;
 
-  if (parent == null) return null;
+  if (parent == null) return rootNode;
 
   const { overflowY } = window.getComputedStyle(parent);
-  const isScrollable = overflowY !== 'visible' && overflowY !== 'hidden';
+  const canScroll = overflowY !== 'visible' && overflowY !== 'hidden';
 
-  if (isScrollable && parent.scrollHeight > parent.clientHeight) {
+  if (canScroll && parent.scrollHeight > parent.clientHeight) {
     return parent;
   }
 
-  return getScrollParent(parent) || rootNode;
+  return getScrollParent(parent, rootNode);
 }
 
-function getScrollAncestorsOverflow(node, acc = new Map()) {
+/**
+ * Recursively traverses the tree upwards from the given node, capturing all
+ * ancestor nodes that scroll along with their current 'overflow-y' CSS
+ * property.
+ *
+ * @param {HTMLElement} node Any DOM element.
+ * @param {Map<HTMLElement,string>} [acc] Accumulator map.
+ * @return {Map<HTMLElement,string>} Map of ancestors with their 'overflow-y' value.
+ */
+function getScrollAncestorsOverflowY(node, acc = new Map()) {
   const rootNode = document.scrollingElement || document.documentElement;
   const scrollParent = getScrollParent(node, rootNode);
   acc.set(scrollParent, scrollParent.style.overflowY);
 
   if (scrollParent === rootNode) return acc;
-  return getScrollAncestorsOverflow(scrollParent, acc);
+  return getScrollAncestorsOverflowY(scrollParent, acc);
 }
 
-// Get and store all ancestor elements that scroll along with its overflowY
-// CSS property, so they can be reset when enabling scroll again.
+/**
+ * Disabling the scroll on a node involves finding all the scrollable ancestors
+ * and set their 'overflow-y' CSS property to 'hidden'. When all ancestors have
+ * 'overflow-y: hidden' (up to the document element) there is no scroll
+ * container, thus all the scroll outside of the node is disabled. In order to
+ * enable scroll again, we store the previous value of the 'overflow-y' for
+ * every ancestor in a closure and reset it back.
+ *
+ * @param {HTMLElement} node Any DOM element.
+ */
 export default function disableScroll(node) {
-  const scrollAncestorsOverflow = getScrollAncestorsOverflow(node);
+  const scrollAncestorsOverflowY = getScrollAncestorsOverflowY(node);
   const toggle = on =>
-    scrollAncestorsOverflow.forEach((overflowY, ancestor) => {
+    scrollAncestorsOverflowY.forEach((overflowY, ancestor) => {
       ancestor.style.setProperty('overflow-y', on ? 'hidden' : overflowY);
     });
 
diff --git a/src/utils/getDetachedContainerStyles.js b/src/utils/getDetachedContainerStyles.js
index c882837add..86ae1f70a7 100644
--- a/src/utils/getDetachedContainerStyles.js
+++ b/src/utils/getDetachedContainerStyles.js
@@ -1,5 +1,25 @@
 import { OPEN_UP, ANCHOR_RIGHT } from '../constants';
 
+/**
+ * Calculate and return a CSS transform style to position a detached element
+ * next to a reference element. The open and anchor direction indicate wether
+ * it should be positioned above/below and/or to the left/right of the
+ * reference element.
+ *
+ * Assuming r(0,0), r(1,1), d(0,0), d(1,1) for the bottom-left and top-right
+ * corners of the reference and detached elements, respectively:
+ *  - openDirection = DOWN, anchorDirection = LEFT => d(0,1) == r(0,1)
+ *  - openDirection = UP, anchorDirection = LEFT => d(0,0) == r(0,0)
+ *  - openDirection = DOWN, anchorDirection = RIGHT => d(1,1) == r(1,1)
+ *  - openDirection = UP, anchorDirection = RIGHT => d(1,0) == r(1,0)
+ *
+ * By using a CSS transform, we allow to further position it using
+ * top/bottom CSS properties for the anchor gutter.
+ *
+ * @param {string} openDirection The vertical positioning of the popup
+ * @param {string} anchorDirection The horizontal position of the popup
+ * @param {HTMLElement} referenceEl The reference element
+ */
 export default function getDetachedContainerStyles(openDirection, anchorDirection, referenceEl) {
   const referenceRect = referenceEl.getBoundingClientRect();
   let offsetX = referenceRect.left;

From 1c4fd96d75c02997753c7b22b5b7836392dfdbe5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joa=CC=83o=20Vieira?= <joaoguerravieira@gmail.com>
Date: Sat, 7 Apr 2018 19:13:29 +0100
Subject: [PATCH 163/618] Add getDetachedContainerStyles specs.

---
 test/utils/getDetachedContainerStyles_spec.js | 68 +++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 test/utils/getDetachedContainerStyles_spec.js

diff --git a/test/utils/getDetachedContainerStyles_spec.js b/test/utils/getDetachedContainerStyles_spec.js
new file mode 100644
index 0000000000..a251332aeb
--- /dev/null
+++ b/test/utils/getDetachedContainerStyles_spec.js
@@ -0,0 +1,68 @@
+import { expect } from 'chai';
+import wrap from 'mocha-wrap';
+
+import getDetachedContainerStyles from '../../src/utils/getDetachedContainerStyles';
+
+import { OPEN_DOWN, OPEN_UP, ANCHOR_LEFT, ANCHOR_RIGHT } from '../../src/constants';
+
+const describeIfNoWindow = typeof document === 'undefined' ? describe : describe.skip;
+
+const windowWidth = 100;
+const windowHeight = 100;
+
+// Fake 30x100px element on x,y = 10,10
+const referenceElRect = {
+  top: 10,
+  bottom: 40,
+  left: 10,
+  right: 110,
+};
+const referenceEl = {
+  getBoundingClientRect() {
+    return referenceElRect;
+  },
+};
+
+describeIfNoWindow('#getDetachedContainerStyles', () => {
+  wrap()
+    .withGlobal('window', () => ({}))
+    .withOverride(() => window, 'innerWidth', () => windowWidth)
+    .withOverride(() => window, 'innerHeight', () => windowHeight)
+    .describe('with `window`', () => {
+      describe('on down-left positioning', () => {
+        it('returns translation from top-left of window to top-left of reference el', () => {
+          const styles = getDetachedContainerStyles(OPEN_DOWN, ANCHOR_LEFT, referenceEl);
+          expect(styles.transform).to.have.string(`translateX(${referenceElRect.left}px)`);
+          expect(styles.transform).to.have.string(`translateY(${referenceElRect.top}px)`);
+        });
+      });
+
+      describe('on up-left positioning', () => {
+        it('returns translation from bottom-left of window to bottom-left of reference el', () => {
+          const styles = getDetachedContainerStyles(OPEN_UP, ANCHOR_LEFT, referenceEl);
+          const offsetY = -(windowHeight - referenceElRect.bottom);
+          expect(styles.transform).to.have.string(`translateX(${referenceElRect.left}px)`);
+          expect(styles.transform).to.have.string(`translateY(${offsetY}px)`);
+        });
+      });
+
+      describe('on down-right positioning', () => {
+        it('returns translation from top-right of window to top-right of reference el', () => {
+          const styles = getDetachedContainerStyles(OPEN_DOWN, ANCHOR_RIGHT, referenceEl);
+          const offsetX = -(windowWidth - referenceElRect.right);
+          expect(styles.transform).to.have.string(`translateX(${offsetX}px)`);
+          expect(styles.transform).to.have.string(`translateY(${referenceElRect.top}px)`);
+        });
+      });
+
+      describe('on up-right positioning', () => {
+        it('returns translation from bottom-right of window to bottom-right of reference el', () => {
+          const styles = getDetachedContainerStyles(OPEN_UP, ANCHOR_RIGHT, referenceEl);
+          const offsetX = -(windowWidth - referenceElRect.right);
+          const offsetY = -(windowHeight - referenceElRect.bottom);
+          expect(styles.transform).to.have.string(`translateX(${offsetX}px)`);
+          expect(styles.transform).to.have.string(`translateY(${offsetY}px)`);
+        });
+      });
+    });
+});

From 9523e28dfe716ac3259198df11b55468f05f9e0c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joa=CC=83o=20Vieira?= <joaoguerravieira@gmail.com>
Date: Sat, 7 Apr 2018 21:10:51 +0100
Subject: [PATCH 164/618] Add disableScroll specs.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: João Vieira <joaoguerravieira@gmail.com>
---
 src/utils/disableScroll.js       |  19 ++--
 test/utils/disableScroll_spec.js | 161 +++++++++++++++++++++++++++++++
 2 files changed, 172 insertions(+), 8 deletions(-)
 create mode 100644 test/utils/disableScroll_spec.js

diff --git a/src/utils/disableScroll.js b/src/utils/disableScroll.js
index 88aa327657..7815a4f7af 100644
--- a/src/utils/disableScroll.js
+++ b/src/utils/disableScroll.js
@@ -1,17 +1,20 @@
+const getScrollingRoot = () => document.scrollingElement || document.documentElement;
+
 /**
  * Recursively finds the scroll parent of a node. The scroll parrent of a node
  * is the closest node that is scrollable. A node is scrollable if:
  *  - it is allowed to scroll via CSS ('overflow-y' not visible or hidden);
  *  - and its children/content are "bigger" than the node's box height.
  *
+ * The root of the document always scrolls by default.
+ *
  * @param {HTMLElement} node Any DOM element.
- * @param {HTMLElement} rootNode The element to return when we reach the root.
  * @return {HTMLElement} The scroll parent element.
  */
-function getScrollParent(node, rootNode) {
+export function getScrollParent(node) {
   const parent = node.parentElement;
 
-  if (parent == null) return rootNode;
+  if (parent == null) return getScrollingRoot();
 
   const { overflowY } = window.getComputedStyle(parent);
   const canScroll = overflowY !== 'visible' && overflowY !== 'hidden';
@@ -20,7 +23,7 @@ function getScrollParent(node, rootNode) {
     return parent;
   }
 
-  return getScrollParent(parent, rootNode);
+  return getScrollParent(parent);
 }
 
 /**
@@ -32,12 +35,12 @@ function getScrollParent(node, rootNode) {
  * @param {Map<HTMLElement,string>} [acc] Accumulator map.
  * @return {Map<HTMLElement,string>} Map of ancestors with their 'overflow-y' value.
  */
-function getScrollAncestorsOverflowY(node, acc = new Map()) {
-  const rootNode = document.scrollingElement || document.documentElement;
-  const scrollParent = getScrollParent(node, rootNode);
+export function getScrollAncestorsOverflowY(node, acc = new Map()) {
+  const scrollingRoot = getScrollingRoot();
+  const scrollParent = getScrollParent(node);
   acc.set(scrollParent, scrollParent.style.overflowY);
 
-  if (scrollParent === rootNode) return acc;
+  if (scrollParent === scrollingRoot) return acc;
   return getScrollAncestorsOverflowY(scrollParent, acc);
 }
 
diff --git a/test/utils/disableScroll_spec.js b/test/utils/disableScroll_spec.js
new file mode 100644
index 0000000000..af970638ba
--- /dev/null
+++ b/test/utils/disableScroll_spec.js
@@ -0,0 +1,161 @@
+import { expect } from 'chai';
+
+import disableScroll, {
+  getScrollParent,
+  getScrollAncestorsOverflowY,
+} from '../../src/utils/disableScroll';
+
+const describeIfWindow = typeof document === 'undefined' ? describe.skip : describe;
+
+const createScrollContainer = (level = 1) => {
+  const el = document.createElement('div');
+  el.style.width = '300px';
+  el.style.height = `${level * 100}px`;
+  el.style.overflow = 'auto';
+  return el;
+};
+
+const createScrollContent = () => {
+  const el = document.createElement('div');
+  el.style.width = '100%';
+  el.style.height = '99999px';
+  return el;
+};
+
+const createTargetElement = () => {
+  const el = document.createElement('div');
+  return el;
+};
+
+describeIfWindow('#disableScroll', () => {
+  const grandParentScrollContainer = createScrollContainer(1);
+  const parentScrollContainer = createScrollContainer(2);
+  const scrollContent = createScrollContent();
+  const targetElement = createTargetElement();
+  scrollContent.appendChild(targetElement);
+
+  describe('#getScrollParent', () => {
+    describe('with no parent', () => {
+      before(() => {
+        document.body.appendChild(scrollContent);
+      });
+
+      after(() => {
+        document.body.removeChild(scrollContent);
+      });
+
+      it('returns scrolling root if no scroll parent', () => {
+        const scrollParent = getScrollParent(targetElement);
+        expect(scrollParent).to.equal(document.documentElement);
+      });
+    });
+
+    describe('with a single scroll container', () => {
+      before(() => {
+        parentScrollContainer.appendChild(scrollContent);
+        document.body.appendChild(parentScrollContainer);
+      });
+
+      after(() => {
+        parentScrollContainer.appendChild(scrollContent);
+        document.body.removeChild(parentScrollContainer);
+      });
+
+      it('returns the scroll container', () => {
+        const scrollParent = getScrollParent(targetElement);
+        expect(scrollParent).to.equal(parentScrollContainer);
+      });
+    });
+
+    describe('with multiple scroll containers', () => {
+      before(() => {
+        parentScrollContainer.appendChild(scrollContent);
+        grandParentScrollContainer.appendChild(parentScrollContainer);
+        document.body.appendChild(grandParentScrollContainer);
+      });
+
+      after(() => {
+        parentScrollContainer.removeChild(scrollContent);
+        grandParentScrollContainer.removeChild(parentScrollContainer);
+        document.body.removeChild(grandParentScrollContainer);
+      });
+
+      it('returns the closest scroll container', () => {
+        const scrollParent = getScrollParent(targetElement);
+        expect(scrollParent).to.equal(parentScrollContainer);
+      });
+    });
+  });
+
+  describe('#getScrollAncestorsOverflowY', () => {
+    before(() => {
+      parentScrollContainer.appendChild(scrollContent);
+      grandParentScrollContainer.appendChild(parentScrollContainer);
+      document.body.appendChild(grandParentScrollContainer);
+    });
+
+    after(() => {
+      parentScrollContainer.removeChild(scrollContent);
+      grandParentScrollContainer.removeChild(parentScrollContainer);
+      document.body.removeChild(grandParentScrollContainer);
+    });
+
+    it('returns a map with the overflowY of all scrollable ancestors', () => {
+      const scrollAncestorsOverflowY = getScrollAncestorsOverflowY(targetElement);
+      expect(scrollAncestorsOverflowY.size).to.equal(3); // both scroll containers + root
+
+      expect(scrollAncestorsOverflowY.has(parentScrollContainer)).to.equal(true);
+      expect(scrollAncestorsOverflowY.has(grandParentScrollContainer)).to.equal(true);
+      expect(scrollAncestorsOverflowY.has(document.documentElement)).to.equal(true);
+
+      expect(scrollAncestorsOverflowY.get(parentScrollContainer)).to.equal('auto');
+      expect(scrollAncestorsOverflowY.get(grandParentScrollContainer)).to.equal('auto');
+      // document is a special case - it doesn't have an explicit overflow property set,
+      // but scrolls by default.
+      expect(scrollAncestorsOverflowY.get(document.documentElement)).to.equal('');
+    });
+  });
+
+  describe('#disableScroll', () => {
+    before(() => {
+      parentScrollContainer.appendChild(scrollContent);
+      grandParentScrollContainer.appendChild(parentScrollContainer);
+      document.body.appendChild(grandParentScrollContainer);
+    });
+
+    after(() => {
+      parentScrollContainer.removeChild(scrollContent);
+      grandParentScrollContainer.removeChild(parentScrollContainer);
+      document.body.removeChild(grandParentScrollContainer);
+    });
+
+    describe('disable', () => {
+      it('should set all scroll ancestors overflow to hidden', () => {
+        const enableScroll = disableScroll(targetElement);
+        const scrollAncestorsOverflowY = getScrollAncestorsOverflowY(targetElement);
+
+        // eslint-disable-next-line no-restricted-syntax
+        for (const [, overflowY] of scrollAncestorsOverflowY) {
+          expect(overflowY).to.equal('hidden');
+        }
+
+        // reset to initial state
+        enableScroll();
+      });
+    });
+
+    describe('enable', () => {
+      it('should set all scroll ancestors overflow to their previous value', () => {
+        const scrollAncestorsOverflowYBefore = getScrollAncestorsOverflowY(targetElement);
+        const enableScroll = disableScroll(targetElement);
+        enableScroll();
+        const scrollAncestorsOverflowY = getScrollAncestorsOverflowY(targetElement);
+
+        // eslint-disable-next-line no-restricted-syntax
+        for (const [element, overflowY] of scrollAncestorsOverflowY) {
+          expect(scrollAncestorsOverflowYBefore.get(element)).to.equal(overflowY);
+        }
+      });
+    });
+  });
+});

From 967904121758797b2e3a4cc013140777cfbada47 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joa=CC=83o=20Vieira?= <joaoguerravieira@gmail.com>
Date: Sat, 7 Apr 2018 21:33:31 +0100
Subject: [PATCH 165/618] Fix mocha specs.

---
 test/utils/disableScroll_spec.js | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/test/utils/disableScroll_spec.js b/test/utils/disableScroll_spec.js
index af970638ba..64d9a39816 100644
--- a/test/utils/disableScroll_spec.js
+++ b/test/utils/disableScroll_spec.js
@@ -28,11 +28,18 @@ const createTargetElement = () => {
 };
 
 describeIfWindow('#disableScroll', () => {
-  const grandParentScrollContainer = createScrollContainer(1);
-  const parentScrollContainer = createScrollContainer(2);
-  const scrollContent = createScrollContent();
-  const targetElement = createTargetElement();
-  scrollContent.appendChild(targetElement);
+  let grandParentScrollContainer;
+  let parentScrollContainer;
+  let scrollContent;
+  let targetElement;
+
+  before(() => {
+    grandParentScrollContainer = createScrollContainer(1);
+    parentScrollContainer = createScrollContainer(2);
+    scrollContent = createScrollContent();
+    targetElement = createTargetElement();
+    scrollContent.appendChild(targetElement);
+  });
 
   describe('#getScrollParent', () => {
     describe('with no parent', () => {

From 25b4718e2fa3a9c77432e941bd96003759a3058e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joa=CC=83o=20Vieira?= <joaoguerravieira@gmail.com>
Date: Sun, 8 Apr 2018 00:55:31 +0100
Subject: [PATCH 166/618] Use single entrypoint for karma when using webpack.
 Fix warnings.

---
 karma.conf.js                                 |  7 +--
 package.json                                  |  2 +-
 test/components/DateRangePicker_spec.jsx      |  4 +-
 .../DayPickerKeyboardShortcuts_spec.jsx       |  8 +--
 .../DayPickerRangeController_spec.jsx         | 52 +++++++++----------
 .../DayPickerSingleDateController_spec.jsx    | 18 +++----
 test/components/DayPicker_spec.jsx            |  8 +--
 test/tests.webpack.js                         |  4 ++
 8 files changed, 52 insertions(+), 51 deletions(-)
 create mode 100644 test/tests.webpack.js

diff --git a/karma.conf.js b/karma.conf.js
index e8b5c9a49a..d511e1f5ca 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -8,12 +8,7 @@ module.exports = (config) => {
 
     frameworks: ['mocha', 'sinon', 'chai'],
 
-    files: [
-      'test/_helpers/registerReactWithStylesInterface.js',
-      'test/_helpers/restoreSinonStubs.js',
-      'test/utils/*',
-      'test/components/*',
-    ],
+    files: ['test/tests.webpack.js'],
 
     webpack: {
       externals: {
diff --git a/package.json b/package.json
index c9c11c6ad0..62f135a5cd 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "react": "enzyme-adapter-react-install 16",
     "pretest": "npm run --silent lint",
     "pretests-only": "npm run react",
-    "tests-only": "npm run mocha --silent test",
+    "tests-only": "npm run mocha --silent test/**/*_spec*",
     "pretests-karma": "npm run react",
     "tests-karma": "karma start",
     "test": "npm run tests-only",
diff --git a/test/components/DateRangePicker_spec.jsx b/test/components/DateRangePicker_spec.jsx
index 46f813a42b..32a7781b2e 100644
--- a/test/components/DateRangePicker_spec.jsx
+++ b/test/components/DateRangePicker_spec.jsx
@@ -18,6 +18,8 @@ import {
 const requiredProps = {
   onDatesChange: () => {},
   onFocusChange: () => {},
+  startDateId: 'startDate',
+  endDateId: 'endDate',
 };
 
 describe('DateRangePicker', () => {
@@ -316,7 +318,6 @@ describe('DateRangePicker', () => {
         const wrapper = shallow((
           <DateRangePicker
             {...requiredProps}
-            onDateChange={sinon.stub()}
             onFocusChange={sinon.stub()}
             keepFocusOnInput
           />
@@ -330,7 +331,6 @@ describe('DateRangePicker', () => {
         const wrapper = shallow((
           <DateRangePicker
             {...requiredProps}
-            onDateChange={sinon.stub()}
             onFocusChange={sinon.stub()}
             keepFocusOnInput
             withFullScreenPortal
diff --git a/test/components/DayPickerKeyboardShortcuts_spec.jsx b/test/components/DayPickerKeyboardShortcuts_spec.jsx
index 8550e5271a..f93ca74924 100644
--- a/test/components/DayPickerKeyboardShortcuts_spec.jsx
+++ b/test/components/DayPickerKeyboardShortcuts_spec.jsx
@@ -117,7 +117,7 @@ describe('DayPickerKeyboardShortcuts', () => {
         });
 
         afterEach(() => {
-          openKeyboardShortcutsPanelStub.reset();
+          openKeyboardShortcutsPanelStub.resetHistory();
         });
 
         it('onClick calls onShowKeyboardShortcutsButtonClick', () => {
@@ -205,9 +205,9 @@ describe('DayPickerKeyboardShortcuts', () => {
         });
 
         afterEach(() => {
-          closeKeyboardShortcutsPanelStub.reset();
-          event.stopPropagation.reset();
-          event.preventDefault.reset();
+          closeKeyboardShortcutsPanelStub.resetHistory();
+          event.stopPropagation.resetHistory();
+          event.preventDefault.resetHistory();
         });
 
         it('onClick calls onShowKeyboardShortcutsButtonClick', () => {
diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index c80ec7f6c1..fc47f5cb12 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -110,7 +110,7 @@ describe('DayPickerRangeController', () => {
               'getStateForNewMonth',
             );
             const wrapper = shallow(<DayPickerRangeController {...props} focusedInput={null} />);
-            getStateForNewMonthSpy.reset();
+            getStateForNewMonthSpy.resetHistory();
             wrapper.instance().componentWillReceiveProps({
               ...props,
               focusedInput: START_DATE,
@@ -162,7 +162,7 @@ describe('DayPickerRangeController', () => {
               'getStateForNewMonth',
             );
             const wrapper = shallow(<DayPickerRangeController {...props} focusedInput={null} />);
-            getStateForNewMonthSpy.reset();
+            getStateForNewMonthSpy.resetHistory();
             wrapper.instance().componentWillReceiveProps({
               ...props,
               focusedInput: null,
@@ -216,7 +216,7 @@ describe('DayPickerRangeController', () => {
             'getStateForNewMonth',
           );
           const wrapper = shallow(<DayPickerRangeController {...props} />);
-          getStateForNewMonthSpy.reset();
+          getStateForNewMonthSpy.resetHistory();
           wrapper.instance().componentWillReceiveProps({
             ...props,
             numberOfMonths: 5,
@@ -262,7 +262,7 @@ describe('DayPickerRangeController', () => {
         it('calls getStateForNewMonth with nextProps', () => {
           const getStateForNewMonthSpy = sinon.spy(DayPickerRangeController.prototype, 'getStateForNewMonth');
           const wrapper = shallow(<DayPickerRangeController {...props} />);
-          getStateForNewMonthSpy.reset();
+          getStateForNewMonthSpy.resetHistory();
           wrapper.instance().componentWillReceiveProps({
             ...props,
             enableOutsideDays: true,
@@ -313,7 +313,7 @@ describe('DayPickerRangeController', () => {
                 minimumNights={minimumNights}
               />
             ));
-            deleteModifierFromRangeSpy.reset();
+            deleteModifierFromRangeSpy.resetHistory();
             wrapper.instance().componentWillReceiveProps({
               ...props,
               startDate: nextStartDate,
@@ -748,7 +748,7 @@ describe('DayPickerRangeController', () => {
           it('does not call isBlocked', () => {
             const isBlockedStub = sinon.stub(DayPickerRangeController.prototype, 'isBlocked');
             const wrapper = shallow(<DayPickerRangeController {...props} />);
-            isBlockedStub.reset();
+            isBlockedStub.resetHistory();
             wrapper.instance().componentWillReceiveProps({
               ...props,
             });
@@ -774,7 +774,7 @@ describe('DayPickerRangeController', () => {
             const isBlockedStub = sinon.stub(DayPickerRangeController.prototype, 'isBlocked');
             const wrapper = shallow(<DayPickerRangeController {...props} />);
             wrapper.setState({ visibleDays });
-            isBlockedStub.reset();
+            isBlockedStub.resetHistory();
             wrapper.instance().componentWillReceiveProps({
               ...props,
               focusedInput: END_DATE,
@@ -1578,7 +1578,7 @@ describe('DayPickerRangeController', () => {
         wrapper.setState({
           hoverDate: null,
         });
-        addModifierSpy.reset();
+        addModifierSpy.resetHistory();
         wrapper.instance().onDayMouseEnter(today);
         expect(addModifierSpy.callCount).to.equal(1);
         expect(addModifierSpy.getCall(0).args[1]).to.equal(today);
@@ -1595,7 +1595,7 @@ describe('DayPickerRangeController', () => {
         wrapper.setState({
           hoverDate: today,
         });
-        deleteModifierSpy.reset();
+        deleteModifierSpy.resetHistory();
         wrapper.instance().onDayMouseEnter(moment().add(10, 'days'));
         expect(deleteModifierSpy.callCount).to.equal(1);
         expect(deleteModifierSpy.getCall(0).args[1]).to.equal(today);
@@ -1619,7 +1619,7 @@ describe('DayPickerRangeController', () => {
               />
             ));
             wrapper.setState({ hoverDate });
-            deleteModifierFromRangeSpy.reset();
+            deleteModifierFromRangeSpy.resetHistory();
             wrapper.instance().onDayMouseEnter(moment().add(10, 'days'));
             const hoverSpanCalls = getCallsByModifier(deleteModifierFromRangeSpy, 'hovered-span');
             expect(hoverSpanCalls.length).to.equal(1);
@@ -1644,7 +1644,7 @@ describe('DayPickerRangeController', () => {
               />
             ));
             wrapper.setState({ hoverDate: null });
-            addModifierToRangeSpy.reset();
+            addModifierToRangeSpy.resetHistory();
             wrapper.instance().onDayMouseEnter(hoverDate);
             const hoverSpanCalls = getCallsByModifier(addModifierToRangeSpy, 'hovered-span');
             expect(hoverSpanCalls.length).to.equal(1);
@@ -1670,7 +1670,7 @@ describe('DayPickerRangeController', () => {
               />
             ));
             wrapper.setState({ hoverDate });
-            deleteModifierFromRangeSpy.reset();
+            deleteModifierFromRangeSpy.resetHistory();
             wrapper.instance().onDayMouseEnter(moment().add(10, 'days'));
             expect(deleteModifierFromRangeSpy.callCount).to.equal(1);
             expect(deleteModifierFromRangeSpy.getCall(0).args[1]).to.equal(hoverDate);
@@ -1694,7 +1694,7 @@ describe('DayPickerRangeController', () => {
               />
             ));
             wrapper.setState({ hoverDate: null });
-            addModifierToRangeSpy.reset();
+            addModifierToRangeSpy.resetHistory();
             wrapper.instance().onDayMouseEnter(hoverDate);
             expect(addModifierToRangeSpy.callCount).to.equal(1);
             expect(addModifierToRangeSpy.getCall(0).args[1]).to.equal(hoverDate);
@@ -1717,7 +1717,7 @@ describe('DayPickerRangeController', () => {
                 minimumNights={minimumNights}
               />
             ));
-            deleteModifierFromRangeSpy.reset();
+            deleteModifierFromRangeSpy.resetHistory();
             wrapper.instance().onDayMouseEnter(today);
             const afterHoverStartCalls = getCallsByModifier(deleteModifierFromRangeSpy, 'after-hovered-start');
             expect(afterHoverStartCalls.length).to.equal(0);
@@ -1741,7 +1741,7 @@ describe('DayPickerRangeController', () => {
                   minimumNights={minimumNights}
                 />
               ));
-              addModifierToRangeSpy.reset();
+              addModifierToRangeSpy.resetHistory();
               wrapper.instance().onDayMouseEnter(startDate);
               const afterHoverStartCalls = getCallsByModifier(addModifierToRangeSpy, 'after-hovered-start');
               expect(afterHoverStartCalls.length).to.equal(1);
@@ -1764,7 +1764,7 @@ describe('DayPickerRangeController', () => {
                   minimumNights={minimumNights}
                 />
               ));
-              addModifierToRangeSpy.reset();
+              addModifierToRangeSpy.resetHistory();
               wrapper.instance().onDayMouseEnter(today);
               const afterHoverStartCalls = getCallsByModifier(addModifierToRangeSpy, 'after-hovered-start');
               expect(afterHoverStartCalls.length).to.equal(0);
@@ -1797,7 +1797,7 @@ describe('DayPickerRangeController', () => {
         wrapper.setState({
           hoverDate: today,
         });
-        deleteModifierSpy.reset();
+        deleteModifierSpy.resetHistory();
         wrapper.instance().onDayMouseLeave(today);
         expect(deleteModifierSpy.callCount).to.equal(1);
         expect(deleteModifierSpy.getCall(0).args[1]).to.equal(today);
@@ -1819,7 +1819,7 @@ describe('DayPickerRangeController', () => {
             />
           ));
           wrapper.setState({ hoverDate });
-          deleteModifierFromRangeSpy.reset();
+          deleteModifierFromRangeSpy.resetHistory();
           wrapper.instance().onDayMouseLeave(today);
           const hoveredSpanCalls = getCallsByModifier(deleteModifierFromRangeSpy, 'hovered-span');
           expect(hoveredSpanCalls.length).to.equal(1);
@@ -1842,7 +1842,7 @@ describe('DayPickerRangeController', () => {
             />
           ));
           wrapper.setState({ hoverDate });
-          deleteModifierFromRangeSpy.reset();
+          deleteModifierFromRangeSpy.resetHistory();
           wrapper.instance().onDayMouseLeave(today);
           expect(deleteModifierFromRangeSpy.callCount).to.equal(1);
           expect(deleteModifierFromRangeSpy.getCall(0).args[1]).to.equal(hoverDate);
@@ -1868,7 +1868,7 @@ describe('DayPickerRangeController', () => {
               />
             ));
             wrapper.setState({ hoverDate: today });
-            deleteModifierFromRangeSpy.reset();
+            deleteModifierFromRangeSpy.resetHistory();
             wrapper.instance().onDayMouseLeave(startDate);
             const afterHoverStartCalls = getCallsByModifier(deleteModifierFromRangeSpy, 'after-hovered-start');
             expect(afterHoverStartCalls.length).to.equal(1);
@@ -1891,7 +1891,7 @@ describe('DayPickerRangeController', () => {
               />
             ));
             wrapper.setState({ hoverDate: today });
-            deleteModifierFromRangeSpy.reset();
+            deleteModifierFromRangeSpy.resetHistory();
             wrapper.instance().onDayMouseLeave(today);
             const afterHoverStartCalls = getCallsByModifier(deleteModifierFromRangeSpy, 'after-hovered-start');
             expect(afterHoverStartCalls.length).to.equal(0);
@@ -1911,7 +1911,7 @@ describe('DayPickerRangeController', () => {
               />
             ));
             wrapper.setState({ hoverDate: today });
-            deleteModifierFromRangeSpy.reset();
+            deleteModifierFromRangeSpy.resetHistory();
             wrapper.instance().onDayMouseLeave(today);
             const afterHoverStartCalls = getCallsByModifier(deleteModifierFromRangeSpy, 'after-hovered-start');
             expect(afterHoverStartCalls.length).to.equal(0);
@@ -1979,7 +1979,7 @@ describe('DayPickerRangeController', () => {
           onFocusChange={sinon.stub()}
         />
       ));
-      getModifiersSpy.reset();
+      getModifiersSpy.resetHistory();
       wrapper.instance().onPrevMonthClick();
       expect(getModifiersSpy.callCount).to.equal(1);
     });
@@ -2061,7 +2061,7 @@ describe('DayPickerRangeController', () => {
           onFocusChange={sinon.stub()}
         />
       ));
-      getModifiersSpy.reset();
+      getModifiersSpy.resetHistory();
       wrapper.instance().onNextMonthClick();
       expect(getModifiersSpy.callCount).to.equal(1);
     });
@@ -2182,7 +2182,7 @@ describe('DayPickerRangeController', () => {
             onDatesChange={sinon.stub()}
           />
         ));
-        isBlockedStub.reset();
+        isBlockedStub.resetHistory();
         isBlockedStub.returns(true).onCall(8).returns(false);
 
         const firstFocusableDay = wrapper.instance().getFirstFocusableDay(today);
@@ -2219,7 +2219,7 @@ describe('DayPickerRangeController', () => {
           onFocusChange={sinon.stub()}
         />
       ));
-      getModifiersForDaySpy.reset();
+      getModifiersForDaySpy.resetHistory();
       wrapper.instance().getModifiers(visibleDays);
 
       expect(getModifiersForDaySpy.callCount).to.equal(visibleDays[monthISO].length);
diff --git a/test/components/DayPickerSingleDateController_spec.jsx b/test/components/DayPickerSingleDateController_spec.jsx
index 81a950077f..7f4c08fb20 100644
--- a/test/components/DayPickerSingleDateController_spec.jsx
+++ b/test/components/DayPickerSingleDateController_spec.jsx
@@ -94,7 +94,7 @@ describe('DayPickerSingleDateController', () => {
           it('does not call isBlocked', () => {
             const isBlockedStub = sinon.stub(DayPickerSingleDateController.prototype, 'isBlocked');
             const wrapper = shallow(<DayPickerSingleDateController {...props} />);
-            isBlockedStub.reset();
+            isBlockedStub.resetHistory();
             wrapper.instance().componentWillReceiveProps({
               ...props,
             });
@@ -120,7 +120,7 @@ describe('DayPickerSingleDateController', () => {
             const isBlockedStub = sinon.stub(DayPickerSingleDateController.prototype, 'isBlocked');
             const wrapper = shallow(<DayPickerSingleDateController {...props} />);
             wrapper.setState({ visibleDays });
-            isBlockedStub.reset();
+            isBlockedStub.resetHistory();
             wrapper.instance().componentWillReceiveProps({
               ...props,
               focused: true,
@@ -620,7 +620,7 @@ describe('DayPickerSingleDateController', () => {
         wrapper.setState({
           hoverDate: null,
         });
-        addModifierSpy.reset();
+        addModifierSpy.resetHistory();
         wrapper.instance().onDayMouseEnter(today);
         expect(addModifierSpy.callCount).to.equal(1);
         expect(addModifierSpy.getCall(0).args[1]).to.equal(today);
@@ -638,7 +638,7 @@ describe('DayPickerSingleDateController', () => {
         wrapper.setState({
           hoverDate: today,
         });
-        deleteModifierSpy.reset();
+        deleteModifierSpy.resetHistory();
         wrapper.instance().onDayMouseEnter(moment().add(10, 'days'));
         expect(deleteModifierSpy.callCount).to.equal(1);
         expect(deleteModifierSpy.getCall(0).args[1]).to.equal(today);
@@ -670,7 +670,7 @@ describe('DayPickerSingleDateController', () => {
       wrapper.setState({
         hoverDate: today,
       });
-      deleteModifierSpy.reset();
+      deleteModifierSpy.resetHistory();
       wrapper.instance().onDayMouseLeave(today);
       expect(deleteModifierSpy.callCount).to.equal(1);
       expect(deleteModifierSpy.getCall(0).args[1]).to.equal(today);
@@ -736,7 +736,7 @@ describe('DayPickerSingleDateController', () => {
           onFocusChange={sinon.stub()}
         />
       ));
-      getModifiersSpy.reset();
+      getModifiersSpy.resetHistory();
       wrapper.instance().onPrevMonthClick();
       expect(getModifiersSpy.callCount).to.equal(1);
     });
@@ -818,7 +818,7 @@ describe('DayPickerSingleDateController', () => {
           onFocusChange={sinon.stub()}
         />
       ));
-      getModifiersSpy.reset();
+      getModifiersSpy.resetHistory();
       wrapper.instance().onNextMonthClick();
       expect(getModifiersSpy.callCount).to.equal(1);
     });
@@ -883,7 +883,7 @@ describe('DayPickerSingleDateController', () => {
           />
         ));
 
-        isBlockedStub.reset();
+        isBlockedStub.resetHistory();
         isBlockedStub.returns(true);
         isBlockedStub.onCall(8).returns(false);
         const firstFocusableDay = wrapper.instance().getFirstFocusableDay(today);
@@ -920,7 +920,7 @@ describe('DayPickerSingleDateController', () => {
           onFocusChange={sinon.stub()}
         />
       ));
-      getModifiersForDaySpy.reset();
+      getModifiersForDaySpy.resetHistory();
       wrapper.instance().getModifiers(visibleDays);
 
       expect(getModifiersForDaySpy.callCount).to.equal(visibleDays[monthISO].length);
diff --git a/test/components/DayPicker_spec.jsx b/test/components/DayPicker_spec.jsx
index 38bbb5cfb4..6a4776a722 100644
--- a/test/components/DayPicker_spec.jsx
+++ b/test/components/DayPicker_spec.jsx
@@ -460,7 +460,8 @@ describe('DayPicker', () => {
         const wrapper = shallow((
           <DayPicker getFirstFocusableDay={getFirstFocusableDayStub} />
         )).dive();
-        getFirstFocusableDayStub.reset(); // getFirstFocusableDay gets called in the constructor
+        // getFirstFocusableDay gets called in the constructor
+        getFirstFocusableDayStub.resetHistory();
 
         wrapper.instance().getFocusedDay();
         expect(getFirstFocusableDayStub.callCount).to.equal(1);
@@ -471,7 +472,8 @@ describe('DayPicker', () => {
         const wrapper = shallow((
           <DayPicker getFirstFocusableDay={getFirstFocusableDayStub} />
         )).dive();
-        getFirstFocusableDayStub.reset(); // getFirstFocusableDay gets called in the constructor
+        // getFirstFocusableDay gets called in the constructor
+        getFirstFocusableDayStub.resetHistory();
 
         wrapper.instance().getFocusedDay(today);
         expect(getFirstFocusableDayStub.getCall(0).args[0].isSame(today, 'day')).to.equal(true);
@@ -814,7 +816,7 @@ describe('DayPicker', () => {
         });
 
         afterEach(() => {
-          containerFocusStub.reset();
+          containerFocusStub.resetHistory();
         });
 
         describe('when focusedDate is not defined', () => {
diff --git a/test/tests.webpack.js b/test/tests.webpack.js
new file mode 100644
index 0000000000..68415cd397
--- /dev/null
+++ b/test/tests.webpack.js
@@ -0,0 +1,4 @@
+const requireAll = requireContext => requireContext.keys().forEach(requireContext);
+
+requireAll(require.context('./_helpers', true, /\.js$/));
+requireAll(require.context('./', true, /_spec$/));

From 89986dbe8e55ad816a1d4532b396e428345a6c1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joa=CC=83o=20Vieira?= <joaoguerravieira@gmail.com>
Date: Sun, 8 Apr 2018 01:40:40 +0100
Subject: [PATCH 167/618] Move mocha setup to mocha.opts. Fix coverage. Force
 browser tests.

---
 .travis.yml     | 1 -
 package.json    | 5 ++---
 test/mocha.opts | 1 +
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index d73f3cae0e..b9e1b8ac5a 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -38,4 +38,3 @@ matrix:
     - node_js: "9"
     - node_js: "7"
     - node_js: "iojs"
-    - env: KARMA=true TEST=false
diff --git a/package.json b/package.json
index 4ae87b0570..d87de6526e 100644
--- a/package.json
+++ b/package.json
@@ -12,14 +12,13 @@
     "build:css": "node scripts/buildCSS.js",
     "clean": "rimraf lib esm",
     "precover": "rimraf coverage && npm run react",
-    "cover": "cross-env NODE_ENV=test node --max-old-space-size=2048 $(which nyc) npm run mocha test",
+    "cover": "cross-env NODE_ENV=test node --max-old-space-size=2048 $(which nyc) mocha",
     "lint": "eslint --ext .js,.jsx src test",
-    "mocha": "mocha ./test/_helpers",
     "storybook:uninstall": "npm uninstall --no-save @storybook/react && rimraf node_modules/@storybook node_modules/react-modal node_modules/react-dom-factories",
     "react": "enzyme-adapter-react-install 16",
     "pretest": "npm run --silent lint",
     "pretests-only": "npm run react",
-    "tests-only": "npm run mocha --silent test/**/*_spec*",
+    "tests-only": "mocha",
     "pretests-karma": "npm run react",
     "tests-karma": "karma start",
     "test": "npm run tests-only",
diff --git a/test/mocha.opts b/test/mocha.opts
index 96fe9d50be..60f0c0cbd6 100644
--- a/test/mocha.opts
+++ b/test/mocha.opts
@@ -2,3 +2,4 @@
 --compilers js:babel-register,jsx:babel-register
 --require airbnb-js-shims
 --recursive
+test/_helpers test/**/*_spec*
\ No newline at end of file

From 900178187eb73417070b8342629cd272918ec71f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joa=CC=83o=20Vieira?= <joaoguerravieira@gmail.com>
Date: Sun, 8 Apr 2018 17:22:08 +0100
Subject: [PATCH 168/618] Add shallow appendToBody component prop specs.

---
 test/components/DateRangePicker_spec.jsx  | 11 +++++++++++
 test/components/SingleDatePicker_spec.jsx | 16 ++++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/test/components/DateRangePicker_spec.jsx b/test/components/DateRangePicker_spec.jsx
index 46f813a42b..f028c5a1b9 100644
--- a/test/components/DateRangePicker_spec.jsx
+++ b/test/components/DateRangePicker_spec.jsx
@@ -106,6 +106,17 @@ describe('DateRangePicker', () => {
       });
     });
 
+    describe('props.appendToBody', () => {
+      it('renders <DayPickerRangeController> inside <Portal>', () => {
+        const wrapper = shallow((
+          <DateRangePicker {...requiredProps} appendToBody focusedInput={START_DATE} />
+        )).dive();
+        const portal = wrapper.find(Portal);
+        expect(portal).to.have.length(1);
+        expect(portal.find(DayPickerRangeController)).to.have.length(1);
+      });
+    });
+
     describe('props.focusedInput', () => {
       it('renders <DayPickerRangeController> if props.focusedInput != null', () => {
         const wrapper = shallow((
diff --git a/test/components/SingleDatePicker_spec.jsx b/test/components/SingleDatePicker_spec.jsx
index 147e94b96b..b0ee27ed14 100644
--- a/test/components/SingleDatePicker_spec.jsx
+++ b/test/components/SingleDatePicker_spec.jsx
@@ -156,6 +156,22 @@ describe('SingleDatePicker', () => {
         });
       });
     });
+
+    describe('props.appendToBody', () => {
+      it('renders <DayPickerSingleDateController> inside <Portal>', () => {
+        const wrapper = shallow((
+          <SingleDatePicker
+            onDateChange={() => {}}
+            onFocusChange={() => {}}
+            appendToBody
+            focused
+          />
+        )).dive();
+        const portal = wrapper.find(Portal);
+        expect(portal).to.have.length(1);
+        expect(portal.find(DayPickerSingleDateController)).to.have.length(1);
+      });
+    });
   });
 
   describe('#onChange', () => {

From 068f07779da4c006a1a03ac8caebf3ee16b85fc1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joa=CC=83o=20Vieira?= <joaoguerravieira@gmail.com>
Date: Sun, 8 Apr 2018 17:30:36 +0100
Subject: [PATCH 169/618] Comment the disableScroll in the context of the
 component.

---
 src/components/DateRangePicker.jsx  | 4 ++++
 src/components/SingleDatePicker.jsx | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index ed36bda2b2..2524e772aa 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -258,6 +258,10 @@ class DateRangePicker extends React.Component {
   disableScroll() {
     if (!this.props.appendToBody && !this.props.disableScroll) return;
     if (!this.isOpened()) return;
+
+    // Disable scroll for every ancestor of this DateRangePicker up to the
+    // document level. This ensures the input and the picker never move. Other
+    // sibling elements or the picker itself can scroll.
     this.enableScroll = disableScroll(this.container);
   }
 
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index 8e8fcd716d..349ed4ee0b 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -290,6 +290,10 @@ class SingleDatePicker extends React.Component {
   disableScroll() {
     if (!this.props.appendToBody && !this.props.disableScroll) return;
     if (!this.props.focused) return;
+
+    // Disable scroll for every ancestor of this <SingleDatePicker> up to the
+    // document level. This ensures the input and the picker never move. Other
+    // sibling elements or the picker itself can scroll.
     this.enableScroll = disableScroll(this.container);
   }
 

From 7d6963530d27bf1dd37fe69db38218f911b5cd37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joa=CC=83o=20Vieira?= <joaoguerravieira@gmail.com>
Date: Sun, 8 Apr 2018 18:55:41 +0100
Subject: [PATCH 170/618] Add appendToBody lifecycle tests in browser.

---
 test/components/DateRangePicker_spec.jsx  | 51 +++++++++++++++++-
 test/components/SingleDatePicker_spec.jsx | 63 ++++++++++++++++++++---
 2 files changed, 106 insertions(+), 8 deletions(-)

diff --git a/test/components/DateRangePicker_spec.jsx b/test/components/DateRangePicker_spec.jsx
index f028c5a1b9..e22750b9ce 100644
--- a/test/components/DateRangePicker_spec.jsx
+++ b/test/components/DateRangePicker_spec.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import moment from 'moment';
 import { expect } from 'chai';
 import sinon from 'sinon-sandbox';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 import { Portal } from 'react-portal';
 
 import DateRangePicker, { PureDateRangePicker } from '../../src/components/DateRangePicker';
@@ -15,6 +15,8 @@ import {
   START_DATE,
 } from '../../src/constants';
 
+const describeIfWindow = typeof document === 'undefined' ? describe.skip : describe;
+
 const requiredProps = {
   onDatesChange: () => {},
   onFocusChange: () => {},
@@ -115,6 +117,53 @@ describe('DateRangePicker', () => {
         expect(portal).to.have.length(1);
         expect(portal.find(DayPickerRangeController)).to.have.length(1);
       });
+
+      describeIfWindow('mounted', () => {
+        let wrapper;
+        let instance;
+        let onCloseStub;
+
+        beforeEach(() => {
+          onCloseStub = sinon.stub();
+          wrapper = mount(shallow((
+            <DateRangePicker
+              {...requiredProps}
+              appendToBody
+              focusedInput={START_DATE}
+              onClose={onCloseStub}
+            />
+          )).get(0));
+          instance = wrapper.instance();
+        });
+
+        it('positions <DateRangePickerInputController> using top and transform CSS properties', () => {
+          const dayPickerEl = instance.dayPickerContainer;
+          expect(dayPickerEl.style.top).not.to.equal('');
+          expect(dayPickerEl.style.transform).not.to.equal('');
+        });
+
+        it('disables scroll', () => {
+          expect(instance.enableScroll).to.be.a('function');
+        });
+
+        it('ignores click events from inside picker', () => {
+          const event = { target: instance.dayPickerContainer };
+          instance.onOutsideClick(event);
+          expect(onCloseStub.callCount).to.equal(0);
+        });
+
+        it('enables scroll when closed', () => {
+          const enableScrollSpy = sinon.spy(instance, 'enableScroll');
+          wrapper.setProps({ focusedInput: null });
+          expect(enableScrollSpy.callCount).to.equal(1);
+        });
+
+        it('enables scroll when unmounted', () => {
+          const enableScrollSpy = sinon.spy(instance, 'enableScroll');
+          wrapper.unmount();
+          expect(enableScrollSpy.callCount).to.equal(1);
+        });
+      });
     });
 
     describe('props.focusedInput', () => {
diff --git a/test/components/SingleDatePicker_spec.jsx b/test/components/SingleDatePicker_spec.jsx
index b0ee27ed14..6a15e451b4 100644
--- a/test/components/SingleDatePicker_spec.jsx
+++ b/test/components/SingleDatePicker_spec.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { expect } from 'chai';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 import sinon from 'sinon-sandbox';
 import moment from 'moment';
 import { Portal } from 'react-portal';
@@ -12,6 +12,8 @@ import SingleDatePicker, { PureSingleDatePicker } from '../../src/components/Sin
 
 import isSameDay from '../../src/utils/isSameDay';
 
+const describeIfWindow = typeof document === 'undefined' ? describe.skip : describe;
+
 // Set to noon to mimic how days in the picker are configured internally
 const today = moment().startOf('day').hours(12);
 
@@ -158,19 +160,66 @@ describe('SingleDatePicker', () => {
     });
 
     describe('props.appendToBody', () => {
+      const requiredProps = {
+        onDateChange: () => {},
+        onFocusChange: () => {},
+      };
+
       it('renders <DayPickerSingleDateController> inside <Portal>', () => {
         const wrapper = shallow((
-          <SingleDatePicker
-            onDateChange={() => {}}
-            onFocusChange={() => {}}
-            appendToBody
-            focused
-          />
+          <SingleDatePicker {...requiredProps} appendToBody focused />
         )).dive();
         const portal = wrapper.find(Portal);
         expect(portal).to.have.length(1);
         expect(portal.find(DayPickerSingleDateController)).to.have.length(1);
       });
+
+      describeIfWindow('mounted', () => {
+        let wrapper;
+        let instance;
+        let onCloseStub;
+
+        beforeEach(() => {
+          onCloseStub = sinon.stub();
+          wrapper = mount(shallow((
+            <SingleDatePicker
+              {...requiredProps}
+              appendToBody
+              focused
+              onClose={onCloseStub}
+            />
+          )).get(0));
+          instance = wrapper.instance();
+        });
+
+        it('positions <DateRangePickerInputController> using top and transform CSS properties', () => {
+          const dayPickerEl = instance.dayPickerContainer;
+          expect(dayPickerEl.style.top).not.to.equal('');
+          expect(dayPickerEl.style.transform).not.to.equal('');
+        });
+
+        it('disables scroll', () => {
+          expect(instance.enableScroll).to.be.a('function');
+        });
+
+        it('ignores click events from inside picker', () => {
+          const event = { target: instance.dayPickerContainer };
+          instance.onClearFocus(event);
+          expect(onCloseStub.callCount).to.equal(0);
+        });
+
+        it('enables scroll when closed', () => {
+          const enableScrollSpy = sinon.spy(instance, 'enableScroll');
+          wrapper.setProps({ focused: false });
+          expect(enableScrollSpy.callCount).to.equal(1);
+        });
+
+        it('enables scroll when unmounted', () => {
+          const enableScrollSpy = sinon.spy(instance, 'enableScroll');
+          wrapper.unmount();
+          expect(enableScrollSpy.callCount).to.equal(1);
+        });
+      });
     });
   });
 

From 0a07a3e77e4e0408e1a7af7b8c29e36ef342f0bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joa=CC=83o=20Vieira?= <joaoguerravieira@gmail.com>
Date: Mon, 9 Apr 2018 11:26:26 +0100
Subject: [PATCH 171/618] Revert mocha setup. Only run browser entry point if
 in browser.

---
 karma.conf.js                                               | 2 +-
 package.json                                                | 5 +++--
 test/_helpers/ignoreSVGStrings.jsx                          | 6 ------
 test/browser-main.js                                        | 6 ++++++
 test/mocha.opts                                             | 1 -
 test/tests.webpack.js                                       | 4 ----
 .../{getActiveElement_spec.jsx => getActiveElement_spec.js} | 0
 test/utils/{getPhrase_spec.jsx => getPhrase_spec.js}        | 0
 8 files changed, 10 insertions(+), 14 deletions(-)
 delete mode 100644 test/_helpers/ignoreSVGStrings.jsx
 create mode 100644 test/browser-main.js
 delete mode 100644 test/tests.webpack.js
 rename test/utils/{getActiveElement_spec.jsx => getActiveElement_spec.js} (100%)
 rename test/utils/{getPhrase_spec.jsx => getPhrase_spec.js} (100%)

diff --git a/karma.conf.js b/karma.conf.js
index d511e1f5ca..31d3de8a5b 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -8,7 +8,7 @@ module.exports = (config) => {
 
     frameworks: ['mocha', 'sinon', 'chai'],
 
-    files: ['test/tests.webpack.js'],
+    files: ['test/browser-main.js'],
 
     webpack: {
       externals: {
diff --git a/package.json b/package.json
index d87de6526e..4c673d698a 100644
--- a/package.json
+++ b/package.json
@@ -12,13 +12,14 @@
     "build:css": "node scripts/buildCSS.js",
     "clean": "rimraf lib esm",
     "precover": "rimraf coverage && npm run react",
-    "cover": "cross-env NODE_ENV=test node --max-old-space-size=2048 $(which nyc) mocha",
+    "cover": "cross-env NODE_ENV=test node --max-old-space-size=2048 $(which nyc) npm run mocha test",
     "lint": "eslint --ext .js,.jsx src test",
+    "mocha": "mocha ./test/_helpers",
     "storybook:uninstall": "npm uninstall --no-save @storybook/react && rimraf node_modules/@storybook node_modules/react-modal node_modules/react-dom-factories",
     "react": "enzyme-adapter-react-install 16",
     "pretest": "npm run --silent lint",
     "pretests-only": "npm run react",
-    "tests-only": "mocha",
+    "tests-only": "npm run mocha --silent test",
     "pretests-karma": "npm run react",
     "tests-karma": "karma start",
     "test": "npm run tests-only",
diff --git a/test/_helpers/ignoreSVGStrings.jsx b/test/_helpers/ignoreSVGStrings.jsx
deleted file mode 100644
index 550e479e47..0000000000
--- a/test/_helpers/ignoreSVGStrings.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-// Don't load svg strings into tests
-require.extensions['.svg'] = (obj) => {
-  obj.exports = () => (
-    <svg>SVG_TEST_STUB</svg>
-  );
-};
diff --git a/test/browser-main.js b/test/browser-main.js
new file mode 100644
index 0000000000..7cbfda934e
--- /dev/null
+++ b/test/browser-main.js
@@ -0,0 +1,6 @@
+const requireAll = requireContext => requireContext.keys().forEach(requireContext);
+
+if (typeof window !== 'undefined') {
+  requireAll(require.context('./_helpers', true, /.jsx?$/));
+  requireAll(require.context('.', true, /.jsx?$/));
+}
diff --git a/test/mocha.opts b/test/mocha.opts
index 60f0c0cbd6..96fe9d50be 100644
--- a/test/mocha.opts
+++ b/test/mocha.opts
@@ -2,4 +2,3 @@
 --compilers js:babel-register,jsx:babel-register
 --require airbnb-js-shims
 --recursive
-test/_helpers test/**/*_spec*
\ No newline at end of file
diff --git a/test/tests.webpack.js b/test/tests.webpack.js
deleted file mode 100644
index 68415cd397..0000000000
--- a/test/tests.webpack.js
+++ /dev/null
@@ -1,4 +0,0 @@
-const requireAll = requireContext => requireContext.keys().forEach(requireContext);
-
-requireAll(require.context('./_helpers', true, /\.js$/));
-requireAll(require.context('./', true, /_spec$/));
diff --git a/test/utils/getActiveElement_spec.jsx b/test/utils/getActiveElement_spec.js
similarity index 100%
rename from test/utils/getActiveElement_spec.jsx
rename to test/utils/getActiveElement_spec.js
diff --git a/test/utils/getPhrase_spec.jsx b/test/utils/getPhrase_spec.js
similarity index 100%
rename from test/utils/getPhrase_spec.jsx
rename to test/utils/getPhrase_spec.js

From bec5af8895633e4623d5224ce1a65b6e22516bc7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joa=CC=83o=20Vieira?= <joaoguerravieira@gmail.com>
Date: Wed, 11 Apr 2018 01:09:08 +0100
Subject: [PATCH 172/618] Fix specs. Cannot assume scrollingElement overflow.

---
 test/utils/disableScroll_spec.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/test/utils/disableScroll_spec.js b/test/utils/disableScroll_spec.js
index 64d9a39816..8063b578fd 100644
--- a/test/utils/disableScroll_spec.js
+++ b/test/utils/disableScroll_spec.js
@@ -117,9 +117,7 @@ describeIfWindow('#disableScroll', () => {
 
       expect(scrollAncestorsOverflowY.get(parentScrollContainer)).to.equal('auto');
       expect(scrollAncestorsOverflowY.get(grandParentScrollContainer)).to.equal('auto');
-      // document is a special case - it doesn't have an explicit overflow property set,
-      // but scrolls by default.
-      expect(scrollAncestorsOverflowY.get(document.documentElement)).to.equal('');
+      expect(scrollAncestorsOverflowY.get(document.documentElement)).to.be.a('string');
     });
   });
 

From 9a628587666f3ddb68435bc4f79971078f877c1f Mon Sep 17 00:00:00 2001
From: andrew_hunt <andrew.hunt@airbnb.com>
Date: Mon, 2 Apr 2018 17:04:53 -0700
Subject: [PATCH 173/618] add verticalSpacing prop

---
 examples/DayPickerRangeControllerWrapper.jsx | 3 +++
 src/components/CalendarMonth.jsx             | 6 +++++-
 src/components/CalendarMonthGrid.jsx         | 4 ++++
 src/components/DayPicker.jsx                 | 4 ++++
 src/components/DayPickerRangeController.jsx  | 4 ++++
 stories/DayPickerRangeController.js          | 8 ++++++++
 6 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/examples/DayPickerRangeControllerWrapper.jsx b/examples/DayPickerRangeControllerWrapper.jsx
index 16199d3c0c..51da1dbb84 100644
--- a/examples/DayPickerRangeControllerWrapper.jsx
+++ b/examples/DayPickerRangeControllerWrapper.jsx
@@ -20,6 +20,7 @@ const propTypes = forbidExtraProps({
   initialEndDate: momentPropTypes.momentObj,
   startDateOffset: PropTypes.func,
   endDateOffset: PropTypes.func,
+  showInputs: PropTypes.bool,
 
   keepOpenOnDateSelect: PropTypes.bool,
   minimumNights: PropTypes.number,
@@ -57,6 +58,7 @@ const defaultProps = {
   initialEndDate: null,
   startDateOffset: undefined,
   endDateOffset: undefined,
+  showInputs: false,
 
   // day presentation and interaction related props
   renderCalendarDay: undefined,
@@ -121,6 +123,7 @@ class DayPickerRangeControllerWrapper extends React.Component {
       'autoFocusEndDate',
       'initialStartDate',
       'initialEndDate',
+      'showInputs',
     ]);
 
     const startDateString = startDate && startDate.format('YYYY-MM-DD');
diff --git a/src/components/CalendarMonth.jsx b/src/components/CalendarMonth.jsx
index 6a2a1bf8ff..98478fe8c4 100644
--- a/src/components/CalendarMonth.jsx
+++ b/src/components/CalendarMonth.jsx
@@ -161,6 +161,7 @@ class CalendarMonth extends React.Component {
       styles,
       phrases,
       dayAriaLabelFormat,
+      verticalSpacing,
     } = this.props;
 
     const { weeks } = this.state;
@@ -189,7 +190,10 @@ class CalendarMonth extends React.Component {
         </div>
 
         <table
-          {...css(styles.CalendarMonth_table)}
+          {...css(
+            !verticalSpacing && styles.CalendarMonth_table,
+            { borderSpacing: `0px ${verticalSpacing}px` },
+          )}
           role="presentation"
         >
           <tbody ref={this.setGridRef}>
diff --git a/src/components/CalendarMonthGrid.jsx b/src/components/CalendarMonthGrid.jsx
index 5c13583227..eab1f0ca02 100644
--- a/src/components/CalendarMonthGrid.jsx
+++ b/src/components/CalendarMonthGrid.jsx
@@ -52,6 +52,7 @@ const propTypes = forbidExtraProps({
   setCalendarMonthHeights: PropTypes.func,
   isRTL: PropTypes.bool,
   transitionDuration: nonNegativeInteger,
+  verticalSpacing: PropTypes.number,
 
   // i18n
   monthFormat: PropTypes.string,
@@ -82,6 +83,7 @@ const defaultProps = {
   setCalendarMonthHeights() {},
   isRTL: false,
   transitionDuration: 200,
+  verticalSpacing: undefined,
 
   // i18n
   monthFormat: 'MMMM YYYY', // english locale
@@ -246,6 +248,7 @@ class CalendarMonthGrid extends React.Component {
       phrases,
       dayAriaLabelFormat,
       transitionDuration,
+      verticalSpacing,
     } = this.props;
 
     const { months } = this.state;
@@ -325,6 +328,7 @@ class CalendarMonthGrid extends React.Component {
                 phrases={phrases}
                 setMonthHeight={(height) => { this.setMonthHeight(height, i); }}
                 dayAriaLabelFormat={dayAriaLabelFormat}
+                verticalSpacing={verticalSpacing}
               />
             </div>
           );
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index db1a50042b..e0e4248d54 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -66,6 +66,7 @@ const propTypes = forbidExtraProps({
   verticalHeight: nonNegativeInteger,
   noBorder: PropTypes.bool,
   transitionDuration: nonNegativeInteger,
+  verticalSpacing: PropTypes.number,
 
   // navigation props
   navPrev: PropTypes.node,
@@ -116,6 +117,7 @@ export const defaultProps = {
   verticalHeight: null,
   noBorder: false,
   transitionDuration: undefined,
+  verticalSpacing: undefined,
 
   // navigation props
   navPrev: null,
@@ -753,6 +755,7 @@ class DayPicker extends React.Component {
       dayAriaLabelFormat,
       noBorder,
       transitionDuration,
+      verticalSpacing,
     } = this.props;
 
     const isHorizontal = this.isHorizontal();
@@ -910,6 +913,7 @@ class DayPicker extends React.Component {
                   isRTL={isRTL}
                   dayAriaLabelFormat={dayAriaLabelFormat}
                   transitionDuration={transitionDuration}
+                  verticalSpacing={verticalSpacing}
                 />
                 {verticalScrollable && this.renderNavigation()}
               </div>
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index b8a047b71c..e6485c008f 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -68,6 +68,7 @@ const propTypes = forbidExtraProps({
   hideKeyboardShortcutsPanel: PropTypes.bool,
   daySize: nonNegativeInteger,
   noBorder: PropTypes.bool,
+  verticalSpacing: PropTypes.number,
 
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
@@ -140,6 +141,7 @@ const defaultProps = {
   verticalHeight: null,
   noBorder: false,
   transitionDuration: undefined,
+  verticalSpacing: undefined,
 
   // accessibility
   onBlur() {},
@@ -1002,6 +1004,7 @@ export default class DayPickerRangeController extends React.Component {
       verticalHeight,
       noBorder,
       transitionDuration,
+      verticalSpacing,
     } = this.props;
 
     const { currentMonth, phrases, visibleDays } = this.state;
@@ -1043,6 +1046,7 @@ export default class DayPickerRangeController extends React.Component {
         weekDayFormat={weekDayFormat}
         dayAriaLabelFormat={dayAriaLabelFormat}
         verticalHeight={verticalHeight}
+        verticalSpacing={verticalSpacing}
         noBorder={noBorder}
         transitionDuration={transitionDuration}
       />
diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
index 657e78c57b..7a509db35d 100644
--- a/stories/DayPickerRangeController.js
+++ b/stories/DayPickerRangeController.js
@@ -278,4 +278,12 @@ storiesOf('DayPickerRangeController', module)
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
       transitionDuration={0}
     />
+  ))
+  .addWithInfo('with vertical spacing applied', () => (
+    <DayPickerRangeControllerWrapper
+      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
+      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
+      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
+      verticalSpacing={16}
+    />
   ));

From c7ec725e6a53511402a20363638d6e152bc4ec31 Mon Sep 17 00:00:00 2001
From: andrew_hunt <andrew.hunt@airbnb.com>
Date: Mon, 2 Apr 2018 17:36:14 -0700
Subject: [PATCH 174/618] address comments

---
 src/components/CalendarMonth.jsx            | 13 ++++++++++---
 src/components/CalendarMonthGrid.jsx        |  8 ++++----
 src/components/DayPicker.jsx                |  8 ++++----
 src/components/DayPickerRangeController.jsx |  8 ++++----
 stories/DayPickerRangeController.js         |  2 +-
 5 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/components/CalendarMonth.jsx b/src/components/CalendarMonth.jsx
index 98478fe8c4..486f92b4ce 100644
--- a/src/components/CalendarMonth.jsx
+++ b/src/components/CalendarMonth.jsx
@@ -45,6 +45,7 @@ const propTypes = forbidExtraProps({
   renderDayContents: PropTypes.func,
   firstDayOfWeek: DayOfWeekShape,
   setMonthHeight: PropTypes.func,
+  verticalBorderSpacing: nonNegativeInteger,
 
   focusedDate: momentPropTypes.momentObj, // indicates focusable day
   isFocused: PropTypes.bool, // indicates whether or not to move focus to focusable day
@@ -78,6 +79,7 @@ const defaultProps = {
   monthFormat: 'MMMM YYYY', // english locale
   phrases: CalendarDayPhrases,
   dayAriaLabelFormat: undefined,
+  verticalBorderSpacing: undefined,
 };
 
 class CalendarMonth extends React.Component {
@@ -161,7 +163,7 @@ class CalendarMonth extends React.Component {
       styles,
       phrases,
       dayAriaLabelFormat,
-      verticalSpacing,
+      verticalBorderSpacing,
     } = this.props;
 
     const { weeks } = this.state;
@@ -191,8 +193,9 @@ class CalendarMonth extends React.Component {
 
         <table
           {...css(
-            !verticalSpacing && styles.CalendarMonth_table,
-            { borderSpacing: `0px ${verticalSpacing}px` },
+            !verticalBorderSpacing && styles.CalendarMonth_table,
+            verticalBorderSpacing && styles.CalendarMonth_verticalSpacing,
+            verticalBorderSpacing && { borderSpacing: `0px ${verticalBorderSpacing}px` },
           )}
           role="presentation"
         >
@@ -240,6 +243,10 @@ export default withStyles(({ reactDates: { color, font, spacing } }) => ({
     borderSpacing: 0,
   },
 
+  CalendarMonth_verticalSpacing: {
+    borderCollapse: 'separate',
+  },
+
   CalendarMonth_caption: {
     color: color.text,
     fontSize: font.captionSize,
diff --git a/src/components/CalendarMonthGrid.jsx b/src/components/CalendarMonthGrid.jsx
index eab1f0ca02..6e64fd71bb 100644
--- a/src/components/CalendarMonthGrid.jsx
+++ b/src/components/CalendarMonthGrid.jsx
@@ -52,7 +52,7 @@ const propTypes = forbidExtraProps({
   setCalendarMonthHeights: PropTypes.func,
   isRTL: PropTypes.bool,
   transitionDuration: nonNegativeInteger,
-  verticalSpacing: PropTypes.number,
+  verticalBorderSpacing: nonNegativeInteger,
 
   // i18n
   monthFormat: PropTypes.string,
@@ -83,7 +83,7 @@ const defaultProps = {
   setCalendarMonthHeights() {},
   isRTL: false,
   transitionDuration: 200,
-  verticalSpacing: undefined,
+  verticalBorderSpacing: undefined,
 
   // i18n
   monthFormat: 'MMMM YYYY', // english locale
@@ -248,7 +248,7 @@ class CalendarMonthGrid extends React.Component {
       phrases,
       dayAriaLabelFormat,
       transitionDuration,
-      verticalSpacing,
+      verticalBorderSpacing,
     } = this.props;
 
     const { months } = this.state;
@@ -328,7 +328,7 @@ class CalendarMonthGrid extends React.Component {
                 phrases={phrases}
                 setMonthHeight={(height) => { this.setMonthHeight(height, i); }}
                 dayAriaLabelFormat={dayAriaLabelFormat}
-                verticalSpacing={verticalSpacing}
+                verticalBorderSpacing={verticalBorderSpacing}
               />
             </div>
           );
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index e0e4248d54..53c020e6ab 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -66,7 +66,7 @@ const propTypes = forbidExtraProps({
   verticalHeight: nonNegativeInteger,
   noBorder: PropTypes.bool,
   transitionDuration: nonNegativeInteger,
-  verticalSpacing: PropTypes.number,
+  verticalBorderSpacing: nonNegativeInteger,
 
   // navigation props
   navPrev: PropTypes.node,
@@ -117,7 +117,7 @@ export const defaultProps = {
   verticalHeight: null,
   noBorder: false,
   transitionDuration: undefined,
-  verticalSpacing: undefined,
+  verticalBorderSpacing: undefined,
 
   // navigation props
   navPrev: null,
@@ -755,7 +755,7 @@ class DayPicker extends React.Component {
       dayAriaLabelFormat,
       noBorder,
       transitionDuration,
-      verticalSpacing,
+      verticalBorderSpacing,
     } = this.props;
 
     const isHorizontal = this.isHorizontal();
@@ -913,7 +913,7 @@ class DayPicker extends React.Component {
                   isRTL={isRTL}
                   dayAriaLabelFormat={dayAriaLabelFormat}
                   transitionDuration={transitionDuration}
-                  verticalSpacing={verticalSpacing}
+                  verticalBorderSpacing={verticalBorderSpacing}
                 />
                 {verticalScrollable && this.renderNavigation()}
               </div>
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index e6485c008f..d6ed60d056 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -68,7 +68,7 @@ const propTypes = forbidExtraProps({
   hideKeyboardShortcutsPanel: PropTypes.bool,
   daySize: nonNegativeInteger,
   noBorder: PropTypes.bool,
-  verticalSpacing: PropTypes.number,
+  verticalBorderSpacing: nonNegativeInteger,
 
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
@@ -141,7 +141,7 @@ const defaultProps = {
   verticalHeight: null,
   noBorder: false,
   transitionDuration: undefined,
-  verticalSpacing: undefined,
+  verticalBorderSpacing: undefined,
 
   // accessibility
   onBlur() {},
@@ -1004,7 +1004,7 @@ export default class DayPickerRangeController extends React.Component {
       verticalHeight,
       noBorder,
       transitionDuration,
-      verticalSpacing,
+      verticalBorderSpacing,
     } = this.props;
 
     const { currentMonth, phrases, visibleDays } = this.state;
@@ -1046,7 +1046,7 @@ export default class DayPickerRangeController extends React.Component {
         weekDayFormat={weekDayFormat}
         dayAriaLabelFormat={dayAriaLabelFormat}
         verticalHeight={verticalHeight}
-        verticalSpacing={verticalSpacing}
+        verticalBorderSpacing={verticalBorderSpacing}
         noBorder={noBorder}
         transitionDuration={transitionDuration}
       />
diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
index 7a509db35d..f3444302f3 100644
--- a/stories/DayPickerRangeController.js
+++ b/stories/DayPickerRangeController.js
@@ -284,6 +284,6 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      verticalSpacing={16}
+      verticalBorderSpacing={16}
     />
   ));

From 4157e98e697a4563b7b260d3edd628ad78a55716 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joa=CC=83o=20Vieira?= <joaoguerravieira@gmail.com>
Date: Thu, 12 Apr 2018 18:16:59 +0100
Subject: [PATCH 175/618] Use hardware-accelerated translate3d.

---
 src/utils/getDetachedContainerStyles.js       |  2 +-
 test/utils/getDetachedContainerStyles_spec.js | 12 ++++--------
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/utils/getDetachedContainerStyles.js b/src/utils/getDetachedContainerStyles.js
index 86ae1f70a7..976dff4d19 100644
--- a/src/utils/getDetachedContainerStyles.js
+++ b/src/utils/getDetachedContainerStyles.js
@@ -34,6 +34,6 @@ export default function getDetachedContainerStyles(openDirection, anchorDirectio
   }
 
   return {
-    transform: `translateX(${offsetX}px) translateY(${offsetY}px)`,
+    transform: `translate3d(${offsetX}px, ${offsetY}px, 0)`,
   };
 }
diff --git a/test/utils/getDetachedContainerStyles_spec.js b/test/utils/getDetachedContainerStyles_spec.js
index a251332aeb..27badd838f 100644
--- a/test/utils/getDetachedContainerStyles_spec.js
+++ b/test/utils/getDetachedContainerStyles_spec.js
@@ -32,8 +32,7 @@ describeIfNoWindow('#getDetachedContainerStyles', () => {
       describe('on down-left positioning', () => {
         it('returns translation from top-left of window to top-left of reference el', () => {
           const styles = getDetachedContainerStyles(OPEN_DOWN, ANCHOR_LEFT, referenceEl);
-          expect(styles.transform).to.have.string(`translateX(${referenceElRect.left}px)`);
-          expect(styles.transform).to.have.string(`translateY(${referenceElRect.top}px)`);
+          expect(styles.transform).to.equal(`translate3d(${referenceElRect.left}px, ${referenceElRect.top}px, 0)`);
         });
       });
 
@@ -41,8 +40,7 @@ describeIfNoWindow('#getDetachedContainerStyles', () => {
         it('returns translation from bottom-left of window to bottom-left of reference el', () => {
           const styles = getDetachedContainerStyles(OPEN_UP, ANCHOR_LEFT, referenceEl);
           const offsetY = -(windowHeight - referenceElRect.bottom);
-          expect(styles.transform).to.have.string(`translateX(${referenceElRect.left}px)`);
-          expect(styles.transform).to.have.string(`translateY(${offsetY}px)`);
+          expect(styles.transform).to.equal(`translate3d(${referenceElRect.left}px, ${offsetY}px, 0)`);
         });
       });
 
@@ -50,8 +48,7 @@ describeIfNoWindow('#getDetachedContainerStyles', () => {
         it('returns translation from top-right of window to top-right of reference el', () => {
           const styles = getDetachedContainerStyles(OPEN_DOWN, ANCHOR_RIGHT, referenceEl);
           const offsetX = -(windowWidth - referenceElRect.right);
-          expect(styles.transform).to.have.string(`translateX(${offsetX}px)`);
-          expect(styles.transform).to.have.string(`translateY(${referenceElRect.top}px)`);
+          expect(styles.transform).to.equal(`translate3d(${offsetX}px, ${referenceElRect.top}px, 0)`);
         });
       });
 
@@ -60,8 +57,7 @@ describeIfNoWindow('#getDetachedContainerStyles', () => {
           const styles = getDetachedContainerStyles(OPEN_UP, ANCHOR_RIGHT, referenceEl);
           const offsetX = -(windowWidth - referenceElRect.right);
           const offsetY = -(windowHeight - referenceElRect.bottom);
-          expect(styles.transform).to.have.string(`translateX(${offsetX}px)`);
-          expect(styles.transform).to.have.string(`translateY(${offsetY}px)`);
+          expect(styles.transform).to.equal(`translate3d(${offsetX}px, ${offsetY}px, 0)`);
         });
       });
     });

From 7218f44d6275c432cca4a9952221525214a4cb27 Mon Sep 17 00:00:00 2001
From: Comron Sattari <comron@gmail.com>
Date: Wed, 17 Jan 2018 15:39:29 -0800
Subject: [PATCH 176/618] Add keepFocusOnInput prop to maintain input focus
 even on touch devices

---
 test/components/DateRangePicker_spec.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/test/components/DateRangePicker_spec.jsx b/test/components/DateRangePicker_spec.jsx
index 9af0e7604c..12e34bdb25 100644
--- a/test/components/DateRangePicker_spec.jsx
+++ b/test/components/DateRangePicker_spec.jsx
@@ -378,6 +378,7 @@ describe('DateRangePicker', () => {
         const wrapper = shallow((
           <DateRangePicker
             {...requiredProps}
+            onDateChange={sinon.stub()}
             onFocusChange={sinon.stub()}
             keepFocusOnInput
           />
@@ -391,6 +392,7 @@ describe('DateRangePicker', () => {
         const wrapper = shallow((
           <DateRangePicker
             {...requiredProps}
+            onDateChange={sinon.stub()}
             onFocusChange={sinon.stub()}
             keepFocusOnInput
             withFullScreenPortal

From 5169d47ffd0054b3b7af6df9a77d7fc8f0b9516a Mon Sep 17 00:00:00 2001
From: Ali Orlando <aorlando@onshift.com>
Date: Thu, 18 Jan 2018 15:50:59 -0500
Subject: [PATCH 177/618]  Move focus to datepicker on readOnly input focus for
 DateRangePicker/SingleDatePicker

---
 src/components/DateRangePicker.jsx        |  6 +++-
 src/components/SingleDatePicker.jsx       |  6 +++-
 test/components/DateRangePicker_spec.jsx  | 17 ++++++++--
 test/components/SingleDatePicker_spec.jsx | 41 ++++++++++++++++++++++-
 4 files changed, 65 insertions(+), 5 deletions(-)

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 2524e772aa..72a1df5c37 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -204,6 +204,7 @@ class DateRangePicker extends React.Component {
   onDateRangePickerInputFocus(focusedInput) {
     const {
       onFocusChange,
+      readOnly,
       withPortal,
       withFullScreenPortal,
       keepFocusOnInput,
@@ -211,7 +212,10 @@ class DateRangePicker extends React.Component {
 
     if (focusedInput) {
       const withAnyPortal = withPortal || withFullScreenPortal;
-      const moveFocusToDayPicker = withAnyPortal || (this.isTouchDevice && !keepFocusOnInput);
+      const moveFocusToDayPicker =
+        withAnyPortal ||
+        (readOnly && !keepFocusOnInput) ||
+        (this.isTouchDevice && !keepFocusOnInput);
 
       if (moveFocusToDayPicker) {
         this.onDayPickerFocus();
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index 349ed4ee0b..905cdee22d 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -204,13 +204,17 @@ class SingleDatePicker extends React.Component {
     const {
       disabled,
       onFocusChange,
+      readOnly,
       withPortal,
       withFullScreenPortal,
       keepFocusOnInput,
     } = this.props;
 
     const withAnyPortal = withPortal || withFullScreenPortal;
-    const moveFocusToDayPicker = withAnyPortal || (this.isTouchDevice && !keepFocusOnInput);
+    const moveFocusToDayPicker =
+      withAnyPortal ||
+      (readOnly && !keepFocusOnInput) ||
+      (this.isTouchDevice && !keepFocusOnInput);
 
     if (moveFocusToDayPicker) {
       this.onDayPickerFocus();
diff --git a/test/components/DateRangePicker_spec.jsx b/test/components/DateRangePicker_spec.jsx
index 12e34bdb25..bdcd013b12 100644
--- a/test/components/DateRangePicker_spec.jsx
+++ b/test/components/DateRangePicker_spec.jsx
@@ -361,6 +361,19 @@ describe('DateRangePicker', () => {
         expect(onDayPickerFocusSpy.callCount).to.equal(1);
       });
 
+      it('calls onDayPickerFocus if focusedInput and readOnly', () => {
+        const wrapper = shallow((
+          <DateRangePicker
+            {...requiredProps}
+            onDatesChange={sinon.stub()}
+            onFocusChange={sinon.stub()}
+            readOnly
+          />
+        )).dive();
+        wrapper.instance().onDateRangePickerInputFocus(START_DATE);
+        expect(onDayPickerFocusSpy.callCount).to.equal(1);
+      });
+
       it('calls onDayPickerFocus if focusedInput and isTouchDevice', () => {
         const wrapper = shallow((
           <DateRangePicker
@@ -374,7 +387,7 @@ describe('DateRangePicker', () => {
         expect(onDayPickerFocusSpy.callCount).to.equal(1);
       });
 
-      it('calls onDayPickerBlur if focusedInput and !withPortal/!withFullScreenPortal and keepFocusOnInput', () => {
+      it('calls onDayPickerBlur if focusedInput and !withPortal/!withFullScreenPortal/!readOnly and keepFocusOnInput', () => {
         const wrapper = shallow((
           <DateRangePicker
             {...requiredProps}
@@ -402,7 +415,7 @@ describe('DateRangePicker', () => {
         expect(onDayPickerFocusSpy.callCount).to.equal(1);
       });
 
-      it('calls onDayPickerBlur if focusedInput and !withPortal/!withFullScreenPortal', () => {
+      it('calls onDayPickerBlur if focusedInput and !withPortal/!withFullScreenPortal/!readOnly', () => {
         const wrapper = shallow((
           <DateRangePicker
             {...requiredProps}
diff --git a/test/components/SingleDatePicker_spec.jsx b/test/components/SingleDatePicker_spec.jsx
index 6a15e451b4..1285bc3f0a 100644
--- a/test/components/SingleDatePicker_spec.jsx
+++ b/test/components/SingleDatePicker_spec.jsx
@@ -482,6 +482,18 @@ describe('SingleDatePicker', () => {
       expect(onDayPickerFocusSpy.callCount).to.equal(1);
     });
 
+    it('calls onDayPickerFocus if readOnly', () => {
+      const wrapper = shallow((
+        <SingleDatePicker
+          onDateChange={sinon.stub()}
+          onFocusChange={sinon.stub()}
+          readOnly
+        />
+      )).dive();
+      wrapper.instance().onFocus();
+      expect(onDayPickerFocusSpy.callCount).to.equal(1);
+    });
+
     it('calls onDayPickerFocus if isTouchDevice', () => {
       const wrapper = shallow((
         <SingleDatePicker
@@ -494,6 +506,19 @@ describe('SingleDatePicker', () => {
       expect(onDayPickerFocusSpy.callCount).to.equal(1);
     });
 
+    it('calls onDayPickerBlur if isTouchDevice and keepFocusOnInput', () => {
+      const wrapper = shallow((
+        <SingleDatePicker
+          onDateChange={sinon.stub()}
+          onFocusChange={sinon.stub()}
+          keepFocusOnInput
+        />
+      )).dive();
+      wrapper.instance().isTouchDevice = true;
+      wrapper.instance().onFocus();
+      expect(onDayPickerBlurSpy.callCount).to.equal(1);
+    });
+
     it('calls onDayPickerBlur if !withPortal/!withFullScreenPortal and keepFocusOnInput', () => {
       const wrapper = shallow((
         <SingleDatePicker
@@ -520,7 +545,21 @@ describe('SingleDatePicker', () => {
       expect(onDayPickerFocusSpy.callCount).to.equal(1);
     });
 
-    it('calls onDayPickerBlur if !withPortal/!withFullScreenPortal', () => {
+
+    it('calls onDayPickerFocus if readOnly and keepFocusOnInput', () => {
+      const wrapper = shallow((
+        <SingleDatePicker
+          onDateChange={sinon.stub()}
+          onFocusChange={sinon.stub()}
+          keepFocusOnInput
+          withFullScreenPortal
+        />
+      )).dive();
+      wrapper.instance().onFocus();
+      expect(onDayPickerFocusSpy.callCount).to.equal(1);
+    });
+
+    it('calls onDayPickerBlur if !withPortal/!withFullScreenPortal/!readOnly', () => {
       const wrapper = shallow((
         <SingleDatePicker
           onDateChange={sinon.stub()}

From c87467b569cbd06fed9ebd79bb58e7dab0b25d4d Mon Sep 17 00:00:00 2001
From: Macklin Underdown <macklinu@users.noreply.github.com>
Date: Tue, 25 Jul 2017 13:33:22 -0400
Subject: [PATCH 178/618] Call onOutsideClick in DayPickerSingleDateController

Resolves airbnb/react-dates#642
---
 .../DayPickerSingleDateController.jsx          | 18 +++---------------
 .../DayPickerSingleDateController_spec.jsx     | 13 -------------
 2 files changed, 3 insertions(+), 28 deletions(-)

diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 0f73a9372a..831bd39a58 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -30,7 +30,6 @@ import {
 } from '../constants';
 
 import DayPicker from './DayPicker';
-import OutsideClickHandler from './OutsideClickHandler';
 
 const propTypes = forbidExtraProps({
   date: momentPropTypes.momentObj,
@@ -596,6 +595,7 @@ export default class DayPickerSingleDateController extends React.Component {
       renderMonth,
       navPrev,
       navNext,
+      onOutsideClick,
       withPortal,
       focused,
       enableOutsideDays,
@@ -610,7 +610,6 @@ export default class DayPickerSingleDateController extends React.Component {
       isRTL,
       phrases,
       dayAriaLabelFormat,
-      onOutsideClick,
       onBlur,
       showKeyboardShortcuts,
       weekDayFormat,
@@ -621,7 +620,7 @@ export default class DayPickerSingleDateController extends React.Component {
 
     const { currentMonth, visibleDays } = this.state;
 
-    const dayPickerComponent = (
+    return (
       <DayPicker
         orientation={orientation}
         enableOutsideDays={enableOutsideDays}
@@ -638,6 +637,7 @@ export default class DayPickerSingleDateController extends React.Component {
         hideKeyboardShortcutsPanel={hideKeyboardShortcutsPanel}
         initialVisibleMonth={() => currentMonth}
         firstDayOfWeek={firstDayOfWeek}
+        onOutsideClick={onOutsideClick}
         navPrev={navPrev}
         navNext={navNext}
         renderMonth={renderMonth}
@@ -659,18 +659,6 @@ export default class DayPickerSingleDateController extends React.Component {
         transitionDuration={transitionDuration}
       />
     );
-
-    if (onOutsideClick) {
-      return (
-        <OutsideClickHandler
-          onOutsideClick={onOutsideClick}
-        >
-          {dayPickerComponent}
-        </OutsideClickHandler>
-      );
-    }
-
-    return dayPickerComponent;
   }
 }
 
diff --git a/test/components/DayPickerSingleDateController_spec.jsx b/test/components/DayPickerSingleDateController_spec.jsx
index 7f4c08fb20..7e0cc67c7a 100644
--- a/test/components/DayPickerSingleDateController_spec.jsx
+++ b/test/components/DayPickerSingleDateController_spec.jsx
@@ -6,7 +6,6 @@ import moment from 'moment';
 
 import DayPicker from '../../src/components/DayPicker';
 import DayPickerSingleDateController from '../../src/components/DayPickerSingleDateController';
-import OutsideClickHandler from '../../src/components/OutsideClickHandler';
 
 import toISODateString from '../../src/utils/toISODateString';
 import toISOMonthString from '../../src/utils/toISOMonthString';
@@ -1430,16 +1429,4 @@ describe('DayPickerSingleDateController', () => {
       });
     });
   });
-
-  describe('onOutsideClick', () => {
-    it('should render OutsideClickHandler as it has onOutsideClick prop', () => {
-      const wrapper = shallow(<DayPickerSingleDateController onOutsideClick={() => null} />);
-      expect(wrapper.find(OutsideClickHandler)).to.have.lengthOf(1);
-    });
-
-    it('should NOT render OutsideClickHandler without onOutsideClick prop', () => {
-      const wrapper = shallow(<DayPickerSingleDateController />);
-      expect(wrapper.find(OutsideClickHandler)).to.have.lengthOf(0);
-    });
-  });
 });

From ebde07bd6530bbb6d24296b2a85694a5a2df7cb5 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Thu, 12 Apr 2018 12:58:55 -0700
Subject: [PATCH 179/618] Add verticalBorderSpacing to the DPSDC

---
 src/components/DayPickerSingleDateController.jsx | 4 ++++
 stories/DayPickerSingleDateController.js         | 9 +++++++++
 2 files changed, 13 insertions(+)

diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 831bd39a58..a194be422f 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -56,6 +56,7 @@ const propTypes = forbidExtraProps({
   daySize: nonNegativeInteger,
   verticalHeight: nonNegativeInteger,
   noBorder: PropTypes.bool,
+  verticalBorderSpacing: nonNegativeInteger,
   transitionDuration: nonNegativeInteger,
 
   navPrev: PropTypes.node,
@@ -108,6 +109,7 @@ const defaultProps = {
   daySize: DAY_SIZE,
   verticalHeight: null,
   noBorder: false,
+  verticalBorderSpacing: undefined,
   transitionDuration: undefined,
 
   navPrev: null,
@@ -616,6 +618,7 @@ export default class DayPickerSingleDateController extends React.Component {
       verticalHeight,
       noBorder,
       transitionDuration,
+      verticalBorderSpacing,
     } = this.props;
 
     const { currentMonth, visibleDays } = this.state;
@@ -657,6 +660,7 @@ export default class DayPickerSingleDateController extends React.Component {
         verticalHeight={verticalHeight}
         noBorder={noBorder}
         transitionDuration={transitionDuration}
+        verticalBorderSpacing={verticalBorderSpacing}
       />
     );
   }
diff --git a/stories/DayPickerSingleDateController.js b/stories/DayPickerSingleDateController.js
index f321bebbea..0b22b74e45 100644
--- a/stories/DayPickerSingleDateController.js
+++ b/stories/DayPickerSingleDateController.js
@@ -250,4 +250,13 @@ storiesOf('DayPickerSingleDateController', module)
       onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
       transitionDuration={0}
     />
+  ))
+  .addWithInfo('with vertical spacing applied', () => (
+    <DayPickerSingleDateControllerWrapper
+      onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
+      onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
+      onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
+      verticalBorderSpacing={16}
+    />
   ));
+

From 5acb932a93a4f99fbd2976f18600d6a8f84415ab Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Thu, 12 Apr 2018 13:27:31 -0700
Subject: [PATCH 180/618] Version 16.6.0

---
 CHANGELOG.md | 6 ++++++
 package.json | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fc98c49086..8137fdef28 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Change Log
 
+## 16.6.0
+- [new] Add `appendToBody`/`disableScroll` props ([#1069](https://github.com/airbnb/react-dates/pull/1069))
+- [fix] Address unexpected blur call ([#1107](https://github.com/airbnb/react-dates/pull/1107))
+- [new] Add `verticalBorderSpacing` prop to `DayPickerSingleDateController`/`DayPickerRangeController` ([#1096](https://github.com/airbnb/react-dates/pull/1096))
+- [fix] Move focus to `DayPicker` when readOnly is true ([#961](https://github.com/airbnb/react-dates/pull/961))
+
 ## 16.5.0
 - [new] Export `CustomizeableCalendarDay` default styles ([#1095](https://github.com/airbnb/react-dates/pull/1095))
 - [new] Allow selectively disabling either input in the DRP ([#](https://github.com/airbnb/react-dates/pull/606))
diff --git a/package.json b/package.json
index 4c673d698a..435c620b5d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "16.5.0",
+  "version": "16.6.0",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From db0c49bb64543a451b096cc6d9ffdc007d04ee56 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Thu, 12 Apr 2018 13:28:49 -0700
Subject: [PATCH 181/618] Remove ignoreSVGStrings reference

---
 scripts/buildCSS.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/scripts/buildCSS.js b/scripts/buildCSS.js
index bd83e854e7..15d12f9379 100644
--- a/scripts/buildCSS.js
+++ b/scripts/buildCSS.js
@@ -11,8 +11,6 @@ const registerCSSInterfaceWithDefaultTheme = require('../src/utils/registerCSSIn
 const args = process.argv.slice(2);
 const optimizeForProduction = args.includes('-o') || args.includes('--optimize');
 
-require('../test/_helpers/ignoreSVGStrings');
-
 registerMaxSpecificity(0);
 registerCSSInterfaceWithDefaultTheme();
 

From 083f1c0120e4fb14e8055c26a5f7927f11f1792b Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Fri, 13 Apr 2018 10:36:21 -0700
Subject: [PATCH 182/618] Patch onOutsideClick default value in the
 DayPickerSingleDateController

---
 src/components/DayPickerSingleDateController.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index a194be422f..45f05ccdfc 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -117,7 +117,7 @@ const defaultProps = {
 
   onPrevMonthClick() {},
   onNextMonthClick() {},
-  onOutsideClick: null,
+  onOutsideClick() {},
 
   renderCalendarDay: undefined,
   renderDayContents: null,

From 296e83305cc1c69a35d3ffc5b1cfb40d968daab9 Mon Sep 17 00:00:00 2001
From: Alex Wild <alex.j.wild@gmail.com>
Date: Thu, 12 Apr 2018 21:23:03 -0700
Subject: [PATCH 183/618] Fix selective disabling of DateRangePicker

---
 src/components/DateRangePickerInput.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index 84c1ad3523..ede07b17d1 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -201,8 +201,8 @@ function DateRangePickerInput({
       {calendarIcon}
     </button>
   );
-  const startDateDisabled = disabled === START_DATE || disabled;
-  const endDateDisabled = disabled === END_DATE || disabled;
+  const startDateDisabled = disabled === START_DATE || disabled === true;
+  const endDateDisabled = disabled === END_DATE || disabled === true;
 
   return (
     <div

From 8a75eedb1472d5fd0f112b1c83a3899aaacea712 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Fri, 13 Apr 2018 11:02:34 -0700
Subject: [PATCH 184/618] Add regression tests for disabled prop

---
 test/components/DateRangePickerInput_spec.jsx | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/test/components/DateRangePickerInput_spec.jsx b/test/components/DateRangePickerInput_spec.jsx
index ba43da7980..1e8ca505b6 100644
--- a/test/components/DateRangePickerInput_spec.jsx
+++ b/test/components/DateRangePickerInput_spec.jsx
@@ -3,6 +3,8 @@ import { shallow } from 'enzyme';
 import sinon from 'sinon-sandbox';
 import React from 'react';
 
+import { START_DATE, END_DATE } from '../../src/constants';
+
 import DateInput from '../../src/components/DateInput';
 import DateRangePickerInput from '../../src/components/DateRangePickerInput';
 
@@ -105,4 +107,43 @@ describe('DateRangePickerInput', () => {
       });
     });
   });
+
+  describe('props.disabled', () => {
+    describe('props.disabled=START_DATE', () => {
+      it('First DateInput gets disabled prop, second does not', () => {
+        const wrapper = shallow(<DateRangePickerInput disabled={START_DATE} />).dive();
+        const [startDateInput, endDateInput] = wrapper.find(DateInput);
+        expect(startDateInput.props.disabled).to.equal(true);
+        expect(endDateInput.props.disabled).to.equal(false);
+      });
+    });
+
+    describe('props.disabled=END_DATE', () => {
+      it('First DateInput gets disabled prop, second does not', () => {
+        const wrapper = shallow(<DateRangePickerInput disabled={END_DATE} />).dive();
+        const [startDateInput, endDateInput] = wrapper.find(DateInput);
+        expect(startDateInput.props.disabled).to.equal(false);
+        expect(endDateInput.props.disabled).to.equal(true);
+      });
+    });
+
+    describe('props.disabled=true', () => {
+      it('First DateInput gets disabled prop, second does not', () => {
+        const wrapper = shallow(<DateRangePickerInput disabled />).dive();
+        const [startDateInput, endDateInput] = wrapper.find(DateInput);
+        expect(startDateInput.props.disabled).to.equal(true);
+        expect(endDateInput.props.disabled).to.equal(true);
+      });
+    });
+
+
+    describe('props.disabled=false', () => {
+      it('First DateInput gets disabled prop, second does not', () => {
+        const wrapper = shallow(<DateRangePickerInput disabled={false} />).dive();
+        const [startDateInput, endDateInput] = wrapper.find(DateInput);
+        expect(startDateInput.props.disabled).to.equal(false);
+        expect(endDateInput.props.disabled).to.equal(false);
+      });
+    });
+  });
 });

From 13b733fe7d461e44cc68bef01d1b3398223ea207 Mon Sep 17 00:00:00 2001
From: Alex Wild <alex.j.wild@gmail.com>
Date: Fri, 13 Apr 2018 11:48:00 -0700
Subject: [PATCH 185/618] Add more regression tests for disabled prop

---
 .../DateRangePickerInputController_spec.jsx   | 126 +++++++++++++++---
 1 file changed, 110 insertions(+), 16 deletions(-)

diff --git a/test/components/DateRangePickerInputController_spec.jsx b/test/components/DateRangePickerInputController_spec.jsx
index 5d9c495c6e..0364b0f6d8 100644
--- a/test/components/DateRangePickerInputController_spec.jsx
+++ b/test/components/DateRangePickerInputController_spec.jsx
@@ -772,14 +772,61 @@ describe('DateRangePickerInputController', () => {
       expect(onFocusChangeStub.getCall(0).args[0]).to.equal(START_DATE);
     });
 
-    describe('props.disabled = true', () => {
-      it('does not call props.onFocusChange', () => {
-        const onFocusChangeStub = sinon.stub();
-        const wrapper = shallow((
-          <DateRangePickerInputController disabled onFocusChange={onFocusChangeStub} />
-        ));
-        wrapper.instance().onStartDateFocus();
-        expect(onFocusChangeStub).to.have.property('callCount', 0);
+    describe('props.disabled', () => {
+      describe('props.disabled=START_DATE', () => {
+        it('does not call props.onFocusChange', () => {
+          const onFocusChangeStub = sinon.stub();
+          const wrapper = shallow((
+            <DateRangePickerInputController
+              disabled={START_DATE}
+              onFocusChange={onFocusChangeStub}
+            />
+          ));
+          wrapper.instance().onStartDateFocus();
+          expect(onFocusChangeStub).to.have.property('callCount', 0);
+        });
+      });
+
+      describe('props.disabled=END_DATE', () => {
+        it('does call props.onFocusChange', () => {
+          const onFocusChangeStub = sinon.stub();
+          const wrapper = shallow((
+            <DateRangePickerInputController
+              disabled={END_DATE}
+              onFocusChange={onFocusChangeStub}
+            />
+          ));
+          wrapper.instance().onStartDateFocus();
+          expect(onFocusChangeStub).to.have.property('callCount', 1);
+        });
+      });
+
+      describe('props.disabled=true', () => {
+        it('does not call props.onFocusChange', () => {
+          const onFocusChangeStub = sinon.stub();
+          const wrapper = shallow((
+            <DateRangePickerInputController
+              disabled
+              onFocusChange={onFocusChangeStub}
+            />
+          ));
+          wrapper.instance().onStartDateFocus();
+          expect(onFocusChangeStub).to.have.property('callCount', 0);
+        });
+      });
+
+      describe('props.disabled=false', () => {
+        it('does call props.onFocusChange', () => {
+          const onFocusChangeStub = sinon.stub();
+          const wrapper = shallow((
+            <DateRangePickerInputController
+              disabled={false}
+              onFocusChange={onFocusChangeStub}
+            />
+          ));
+          wrapper.instance().onStartDateFocus();
+          expect(onFocusChangeStub).to.have.property('callCount', 1);
+        });
       });
     });
   });
@@ -840,14 +887,61 @@ describe('DateRangePickerInputController', () => {
       });
     });
 
-    describe('props.disabled = true', () => {
-      it('does not call props.onFocusChange', () => {
-        const onFocusChangeStub = sinon.stub();
-        const wrapper = shallow((
-          <DateRangePickerInputController disabled onFocusChange={onFocusChangeStub} />
-        ));
-        wrapper.instance().onEndDateFocus();
-        expect(onFocusChangeStub.callCount).to.equal(0);
+    describe('props.disabled', () => {
+      describe('props.disabled=START_DATE', () => {
+        it('does call props.onFocusChange', () => {
+          const onFocusChangeStub = sinon.stub();
+          const wrapper = shallow((
+            <DateRangePickerInputController
+              disabled={START_DATE}
+              onFocusChange={onFocusChangeStub}
+            />
+          ));
+          wrapper.instance().onEndDateFocus();
+          expect(onFocusChangeStub.callCount).to.equal(1);
+        });
+      });
+
+      describe('props.disabled=END_DATE', () => {
+        it('does not call props.onFocusChange', () => {
+          const onFocusChangeStub = sinon.stub();
+          const wrapper = shallow((
+            <DateRangePickerInputController
+              disabled={END_DATE}
+              onFocusChange={onFocusChangeStub}
+            />
+          ));
+          wrapper.instance().onEndDateFocus();
+          expect(onFocusChangeStub.callCount).to.equal(0);
+        });
+      });
+
+      describe('props.disabled=true', () => {
+        it('does not call props.onFocusChange', () => {
+          const onFocusChangeStub = sinon.stub();
+          const wrapper = shallow((
+            <DateRangePickerInputController
+              disabled
+              onFocusChange={onFocusChangeStub}
+            />
+          ));
+          wrapper.instance().onEndDateFocus();
+          expect(onFocusChangeStub.callCount).to.equal(0);
+        });
+      });
+
+      describe('props.disabled=false', () => {
+        it('does call props.onFocusChange', () => {
+          const onFocusChangeStub = sinon.stub();
+          const wrapper = shallow((
+            <DateRangePickerInputController
+              disabled={false}
+              onFocusChange={onFocusChangeStub}
+            />
+          ));
+          wrapper.instance().onEndDateFocus();
+          expect(onFocusChangeStub.callCount).to.equal(1);
+        });
       });
     });
   });

From 520633cbec4b86cf8abcc3c7855ebebe024909a8 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Fri, 13 Apr 2018 13:05:57 -0700
Subject: [PATCH 186/618] Version 16.6.1

---
 CHANGELOG.md | 4 ++++
 package.json | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8137fdef28..53681a73ff 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Change Log
 
+## 16.6.1
+- [fix] Fix selective disabling of the `DateRangePicker` ([#1116](https://github.com/airbnb/react-dates/pull/1116))
+- [fix] Fix `onOutsideClick` refactor ([#1115](https://github.com/airbnb/react-dates/pull/1115))
+
 ## 16.6.0
 - [new] Add `appendToBody`/`disableScroll` props ([#1069](https://github.com/airbnb/react-dates/pull/1069))
 - [fix] Address unexpected blur call ([#1107](https://github.com/airbnb/react-dates/pull/1107))
diff --git a/package.json b/package.json
index 435c620b5d..4f9828dbc3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "16.6.0",
+  "version": "16.6.1",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 0d2f78c17fe217e7064c324e4b7b28d08679bffe Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Mon, 30 Apr 2018 23:07:16 -0700
Subject: [PATCH 187/618] [Dev Deps] update `babel-plugin-istanbul`, `moment`,
 `eslint-plugin-import`, `sinon`, `node-sass`, `babel-core`, `aphrodite`,
 `@storybook/addon-info`, `@storybook/addon-links`,
 `@storybook/addon-actions`, `@storybook/addon-options`, `@storybook/react`

---
 package.json | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 4f9828dbc3..1b778badc0 100644
--- a/package.json
+++ b/package.json
@@ -51,19 +51,19 @@
   },
   "homepage": "https://github.com/airbnb/react-dates#readme",
   "devDependencies": {
-    "@storybook/addon-actions": "^3.3.15",
-    "@storybook/addon-info": "^3.3.15",
-    "@storybook/addon-links": "^3.3.15",
-    "@storybook/addon-options": "^3.3.15",
-    "@storybook/react": "^3.3.15",
+    "@storybook/addon-actions": "^3.4.3",
+    "@storybook/addon-info": "^3.4.3",
+    "@storybook/addon-links": "^3.4.3",
+    "@storybook/addon-options": "^3.4.3",
+    "@storybook/react": "^3.4.3",
     "airbnb-js-shims": "^1.4.1",
-    "aphrodite": "^2.1.0",
+    "aphrodite": "^2.2.0",
     "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
+    "babel-core": "^6.26.3",
     "babel-loader": "^7.1.4",
     "babel-plugin-inline-react-svg": "^0.5.2",
     "babel-plugin-inline-svg": "^1.0.0",
-    "babel-plugin-istanbul": "^4.1.5",
+    "babel-plugin-istanbul": "^4.1.6",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-replace-object-assign": "^1.0.0",
     "babel-preset-airbnb": "^2.4.0",
@@ -76,7 +76,7 @@
     "enzyme-adapter-react-helper": "^1.2.3",
     "eslint": "^4.19.1",
     "eslint-config-airbnb": "^16.1.0",
-    "eslint-plugin-import": "^2.9.0",
+    "eslint-plugin-import": "^2.11.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-react": "^7.7.0",
     "eslint-plugin-react-with-styles": "^2.0.0",
@@ -92,9 +92,9 @@
     "karma-webpack": "^2.0.9",
     "mocha": "^3.5.3",
     "mocha-wrap": "^2.1.1",
-    "moment": "^2.21.0",
+    "moment": "^2.22.1",
     "moment-jalaali": "^0.7.2",
-    "node-sass": "^4.7.2",
+    "node-sass": "^4.9.0",
     "nyc": "^11.6.0",
     "raw-loader": "^0.5.1",
     "react": "^0.14 || ^15.5.4 || ^16.1.1",
@@ -104,7 +104,7 @@
     "rimraf": "^2.6.2",
     "safe-publish-latest": "^1.1.1",
     "sass-loader": "^6.0.7",
-    "sinon": "^4.4.8",
+    "sinon": "^5.0.1",
     "sinon-sandbox": "^1.0.2",
     "style-loader": "^0.20.3",
     "webpack": "^2.6.1"

From b9bebdb1f7246c597ea87409443450b529c4a66d Mon Sep 17 00:00:00 2001
From: "greenkeeper[bot]" <greenkeeper[bot]@users.noreply.github.com>
Date: Tue, 1 May 2018 22:07:58 +0000
Subject: [PATCH 188/618] chore(package): update coveralls to version 3.0.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 1b778badc0..6de14dc276 100644
--- a/package.json
+++ b/package.json
@@ -70,7 +70,7 @@
     "babel-register": "^6.26.0",
     "chai": "^4.1.2",
     "clean-css": "^4.1.11",
-    "coveralls": "^2.13.3",
+    "coveralls": "^3.0.1",
     "cross-env": "^5.1.4",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-helper": "^1.2.3",

From 39a82750d1d4acb57d4a08dd9ac2220203a88d45 Mon Sep 17 00:00:00 2001
From: Robert Ferentz <RobiFerentz@gmail.com>
Date: Thu, 3 May 2018 12:16:42 +0300
Subject: [PATCH 189/618] Rounding values for translate3d to fix font blur in
 date picker on chrome. #1118

---
 src/utils/getDetachedContainerStyles.js       | 2 +-
 test/utils/getDetachedContainerStyles_spec.js | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/utils/getDetachedContainerStyles.js b/src/utils/getDetachedContainerStyles.js
index 976dff4d19..90cf42f528 100644
--- a/src/utils/getDetachedContainerStyles.js
+++ b/src/utils/getDetachedContainerStyles.js
@@ -34,6 +34,6 @@ export default function getDetachedContainerStyles(openDirection, anchorDirectio
   }
 
   return {
-    transform: `translate3d(${offsetX}px, ${offsetY}px, 0)`,
+    transform: `translate3d(${Math.round(offsetX)}px, ${Math.round(offsetY)}px, 0)`,
   };
 }
diff --git a/test/utils/getDetachedContainerStyles_spec.js b/test/utils/getDetachedContainerStyles_spec.js
index 27badd838f..ccfb52d2f9 100644
--- a/test/utils/getDetachedContainerStyles_spec.js
+++ b/test/utils/getDetachedContainerStyles_spec.js
@@ -32,7 +32,7 @@ describeIfNoWindow('#getDetachedContainerStyles', () => {
       describe('on down-left positioning', () => {
         it('returns translation from top-left of window to top-left of reference el', () => {
           const styles = getDetachedContainerStyles(OPEN_DOWN, ANCHOR_LEFT, referenceEl);
-          expect(styles.transform).to.equal(`translate3d(${referenceElRect.left}px, ${referenceElRect.top}px, 0)`);
+          expect(styles.transform).to.equal(`translate3d(${Math.round(referenceElRect.left)}px, ${Math.round(referenceElRect.top)}px, 0)`);
         });
       });
 
@@ -40,7 +40,7 @@ describeIfNoWindow('#getDetachedContainerStyles', () => {
         it('returns translation from bottom-left of window to bottom-left of reference el', () => {
           const styles = getDetachedContainerStyles(OPEN_UP, ANCHOR_LEFT, referenceEl);
           const offsetY = -(windowHeight - referenceElRect.bottom);
-          expect(styles.transform).to.equal(`translate3d(${referenceElRect.left}px, ${offsetY}px, 0)`);
+          expect(styles.transform).to.equal(`translate3d(${Math.round(referenceElRect.left)}px, ${Math.round(offsetY)}px, 0)`);
         });
       });
 
@@ -48,7 +48,7 @@ describeIfNoWindow('#getDetachedContainerStyles', () => {
         it('returns translation from top-right of window to top-right of reference el', () => {
           const styles = getDetachedContainerStyles(OPEN_DOWN, ANCHOR_RIGHT, referenceEl);
           const offsetX = -(windowWidth - referenceElRect.right);
-          expect(styles.transform).to.equal(`translate3d(${offsetX}px, ${referenceElRect.top}px, 0)`);
+          expect(styles.transform).to.equal(`translate3d(${Math.round(offsetX)}px, ${Math.round(referenceElRect.top)}px, 0)`);
         });
       });
 
@@ -57,7 +57,7 @@ describeIfNoWindow('#getDetachedContainerStyles', () => {
           const styles = getDetachedContainerStyles(OPEN_UP, ANCHOR_RIGHT, referenceEl);
           const offsetX = -(windowWidth - referenceElRect.right);
           const offsetY = -(windowHeight - referenceElRect.bottom);
-          expect(styles.transform).to.equal(`translate3d(${offsetX}px, ${offsetY}px, 0)`);
+          expect(styles.transform).to.equal(`translate3d(${Math.round(offsetX)}px, ${Math.round(offsetY)}px, 0)`);
         });
       });
     });

From 382848aee0e0e947c07ba5716c292a05f93aca46 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Thu, 3 May 2018 18:22:40 -0700
Subject: [PATCH 190/618] Force input border radius to be 0

---
 src/components/DateInput.jsx | 1 +
 src/theme/DefaultTheme.js    | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
index 6056e05867..d9be063108 100644
--- a/src/components/DateInput.jsx
+++ b/src/components/DateInput.jsx
@@ -316,6 +316,7 @@ export default withStyles(({
     borderRight: border.input.borderRight,
     borderBottom: border.input.borderBottom,
     borderLeft: border.input.borderLeft,
+    borderRadius: border.input.borderRadius,
   },
 
   DateInput_input__small: {
diff --git a/src/theme/DefaultTheme.js b/src/theme/DefaultTheme.js
index 81216ac40a..76fe5a3bfa 100644
--- a/src/theme/DefaultTheme.js
+++ b/src/theme/DefaultTheme.js
@@ -40,6 +40,7 @@ export default {
         borderLeftFocused: 0,
         borderBottomFocused: `2px solid ${core.primary_dark}`,
         borderRightFocused: 0,
+        borderRadius: 0,
       },
     },
 

From 7b6b04bc31c2cd5e9366d90b1800a5cc4753e389 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <maja.wichrowska@airbnb.com>
Date: Thu, 1 Feb 2018 13:56:05 -0800
Subject: [PATCH 191/618] The min-nights modifiers should get cleared according
 to the previous prop value not the new one

---
 src/components/DayPickerRangeController.jsx   | 26 +++++++++------
 .../DayPickerRangeController_spec.jsx         | 33 ++++++++++++++++++-
 2 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index d6ed60d056..cc0c76f756 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -345,27 +345,34 @@ export default class DayPickerRangeController extends React.Component {
       modifiers = this.addModifierToRange(modifiers, startSpan, endSpan, 'after-hovered-start');
     }
 
-    if (minimumNights > 0 || minimumNights !== prevMinimumNights) {
-      if (didFocusChange || didStartDateChange) {
+    if (prevMinimumNights > 0) {
+      if (didFocusChange || didStartDateChange || minimumNights !== prevMinimumNights) {
         const startSpan = prevStartDate || this.today;
         modifiers = this.deleteModifierFromRange(
           modifiers,
           startSpan,
-          startSpan.clone().add(minimumNights, 'days'),
+          startSpan.clone().add(prevMinimumNights, 'days'),
           'blocked-minimum-nights',
         );
-      }
 
-      if (startDate && focusedInput === END_DATE) {
-        modifiers = this.addModifierToRange(
+        modifiers = this.deleteModifierFromRange(
           modifiers,
-          startDate,
-          startDate.clone().add(minimumNights, 'days'),
-          'blocked-minimum-nights',
+          startSpan,
+          startSpan.clone().add(prevMinimumNights, 'days'),
+          'blocked',
         );
       }
     }
 
+    if (minimumNights > 0 && startDate && focusedInput === END_DATE) {
+      modifiers = this.addModifierToRange(
+        modifiers,
+        startDate,
+        startDate.clone().add(minimumNights, 'days'),
+        'blocked-minimum-nights',
+      );
+    }
+
     if (didFocusChange || recomputePropModifiers) {
       values(visibleDays).forEach((days) => {
         Object.keys(days).forEach((day) => {
@@ -834,7 +841,6 @@ export default class DayPickerRangeController extends React.Component {
   deleteModifier(updatedDays, day, modifier) {
     const { numberOfMonths: numberOfVisibleMonths, enableOutsideDays, orientation } = this.props;
     const { currentMonth: firstVisibleMonth, visibleDays } = this.state;
-
     let currentMonth = firstVisibleMonth;
     let numberOfMonths = numberOfVisibleMonths;
     if (orientation !== VERTICAL_SCROLLABLE) {
diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index fc47f5cb12..eeb6f34df4 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -696,6 +696,31 @@ describe('DayPickerRangeController', () => {
               expect(isSameDay(minimumNightsCalls[0].args[2], minimumNightsEndSpan)).to.equal(true);
             });
           });
+
+          describe('minimumNights changed', () => {
+            it('calls deleteModifierFromRange with start date + old min nights, and `blocked-minimum-nights`', () => {
+              const deleteModifierFromRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifierFromRange');
+              const startDate = today;
+              const focusedInput = START_DATE;
+              const minimumNights = 5;
+              const wrapper = shallow(<DayPickerRangeController
+                startDate={startDate}
+                focusedInput={focusedInput}
+                minimumNights={minimumNights}
+              />);
+              wrapper.instance().componentWillReceiveProps({
+                ...props,
+                focusedInput,
+                startDate,
+                minimumNights: 1,
+              });
+              const minimumNightsEndSpan = startDate.clone().add(minimumNights, 'days');
+              const minimumNightsCalls = getCallsByModifier(deleteModifierFromRangeSpy, 'blocked-minimum-nights');
+              expect(minimumNightsCalls.length).to.equal(1);
+              expect(minimumNightsCalls[0].args[1]).to.equal(startDate);
+              expect(isSameDay(minimumNightsCalls[0].args[2], minimumNightsEndSpan)).to.equal(true);
+            });
+          });
         });
 
         describe('new startDate exists', () => {
@@ -798,10 +823,16 @@ describe('DayPickerRangeController', () => {
           it('if isBlocked(day) is false calls deleteModifier with day and `blocked`', () => {
             const deleteModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifier');
             sinon.stub(DayPickerRangeController.prototype, 'isBlocked').returns(false);
-            const wrapper = shallow(<DayPickerRangeController {...props} />);
+            const wrapper = shallow((
+              <DayPickerRangeController
+                {...props}
+                minimumNights={0}
+              />
+            ));
             wrapper.setState({ visibleDays });
             wrapper.instance().componentWillReceiveProps({
               ...props,
+              minimumNights: 0,
               focusedInput: END_DATE,
             });
             const blockedCalendarCalls = getCallsByModifier(deleteModifierSpy, 'blocked');

From 3d8b0547baf3716a7635f0062c2e392e7e722139 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Thu, 3 May 2018 20:39:07 -0700
Subject: [PATCH 192/618] Tweak default react-dates styling

---
 src/components/DateInput.jsx            |  1 +
 src/components/DateRangePickerInput.jsx | 47 +++++++++----------------
 src/theme/DefaultTheme.js               | 27 +++++++-------
 3 files changed, 32 insertions(+), 43 deletions(-)

diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
index d9be063108..879a75da05 100644
--- a/src/components/DateInput.jsx
+++ b/src/components/DateInput.jsx
@@ -322,6 +322,7 @@ export default withStyles(({
   DateInput_input__small: {
     fontSize: font.input.size_small,
     lineHeight: font.input.lineHeight_small,
+    letterSpacing: font.input.letterSpacing_small,
     padding: `${spacing.displayTextPaddingVertical_small}px ${spacing.displayTextPaddingHorizontal_small}px`,
     paddingTop: spacing.displayTextPaddingTop_small,
     paddingBottom: spacing.displayTextPaddingBottom_small,
diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index ede07b17d1..6e20d0ff64 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -164,23 +164,11 @@ function DateRangePickerInput({
   const calendarIcon = customInputIcon || (
     <CalendarIcon {...css(styles.DateRangePickerInput_calendarIcon_svg)} />
   );
-  const arrowIcon = customArrowIcon || (isRTL
-    ? (
-      <LeftArrow
-        {...css(
-          styles.DateRangePickerInput_arrow_svg,
-          small && styles.DateRangePickerInput_arrow_svg__small,
-        )}
-      />
-    ) : (
-      <RightArrow
-        {...css(
-          styles.DateRangePickerInput_arrow_svg,
-          small && styles.DateRangePickerInput_arrow_svg__small,
-        )}
-      />
-    )
-  );
+
+  let arrowIcon = customArrowIcon || <RightArrow {...css(styles.DateRangePickerInput_arrow_svg)} />;
+  if (isRTL) arrowIcon = <LeftArrow {...css(styles.DateRangePickerInput_arrow_svg)} />;
+  if (small) arrowIcon = '-';
+
   const closeIcon = customCloseIcon || (
     <CloseButton
       {...css(
@@ -239,13 +227,15 @@ function DateRangePickerInput({
         regular={regular}
       />
 
-      <div
-        {...css(styles.DateRangePickerInput_arrow)}
-        aria-hidden="true"
-        role="presentation"
-      >
-        {arrowIcon}
-      </div>
+      {
+        <div
+          {...css(styles.DateRangePickerInput_arrow)}
+          aria-hidden="true"
+          role="presentation"
+        >
+          {arrowIcon}
+        </div>
+      }
 
       <DateInput
         id={endDateId}
@@ -306,7 +296,8 @@ export default withStyles(({ reactDates: { color, sizing } }) => ({
   },
 
   DateRangePickerInput__withBorder: {
-    border: `1px solid ${color.core.grayLighter}`,
+    border: `1px solid ${color.border}`,
+    borderRadius: 2,
   },
 
   DateRangePickerInput__rtl: {
@@ -324,6 +315,7 @@ export default withStyles(({ reactDates: { color, sizing } }) => ({
   DateRangePickerInput_arrow: {
     display: 'inline-block',
     verticalAlign: 'middle',
+    color: color.text,
   },
 
   DateRangePickerInput_arrow_svg: {
@@ -333,11 +325,6 @@ export default withStyles(({ reactDates: { color, sizing } }) => ({
     width: sizing.arrowWidth,
   },
 
-  DateRangePickerInput_arrow_svg__small: {
-    height: sizing.arrowWidth_small,
-    width: sizing.arrowWidth_small,
-  },
-
   DateRangePickerInput_clearDates: {
     background: 'none',
     border: 0,
diff --git a/src/theme/DefaultTheme.js b/src/theme/DefaultTheme.js
index 76fe5a3bfa..780e1a263c 100644
--- a/src/theme/DefaultTheme.js
+++ b/src/theme/DefaultTheme.js
@@ -1,6 +1,6 @@
 const core = {
   white: '#fff',
-  gray: '#565a5c',
+  gray: '#484848',
   grayLight: '#82888a',
   grayLighter: '#cacccd',
   grayLightest: '#f2f2f2',
@@ -52,6 +52,7 @@ export default {
       background: core.white,
       backgroundDark: '#f2f2f2',
       backgroundFocused: core.white,
+      border: 'rgb(219, 219, 219)',
       text: core.gray,
       textDisabled: core.border,
       textFocused: '#007a87',
@@ -151,34 +152,34 @@ export default {
       captionPaddingBottom: 37,
       inputPadding: 0,
       displayTextPaddingVertical: undefined,
-      displayTextPaddingTop: 13,
-      displayTextPaddingBottom: 11,
+      displayTextPaddingTop: 11,
+      displayTextPaddingBottom: 9,
       displayTextPaddingHorizontal: undefined,
-      displayTextPaddingLeft: 12,
-      displayTextPaddingRight: 12,
+      displayTextPaddingLeft: 11,
+      displayTextPaddingRight: 11,
       displayTextPaddingVertical_small: undefined,
-      displayTextPaddingTop_small: 8,
-      displayTextPaddingBottom_small: 6,
+      displayTextPaddingTop_small: 7,
+      displayTextPaddingBottom_small: 5,
       displayTextPaddingHorizontal_small: undefined,
-      displayTextPaddingLeft_small: 8,
-      displayTextPaddingRight_small: 8,
+      displayTextPaddingLeft_small: 7,
+      displayTextPaddingRight_small: 7,
     },
 
     sizing: {
       inputWidth: 130,
-      inputWidth_small: 90,
+      inputWidth_small: 97,
       arrowWidth: 24,
-      arrowWidth_small: 19,
     },
 
     font: {
       size: 14,
       captionSize: 18,
       input: {
-        size: 18,
+        size: 19,
         lineHeight: '24px',
-        size_small: 14,
+        size_small: 15,
         lineHeight_small: '18px',
+        letterSpacing_small: '0.2px',
         styleDisabled: 'italic',
       },
     },

From bd98395d3f19c9b17f9385d80067628311504166 Mon Sep 17 00:00:00 2001
From: andrew_hunt <andrew.hunt@airbnb.com>
Date: Mon, 7 May 2018 14:51:39 -0700
Subject: [PATCH 193/618] make nav buttons optional

---
 examples/DayPickerRangeControllerWrapper.jsx |  2 +-
 src/components/DayPicker.jsx                 |  7 +++++++
 src/components/DayPickerRangeController.jsx  |  4 ++++
 stories/DayPickerRangeController.js          | 20 +++++++++++++++++++-
 4 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/examples/DayPickerRangeControllerWrapper.jsx b/examples/DayPickerRangeControllerWrapper.jsx
index 51da1dbb84..283ab46e19 100644
--- a/examples/DayPickerRangeControllerWrapper.jsx
+++ b/examples/DayPickerRangeControllerWrapper.jsx
@@ -130,7 +130,7 @@ class DayPickerRangeControllerWrapper extends React.Component {
     const endDateString = endDate && endDate.format('YYYY-MM-DD');
 
     return (
-      <div>
+      <div style={{ height: '100%' }}>
         {showInputs &&
           <div style={{ marginBottom: 16 }}>
             <input type="text" name="start date" value={startDateString} readOnly />
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index a0aefe0d8a..d5480470a2 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -71,6 +71,7 @@ const propTypes = forbidExtraProps({
   // navigation props
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
+  noNavButtons: PropTypes.bool,
   onPrevMonthClick: PropTypes.func,
   onNextMonthClick: PropTypes.func,
   onMultiplyScrollableMonths: PropTypes.func, // VERTICAL_SCROLLABLE daypickers only
@@ -122,6 +123,7 @@ export const defaultProps = {
   // navigation props
   navPrev: null,
   navNext: null,
+  noNavButtons: false,
   onPrevMonthClick() {},
   onNextMonthClick() {},
   onMultiplyScrollableMonths() {},
@@ -639,11 +641,16 @@ class DayPicker extends React.Component {
     const {
       navPrev,
       navNext,
+      noNavButtons,
       orientation,
       phrases,
       isRTL,
     } = this.props;
 
+    if (noNavButtons) {
+      return null;
+    }
+
     let onNextMonthClick;
     if (orientation === VERTICAL_SCROLLABLE) {
       onNextMonthClick = this.multiplyScrollableMonths;
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index cc0c76f756..fc72252724 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -72,6 +72,7 @@ const propTypes = forbidExtraProps({
 
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
+  noNavButtons: PropTypes.bool,
 
   onPrevMonthClick: PropTypes.func,
   onNextMonthClick: PropTypes.func,
@@ -128,6 +129,7 @@ const defaultProps = {
 
   navPrev: null,
   navNext: null,
+  noNavButtons: false,
 
   onPrevMonthClick() {},
   onNextMonthClick() {},
@@ -990,6 +992,7 @@ export default class DayPickerRangeController extends React.Component {
       renderMonth,
       navPrev,
       navNext,
+      noNavButtons,
       onOutsideClick,
       withPortal,
       enableOutsideDays,
@@ -1037,6 +1040,7 @@ export default class DayPickerRangeController extends React.Component {
         onOutsideClick={onOutsideClick}
         navPrev={navPrev}
         navNext={navNext}
+        noNavButtons={noNavButtons}
         renderCalendarDay={renderCalendarDay}
         renderDayContents={renderDayContents}
         renderCalendarInfo={renderCalendarInfo}
diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
index f3444302f3..6d3ea8be29 100644
--- a/stories/DayPickerRangeController.js
+++ b/stories/DayPickerRangeController.js
@@ -7,7 +7,7 @@ import InfoPanelDecorator, { monospace } from './InfoPanelDecorator';
 import isSameDay from '../src/utils/isSameDay';
 import isInclusivelyAfterDay from '../src/utils/isInclusivelyAfterDay';
 
-import { VERTICAL_ORIENTATION } from '../src/constants';
+import { VERTICAL_ORIENTATION, VERTICAL_SCROLLABLE } from '../src/constants';
 
 import DayPickerRangeControllerWrapper from '../examples/DayPickerRangeControllerWrapper';
 
@@ -164,6 +164,18 @@ storiesOf('DayPickerRangeController', module)
       orientation={VERTICAL_ORIENTATION}
     />
   ))
+  .addWithInfo('vertical scrollable', () => (
+    <div style={{ height: 300 }}>
+      <DayPickerRangeControllerWrapper
+        onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
+        onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
+        onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
+        orientation={VERTICAL_SCROLLABLE}
+        numberOfMonths={6}
+        verticalHeight={800}
+      />
+    </div>
+  ))
   .addWithInfo('with custom month navigation', () => (
     <DayPickerRangeControllerWrapper
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
@@ -286,4 +298,10 @@ storiesOf('DayPickerRangeController', module)
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
       verticalBorderSpacing={16}
     />
+  ))
+  .addWithInfo('with no nav buttons', () => (
+    <DayPickerRangeControllerWrapper
+      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
+      noNavButtons
+    />
   ));

From afd3e36141ffb59e3286ed2b10bd4f5ad748cf04 Mon Sep 17 00:00:00 2001
From: andrew_hunt <andrew.hunt@airbnb.com>
Date: Mon, 7 May 2018 17:49:11 -0700
Subject: [PATCH 194/618] [specs] adds specs

---
 test/components/DayPickerRangeController_spec.jsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index eeb6f34df4..2c479d59fa 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -7,6 +7,7 @@ import { shallow } from 'enzyme';
 import DayPickerRangeController from '../../src/components/DayPickerRangeController';
 
 import DayPicker from '../../src/components/DayPicker';
+import DayPickerNavigation from '../../src/components/DayPickerNavigation';
 
 import toISODateString from '../../src/utils/toISODateString';
 import toISOMonthString from '../../src/utils/toISOMonthString';
@@ -3215,5 +3216,17 @@ describe('DayPickerRangeController', () => {
         expect(wrapper.instance().isLastDayOfWeek(moment().startOf('week').add(1, 'day'))).to.equal(false);
       });
     });
+
+    describe('noNavButtons prop', () => {
+      it('renders navigation button', () => {
+        const wrapper = shallow(<DayPickerRangeController />).dive().dive();
+        expect(wrapper.find(DayPickerNavigation)).to.have.lengthOf(1);
+      });
+
+      it('does not render navigation button when noNavButtons prop applied', () => {
+        const wrapper = shallow(<DayPickerRangeController noNavButtons />).dive().dive();
+        expect(wrapper.find(DayPickerNavigation)).to.have.lengthOf(0);
+      });
+    });
   });
 });

From 0f63c16933766cc153be9bc5dbe9232e17f7d492 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Mon, 14 May 2018 18:53:31 +0200
Subject: [PATCH 195/618] Version 16.7.0

---
 CHANGELOG.md | 7 +++++++
 package.json | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 53681a73ff..43bd69488a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Change Log
 
+## 16.7.0
+- [fix] Force border-radius to be 0 on the inputs ([#1157](https://github.com/airbnb/react-dates/pull/1157))
+- [fix] Clear previous min nights modifiers, not current ([#994](https://github.com/airbnb/react-dates/pull/994))
+- [fix] Tweak default input styling ([#1158](https://github.com/airbnb/react-dates/pull/1158))
+- [fix] Round transform3d values to fix font blur ([#1155](https://github.com/airbnb/react-dates/pull/1155))
+- [new] Add `noNavButtons` prop ([#1160](https://github.com/airbnb/react-dates/pull/1160))
+
 ## 16.6.1
 - [fix] Fix selective disabling of the `DateRangePicker` ([#1116](https://github.com/airbnb/react-dates/pull/1116))
 - [fix] Fix `onOutsideClick` refactor ([#1115](https://github.com/airbnb/react-dates/pull/1115))
diff --git a/package.json b/package.json
index 1b778badc0..b1cf995269 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "16.6.1",
+  "version": "16.7.0",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 83314b5cc2074755af0f68866ad24fc3866981dd Mon Sep 17 00:00:00 2001
From: Hugo Giraudel <hugo.giraudel@gmail.com>
Date: Tue, 15 May 2018 18:33:20 +0200
Subject: [PATCH 196/618] Replace dumb quotes with smart quotes

---
 src/defaultPhrases.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/defaultPhrases.js b/src/defaultPhrases.js
index acc6a45ca0..f42dc9ffd5 100644
--- a/src/defaultPhrases.js
+++ b/src/defaultPhrases.js
@@ -25,8 +25,8 @@ const returnFocusToInput = 'Return to the date input field.';
 const keyboardNavigationInstructions = `Press the down arrow key to interact with the calendar and
   select a date. Press the question mark key to get the keyboard shortcuts for changing dates.`;
 
-const chooseAvailableStartDate = ({ date }) => `Choose ${date} as your check-in date. It's available.`;
-const chooseAvailableEndDate = ({ date }) => `Choose ${date} as your check-out date. It's available.`;
+const chooseAvailableStartDate = ({ date }) => `Choose ${date} as your check-in date. It’s available.`;
+const chooseAvailableEndDate = ({ date }) => `Choose ${date} as your check-out date. It’s available.`;
 const chooseAvailableDate = ({ date }) => date;
 const dateIsUnavailable = ({ date }) => `Not available. ${date}`;
 const dateIsSelected = ({ date }) => `Selected. ${date}`;

From 22ac5ab2a177d5361a40833f4e8bd735d27b642d Mon Sep 17 00:00:00 2001
From: Mukul Jain <jainmukul1996@gmail.com>
Date: Wed, 16 May 2018 01:04:23 +0530
Subject: [PATCH 197/618] update(doc) : updates prop description in SDP

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index a6bad6c47c..45bf2b097c 100644
--- a/README.md
+++ b/README.md
@@ -190,13 +190,13 @@ Here is the minimum *REQUIRED* setup you need to get the `SingleDatePicker` work
   onDateChange={date => this.setState({ date })} // PropTypes.func.isRequired
   focused={this.state.focused} // PropTypes.bool
   onFocusChange={({ focused }) => this.setState({ focused })} // PropTypes.func.isRequired
+  id="your_unique_id" // PropTypes.string.isRequired,
 />
 ```
 
 The following is a list of other *OPTIONAL* props you may provide to the `SingleDatePicker` to customize appearance and behavior to your heart's desire. All constants (indicated by `ALL_CAPS`) are provided as named exports in `react-dates/constants`. Please explore the [storybook](http://airbnb.io/react-dates/?selectedKind=SDP%20-%20Input%20Props&selectedStory=default&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel) for more information on what each of these props do.
 ```js
 // input related props
-id: PropTypes.string.isRequired,
 placeholder: PropTypes.string,
 disabled: PropTypes.bool,
 required: PropTypes.bool,

From c63b02f79e242fc0e8e5d2a42658899523ecc43a Mon Sep 17 00:00:00 2001
From: Hugo Giraudel <hugo.giraudel@gmail.com>
Date: Wed, 16 May 2018 10:07:15 +0200
Subject: [PATCH 198/618] Improve documentation on internationalisation

---
 README.md | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index a6bad6c47c..7704f4287b 100644
--- a/README.md
+++ b/README.md
@@ -309,11 +309,14 @@ The following is a list of other *OPTIONAL* props you may provide to the `DayPic
 
 ## Localization
 
-[Moment.js](http://momentjs.com) is a peer dependency of `react-dates`, so `react-dates` will use a single instance of `moment` which is imported in the user's project. To load a locale it is enough to invoke `moment.locale` in the component where `moment` is imported, with the [locale key](http://momentjs.com/docs/#/i18n/) of choice, e.g.:
-```
+[Moment.js](http://momentjs.com) is a peer dependency of `react-dates`. The latter then uses a single instance of `moment` which is imported in one’s project. Loading a locale is done by calling `moment.locale(..)` in the component where `moment` is imported, with the [locale key](http://momentjs.com/docs/#/i18n/) of choice. For instance:
+
+```js
 moment.locale('pl'); // Polish
 ```
 
+However, this only solves date localization. For complete internationalisation of the components, `react-dates` defines a certain amount of [user interface strings](https://github.com/airbnb/react-dates/blob/master/src/defaultPhrases.js) in English which can be changed through the `phrases` prop (explore the [storybook](http://airbnb.io/react-dates/?selectedKind=DateRangePicker%20%28DRP%29&selectedStory=non-english%20locale&full=0&addons=1&stories=1&panelRight=0&addonPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel) for examples). For accessibility and usability concerns, **all these UI elements should be translated**.
+
 ## Advanced
 
 `react-dates` no longer relies strictly on CSS, but rather relies on `react-with-styles` as an abstraction layer between how styles are applied and how they are written. The instructions above will get the project working out of the box, but there's a lot more customization that can be done.

From 671c2960625f975715e790538dd044ba2081fb57 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Wed, 16 May 2018 08:04:26 -0700
Subject: [PATCH 199/618] [docs] use US spelling

fix UK spelling from #1171
---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index f0b4477757..621c218627 100644
--- a/README.md
+++ b/README.md
@@ -315,7 +315,7 @@ The following is a list of other *OPTIONAL* props you may provide to the `DayPic
 moment.locale('pl'); // Polish
 ```
 
-However, this only solves date localization. For complete internationalisation of the components, `react-dates` defines a certain amount of [user interface strings](https://github.com/airbnb/react-dates/blob/master/src/defaultPhrases.js) in English which can be changed through the `phrases` prop (explore the [storybook](http://airbnb.io/react-dates/?selectedKind=DateRangePicker%20%28DRP%29&selectedStory=non-english%20locale&full=0&addons=1&stories=1&panelRight=0&addonPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel) for examples). For accessibility and usability concerns, **all these UI elements should be translated**.
+However, this only solves date localization. For complete internationalization of the components, `react-dates` defines a certain amount of [user interface strings](https://github.com/airbnb/react-dates/blob/master/src/defaultPhrases.js) in English which can be changed through the `phrases` prop (explore the [storybook](http://airbnb.io/react-dates/?selectedKind=DateRangePicker%20%28DRP%29&selectedStory=non-english%20locale&full=0&addons=1&stories=1&panelRight=0&addonPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel) for examples). For accessibility and usability concerns, **all these UI elements should be translated**.
 
 ## Advanced
 

From 7c05cfe69668f927067ce2b7dc6a0a66fa5ab854 Mon Sep 17 00:00:00 2001
From: Mukul Jain <jainmukul1996@gmail.com>
Date: Fri, 18 May 2018 14:59:02 +0530
Subject: [PATCH 200/618] fix(calendar-day-css): updates css to avoid movement
 in date integer on hovering outside dates

---
 src/components/CalendarDay.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/CalendarDay.jsx b/src/components/CalendarDay.jsx
index 1d55754444..dff18ed3a7 100644
--- a/src/components/CalendarDay.jsx
+++ b/src/components/CalendarDay.jsx
@@ -200,9 +200,12 @@ export default withStyles(({ reactDates: { color, font } }) => ({
 
   CalendarDay__outside: {
     border: 0,
-
     background: color.outside.backgroundColor,
     color: color.outside.color,
+
+    ':hover': {
+      border: 0,
+    },
   },
 
   CalendarDay__blocked_minimum_nights: {

From 228ff243b65e0260bc93bafd79548b5633a6ef00 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Tue, 29 May 2018 11:10:25 -0700
Subject: [PATCH 201/618] Add focusable="false" to dls-web svgs

Because SVGs are focusable by default in IE, we need to add this attribute to prevent this behavior
and specifically to prevent a double-focus on our interactive buttons.
---
 src/svg/arrow-left.svg   |  9 +--------
 src/svg/arrow-right.svg  |  9 +--------
 src/svg/calendar.svg     | 23 +----------------------
 src/svg/chevron-down.svg |  9 +--------
 src/svg/chevron-up.svg   |  9 +--------
 src/svg/close.svg        |  4 +---
 6 files changed, 6 insertions(+), 57 deletions(-)

diff --git a/src/svg/arrow-left.svg b/src/svg/arrow-left.svg
index 4b57a7cb7c..96cdee9bfd 100644
--- a/src/svg/arrow-left.svg
+++ b/src/svg/arrow-left.svg
@@ -1,8 +1 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
-<path d="M336.2,274.5L126.1,484.5h805.4c13,0,23,10,23,23c0,13-10,23-23,23H126.1l210.1,210.1c11,11,11,21,0,32c-5,5-10,7-16,7
-	s-11-2-16-7L55.1,523.6c-11-11-11-21,0-32l249.1-249.1C325.2,221.4,357.2,253.4,336.2,274.5z"/>
-</svg>
+<svg focusable="false" viewBox="0 0 1000 1000"><path d="M336.2 274.5l-210.1 210h805.4c13 0 23 10 23 23s-10 23-23 23H126.1l210.1 210.1c11 11 11 21 0 32-5 5-10 7-16 7s-11-2-16-7l-249.1-249c-11-11-11-21 0-32l249.1-249.1c21-21.1 53 10.9 32 32z"/></svg>
diff --git a/src/svg/arrow-right.svg b/src/svg/arrow-right.svg
index 21e0c512a9..765ffda559 100644
--- a/src/svg/arrow-right.svg
+++ b/src/svg/arrow-right.svg
@@ -1,8 +1 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
-<path d="M694.4,242.4l249.1,249.1c11,11,11,21,0,32L694.4,772.7c-5,5-10,7-16,7c-6,0-11-2-16-7c-11-11-11-21,0-32l210.1-210.1H67.1
-	c-13,0-23-10-23-23c0-13,10-23,23-23h805.4L662.4,274.5C641.4,253.4,673.4,221.4,694.4,242.4z"/>
-</svg>
+<svg focusable="false" viewBox="0 0 1000 1000"><path d="M694.4 242.4l249.1 249.1c11 11 11 21 0 32L694.4 772.7c-5 5-10 7-16 7s-11-2-16-7c-11-11-11-21 0-32l210.1-210.1H67.1c-13 0-23-10-23-23s10-23 23-23h805.4L662.4 274.5c-21-21.1 11-53.1 32-32.1z"/></svg>
diff --git a/src/svg/calendar.svg b/src/svg/calendar.svg
index 9e7ec13be0..35c4d101d5 100644
--- a/src/svg/calendar.svg
+++ b/src/svg/calendar.svg
@@ -1,22 +1 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
-  Exported from Font Awesome 4.7.0
-  Copyright Dave Gandy 2016. All rights reserved.
-  http://fontawesome.io/license/
--->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-   viewBox="0 0 1393.1 1500" style="enable-background:new 0 0 1393.1 1500;" xml:space="preserve">
-<path d="M107.2,1392.9h241.1v-241.1H107.2V1392.9z M401.9,1392.9h267.9v-241.1H401.9V1392.9z M107.2,1098.2h241.1V830.4H107.2
-  V1098.2z M401.9,1098.2h267.9V830.4H401.9V1098.2z M107.2,776.8h241.1V535.7H107.2V776.8z M723.4,1392.9h267.9v-241.1H723.4V1392.9z
-   M401.9,776.8h267.9V535.7H401.9V776.8z M1044.8,1392.9H1286v-241.1h-241.1V1392.9z M723.4,1098.2h267.9V830.4H723.4V1098.2z
-   M428.7,375V133.9c0-7.3-2.7-13.5-8-18.8c-5.3-5.3-11.6-8-18.8-8h-53.6c-7.3,0-13.5,2.7-18.8,8c-5.3,5.3-8,11.6-8,18.8V375
-  c0,7.3,2.7,13.5,8,18.8c5.3,5.3,11.6,8,18.8,8h53.6c7.3,0,13.5-2.7,18.8-8C426,388.5,428.7,382.3,428.7,375z M1044.8,1098.2H1286
-  V830.4h-241.1V1098.2z M723.4,776.8h267.9V535.7H723.4V776.8z M1044.8,776.8H1286V535.7h-241.1V776.8z M1071.6,375V133.9
-  c0-7.3-2.7-13.5-8-18.8c-5.3-5.3-11.6-8-18.8-8h-53.6c-7.3,0-13.5,2.7-18.8,8c-5.3,5.3-8,11.6-8,18.8V375c0,7.3,2.7,13.5,8,18.8
-  c5.3,5.3,11.6,8,18.8,8h53.6c7.3,0,13.5-2.7,18.8-8C1069,388.5,1071.6,382.3,1071.6,375z M1393.1,321.4v1071.4
-  c0,29-10.6,54.1-31.8,75.3c-21.2,21.2-46.3,31.8-75.3,31.8H107.2c-29,0-54.1-10.6-75.3-31.8C10.6,1447,0,1421.9,0,1392.9V321.4
-  c0-29,10.6-54.1,31.8-75.3s46.3-31.8,75.3-31.8h107.2v-80.4c0-36.8,13.1-68.4,39.3-94.6S311.4,0,348.3,0h53.6
-  c36.8,0,68.4,13.1,94.6,39.3c26.2,26.2,39.3,57.8,39.3,94.6v80.4h321.5v-80.4c0-36.8,13.1-68.4,39.3-94.6
-  C922.9,13.1,954.4,0,991.3,0h53.6c36.8,0,68.4,13.1,94.6,39.3s39.3,57.8,39.3,94.6v80.4H1286c29,0,54.1,10.6,75.3,31.8
-  C1382.5,267.3,1393.1,292.4,1393.1,321.4z"/>
-</svg>
+<svg focusable="false" viewBox="0 0 1393.1 1500"><path d="M107.2 1392.9h241.1v-241.1H107.2v241.1zm294.7 0h267.9v-241.1H401.9v241.1zm-294.7-294.7h241.1V830.4H107.2v267.8zm294.7 0h267.9V830.4H401.9v267.8zM107.2 776.8h241.1V535.7H107.2v241.1zm616.2 616.1h267.9v-241.1H723.4v241.1zM401.9 776.8h267.9V535.7H401.9v241.1zm642.9 616.1H1286v-241.1h-241.1v241.1zm-321.4-294.7h267.9V830.4H723.4v267.8zM428.7 375V133.9c0-7.3-2.7-13.5-8-18.8-5.3-5.3-11.6-8-18.8-8h-53.6c-7.3 0-13.5 2.7-18.8 8-5.3 5.3-8 11.6-8 18.8V375c0 7.3 2.7 13.5 8 18.8 5.3 5.3 11.6 8 18.8 8h53.6c7.3 0 13.5-2.7 18.8-8 5.3-5.3 8-11.5 8-18.8zm616.1 723.2H1286V830.4h-241.1v267.8zM723.4 776.8h267.9V535.7H723.4v241.1zm321.4 0H1286V535.7h-241.1v241.1zm26.8-401.8V133.9c0-7.3-2.7-13.5-8-18.8-5.3-5.3-11.6-8-18.8-8h-53.6c-7.3 0-13.5 2.7-18.8 8-5.3 5.3-8 11.6-8 18.8V375c0 7.3 2.7 13.5 8 18.8 5.3 5.3 11.6 8 18.8 8h53.6c7.3 0 13.5-2.7 18.8-8 5.4-5.3 8-11.5 8-18.8zm321.5-53.6v1071.4c0 29-10.6 54.1-31.8 75.3-21.2 21.2-46.3 31.8-75.3 31.8H107.2c-29 0-54.1-10.6-75.3-31.8C10.6 1447 0 1421.9 0 1392.9V321.4c0-29 10.6-54.1 31.8-75.3s46.3-31.8 75.3-31.8h107.2v-80.4c0-36.8 13.1-68.4 39.3-94.6S311.4 0 348.3 0h53.6c36.8 0 68.4 13.1 94.6 39.3 26.2 26.2 39.3 57.8 39.3 94.6v80.4h321.5v-80.4c0-36.8 13.1-68.4 39.3-94.6C922.9 13.1 954.4 0 991.3 0h53.6c36.8 0 68.4 13.1 94.6 39.3s39.3 57.8 39.3 94.6v80.4H1286c29 0 54.1 10.6 75.3 31.8 21.2 21.2 31.8 46.3 31.8 75.3z"/></svg>
diff --git a/src/svg/chevron-down.svg b/src/svg/chevron-down.svg
index 221748cf3f..4c864e2201 100644
--- a/src/svg/chevron-down.svg
+++ b/src/svg/chevron-down.svg
@@ -1,8 +1 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
-<path d="M967.5,288.5L514.3,740.7c-11,11-21,11-32,0L29.1,288.5c-4-5-6-11-6-16c0-13,10-23,23-23c6,0,11,2,15,7l437.2,436.2
-	l437.2-436.2c4-5,9-7,16-7c6,0,11,2,16,7C976.5,267.4,976.5,277.5,967.5,288.5z"/>
-</svg>
+<svg focusable="false" viewBox="0 0 1000 1000"><path d="M967.5 288.5L514.3 740.7c-11 11-21 11-32 0L29.1 288.5c-4-5-6-11-6-16 0-13 10-23 23-23 6 0 11 2 15 7l437.2 436.2 437.2-436.2c4-5 9-7 16-7 6 0 11 2 16 7 9 10.9 9 21 0 32z"/></svg>
diff --git a/src/svg/chevron-up.svg b/src/svg/chevron-up.svg
index 793982664d..ad1c1a6e82 100644
--- a/src/svg/chevron-up.svg
+++ b/src/svg/chevron-up.svg
@@ -1,8 +1 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
-<path d="M32.1,712.6l453.2-452.2c11-11,21-11,32,0l453.2,452.2c4,5,6,10,6,16c0,13-10,23-22,23c-7,0-12-2-16-7L501.3,308.5
-	L64.1,744.7c-4,5-9,7-15,7c-7,0-12-2-17-7C23.1,733.7,23.1,723.7,32.1,712.6z"/>
-</svg>
+<svg focusable="false" viewBox="0 0 1000 1000"><path d="M32.1 712.6l453.2-452.2c11-11 21-11 32 0l453.2 452.2c4 5 6 10 6 16 0 13-10 23-22 23-7 0-12-2-16-7L501.3 308.5 64.1 744.7c-4 5-9 7-15 7-7 0-12-2-17-7-9-11-9-21 0-32.1z"/></svg>
diff --git a/src/svg/close.svg b/src/svg/close.svg
index 03ee29add1..4c060b3b63 100644
--- a/src/svg/close.svg
+++ b/src/svg/close.svg
@@ -1,3 +1 @@
-<svg viewBox="0 0 12 12">
-  <path fill-rule="evenodd" d="M11.53,0.47 C11.237,0.177 10.762,0.177 10.469,0.47 L5.999,4.94 L1.529,0.47 C1.236,0.177 0.761,0.177 0.468,0.47 C0.175,0.763 0.175,1.238 0.468,1.531 L4.938,6.001 L0.468,10.471 C0.175,10.764 0.175,11.239 0.468,11.532 C0.761,11.825 1.236,11.825 1.529,11.532 L5.999,7.062 L10.469,11.532 C10.762,11.825 11.237,11.825 11.53,11.532 C11.823,11.239 11.823,10.764 11.53,10.471 L7.06,6.001 L11.53,1.531 C11.823,1.238 11.823,0.763 11.53,0.47 L11.53,0.47 Z"/>
-</svg>
+<svg focusable="false" viewBox="0 0 12 12"><path fill-rule="evenodd" d="M11.53.47a.75.75 0 0 0-1.061 0l-4.47 4.47L1.529.47A.75.75 0 1 0 .468 1.531l4.47 4.47-4.47 4.47a.75.75 0 1 0 1.061 1.061l4.47-4.47 4.47 4.47a.75.75 0 1 0 1.061-1.061l-4.47-4.47 4.47-4.47a.75.75 0 0 0 0-1.061z"/></svg>

From 57512210ec04006a7cab67947607681396eb8ed7 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Wed, 30 May 2018 09:16:07 -0700
Subject: [PATCH 202/618] Deprecate internal OutsideClickHandler in favor of
 react-outside-click-handler package

---
 .nycrc                                       |   2 +-
 package.json                                 |   1 +
 src/components/DateRangePicker.jsx           |   2 +-
 src/components/DayPicker.jsx                 |   2 +-
 src/components/OutsideClickHandler.jsx       |  67 +--------
 src/components/SingleDatePicker.jsx          |   2 +-
 test/components/OutsideClickHandler_spec.jsx | 135 -------------------
 7 files changed, 11 insertions(+), 200 deletions(-)
 delete mode 100644 test/components/OutsideClickHandler_spec.jsx

diff --git a/.nycrc b/.nycrc
index be4697c2d1..d1bfa85672 100644
--- a/.nycrc
+++ b/.nycrc
@@ -16,7 +16,7 @@
   "all": true,
   "check-coverage": true,
   "statements": 83,
-  "branches": 79,
+  "branches": 73,
   "lines": 83,
   "functions": 70,
   "sourceMap": false,
diff --git a/package.json b/package.json
index 593b604169..69267f878d 100644
--- a/package.json
+++ b/package.json
@@ -119,6 +119,7 @@
     "prop-types": "^15.6.0",
     "react-addons-shallow-compare": "^15.6.2",
     "react-moment-proptypes": "^1.5.0",
+    "react-outside-click-handler": "^1.0.0",
     "react-portal": "^4.1.2",
     "react-with-styles": "^3.1.0",
     "react-with-styles-interface-css": "^4.0.1"
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 72a1df5c37..d9a419658a 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -6,6 +6,7 @@ import { Portal } from 'react-portal';
 import { forbidExtraProps } from 'airbnb-prop-types';
 import { addEventListener } from 'consolidated-events';
 import isTouchDevice from 'is-touch-device';
+import OutsideClickHandler from 'react-outside-click-handler';
 
 import DateRangePickerShape from '../shapes/DateRangePickerShape';
 import { DateRangePickerPhrases } from '../defaultPhrases';
@@ -18,7 +19,6 @@ import disableScroll from '../utils/disableScroll';
 
 import DateRangePickerInputController from './DateRangePickerInputController';
 import DayPickerRangeController from './DayPickerRangeController';
-import OutsideClickHandler from './OutsideClickHandler';
 import CloseButton from './CloseButton';
 
 import {
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index d5480470a2..a8cd302225 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -7,11 +7,11 @@ import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 import moment from 'moment';
 import throttle from 'lodash/throttle';
 import isTouchDevice from 'is-touch-device';
+import OutsideClickHandler from 'react-outside-click-handler';
 
 import { DayPickerPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
 
-import OutsideClickHandler from './OutsideClickHandler';
 import CalendarMonthGrid from './CalendarMonthGrid';
 import DayPickerNavigation from './DayPickerNavigation';
 import DayPickerKeyboardShortcuts, {
diff --git a/src/components/OutsideClickHandler.jsx b/src/components/OutsideClickHandler.jsx
index a6a5c8afee..e1b9b4ef1c 100644
--- a/src/components/OutsideClickHandler.jsx
+++ b/src/components/OutsideClickHandler.jsx
@@ -1,63 +1,8 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import OutsideClickHandler from 'react-outside-click-handler';
 
-// import { forbidExtraProps } from 'airbnb-prop-types'; // TODO: add to propTypes; semver-major
-import { addEventListener } from 'consolidated-events';
+console.warn(`
+  The 'react-dates' OutsideClickHandler export is deprecated.
+  Please install and import from 'react-outside-click-handler' instead.
+`);
 
-const propTypes = {
-  children: PropTypes.node,
-  onOutsideClick: PropTypes.func,
-};
-
-const defaultProps = {
-  children: <span />,
-  onOutsideClick() {},
-};
-
-export default class OutsideClickHandler extends React.Component {
-  constructor(...args) {
-    super(...args);
-
-    this.onOutsideClick = this.onOutsideClick.bind(this);
-    this.setChildNodeRef = this.setChildNodeRef.bind(this);
-  }
-
-  componentDidMount() {
-    // `capture` flag is set to true so that a `stopPropagation` in the children
-    // will not prevent all outside click handlers from firing - maja
-    this.removeEventListener = addEventListener(
-      document,
-      'click',
-      this.onOutsideClick,
-      { capture: true },
-    );
-  }
-
-  componentWillUnmount() {
-    if (this.removeEventListener) { this.removeEventListener(); }
-  }
-
-  onOutsideClick(e) {
-    const { onOutsideClick } = this.props;
-    const { childNode } = this;
-    const isDescendantOfRoot = childNode && childNode.contains(e.target);
-    if (!isDescendantOfRoot) {
-      onOutsideClick(e);
-    }
-  }
-
-  setChildNodeRef(ref) {
-    this.childNode = ref;
-  }
-
-  render() {
-    return (
-      <div ref={this.setChildNodeRef}>
-        {this.props.children}
-      </div>
-    );
-  }
-}
-
-OutsideClickHandler.propTypes = propTypes;
-OutsideClickHandler.defaultProps = defaultProps;
+export default OutsideClickHandler;
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index 905cdee22d..4dc66d97c2 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -5,6 +5,7 @@ import { Portal } from 'react-portal';
 import { forbidExtraProps } from 'airbnb-prop-types';
 import { addEventListener } from 'consolidated-events';
 import isTouchDevice from 'is-touch-device';
+import OutsideClickHandler from 'react-outside-click-handler';
 
 import SingleDatePickerShape from '../shapes/SingleDatePickerShape';
 import { SingleDatePickerPhrases } from '../defaultPhrases';
@@ -19,7 +20,6 @@ import disableScroll from '../utils/disableScroll';
 
 import SingleDatePickerInput from './SingleDatePickerInput';
 import DayPickerSingleDateController from './DayPickerSingleDateController';
-import OutsideClickHandler from './OutsideClickHandler';
 import CloseButton from './CloseButton';
 
 import {
diff --git a/test/components/OutsideClickHandler_spec.jsx b/test/components/OutsideClickHandler_spec.jsx
deleted file mode 100644
index 8e4580487e..0000000000
--- a/test/components/OutsideClickHandler_spec.jsx
+++ /dev/null
@@ -1,135 +0,0 @@
-import React from 'react';
-import { expect } from 'chai';
-import sinon from 'sinon-sandbox';
-import { shallow, mount } from 'enzyme';
-import wrap from 'mocha-wrap';
-
-import OutsideClickHandler from '../../src/components/OutsideClickHandler';
-
-describe('OutsideClickHandler', () => {
-  describe('basics', () => {
-    it('renders a div', () => {
-      expect(shallow(<OutsideClickHandler />).is('div')).to.equal(true);
-    });
-
-    it('renders a span when no children are provided', () => {
-      expect(shallow(<OutsideClickHandler />).children().is('span')).to.equal(true);
-    });
-
-    it('renders the children it‘s given', () => {
-      const wrapper = shallow((
-        <OutsideClickHandler>
-          <section id="a" />
-          <nav id="b" />
-        </OutsideClickHandler>
-      ));
-      expect(wrapper.children().map(x => ({ type: x.type(), id: x.prop('id') }))).to.eql([
-        { type: 'section', id: 'a' },
-        { type: 'nav', id: 'b' },
-      ]);
-    });
-  });
-
-  describe('#onOutsideClick()', () => {
-    const target = {};
-    const event = { target };
-
-    it('is a noop if `this.childNode` contains `e.target`', () => {
-      const spy = sinon.spy();
-      const wrapper = shallow(<OutsideClickHandler onOutsideClick={spy} />);
-      const instance = wrapper.instance();
-      const contains = sinon.stub().returns(true);
-      instance.childNode = { contains };
-
-      instance.onOutsideClick(event);
-
-      expect(contains).to.have.property('callCount', 1);
-      expect(contains.firstCall.args).to.eql([target]);
-      expect(spy).to.have.property('callCount', 0);
-    });
-
-    describe('when `this.childNode` does not contain `e.target`', () => {
-      it('calls onOutsideClick', () => {
-        const spy = sinon.spy();
-        const wrapper = shallow(<OutsideClickHandler onOutsideClick={spy} />);
-        const instance = wrapper.instance();
-        const contains = sinon.stub().returns(false);
-        instance.childNode = { contains };
-
-        instance.onOutsideClick(event);
-
-        expect(contains).to.have.property('callCount', 1);
-        expect(contains.firstCall.args).to.eql([target]);
-        expect(spy).to.have.property('callCount', 1);
-        expect(spy.firstCall.args).to.eql([event]);
-      });
-
-      it('is a noop when `onOutsideClick` is not provided', () => {
-        const spy = sinon.spy(OutsideClickHandler.defaultProps, 'onOutsideClick');
-        const wrapper = shallow(<OutsideClickHandler />);
-        const instance = wrapper.instance();
-        const contains = sinon.stub().returns(false);
-        instance.childNode = { contains };
-
-        instance.onOutsideClick(event);
-
-        expect(contains).to.have.property('callCount', 1);
-        expect(contains.firstCall.args).to.eql([target]);
-        expect(spy).to.have.property('callCount', 1);
-        expect(spy.firstCall.args).to.eql([event]);
-      });
-    });
-  });
-
-  describe.skip('lifecycle methods', () => {
-    wrap()
-    .withOverride(() => document, 'attachEvent', () => sinon.stub())
-    .describe('#componentDidMount', () => {
-      let addEventListenerStub;
-      beforeEach(() => {
-        addEventListenerStub = sinon.stub(document, 'addEventListener');
-      });
-
-      it('document.addEventListener is called with `click` & onOutsideClick', () => {
-        const wrapper = mount(<OutsideClickHandler />);
-        const { onOutsideClick } = wrapper.instance();
-        expect(addEventListenerStub.calledWith('click', onOutsideClick, true)).to.equal(true);
-      });
-
-      it('document.attachEvent is called if addEventListener is not available', () => {
-        document.addEventListener = undefined;
-
-        const wrapper = mount(<OutsideClickHandler />);
-        const { onOutsideClick } = wrapper.instance();
-        expect(document.attachEvent.calledWith('onclick', onOutsideClick)).to.equal(true);
-      });
-    });
-
-    wrap()
-    .withOverride(() => document, 'detachEvent', () => sinon.stub())
-    .describe('#componentWillUnmount', () => {
-      let removeEventListenerSpy;
-      beforeEach(() => {
-        removeEventListenerSpy = sinon.spy(document, 'removeEventListener');
-      });
-
-      it('document.removeEventListener is called with `click` and props.onOutsideClick', () => {
-        const wrapper = mount(<OutsideClickHandler />);
-        const { onOutsideClick } = wrapper.instance();
-
-        wrapper.instance().componentWillUnmount();
-        expect(removeEventListenerSpy.calledWith('click', onOutsideClick, true)).to.equal(true);
-      });
-
-      it('document.detachEvent is called if document.removeEventListener is not available', () => {
-        document.removeEventListener = undefined;
-
-        const wrapper = mount(<OutsideClickHandler />);
-        const { onOutsideClick } = wrapper.instance();
-
-        wrapper.instance().componentWillUnmount();
-        expect(document.detachEvent.calledWith('onclick', onOutsideClick)).to.equal(true);
-      });
-    });
-  });
-});

From bf55d24bd270ca94c9381a7ee8f0c0b4015d4d34 Mon Sep 17 00:00:00 2001
From: "greenkeeper[bot]" <greenkeeper[bot]@users.noreply.github.com>
Date: Sat, 2 Jun 2018 15:46:07 +0000
Subject: [PATCH 203/618] chore(package): update sass-loader to version 7.0.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 69267f878d..89df4e6ed1 100644
--- a/package.json
+++ b/package.json
@@ -103,7 +103,7 @@
     "react-with-styles-interface-css-compiler": "^1.1.2",
     "rimraf": "^2.6.2",
     "safe-publish-latest": "^1.1.1",
-    "sass-loader": "^6.0.7",
+    "sass-loader": "^7.0.2",
     "sinon": "^5.0.1",
     "sinon-sandbox": "^1.0.2",
     "style-loader": "^0.20.3",

From f3a2cfa4e703492a10f63fbd327b6ba1ec0303ec Mon Sep 17 00:00:00 2001
From: Joe Lencioni <joe.lencioni@airbnb.com>
Date: Mon, 18 Jun 2018 11:43:19 -0700
Subject: [PATCH 204/618] Allow consolidated-events ^2.0.0

- Now built with rollup
  ([#8](https://github.com/lencioni/consolidated-events/pull/8))
- Deprecated `removeEventListener` export removed
  ([#13](https://github.com/lencioni/consolidated-events/pull/13))
- Passive event listener test is now removed after being added
  ([#11](https://github.com/lencioni/consolidated-events/pull/11))
- Reduced bundle size impact by replacing a class with a function
  ([#12](https://github.com/lencioni/consolidated-events/pull/12))
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 3845f4c04a..9855ad5cee 100644
--- a/package.json
+++ b/package.json
@@ -111,7 +111,7 @@
   },
   "dependencies": {
     "airbnb-prop-types": "^2.10.0",
-    "consolidated-events": "^1.1.1",
+    "consolidated-events": "^1.1.1 || ^2.0.0",
     "is-touch-device": "^1.0.1",
     "lodash": "^4.1.1",
     "object.assign": "^4.1.0",

From 876b36487464e0c736429a24c9da2c22f7047490 Mon Sep 17 00:00:00 2001
From: "greenkeeper[bot]" <greenkeeper[bot]@users.noreply.github.com>
Date: Sun, 3 Jun 2018 22:58:46 +0000
Subject: [PATCH 205/618] chore(package): update nyc to version 12.0.2

Closes #1193
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 9cf55eb2fc..5388ba482f 100644
--- a/package.json
+++ b/package.json
@@ -95,7 +95,7 @@
     "moment": "^2.22.2",
     "moment-jalaali": "^0.7.4",
     "node-sass": "^4.9.0",
-    "nyc": "^11.6.0",
+    "nyc": "^12.0.2",
     "raw-loader": "^0.5.1",
     "react": "^0.14 || ^15.5.4 || ^16.1.1",
     "react-dom": "^0.14 || ^15.5.4 || ^16.1.1",

From f14cfef3326a32b4fc312bf99c60fc55d491f486 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Sun, 3 Jun 2018 21:46:51 -0700
Subject: [PATCH 206/618] [Dev Deps] update `eslint-plugin-react`, `moment`,
 `moment-jalaali`, `eslint-plugin-import`, `cross-env`, `airbnb-js-shims`,
 `aphrodite`

---
 package.json | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 69267f878d..4b9ef1b8f0 100644
--- a/package.json
+++ b/package.json
@@ -56,8 +56,8 @@
     "@storybook/addon-links": "^3.4.3",
     "@storybook/addon-options": "^3.4.3",
     "@storybook/react": "^3.4.3",
-    "airbnb-js-shims": "^1.4.1",
-    "aphrodite": "^2.2.0",
+    "airbnb-js-shims": "^1.6.0",
+    "aphrodite": "^2.2.1",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.4",
@@ -71,14 +71,14 @@
     "chai": "^4.1.2",
     "clean-css": "^4.1.11",
     "coveralls": "^3.0.1",
-    "cross-env": "^5.1.4",
+    "cross-env": "^5.1.6",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-helper": "^1.2.3",
     "eslint": "^4.19.1",
     "eslint-config-airbnb": "^16.1.0",
-    "eslint-plugin-import": "^2.11.0",
+    "eslint-plugin-import": "^2.12.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.7.0",
+    "eslint-plugin-react": "^7.9.1",
     "eslint-plugin-react-with-styles": "^2.0.0",
     "git-directory-deploy": "^1.5.1",
     "imports-loader": "^0.8.0",
@@ -91,9 +91,9 @@
     "karma-sinon": "^1.0.5",
     "karma-webpack": "^2.0.9",
     "mocha": "^3.5.3",
-    "mocha-wrap": "^2.1.1",
-    "moment": "^2.22.1",
-    "moment-jalaali": "^0.7.2",
+    "mocha-wrap": "^2.1.2",
+    "moment": "^2.22.2",
+    "moment-jalaali": "^0.7.4",
     "node-sass": "^4.9.0",
     "nyc": "^11.6.0",
     "raw-loader": "^0.5.1",
@@ -104,7 +104,7 @@
     "rimraf": "^2.6.2",
     "safe-publish-latest": "^1.1.1",
     "sass-loader": "^6.0.7",
-    "sinon": "^5.0.1",
+    "sinon": "^5.0.3",
     "sinon-sandbox": "^1.0.2",
     "style-loader": "^0.20.3",
     "webpack": "^2.6.1"
@@ -121,7 +121,7 @@
     "react-moment-proptypes": "^1.5.0",
     "react-outside-click-handler": "^1.0.0",
     "react-portal": "^4.1.2",
-    "react-with-styles": "^3.1.0",
+    "react-with-styles": "^3.2.0",
     "react-with-styles-interface-css": "^4.0.1"
   },
   "peerDependencies": {

From 2e13fdc6ad1d4e30479b21a5b6bcd08dedf72808 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Sun, 3 Jun 2018 21:49:22 -0700
Subject: [PATCH 207/618] [Deps] update `prop-types`, `react-portal`,
 `airbnb-prop-types`

---
 package.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 4b9ef1b8f0..ab4c8123e7 100644
--- a/package.json
+++ b/package.json
@@ -110,17 +110,17 @@
     "webpack": "^2.6.1"
   },
   "dependencies": {
-    "airbnb-prop-types": "^2.8.1",
+    "airbnb-prop-types": "^2.10.0",
     "consolidated-events": "^1.1.1",
     "is-touch-device": "^1.0.1",
     "lodash": "^4.1.1",
     "object.assign": "^4.1.0",
     "object.values": "^1.0.4",
-    "prop-types": "^15.6.0",
+    "prop-types": "^15.6.1",
     "react-addons-shallow-compare": "^15.6.2",
     "react-moment-proptypes": "^1.5.0",
     "react-outside-click-handler": "^1.0.0",
-    "react-portal": "^4.1.2",
+    "react-portal": "^4.1.5",
     "react-with-styles": "^3.2.0",
     "react-with-styles-interface-css": "^4.0.1"
   },

From 8e71edf65ac4c20151fa303d2d22aeaae9ed7724 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Thu, 31 May 2018 19:19:00 -0700
Subject: [PATCH 208/618] Change month height calculation to be based on number
 of weeks instead of DOM calculations

---
 src/components/CalendarMonth.jsx              |  31 +++--
 src/components/CalendarMonthGrid.jsx          |  49 ++------
 src/components/DayPicker.jsx                  | 110 +++++++++++++-----
 src/utils/getNumberOfCalendarMonthWeeks.js    |  15 +++
 test/components/CalendarMonthGrid_spec.jsx    |   6 +-
 .../getNumberOfCalendarMonthWeeks_spec.js     |  26 +++++
 6 files changed, 151 insertions(+), 86 deletions(-)
 create mode 100644 src/utils/getNumberOfCalendarMonthWeeks.js
 create mode 100644 test/utils/getNumberOfCalendarMonthWeeks_spec.js

diff --git a/src/components/CalendarMonth.jsx b/src/components/CalendarMonth.jsx
index 486f92b4ce..948e81ebb6 100644
--- a/src/components/CalendarMonth.jsx
+++ b/src/components/CalendarMonth.jsx
@@ -44,7 +44,7 @@ const propTypes = forbidExtraProps({
   renderCalendarDay: PropTypes.func,
   renderDayContents: PropTypes.func,
   firstDayOfWeek: DayOfWeekShape,
-  setMonthHeight: PropTypes.func,
+  setMonthTitleHeight: PropTypes.func,
   verticalBorderSpacing: nonNegativeInteger,
 
   focusedDate: momentPropTypes.momentObj, // indicates focusable day
@@ -70,7 +70,7 @@ const defaultProps = {
   renderCalendarDay: props => (<CalendarDay {...props} />),
   renderDayContents: null,
   firstDayOfWeek: null,
-  setMonthHeight() {},
+  setMonthTitleHeight: null,
 
   focusedDate: null,
   isFocused: false,
@@ -95,12 +95,11 @@ class CalendarMonth extends React.Component {
     };
 
     this.setCaptionRef = this.setCaptionRef.bind(this);
-    this.setGridRef = this.setGridRef.bind(this);
-    this.setMonthHeight = this.setMonthHeight.bind(this);
+    this.setMonthTitleHeight = this.setMonthTitleHeight.bind(this);
   }
 
   componentDidMount() {
-    this.setMonthHeightTimeout = setTimeout(this.setMonthHeight, 0);
+    this.setMonthTitleHeightTimeout = setTimeout(this.setMonthTitleHeight, 0);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -123,27 +122,23 @@ class CalendarMonth extends React.Component {
   }
 
   componentWillUnmount() {
-    if (this.setMonthHeightTimeout) {
-      clearTimeout(this.setMonthHeightTimeout);
+    if (this.setMonthTitleHeightTimeout) {
+      clearTimeout(this.setMonthTitleHeightTimeout);
     }
   }
 
-  setMonthHeight() {
-    const { setMonthHeight } = this.props;
-    const captionHeight = calculateDimension(this.captionRef, 'height', true, true);
-    const gridHeight = calculateDimension(this.gridRef, 'height');
-
-    setMonthHeight(captionHeight + gridHeight + 1);
+  setMonthTitleHeight() {
+    const { setMonthTitleHeight } = this.props;
+    if (setMonthTitleHeight) {
+      const captionHeight = calculateDimension(this.captionRef, 'height', true, true);
+      setMonthTitleHeight(captionHeight);
+    }
   }
 
   setCaptionRef(ref) {
     this.captionRef = ref;
   }
 
-  setGridRef(ref) {
-    this.gridRef = ref;
-  }
-
   render() {
     const {
       month,
@@ -199,7 +194,7 @@ class CalendarMonth extends React.Component {
           )}
           role="presentation"
         >
-          <tbody ref={this.setGridRef}>
+          <tbody>
             {weeks.map((week, i) => (
               <CalendarWeek key={i}>
                 {week.map((day, dayOfWeek) => renderCalendarDay({
diff --git a/src/components/CalendarMonthGrid.jsx b/src/components/CalendarMonthGrid.jsx
index 6e64fd71bb..68ebccb3db 100644
--- a/src/components/CalendarMonthGrid.jsx
+++ b/src/components/CalendarMonthGrid.jsx
@@ -44,12 +44,12 @@ const propTypes = forbidExtraProps({
   renderMonth: PropTypes.func,
   renderCalendarDay: PropTypes.func,
   renderDayContents: PropTypes.func,
-  transformValue: PropTypes.string,
+  translationValue: PropTypes.number,
   daySize: nonNegativeInteger,
   focusedDate: momentPropTypes.momentObj, // indicates focusable day
   isFocused: PropTypes.bool, // indicates whether or not to move focus to focusable day
   firstDayOfWeek: DayOfWeekShape,
-  setCalendarMonthHeights: PropTypes.func,
+  setMonthTitleHeight: PropTypes.func,
   isRTL: PropTypes.bool,
   transitionDuration: nonNegativeInteger,
   verticalBorderSpacing: nonNegativeInteger,
@@ -75,12 +75,12 @@ const defaultProps = {
   renderMonth: null,
   renderCalendarDay: undefined,
   renderDayContents: null,
-  transformValue: 'none',
+  translationValue: null,
   daySize: DAY_SIZE,
   focusedDate: null,
   isFocused: false,
   firstDayOfWeek: null,
-  setCalendarMonthHeights() {},
+  setMonthTitleHeight: null,
   isRTL: false,
   transitionDuration: 200,
   verticalBorderSpacing: undefined,
@@ -112,8 +112,6 @@ class CalendarMonthGrid extends React.Component {
       months: getMonths(props.initialMonth, props.numberOfMonths, withoutTransitionMonths),
     };
 
-    this.calendarMonthHeights = [];
-
     this.isTransitionEndSupported = isTransitionEndSupported();
     this.onTransitionEnd = this.onTransitionEnd.bind(this);
     this.setContainerRef = this.setContainerRef.bind(this);
@@ -122,16 +120,11 @@ class CalendarMonthGrid extends React.Component {
   }
 
   componentDidMount() {
-    const { setCalendarMonthHeights } = this.props;
     this.removeEventListener = addEventListener(
       this.container,
       'transitionend',
       this.onTransitionEnd,
     );
-
-    this.setCalendarMonthHeightsTimeout = setTimeout(() => {
-      setCalendarMonthHeights(this.calendarMonthHeights);
-    }, 0);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -172,12 +165,11 @@ class CalendarMonthGrid extends React.Component {
     return shallowCompare(this, nextProps, nextState);
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate() {
     const {
       isAnimating,
       transitionDuration,
       onMonthTransitionEnd,
-      setCalendarMonthHeights,
     } = this.props;
 
     // For IE9, immediately call onMonthTransitionEnd instead of
@@ -186,19 +178,10 @@ class CalendarMonthGrid extends React.Component {
     if ((!this.isTransitionEndSupported || !transitionDuration) && isAnimating) {
       onMonthTransitionEnd();
     }
-
-    if (!isAnimating && prevProps.isAnimating) {
-      this.setCalendarMonthHeightsTimeout = setTimeout(() => {
-        setCalendarMonthHeights(this.calendarMonthHeights);
-      }, 0);
-    }
   }
 
   componentWillUnmount() {
     if (this.removeEventListener) this.removeEventListener();
-    if (this.setCalendarMonthHeightsTimeout) {
-      clearTimeout(this.setCalendarMonthHeightsTimeout);
-    }
   }
 
   onTransitionEnd() {
@@ -210,18 +193,6 @@ class CalendarMonthGrid extends React.Component {
     this.container = ref;
   }
 
-  setMonthHeight(height, i) {
-    if (this.calendarMonthHeights[i]) {
-      if (i === 0) {
-        this.calendarMonthHeights = [height].concat(this.calendarMonthHeights.slice(0, -1));
-      } else if (i === this.calendarMonthHeights.length - 1) {
-        this.calendarMonthHeights = this.calendarMonthHeights.slice(1).concat(height);
-      }
-    } else {
-      this.calendarMonthHeights[i] = height;
-    }
-  }
-
   render() {
     const {
       enableOutsideDays,
@@ -231,7 +202,7 @@ class CalendarMonthGrid extends React.Component {
       numberOfMonths,
       monthFormat,
       orientation,
-      transformValue,
+      translationValue,
       daySize,
       onDayMouseEnter,
       onDayMouseLeave,
@@ -249,6 +220,7 @@ class CalendarMonthGrid extends React.Component {
       dayAriaLabelFormat,
       transitionDuration,
       verticalBorderSpacing,
+      setMonthTitleHeight,
     } = this.props;
 
     const { months } = this.state;
@@ -262,6 +234,9 @@ class CalendarMonthGrid extends React.Component {
       calendarMonthWidth :
       (numberOfMonths + 2) * calendarMonthWidth;
 
+    const transformType = (isVertical || isVerticalScrollable) ? 'translateY' : 'translateX';
+    const transformValue = `${transformType}(${translationValue}px)`;
+
     return (
       <div
         {...css(
@@ -303,7 +278,7 @@ class CalendarMonthGrid extends React.Component {
                 },
                 showForAnimation && isVertical && {
                   position: 'absolute',
-                  top: -this.calendarMonthHeights[0],
+                  top: -translationValue,
                 },
                 !isVisible && !isAnimating && styles.CalendarMonthGrid_month__hidden,
               )}
@@ -326,7 +301,7 @@ class CalendarMonthGrid extends React.Component {
                 focusedDate={isVisible ? focusedDate : null}
                 isFocused={isFocused}
                 phrases={phrases}
-                setMonthHeight={(height) => { this.setMonthHeight(height, i); }}
+                setMonthTitleHeight={setMonthTitleHeight}
                 dayAriaLabelFormat={dayAriaLabelFormat}
                 verticalBorderSpacing={verticalBorderSpacing}
               />
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index a8cd302225..ed52f3ed93 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -20,6 +20,7 @@ import DayPickerKeyboardShortcuts, {
   BOTTOM_RIGHT,
 } from './DayPickerKeyboardShortcuts';
 
+import getNumberOfCalendarMonthWeeks from '../utils/getNumberOfCalendarMonthWeeks';
 import getCalendarMonthWidth from '../utils/getCalendarMonthWidth';
 import calculateDimension from '../utils/calculateDimension';
 import getActiveElement from '../utils/getActiveElement';
@@ -182,9 +183,11 @@ class DayPicker extends React.Component {
       withMouseInteractions: true,
       hasSetHeight: false,
       calendarInfoWidth: 0,
+      monthTitleHeight: 0,
     };
 
-    this.calendarMonthHeights = [];
+    this.setCalendarMonthWeeks();
+
     this.calendarMonthGridHeight = 0;
     this.setCalendarInfoWidthTimeout = null;
 
@@ -201,7 +204,7 @@ class DayPicker extends React.Component {
     this.setCalendarInfoRef = this.setCalendarInfoRef.bind(this);
     this.setContainerRef = this.setContainerRef.bind(this);
     this.setTransitionContainerRef = this.setTransitionContainerRef.bind(this);
-    this.setCalendarMonthHeights = this.setCalendarMonthHeights.bind(this);
+    this.setMonthTitleHeight = this.setMonthTitleHeight.bind(this);
   }
 
   componentDidMount() {
@@ -213,6 +216,8 @@ class DayPicker extends React.Component {
     } else {
       this.setState({ isTouchDevice: isTouchDevice() });
     }
+
+    this.setCalendarMonthWeeks();
   }
 
   componentWillReceiveProps(nextProps) {
@@ -221,6 +226,7 @@ class DayPicker extends React.Component {
       isFocused,
       showKeyboardShortcuts,
       onBlur,
+      renderMonth,
     } = nextProps;
     const { currentMonth } = this.state;
 
@@ -259,6 +265,12 @@ class DayPicker extends React.Component {
         this.setState({ focusedDate: null });
       }
     }
+
+    if (renderMonth !== this.props.renderMonth) {
+      this.setState({
+        monthTitleHeight: null,
+      });
+    }
   }
 
   shouldComponentUpdate(nextProps, nextState) {
@@ -267,12 +279,13 @@ class DayPicker extends React.Component {
 
   componentWillUpdate() {
     const { transitionDuration } = this.props;
+
     // Calculating the dimensions trigger a DOM repaint which
     // breaks the CSS transition.
     // The setTimeout will wait until the transition ends.
     if (this.calendarInfo) {
-      const { calendarInfoWidth } = this.state;
       this.setCalendarInfoWidthTimeout = setTimeout(() => {
+        const { calendarInfoWidth } = this.state;
         const calendarInfoPanelWidth = calculateDimension(this.calendarInfo, 'width', true, true);
         if (calendarInfoWidth !== calendarInfoPanelWidth) {
           this.setState({
@@ -399,19 +412,27 @@ class DayPicker extends React.Component {
   }
 
   onPrevMonthClick(nextFocusedDate, e) {
-    const { numberOfMonths, isRTL } = this.props;
-    const { calendarMonthWidth } = this.state;
+    const { daySize, isRTL } = this.props;
+    const { calendarMonthWidth, currentMonth, monthTitleHeight } = this.state;
 
     if (e) e.preventDefault();
 
-    let translationValue = this.isVertical() ? this.calendarMonthHeights[0] : calendarMonthWidth;
+    const newMonth = currentMonth.clone().subtract(1, 'month');
+    const numberOfWeeks = getNumberOfCalendarMonthWeeks(newMonth, this.getFirstDayOfWeek());
+    this.calendarMonthWeeks = [numberOfWeeks, ...this.calendarMonthWeeks.slice(0, -1)];
 
-    if (this.isHorizontal()) {
+    let translationValue;
+    if (this.isVertical()) {
+      const calendarMonthWeeksHeight = this.calendarMonthWeeks[0] * (daySize - 1);
+      translationValue = monthTitleHeight + calendarMonthWeeksHeight + 1;
+    } else if (this.isHorizontal()) {
+      translationValue = calendarMonthWidth;
       if (isRTL) {
         translationValue = -2 * calendarMonthWidth;
       }
 
-      const newMonthHeight = Math.max(0, ...this.calendarMonthHeights.slice(0, numberOfMonths));
+      const calendarMonthWeeksHeight = Math.max(0, ...this.calendarMonthWeeks) * (daySize - 1);
+      const newMonthHeight = monthTitleHeight + calendarMonthWeeksHeight + 1;
       this.adjustDayPickerHeight(newMonthHeight);
     }
 
@@ -424,18 +445,31 @@ class DayPicker extends React.Component {
   }
 
   onNextMonthClick(nextFocusedDate, e) {
-    const { isRTL } = this.props;
-    const { calendarMonthWidth } = this.state;
+    const { isRTL, numberOfMonths, daySize } = this.props;
+    const { calendarMonthWidth, currentMonth, monthTitleHeight } = this.state;
 
     if (e) e.preventDefault();
 
-    let translationValue = this.isVertical() ? -this.calendarMonthHeights[1] : -calendarMonthWidth;
+    const newMonth = currentMonth.clone().add(numberOfMonths, 'month');
+    const numberOfWeeks = getNumberOfCalendarMonthWeeks(newMonth, this.getFirstDayOfWeek());
+
+    let translationValue;
+
+    if (this.isVertical()) {
+      const calendarMonthWeeksHeight = this.calendarMonthWeeks[0] * (daySize - 1);
+      translationValue = -(monthTitleHeight + calendarMonthWeeksHeight + 1);
+    }
+
+    this.calendarMonthWeeks = [...this.calendarMonthWeeks.slice(1), numberOfWeeks];
 
     if (this.isHorizontal()) {
+      translationValue = -calendarMonthWidth;
       if (isRTL) {
         translationValue = 0;
       }
-      const newMonthHeight = Math.max(0, ...this.calendarMonthHeights.slice(2));
+
+      const calendarMonthWeeksHeight = Math.max(0, ...this.calendarMonthWeeks) * (daySize - 1);
+      const newMonthHeight = monthTitleHeight + calendarMonthWeeksHeight + 1;
       this.adjustDayPickerHeight(newMonthHeight);
     }
 
@@ -447,6 +481,15 @@ class DayPicker extends React.Component {
     });
   }
 
+  getFirstDayOfWeek() {
+    const { firstDayOfWeek } = this.props;
+    if (firstDayOfWeek == null) {
+      return moment.localeData().firstDayOfWeek();
+    }
+
+    return firstDayOfWeek;
+  }
+
   getFirstVisibleIndex() {
     const { orientation } = this.props;
     const { monthTransition } = this.state;
@@ -478,16 +521,31 @@ class DayPicker extends React.Component {
     return focusedDate;
   }
 
-  setCalendarMonthHeights(calendarMonthHeights) {
+  setMonthTitleHeight(monthTitleHeight) {
+    const { daySize } = this.props;
+    const calendarMonthWeeksHeight = Math.max(0, ...this.calendarMonthWeeks) * (daySize - 1);
+    const newMonthHeight = monthTitleHeight + calendarMonthWeeksHeight + 1;
+
+    if (this.isHorizontal()) {
+      this.adjustDayPickerHeight(newMonthHeight);
+    }
+
+    this.setState({
+      monthTitleHeight,
+      hasSetHeight: true,
+    });
+  }
+
+  setCalendarMonthWeeks() {
     const { numberOfMonths } = this.props;
-    const firstVisibleMonthIndex = this.getFirstVisibleIndex();
-    const lastVisibleMonthIndex = firstVisibleMonthIndex + numberOfMonths;
+    const { currentMonth } = this.state;
 
-    this.calendarMonthHeights = calendarMonthHeights;
-    const visibleCalendarMonthHeights = calendarMonthHeights
-      .filter((_, i) => ((i >= firstVisibleMonthIndex) && (i < lastVisibleMonthIndex)));
-    this.calendarMonthGridHeight = Math.max(0, ...visibleCalendarMonthHeights) + MONTH_PADDING;
-    this.setState({ hasSetHeight: true });
+    this.calendarMonthWeeks = [];
+    for (let i = 0; i < numberOfMonths; i += 1) {
+      const nextMonth = currentMonth.clone().add(i, 'months');
+      const numberOfWeeks = getNumberOfCalendarMonthWeeks(nextMonth, this.getFirstDayOfWeek());
+      this.calendarMonthWeeks.push(numberOfWeeks);
+    }
   }
 
   setContainerRef(ref) {
@@ -694,10 +752,7 @@ class DayPicker extends React.Component {
       weekHeaderStyle = verticalStyle;
     }
 
-    let { firstDayOfWeek } = this.props;
-    if (firstDayOfWeek == null) {
-      firstDayOfWeek = moment.localeData().firstDayOfWeek();
-    }
+    const firstDayOfWeek = this.getFirstDayOfWeek();
 
     const header = [];
     for (let i = 0; i < 7; i += 1) {
@@ -737,6 +792,7 @@ class DayPicker extends React.Component {
       isTouchDevice: isTouch,
       hasSetHeight,
       calendarInfoWidth,
+      monthTitleHeight,
     } = this.state;
 
     const {
@@ -788,8 +844,6 @@ class DayPicker extends React.Component {
     }
 
     const isCalendarMonthGridAnimating = monthTransition !== null;
-    const transformType = this.isVertical() ? 'translateY' : 'translateX';
-    const transformValue = `${transformType}(${translationValue}px)`;
 
     const shouldFocusDate = !isCalendarMonthGridAnimating && isFocused;
 
@@ -899,8 +953,8 @@ class DayPicker extends React.Component {
                 ref={this.setTransitionContainerRef}
               >
                 <CalendarMonthGrid
-                  setCalendarMonthHeights={this.setCalendarMonthHeights}
-                  transformValue={transformValue}
+                  setMonthTitleHeight={!monthTitleHeight ? this.setMonthTitleHeight : undefined}
+                  translationValue={translationValue}
                   enableOutsideDays={enableOutsideDays}
                   firstVisibleMonthIndex={firstVisibleMonthIndex}
                   initialMonth={currentMonth}
diff --git a/src/utils/getNumberOfCalendarMonthWeeks.js b/src/utils/getNumberOfCalendarMonthWeeks.js
new file mode 100644
index 0000000000..0ed4da8676
--- /dev/null
+++ b/src/utils/getNumberOfCalendarMonthWeeks.js
@@ -0,0 +1,15 @@
+import moment from 'moment';
+
+function getBlankDaysBeforeFirstDay(firstDayOfMonth, firstDayOfWeek) {
+  const weekDayDiff = firstDayOfMonth.day() - firstDayOfWeek;
+  return (weekDayDiff + 7) % 7;
+}
+
+export default function getNumberOfCalendarMonthWeeks(
+  month,
+  firstDayOfWeek = moment.localeData().firstDayOfWeek(),
+) {
+  const firstDayOfMonth = month.clone().startOf('month');
+  const numBlankDays = getBlankDaysBeforeFirstDay(firstDayOfMonth, firstDayOfWeek);
+  return Math.ceil((numBlankDays + month.daysInMonth()) / 7);
+}
diff --git a/test/components/CalendarMonthGrid_spec.jsx b/test/components/CalendarMonthGrid_spec.jsx
index 901386c124..95cf9ea736 100644
--- a/test/components/CalendarMonthGrid_spec.jsx
+++ b/test/components/CalendarMonthGrid_spec.jsx
@@ -16,9 +16,9 @@ describe('CalendarMonthGrid', () => {
   });
 
   it('has style equal to getTransformStyles(foo)', () => {
-    const transformValue = 'foo';
-    const transformStyles = getTransformStyles(transformValue);
-    const wrapper = shallow(<CalendarMonthGrid transformValue={transformValue} />).dive();
+    const translationValue = 'foo';
+    const transformStyles = getTransformStyles(`translateX(${translationValue}px)`);
+    const wrapper = shallow(<CalendarMonthGrid translationValue={translationValue} />).dive();
     Object.keys(transformStyles).forEach((key) => {
       expect(wrapper.prop('style')[key]).to.equal(transformStyles[key]);
     });
diff --git a/test/utils/getNumberOfCalendarMonthWeeks_spec.js b/test/utils/getNumberOfCalendarMonthWeeks_spec.js
new file mode 100644
index 0000000000..9554033d09
--- /dev/null
+++ b/test/utils/getNumberOfCalendarMonthWeeks_spec.js
@@ -0,0 +1,26 @@
+import moment from 'moment';
+import { expect } from 'chai';
+
+import getNumberOfCalendarMonthWeeks from '../../src/utils/getNumberOfCalendarMonthWeeks';
+
+describe('getNumberOfCalendarMonthWeeks', () => {
+  it('returns 4 weeks for a 4-week month', () => {
+    const february2018 = moment('2018-02-01', 'YYYY-MM-DD');
+    expect(getNumberOfCalendarMonthWeeks(february2018, 4)).to.equal(4);
+  });
+
+  it('returns 5 weeks for a 5-week month', () => {
+    const july2018 = moment('2018-07-01', 'YYYY-MM-DD');
+    expect(getNumberOfCalendarMonthWeeks(july2018, 0)).to.equal(5);
+  });
+
+  it('returns 6 weeks for a 6-week month', () => {
+    const september2018 = moment('2018-09-01', 'YYYY-MM-DD');
+    expect(getNumberOfCalendarMonthWeeks(september2018, 0)).to.equal(6);
+  });
+
+  it('changing the first day of week changes the number of weeks', () => {
+    const september2018 = moment('2018-09-01', 'YYYY-MM-DD');
+    expect(getNumberOfCalendarMonthWeeks(september2018, 6)).to.equal(5);
+  });
+});

From 0bd08cbeb9e94d2f8714b4008dcf76cb18f6cb8c Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Mon, 4 Jun 2018 16:55:40 -0700
Subject: [PATCH 209/618] Defer moment object cloning to
 updateStateAfterTransition instead of in the click handlers

---
 src/components/DayPicker.jsx | 40 ++++++++++++++++++++----------------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index ed52f3ed93..65d69156fc 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -412,15 +412,11 @@ class DayPicker extends React.Component {
   }
 
   onPrevMonthClick(nextFocusedDate, e) {
-    const { daySize, isRTL } = this.props;
-    const { calendarMonthWidth, currentMonth, monthTitleHeight } = this.state;
+    const { daySize, isRTL, numberOfMonths } = this.props;
+    const { calendarMonthWidth, monthTitleHeight } = this.state;
 
     if (e) e.preventDefault();
 
-    const newMonth = currentMonth.clone().subtract(1, 'month');
-    const numberOfWeeks = getNumberOfCalendarMonthWeeks(newMonth, this.getFirstDayOfWeek());
-    this.calendarMonthWeeks = [numberOfWeeks, ...this.calendarMonthWeeks.slice(0, -1)];
-
     let translationValue;
     if (this.isVertical()) {
       const calendarMonthWeeksHeight = this.calendarMonthWeeks[0] * (daySize - 1);
@@ -431,7 +427,8 @@ class DayPicker extends React.Component {
         translationValue = -2 * calendarMonthWidth;
       }
 
-      const calendarMonthWeeksHeight = Math.max(0, ...this.calendarMonthWeeks) * (daySize - 1);
+      const visibleCalendarWeeks = this.calendarMonthWeeks.slice(0, numberOfMonths);
+      const calendarMonthWeeksHeight = Math.max(0, ...visibleCalendarWeeks) * (daySize - 1);
       const newMonthHeight = monthTitleHeight + calendarMonthWeeksHeight + 1;
       this.adjustDayPickerHeight(newMonthHeight);
     }
@@ -446,29 +443,26 @@ class DayPicker extends React.Component {
 
   onNextMonthClick(nextFocusedDate, e) {
     const { isRTL, numberOfMonths, daySize } = this.props;
-    const { calendarMonthWidth, currentMonth, monthTitleHeight } = this.state;
+    const { calendarMonthWidth, monthTitleHeight } = this.state;
 
     if (e) e.preventDefault();
 
-    const newMonth = currentMonth.clone().add(numberOfMonths, 'month');
-    const numberOfWeeks = getNumberOfCalendarMonthWeeks(newMonth, this.getFirstDayOfWeek());
-
     let translationValue;
 
     if (this.isVertical()) {
-      const calendarMonthWeeksHeight = this.calendarMonthWeeks[0] * (daySize - 1);
+      const firstVisibleMonthWeeks = this.calendarMonthWeeks[1];
+      const calendarMonthWeeksHeight = firstVisibleMonthWeeks * (daySize - 1);
       translationValue = -(monthTitleHeight + calendarMonthWeeksHeight + 1);
     }
 
-    this.calendarMonthWeeks = [...this.calendarMonthWeeks.slice(1), numberOfWeeks];
-
     if (this.isHorizontal()) {
       translationValue = -calendarMonthWidth;
       if (isRTL) {
         translationValue = 0;
       }
 
-      const calendarMonthWeeksHeight = Math.max(0, ...this.calendarMonthWeeks) * (daySize - 1);
+      const visibleCalendarWeeks = this.calendarMonthWeeks.slice(2, numberOfMonths + 2);
+      const calendarMonthWeeksHeight = Math.max(0, ...visibleCalendarWeeks) * (daySize - 1);
       const newMonthHeight = monthTitleHeight + calendarMonthWeeksHeight + 1;
       this.adjustDayPickerHeight(newMonthHeight);
     }
@@ -541,10 +535,12 @@ class DayPicker extends React.Component {
     const { currentMonth } = this.state;
 
     this.calendarMonthWeeks = [];
-    for (let i = 0; i < numberOfMonths; i += 1) {
-      const nextMonth = currentMonth.clone().add(i, 'months');
-      const numberOfWeeks = getNumberOfCalendarMonthWeeks(nextMonth, this.getFirstDayOfWeek());
+    let month = currentMonth.clone().subtract(1, 'months');
+    const firstDayOfWeek = this.getFirstDayOfWeek();
+    for (let i = 0; i < numberOfMonths + 2; i += 1) {
+      const numberOfWeeks = getNumberOfCalendarMonthWeeks(month, firstDayOfWeek);
       this.calendarMonthWeeks.push(numberOfWeeks);
+      month = month.add(1, 'months');
     }
   }
 
@@ -615,6 +611,7 @@ class DayPicker extends React.Component {
     const {
       onPrevMonthClick,
       onNextMonthClick,
+      numberOfMonths,
       isRTL,
     } = this.props;
 
@@ -630,12 +627,19 @@ class DayPicker extends React.Component {
     if (!monthTransition) return;
 
     const newMonth = currentMonth.clone();
+    const firstDayOfWeek = this.getFirstDayOfWeek();
     if (monthTransition === PREV_TRANSITION) {
       if (onPrevMonthClick) onPrevMonthClick();
       newMonth.subtract(1, 'month');
+      const newInvisibleMonth = newMonth.clone().subtract(1, 'month');
+      const numberOfWeeks = getNumberOfCalendarMonthWeeks(newInvisibleMonth, firstDayOfWeek);
+      this.calendarMonthWeeks = [numberOfWeeks, ...this.calendarMonthWeeks.slice(0, -1)];
     } else if (monthTransition === NEXT_TRANSITION) {
       if (onNextMonthClick) onNextMonthClick();
       newMonth.add(1, 'month');
+      const newInvisibleMonth = newMonth.clone().add(numberOfMonths, 'month');
+      const numberOfWeeks = getNumberOfCalendarMonthWeeks(newInvisibleMonth, firstDayOfWeek);
+      this.calendarMonthWeeks = [...this.calendarMonthWeeks.slice(1), numberOfWeeks];
     }
 
     let newFocusedDate = null;

From a11c57ba4a3f83df2f0a0e18e9a37ce68260d6b7 Mon Sep 17 00:00:00 2001
From: "greenkeeper[bot]" <greenkeeper[bot]@users.noreply.github.com>
Date: Mon, 11 Jun 2018 07:29:48 +0000
Subject: [PATCH 210/618] chore(package): update sinon to version 6.0.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index ab4c8123e7..3845f4c04a 100644
--- a/package.json
+++ b/package.json
@@ -104,7 +104,7 @@
     "rimraf": "^2.6.2",
     "safe-publish-latest": "^1.1.1",
     "sass-loader": "^6.0.7",
-    "sinon": "^5.0.3",
+    "sinon": "^6.0.0",
     "sinon-sandbox": "^1.0.2",
     "style-loader": "^0.20.3",
     "webpack": "^2.6.1"

From 817b7aa2a6379b97ede7260511af03811fd1bf00 Mon Sep 17 00:00:00 2001
From: mohamed-elmahallawy <mohamed.elmahallawy@airbnb.com>
Date: Tue, 12 Jun 2018 13:06:01 -0700
Subject: [PATCH 211/618] Pass nextMonth to prev and next month click props

---
 src/components/DayPicker.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 65d69156fc..88051850b4 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -629,13 +629,13 @@ class DayPicker extends React.Component {
     const newMonth = currentMonth.clone();
     const firstDayOfWeek = this.getFirstDayOfWeek();
     if (monthTransition === PREV_TRANSITION) {
-      if (onPrevMonthClick) onPrevMonthClick();
+      if (onPrevMonthClick) onPrevMonthClick(newMonth);
       newMonth.subtract(1, 'month');
       const newInvisibleMonth = newMonth.clone().subtract(1, 'month');
       const numberOfWeeks = getNumberOfCalendarMonthWeeks(newInvisibleMonth, firstDayOfWeek);
       this.calendarMonthWeeks = [numberOfWeeks, ...this.calendarMonthWeeks.slice(0, -1)];
     } else if (monthTransition === NEXT_TRANSITION) {
-      if (onNextMonthClick) onNextMonthClick();
+      if (onNextMonthClick) onNextMonthClick(newMonth);
       newMonth.add(1, 'month');
       const newInvisibleMonth = newMonth.clone().add(numberOfMonths, 'month');
       const numberOfWeeks = getNumberOfCalendarMonthWeeks(newInvisibleMonth, firstDayOfWeek);

From 32ec932c09b9b1c2db17c8c60ac887c41860f14d Mon Sep 17 00:00:00 2001
From: mohamed-elmahallawy <mohamed.elmahallawy@airbnb.com>
Date: Tue, 12 Jun 2018 13:07:01 -0700
Subject: [PATCH 212/618] got it now

---
 src/components/DayPicker.jsx | 116 ++++++++++++++++-------------------
 1 file changed, 52 insertions(+), 64 deletions(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 88051850b4..4317987546 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -175,7 +175,7 @@ class DayPicker extends React.Component {
       translationValue,
       scrollableMonthMultiple: 1,
       calendarMonthWidth: getCalendarMonthWidth(props.daySize),
-      focusedDate: (!props.hidden || props.isFocused) ? focusedDate : null,
+      focusedDate: !props.hidden || props.isFocused ? focusedDate : null,
       nextFocusedDate: null,
       showKeyboardShortcuts: props.showKeyboardShortcuts,
       onKeyboardShortcutsPanelClose() {},
@@ -221,13 +221,7 @@ class DayPicker extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    const {
-      hidden,
-      isFocused,
-      showKeyboardShortcuts,
-      onBlur,
-      renderMonth,
-    } = nextProps;
+    const { hidden, isFocused, showKeyboardShortcuts, onBlur, renderMonth } = nextProps;
     const { currentMonth } = this.state;
 
     if (!hidden) {
@@ -608,12 +602,7 @@ class DayPicker extends React.Component {
   }
 
   updateStateAfterMonthTransition() {
-    const {
-      onPrevMonthClick,
-      onNextMonthClick,
-      numberOfMonths,
-      isRTL,
-    } = this.props;
+    const { onPrevMonthClick, onNextMonthClick, numberOfMonths, isRTL } = this.props;
 
     const {
       currentMonth,
@@ -629,14 +618,14 @@ class DayPicker extends React.Component {
     const newMonth = currentMonth.clone();
     const firstDayOfWeek = this.getFirstDayOfWeek();
     if (monthTransition === PREV_TRANSITION) {
-      if (onPrevMonthClick) onPrevMonthClick(newMonth);
       newMonth.subtract(1, 'month');
+      if (onPrevMonthClick) onPrevMonthClick(newMonth);
       const newInvisibleMonth = newMonth.clone().subtract(1, 'month');
       const numberOfWeeks = getNumberOfCalendarMonthWeeks(newInvisibleMonth, firstDayOfWeek);
       this.calendarMonthWeeks = [numberOfWeeks, ...this.calendarMonthWeeks.slice(0, -1)];
     } else if (monthTransition === NEXT_TRANSITION) {
-      if (onNextMonthClick) onNextMonthClick(newMonth);
       newMonth.add(1, 'month');
+      if (onNextMonthClick) onNextMonthClick(newMonth);
       const newInvisibleMonth = newMonth.clone().add(numberOfMonths, 'month');
       const numberOfWeeks = getNumberOfCalendarMonthWeeks(newInvisibleMonth, firstDayOfWeek);
       this.calendarMonthWeeks = [...this.calendarMonthWeeks.slice(1), numberOfWeeks];
@@ -649,26 +638,29 @@ class DayPicker extends React.Component {
       newFocusedDate = this.getFocusedDay(newMonth);
     }
 
-    this.setState({
-      currentMonth: newMonth,
-      monthTransition: null,
-      translationValue: (isRTL && this.isHorizontal()) ? -calendarMonthWidth : 0,
-      nextFocusedDate: null,
-      focusedDate: newFocusedDate,
-    }, () => {
-      // 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) {
-        const activeElement = getActiveElement();
-        if (
-          activeElement &&
-          activeElement !== document.body &&
-          this.container.contains(activeElement)
-        ) {
-          activeElement.blur();
+    this.setState(
+      {
+        currentMonth: newMonth,
+        monthTransition: null,
+        translationValue: isRTL && this.isHorizontal() ? -calendarMonthWidth : 0,
+        nextFocusedDate: null,
+        focusedDate: newFocusedDate,
+      },
+      () => {
+        // 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) {
+          const activeElement = getActiveElement();
+          if (
+            activeElement &&
+            activeElement !== document.body &&
+            this.container.contains(activeElement)
+          ) {
+            activeElement.blur();
+          }
         }
-      }
-    });
+      },
+    );
   }
 
   adjustDayPickerHeight(newMonthHeight) {
@@ -700,14 +692,7 @@ class DayPicker extends React.Component {
   }
 
   renderNavigation() {
-    const {
-      navPrev,
-      navNext,
-      noNavButtons,
-      orientation,
-      phrases,
-      isRTL,
-    } = this.props;
+    const { navPrev, navNext, noNavButtons, orientation, phrases, isRTL } = this.props;
 
     if (noNavButtons) {
       return null;
@@ -717,12 +702,16 @@ class DayPicker extends React.Component {
     if (orientation === VERTICAL_SCROLLABLE) {
       onNextMonthClick = this.multiplyScrollableMonths;
     } else {
-      onNextMonthClick = (e) => { this.onNextMonthClick(null, e); };
+      onNextMonthClick = e => {
+        this.onNextMonthClick(null, e);
+      };
     }
 
     return (
       <DayPickerNavigation
-        onPrevMonthClick={(e) => { this.onPrevMonthClick(null, e); }}
+        onPrevMonthClick={e => {
+          this.onPrevMonthClick(null, e);
+        }}
         onNextMonthClick={onNextMonthClick}
         navPrev={navPrev}
         navNext={navNext}
@@ -734,12 +723,7 @@ class DayPicker extends React.Component {
   }
 
   renderWeekHeader(index) {
-    const {
-      daySize,
-      orientation,
-      weekDayFormat,
-      styles,
-    } = this.props;
+    const { daySize, orientation, weekDayFormat, styles } = this.props;
     const { calendarMonthWidth } = this.state;
     const verticalScrollable = orientation === VERTICAL_SCROLLABLE;
     const horizontalStyle = {
@@ -760,11 +744,11 @@ class DayPicker extends React.Component {
 
     const header = [];
     for (let i = 0; i < 7; i += 1) {
-      header.push((
+      header.push(
         <li key={i} {...css(styles.DayPicker_weekHeader_li, { width: daySize })}>
           <small>{moment().day((i + firstDayOfWeek) % 7).format(weekDayFormat)}</small>
-        </li>
-      ));
+        </li>,
+      );
     }
 
     return (
@@ -864,21 +848,21 @@ class DayPicker extends React.Component {
     const calendarInfoPositionAfter = calendarInfoPosition === INFO_POSITION_AFTER;
     const calendarInfoIsInline = calendarInfoPositionBefore || calendarInfoPositionAfter;
 
-    const calendarInfo = renderCalendarInfo && (
+    const calendarInfo =
+      renderCalendarInfo &&
       <div
         ref={this.setCalendarInfoRef}
-        {...css((calendarInfoIsInline) && styles.DayPicker_calendarInfo__horizontal)}
+        {...css(calendarInfoIsInline && styles.DayPicker_calendarInfo__horizontal)}
       >
         {renderCalendarInfo()}
-      </div>
-    );
+      </div>;
 
     const calendarInfoPanelWidth = renderCalendarInfo && calendarInfoIsInline
       ? calendarInfoWidth
       : 0;
 
     const firstVisibleMonthIndex = this.getFirstVisibleIndex();
-    const wrapperHorizontalWidth = (calendarMonthWidth * numberOfMonths) + (2 * DAY_PICKER_PADDING);
+    const wrapperHorizontalWidth = calendarMonthWidth * numberOfMonths + 2 * DAY_PICKER_PADDING;
     // Adding `1px` because of whitespace between 2 inline-block
     const fullHorizontalWidth = wrapperHorizontalWidth + calendarInfoPanelWidth + 1;
 
@@ -938,9 +922,13 @@ class DayPicker extends React.Component {
             <div // eslint-disable-line jsx-a11y/no-noninteractive-element-interactions
               {...css(styles.DayPicker_focusRegion)}
               ref={this.setContainerRef}
-              onClick={(e) => { e.stopPropagation(); }}
+              onClick={e => {
+                e.stopPropagation();
+              }}
               onKeyDown={this.onKeyDown}
-              onMouseUp={() => { this.setState({ withMouseInteractions: true }); }}
+              onMouseUp={() => {
+                this.setState({ withMouseInteractions: true });
+              }}
               role="region"
               tabIndex={-1}
             >
@@ -987,7 +975,8 @@ class DayPicker extends React.Component {
                 {verticalScrollable && this.renderNavigation()}
               </div>
 
-              {!isTouch && !hideKeyboardShortcutsPanel &&
+              {!isTouch &&
+                !hideKeyboardShortcutsPanel &&
                 <DayPickerKeyboardShortcuts
                   block={this.isVertical() && !withPortal}
                   buttonLocation={keyboardShortcutButtonLocation}
@@ -995,8 +984,7 @@ class DayPicker extends React.Component {
                   openKeyboardShortcutsPanel={this.openKeyboardShortcutsPanel}
                   closeKeyboardShortcutsPanel={this.closeKeyboardShortcutsPanel}
                   phrases={phrases}
-                />
-              }
+                />}
             </div>
 
           </div>

From 33b6827ca96a1cfa6e58dc186ecd013c5e5411da Mon Sep 17 00:00:00 2001
From: mohamed-elmahallawy <mohamed.elmahallawy@airbnb.com>
Date: Tue, 12 Jun 2018 13:11:09 -0700
Subject: [PATCH 213/618] fix now

---
 src/components/DayPicker.jsx | 112 +++++++++++++++++++----------------
 1 file changed, 62 insertions(+), 50 deletions(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 4317987546..76822cf290 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -175,7 +175,7 @@ class DayPicker extends React.Component {
       translationValue,
       scrollableMonthMultiple: 1,
       calendarMonthWidth: getCalendarMonthWidth(props.daySize),
-      focusedDate: !props.hidden || props.isFocused ? focusedDate : null,
+      focusedDate: (!props.hidden || props.isFocused) ? focusedDate : null,
       nextFocusedDate: null,
       showKeyboardShortcuts: props.showKeyboardShortcuts,
       onKeyboardShortcutsPanelClose() {},
@@ -221,7 +221,13 @@ class DayPicker extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    const { hidden, isFocused, showKeyboardShortcuts, onBlur, renderMonth } = nextProps;
+    const {
+      hidden,
+      isFocused,
+      showKeyboardShortcuts,
+      onBlur,
+      renderMonth,
+    } = nextProps;
     const { currentMonth } = this.state;
 
     if (!hidden) {
@@ -602,7 +608,12 @@ class DayPicker extends React.Component {
   }
 
   updateStateAfterMonthTransition() {
-    const { onPrevMonthClick, onNextMonthClick, numberOfMonths, isRTL } = this.props;
+    const {
+      onPrevMonthClick,
+      onNextMonthClick,
+      numberOfMonths,
+      isRTL,
+    } = this.props;
 
     const {
       currentMonth,
@@ -638,29 +649,26 @@ class DayPicker extends React.Component {
       newFocusedDate = this.getFocusedDay(newMonth);
     }
 
-    this.setState(
-      {
-        currentMonth: newMonth,
-        monthTransition: null,
-        translationValue: isRTL && this.isHorizontal() ? -calendarMonthWidth : 0,
-        nextFocusedDate: null,
-        focusedDate: newFocusedDate,
-      },
-      () => {
-        // 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) {
-          const activeElement = getActiveElement();
-          if (
-            activeElement &&
-            activeElement !== document.body &&
-            this.container.contains(activeElement)
-          ) {
-            activeElement.blur();
-          }
+    this.setState({
+      currentMonth: newMonth,
+      monthTransition: null,
+      translationValue: (isRTL && this.isHorizontal()) ? -calendarMonthWidth : 0,
+      nextFocusedDate: null,
+      focusedDate: newFocusedDate,
+    }, () => {
+      // 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) {
+        const activeElement = getActiveElement();
+        if (
+          activeElement &&
+          activeElement !== document.body &&
+          this.container.contains(activeElement)
+        ) {
+          activeElement.blur();
         }
-      },
-    );
+      }
+    });
   }
 
   adjustDayPickerHeight(newMonthHeight) {
@@ -692,7 +700,14 @@ class DayPicker extends React.Component {
   }
 
   renderNavigation() {
-    const { navPrev, navNext, noNavButtons, orientation, phrases, isRTL } = this.props;
+    const {
+      navPrev,
+      navNext,
+      noNavButtons,
+      orientation,
+      phrases,
+      isRTL,
+    } = this.props;
 
     if (noNavButtons) {
       return null;
@@ -702,16 +717,12 @@ class DayPicker extends React.Component {
     if (orientation === VERTICAL_SCROLLABLE) {
       onNextMonthClick = this.multiplyScrollableMonths;
     } else {
-      onNextMonthClick = e => {
-        this.onNextMonthClick(null, e);
-      };
+      onNextMonthClick = (e) => { this.onNextMonthClick(null, e); };
     }
 
     return (
       <DayPickerNavigation
-        onPrevMonthClick={e => {
-          this.onPrevMonthClick(null, e);
-        }}
+        onPrevMonthClick={(e) => { this.onPrevMonthClick(null, e); }}
         onNextMonthClick={onNextMonthClick}
         navPrev={navPrev}
         navNext={navNext}
@@ -723,7 +734,12 @@ class DayPicker extends React.Component {
   }
 
   renderWeekHeader(index) {
-    const { daySize, orientation, weekDayFormat, styles } = this.props;
+    const {
+      daySize,
+      orientation,
+      weekDayFormat,
+      styles,
+    } = this.props;
     const { calendarMonthWidth } = this.state;
     const verticalScrollable = orientation === VERTICAL_SCROLLABLE;
     const horizontalStyle = {
@@ -744,11 +760,11 @@ class DayPicker extends React.Component {
 
     const header = [];
     for (let i = 0; i < 7; i += 1) {
-      header.push(
+      header.push((
         <li key={i} {...css(styles.DayPicker_weekHeader_li, { width: daySize })}>
           <small>{moment().day((i + firstDayOfWeek) % 7).format(weekDayFormat)}</small>
-        </li>,
-      );
+        </li>
+      ));
     }
 
     return (
@@ -848,21 +864,21 @@ class DayPicker extends React.Component {
     const calendarInfoPositionAfter = calendarInfoPosition === INFO_POSITION_AFTER;
     const calendarInfoIsInline = calendarInfoPositionBefore || calendarInfoPositionAfter;
 
-    const calendarInfo =
-      renderCalendarInfo &&
+    const calendarInfo = renderCalendarInfo && (
       <div
         ref={this.setCalendarInfoRef}
-        {...css(calendarInfoIsInline && styles.DayPicker_calendarInfo__horizontal)}
+        {...css((calendarInfoIsInline) && styles.DayPicker_calendarInfo__horizontal)}
       >
         {renderCalendarInfo()}
-      </div>;
+      </div>
+    );
 
     const calendarInfoPanelWidth = renderCalendarInfo && calendarInfoIsInline
       ? calendarInfoWidth
       : 0;
 
     const firstVisibleMonthIndex = this.getFirstVisibleIndex();
-    const wrapperHorizontalWidth = calendarMonthWidth * numberOfMonths + 2 * DAY_PICKER_PADDING;
+    const wrapperHorizontalWidth = (calendarMonthWidth * numberOfMonths) + (2 * DAY_PICKER_PADDING);
     // Adding `1px` because of whitespace between 2 inline-block
     const fullHorizontalWidth = wrapperHorizontalWidth + calendarInfoPanelWidth + 1;
 
@@ -922,13 +938,9 @@ class DayPicker extends React.Component {
             <div // eslint-disable-line jsx-a11y/no-noninteractive-element-interactions
               {...css(styles.DayPicker_focusRegion)}
               ref={this.setContainerRef}
-              onClick={e => {
-                e.stopPropagation();
-              }}
+              onClick={(e) => { e.stopPropagation(); }}
               onKeyDown={this.onKeyDown}
-              onMouseUp={() => {
-                this.setState({ withMouseInteractions: true });
-              }}
+              onMouseUp={() => { this.setState({ withMouseInteractions: true }); }}
               role="region"
               tabIndex={-1}
             >
@@ -975,8 +987,7 @@ class DayPicker extends React.Component {
                 {verticalScrollable && this.renderNavigation()}
               </div>
 
-              {!isTouch &&
-                !hideKeyboardShortcutsPanel &&
+              {!isTouch && !hideKeyboardShortcutsPanel &&
                 <DayPickerKeyboardShortcuts
                   block={this.isVertical() && !withPortal}
                   buttonLocation={keyboardShortcutButtonLocation}
@@ -984,7 +995,8 @@ class DayPicker extends React.Component {
                   openKeyboardShortcutsPanel={this.openKeyboardShortcutsPanel}
                   closeKeyboardShortcutsPanel={this.closeKeyboardShortcutsPanel}
                   phrases={phrases}
-                />}
+                />
+              }
             </div>
 
           </div>

From 4e37ae0eb25ec4371ab55580ac8105f706761c4f Mon Sep 17 00:00:00 2001
From: mohamed-elmahallawy <mohamed.elmahallawy@airbnb.com>
Date: Thu, 7 Jun 2018 15:00:31 -0700
Subject: [PATCH 214/618] Allow DateRangePickerInput border theme to be
 overriden

---
 src/components/DateRangePickerInput.jsx  | 8 +++++---
 src/components/SingleDatePickerInput.jsx | 7 +++++--
 src/theme/DefaultTheme.js                | 5 +++++
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index 6e20d0ff64..46b039bb6f 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -285,7 +285,7 @@ function DateRangePickerInput({
 DateRangePickerInput.propTypes = propTypes;
 DateRangePickerInput.defaultProps = defaultProps;
 
-export default withStyles(({ reactDates: { color, sizing } }) => ({
+export default withStyles(({ reactDates: { border, color, sizing } }) => ({
   DateRangePickerInput: {
     backgroundColor: color.background,
     display: 'inline-block',
@@ -296,8 +296,10 @@ export default withStyles(({ reactDates: { color, sizing } }) => ({
   },
 
   DateRangePickerInput__withBorder: {
-    border: `1px solid ${color.border}`,
-    borderRadius: 2,
+    borderColor: color.border,
+    borderWidth: border.pickerInput.borderWidth,
+    borderStyle: border.pickerInput.borderStyle,
+    borderRadius: border.pickerInput.borderRadius,
   },
 
   DateRangePickerInput__rtl: {
diff --git a/src/components/SingleDatePickerInput.jsx b/src/components/SingleDatePickerInput.jsx
index aa8390937b..2ad4f8102b 100644
--- a/src/components/SingleDatePickerInput.jsx
+++ b/src/components/SingleDatePickerInput.jsx
@@ -210,14 +210,17 @@ function SingleDatePickerInput({
 SingleDatePickerInput.propTypes = propTypes;
 SingleDatePickerInput.defaultProps = defaultProps;
 
-export default withStyles(({ reactDates: { color } }) => ({
+export default withStyles(({ reactDates: { border, color } }) => ({
   SingleDatePickerInput: {
     display: 'inline-block',
     backgroundColor: color.background,
   },
 
   SingleDatePickerInput__withBorder: {
-    border: `1px solid ${color.core.border}`,
+    borderColor: color.border,
+    borderWidth: border.pickerInput.borderWidth,
+    borderStyle: border.pickerInput.borderStyle,
+    borderRadius: border.pickerInput.borderRadius,
   },
 
   SingleDatePickerInput__rtl: {
diff --git a/src/theme/DefaultTheme.js b/src/theme/DefaultTheme.js
index 780e1a263c..4ba4e8d928 100644
--- a/src/theme/DefaultTheme.js
+++ b/src/theme/DefaultTheme.js
@@ -42,6 +42,11 @@ export default {
         borderRightFocused: 0,
         borderRadius: 0,
       },
+      pickerInput: {
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderRadius: 2,
+      },
     },
 
     color: {

From 8416bc921f765c97fb18f8e278ffd0efbc099519 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Fri, 15 Jun 2018 13:33:12 -0700
Subject: [PATCH 215/618] Remove inputRef.blur() call that was causing a focus
 trap in Safari/IE

---
 src/components/DateInput.jsx       |  2 --
 test/components/DateInput_spec.jsx | 17 -----------------
 2 files changed, 19 deletions(-)

diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
index 879a75da05..e91a582a97 100644
--- a/src/components/DateInput.jsx
+++ b/src/components/DateInput.jsx
@@ -110,8 +110,6 @@ class DateInput extends React.Component {
 
     if (focused && isFocused) {
       this.inputRef.focus();
-    } else {
-      this.inputRef.blur();
     }
   }
 
diff --git a/test/components/DateInput_spec.jsx b/test/components/DateInput_spec.jsx
index 1ca40249d5..2b36326933 100644
--- a/test/components/DateInput_spec.jsx
+++ b/test/components/DateInput_spec.jsx
@@ -229,12 +229,10 @@ describe('DateInput', () => {
 
     describe('focus/isFocused', () => {
       const el = {
-        blur() {},
         focus() {},
       };
 
       beforeEach(() => {
-        sinon.spy(el, 'blur');
         sinon.spy(el, 'focus');
       });
 
@@ -252,23 +250,8 @@ describe('DateInput', () => {
 
         wrapper.setProps({ focused: true, isFocused: true });
 
-        expect(el.blur).to.have.property('callCount', 0);
         expect(el.focus).to.have.property('callCount', 1);
       });
-
-      it('blurs when becoming unfocused', () => {
-        const wrapper = shallow(
-          <DateInput id="date" focused isFocused />,
-          { disableLifecycleMethods: false },
-        ).dive();
-
-        wrapper.instance().inputRef = el;
-
-        wrapper.setProps({ focused: false, isFocused: false });
-
-        expect(el.blur).to.have.property('callCount', 1);
-        expect(el.focus).to.have.property('callCount', 0);
-      });
     });
 
     /*

From c36946c1188a8db0b88da641385cb7f6e60cd685 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Mon, 18 Jun 2018 13:35:41 -0700
Subject: [PATCH 216/618] [Dev Deps] update `airbnb-js-shims`, `aphrodite`,
 `cross-env`, `babel-preset-airbnb`, `@storybook/react`,
 `@storybook/addon-options`, `@storybook/addon-links`,
 `@storybook/addon-info`, `@storybook/addon-actions`

---
 package.json | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 5388ba482f..facd0755f4 100644
--- a/package.json
+++ b/package.json
@@ -51,13 +51,13 @@
   },
   "homepage": "https://github.com/airbnb/react-dates#readme",
   "devDependencies": {
-    "@storybook/addon-actions": "^3.4.3",
-    "@storybook/addon-info": "^3.4.3",
-    "@storybook/addon-links": "^3.4.3",
-    "@storybook/addon-options": "^3.4.3",
-    "@storybook/react": "^3.4.3",
+    "@storybook/addon-actions": "^3.4.7",
+    "@storybook/addon-info": "^3.4.7",
+    "@storybook/addon-links": "^3.4.7",
+    "@storybook/addon-options": "^3.4.7",
+    "@storybook/react": "^3.4.7",
     "airbnb-js-shims": "^1.6.0",
-    "aphrodite": "^2.2.1",
+    "aphrodite": "^2.2.2",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.4",
@@ -66,12 +66,12 @@
     "babel-plugin-istanbul": "^4.1.6",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-replace-object-assign": "^1.0.0",
-    "babel-preset-airbnb": "^2.4.0",
+    "babel-preset-airbnb": "^2.5.1",
     "babel-register": "^6.26.0",
     "chai": "^4.1.2",
     "clean-css": "^4.1.11",
     "coveralls": "^3.0.1",
-    "cross-env": "^5.1.6",
+    "cross-env": "^5.2.0",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-helper": "^1.2.3",
     "eslint": "^4.19.1",

From 34fc817bd02fe538eb7d0953edae707dceb20ca9 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Mon, 18 Jun 2018 13:39:14 -0700
Subject: [PATCH 217/618] [Deps] update `react-outside-click-handler`,
 `react-moment-proptypes`, `react-with-styles-interface-css`

---
 package.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index facd0755f4..41d881248a 100644
--- a/package.json
+++ b/package.json
@@ -118,11 +118,11 @@
     "object.values": "^1.0.4",
     "prop-types": "^15.6.1",
     "react-addons-shallow-compare": "^15.6.2",
-    "react-moment-proptypes": "^1.5.0",
-    "react-outside-click-handler": "^1.0.0",
+    "react-moment-proptypes": "^1.6.0",
+    "react-outside-click-handler": "^1.2.0",
     "react-portal": "^4.1.5",
     "react-with-styles": "^3.2.0",
-    "react-with-styles-interface-css": "^4.0.1"
+    "react-with-styles-interface-css": "^4.0.2"
   },
   "peerDependencies": {
     "moment": "^2.18.1",

From 4da292a2d8dca18bb4133c2f94d9c81763d90f94 Mon Sep 17 00:00:00 2001
From: Carl Scott <carl.scott@solertium.com>
Date: Wed, 28 Mar 2018 18:24:42 -0400
Subject: [PATCH 218/618] Custom captions via renderCaption

Based on 9dd24d5aac0bf29535e7e000b1d883c2ecda3069
from @jvanderz22

Swaps out the given select-based UI and allows user to
supply their own custom interface instead.

See #25
See #558
---
 README.md                                     |  3 ++
 src/components/CalendarMonth.jsx              | 13 ++++-
 src/components/CalendarMonthGrid.jsx          | 48 +++++++++++++++++--
 src/components/DateRangePicker.jsx            |  3 ++
 src/components/DayPicker.jsx                  | 47 ++++++++++++++++++
 src/components/DayPickerRangeController.jsx   | 34 +++++++++++++
 .../DayPickerSingleDateController.jsx         | 37 ++++++++++++++
 src/components/SingleDatePicker.jsx           |  3 ++
 src/shapes/DateRangePickerShape.js            |  1 +
 src/shapes/SingleDatePickerShape.js           |  1 +
 src/utils/isNextMonth.js                      |  6 +++
 src/utils/isPrevMonth.js                      |  6 +++
 test/components/DayPicker_spec.jsx            | 44 +++++++++++++++++
 test/utils/isNextMonth__spec.js               | 32 +++++++++++++
 test/utils/isPrevMonth_spec.js                | 32 +++++++++++++
 15 files changed, 305 insertions(+), 5 deletions(-)
 create mode 100644 src/utils/isNextMonth.js
 create mode 100644 src/utils/isPrevMonth.js
 create mode 100644 test/utils/isNextMonth__spec.js
 create mode 100644 test/utils/isPrevMonth_spec.js

diff --git a/README.md b/README.md
index 621c218627..d41a916ac0 100644
--- a/README.md
+++ b/README.md
@@ -149,6 +149,7 @@ numberOfMonths: PropTypes.number,
 keepOpenOnDateSelect: PropTypes.bool,
 reopenPickerOnClearDates: PropTypes.bool,
 renderCalendarInfo: PropTypes.func,
+renderCaption: PropTypes.func,
 hideKeyboardShortcutsPanel: PropTypes.bool,
 
 // navigation related props
@@ -227,6 +228,7 @@ numberOfMonths: PropTypes.number,
 keepOpenOnDateSelect: PropTypes.bool,
 reopenPickerOnClearDate: PropTypes.bool,
 renderCalendarInfo: PropTypes.func,
+renderCaption: PropTypes.func,
 hideKeyboardShortcutsPanel: PropTypes.bool,
 daySize: nonNegativeInteger,
 isRTL: PropTypes.bool,
@@ -280,6 +282,7 @@ The following is a list of other *OPTIONAL* props you may provide to the `DayPic
   withPortal: PropTypes.bool,
   initialVisibleMonth: PropTypes.func,
   renderCalendarInfo: PropTypes.func,
+  renderCaption: PropTypes.func,
   onOutsideClick: PropTypes.func,
   keepOpenOnDateSelect: PropTypes.bool,
   noBorder: PropTypes.bool,
diff --git a/src/components/CalendarMonth.jsx b/src/components/CalendarMonth.jsx
index 948e81ebb6..2576812324 100644
--- a/src/components/CalendarMonth.jsx
+++ b/src/components/CalendarMonth.jsx
@@ -40,9 +40,12 @@ const propTypes = forbidExtraProps({
   onDayClick: PropTypes.func,
   onDayMouseEnter: PropTypes.func,
   onDayMouseLeave: PropTypes.func,
+  onMonthSelect: PropTypes.func,
+  onYearSelect: PropTypes.func,
   renderMonth: PropTypes.func,
   renderCalendarDay: PropTypes.func,
   renderDayContents: PropTypes.func,
+  renderCaption: PropTypes.func,
   firstDayOfWeek: DayOfWeekShape,
   setMonthTitleHeight: PropTypes.func,
   verticalBorderSpacing: nonNegativeInteger,
@@ -66,9 +69,12 @@ const defaultProps = {
   onDayClick() {},
   onDayMouseEnter() {},
   onDayMouseLeave() {},
+  onMonthSelect() {},
+  onYearSelect() {},
   renderMonth: null,
   renderCalendarDay: props => (<CalendarDay {...props} />),
   renderDayContents: null,
+  renderCaption: null,
   firstDayOfWeek: null,
   setMonthTitleHeight: null,
 
@@ -149,9 +155,12 @@ class CalendarMonth extends React.Component {
       onDayClick,
       onDayMouseEnter,
       onDayMouseLeave,
+      onMonthSelect,
+      onYearSelect,
       renderMonth,
       renderCalendarDay,
       renderDayContents,
+      renderCaption,
       daySize,
       focusedDate,
       isFocused,
@@ -183,7 +192,8 @@ class CalendarMonth extends React.Component {
             verticalScrollable && styles.CalendarMonth_caption__verticalScrollable,
           )}
         >
-          <strong>{monthTitle}</strong>
+          {renderCaption && renderCaption({ month, onMonthSelect, onYearSelect })}
+          {!renderCaption && <strong>{monthTitle}</strong>}
         </div>
 
         <table
@@ -256,4 +266,3 @@ export default withStyles(({ reactDates: { color, font, spacing } }) => ({
     paddingBottom: 7,
   },
 }))(CalendarMonth);
-
diff --git a/src/components/CalendarMonthGrid.jsx b/src/components/CalendarMonthGrid.jsx
index 68ebccb3db..0275163398 100644
--- a/src/components/CalendarMonthGrid.jsx
+++ b/src/components/CalendarMonthGrid.jsx
@@ -16,7 +16,8 @@ import isTransitionEndSupported from '../utils/isTransitionEndSupported';
 import getTransformStyles from '../utils/getTransformStyles';
 import getCalendarMonthWidth from '../utils/getCalendarMonthWidth';
 import toISOMonthString from '../utils/toISOMonthString';
-import isAfterDay from '../utils/isAfterDay';
+import isPrevMonth from '../utils/isPrevMonth';
+import isNextMonth from '../utils/isNextMonth';
 
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
@@ -41,10 +42,13 @@ const propTypes = forbidExtraProps({
   onDayMouseEnter: PropTypes.func,
   onDayMouseLeave: PropTypes.func,
   onMonthTransitionEnd: PropTypes.func,
+  onMonthChange: PropTypes.func,
+  onYearChange: PropTypes.func,
   renderMonth: PropTypes.func,
   renderCalendarDay: PropTypes.func,
   renderDayContents: PropTypes.func,
   translationValue: PropTypes.number,
+  renderCaption: PropTypes.func,
   daySize: nonNegativeInteger,
   focusedDate: momentPropTypes.momentObj, // indicates focusable day
   isFocused: PropTypes.bool, // indicates whether or not to move focus to focusable day
@@ -71,11 +75,14 @@ const defaultProps = {
   onDayClick() {},
   onDayMouseEnter() {},
   onDayMouseLeave() {},
+  onMonthChange() {},
+  onYearChange() {},
   onMonthTransitionEnd() {},
   renderMonth: null,
   renderCalendarDay: undefined,
   renderDayContents: null,
   translationValue: null,
+  renderCaption: null,
   daySize: DAY_SIZE,
   focusedDate: null,
   isFocused: false,
@@ -117,6 +124,8 @@ class CalendarMonthGrid extends React.Component {
     this.setContainerRef = this.setContainerRef.bind(this);
 
     this.locale = moment.locale();
+    this.onMonthSelect = this.onMonthSelect.bind(this);
+    this.onYearSelect = this.onYearSelect.bind(this);
   }
 
   componentDidMount() {
@@ -136,12 +145,15 @@ class CalendarMonthGrid extends React.Component {
     let newMonths = months;
 
     if (hasMonthChanged && !hasNumberOfMonthsChanged) {
-      if (isAfterDay(initialMonth, this.props.initialMonth)) {
+      if (isNextMonth(this.props.initialMonth, initialMonth)) {
         newMonths = months.slice(1);
         newMonths.push(months[months.length - 1].clone().add(1, 'month'));
-      } else {
+      } else if (isPrevMonth(this.props.initialMonth, initialMonth)) {
         newMonths = months.slice(0, months.length - 1);
         newMonths.unshift(months[0].clone().subtract(1, 'month'));
+      } else {
+        const withoutTransitionMonths = orientation === VERTICAL_SCROLLABLE;
+        newMonths = getMonths(initialMonth, numberOfMonths, withoutTransitionMonths);
       }
     }
 
@@ -189,6 +201,32 @@ class CalendarMonthGrid extends React.Component {
     onMonthTransitionEnd();
   }
 
+  onMonthSelect(currentMonth, newMonthVal) {
+    const newMonth = currentMonth.clone();
+    const { orientation } = this.props;
+    const { months } = this.state;
+    const withoutTransitionMonths = orientation === VERTICAL_SCROLLABLE;
+    let initialMonthSubtraction = months.indexOf(currentMonth);
+    if (!withoutTransitionMonths) {
+      initialMonthSubtraction -= 1;
+    }
+    newMonth.set('month', newMonthVal).subtract(initialMonthSubtraction, 'months');
+    this.props.onMonthChange(newMonth);
+  }
+
+  onYearSelect(currentMonth, newYearVal) {
+    const newMonth = currentMonth.clone();
+    const { orientation } = this.props;
+    const { months } = this.state;
+    const withoutTransitionMonths = orientation === VERTICAL_SCROLLABLE;
+    let initialMonthSubtraction = months.indexOf(currentMonth);
+    if (!withoutTransitionMonths) {
+      initialMonthSubtraction -= 1;
+    }
+    newMonth.set('year', newYearVal).subtract(initialMonthSubtraction, 'months');
+    this.props.onYearChange(newMonth);
+  }
+
   setContainerRef(ref) {
     this.container = ref;
   }
@@ -210,6 +248,7 @@ class CalendarMonthGrid extends React.Component {
       renderMonth,
       renderCalendarDay,
       renderDayContents,
+      renderCaption,
       onMonthTransitionEnd,
       firstDayOfWeek,
       focusedDate,
@@ -293,9 +332,12 @@ class CalendarMonthGrid extends React.Component {
                 onDayMouseEnter={onDayMouseEnter}
                 onDayMouseLeave={onDayMouseLeave}
                 onDayClick={onDayClick}
+                onMonthSelect={this.onMonthSelect}
+                onYearSelect={this.onYearSelect}
                 renderMonth={renderMonth}
                 renderCalendarDay={renderCalendarDay}
                 renderDayContents={renderDayContents}
+                renderCaption={renderCaption}
                 firstDayOfWeek={firstDayOfWeek}
                 daySize={daySize}
                 focusedDate={isVisible ? focusedDate : null}
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index d9a419658a..413ad07ce8 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -103,6 +103,7 @@ const defaultProps = {
   // day presentation and interaction related props
   renderCalendarDay: undefined,
   renderDayContents: null,
+  renderCaption: null,
   minimumNights: 1,
   enableOutsideDays: false,
   isDayBlocked: () => false,
@@ -369,6 +370,7 @@ class DateRangePicker extends React.Component {
       renderCalendarDay,
       renderDayContents,
       renderCalendarInfo,
+      renderCaption,
       calendarInfoPosition,
       firstDayOfWeek,
       initialVisibleMonth,
@@ -454,6 +456,7 @@ class DateRangePicker extends React.Component {
           renderCalendarDay={renderCalendarDay}
           renderDayContents={renderDayContents}
           renderCalendarInfo={renderCalendarInfo}
+          renderCaption={renderCaption}
           calendarInfoPosition={calendarInfoPosition}
           isFocused={isDayPickerFocused}
           showKeyboardShortcuts={showKeyboardShortcuts}
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 76822cf290..d86abe223f 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -46,6 +46,8 @@ const MONTH_PADDING = 23;
 const DAY_PICKER_PADDING = 9;
 const PREV_TRANSITION = 'prev';
 const NEXT_TRANSITION = 'next';
+const MONTH_SELECTION_TRANSITION = 'month_selection';
+const YEAR_SELECTION_TRANSITION = 'year_selection';
 
 const propTypes = forbidExtraProps({
   ...withStylesPropTypes,
@@ -75,10 +77,13 @@ const propTypes = forbidExtraProps({
   noNavButtons: PropTypes.bool,
   onPrevMonthClick: PropTypes.func,
   onNextMonthClick: PropTypes.func,
+  onMonthChange: PropTypes.func,
+  onYearChange: PropTypes.func,
   onMultiplyScrollableMonths: PropTypes.func, // VERTICAL_SCROLLABLE daypickers only
 
   // month props
   renderMonth: PropTypes.func,
+  renderCaption: PropTypes.func,
 
   // day props
   modifiers: PropTypes.object,
@@ -127,10 +132,13 @@ export const defaultProps = {
   noNavButtons: false,
   onPrevMonthClick() {},
   onNextMonthClick() {},
+  onMonthChange() {},
+  onYearChange() {},
   onMultiplyScrollableMonths() {},
 
   // month props
   renderMonth: null,
+  renderCaption: null,
 
   // day props
   modifiers: {},
@@ -195,6 +203,9 @@ class DayPicker extends React.Component {
     this.throttledKeyDown = throttle(this.onFinalKeyDown, 200, { trailing: false });
     this.onPrevMonthClick = this.onPrevMonthClick.bind(this);
     this.onNextMonthClick = this.onNextMonthClick.bind(this);
+    this.onMonthChange = this.onMonthChange.bind(this);
+    this.onYearChange = this.onYearChange.bind(this);
+
     this.multiplyScrollableMonths = this.multiplyScrollableMonths.bind(this);
     this.updateStateAfterMonthTransition = this.updateStateAfterMonthTransition.bind(this);
 
@@ -441,6 +452,30 @@ class DayPicker extends React.Component {
     });
   }
 
+  onMonthChange(currentMonth) {
+    // 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,
+    });
+  }
+
+  onYearChange(currentMonth) {
+    // 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,
+    });
+  }
+
   onNextMonthClick(nextFocusedDate, e) {
     const { isRTL, numberOfMonths, daySize } = this.props;
     const { calendarMonthWidth, monthTitleHeight } = this.state;
@@ -612,6 +647,8 @@ class DayPicker extends React.Component {
       onPrevMonthClick,
       onNextMonthClick,
       numberOfMonths,
+      onMonthChange,
+      onYearChange,
       isRTL,
     } = this.props;
 
@@ -640,6 +677,12 @@ class DayPicker extends React.Component {
       const newInvisibleMonth = newMonth.clone().add(numberOfMonths, 'month');
       const numberOfWeeks = getNumberOfCalendarMonthWeeks(newInvisibleMonth, firstDayOfWeek);
       this.calendarMonthWeeks = [...this.calendarMonthWeeks.slice(1), numberOfWeeks];
+    } else if (monthTransition === MONTH_SELECTION_TRANSITION) {
+      // TODO: add this.calendarMonthWeeks update
+      if (onMonthChange) onMonthChange(newMonth);
+    } else if (monthTransition === YEAR_SELECTION_TRANSITION) {
+      // TODO: add this.calendarMonthWeeks update
+      if (onYearChange) onYearChange(newMonth);
     }
 
     let newFocusedDate = null;
@@ -813,6 +856,7 @@ class DayPicker extends React.Component {
       renderCalendarDay,
       renderDayContents,
       renderCalendarInfo,
+      renderCaption,
       calendarInfoPosition,
       hideKeyboardShortcutsPanel,
       onOutsideClick,
@@ -969,9 +1013,12 @@ class DayPicker extends React.Component {
                   onDayClick={onDayClick}
                   onDayMouseEnter={onDayMouseEnter}
                   onDayMouseLeave={onDayMouseLeave}
+                  onMonthChange={this.onMonthChange}
+                  onYearChange={this.onYearChange}
                   renderMonth={renderMonth}
                   renderCalendarDay={renderCalendarDay}
                   renderDayContents={renderDayContents}
+                  renderCaption={renderCaption}
                   onMonthTransitionEnd={this.updateStateAfterMonthTransition}
                   monthFormat={monthFormat}
                   daySize={daySize}
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index fc72252724..c30296648a 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -80,6 +80,7 @@ const propTypes = forbidExtraProps({
   renderCalendarDay: PropTypes.func,
   renderDayContents: PropTypes.func,
   renderCalendarInfo: PropTypes.func,
+  renderCaption: PropTypes.func,
   calendarInfoPosition: CalendarInfoPositionShape,
   firstDayOfWeek: DayOfWeekShape,
   verticalHeight: nonNegativeInteger,
@@ -133,11 +134,14 @@ const defaultProps = {
 
   onPrevMonthClick() {},
   onNextMonthClick() {},
+  onMonthChange() {},
+  onYearChange() {},
   onOutsideClick() {},
 
   renderCalendarDay: undefined,
   renderDayContents: null,
   renderCalendarInfo: null,
+  renderCaption: null,
   calendarInfoPosition: INFO_POSITION_BOTTOM,
   firstDayOfWeek: null,
   verticalHeight: null,
@@ -215,6 +219,8 @@ export default class DayPickerRangeController extends React.Component {
     this.onDayMouseLeave = this.onDayMouseLeave.bind(this);
     this.onPrevMonthClick = this.onPrevMonthClick.bind(this);
     this.onNextMonthClick = this.onNextMonthClick.bind(this);
+    this.onMonthChange = this.onMonthChange.bind(this);
+    this.onYearChange = this.onYearChange.bind(this);
     this.onMultiplyScrollableMonths = this.onMultiplyScrollableMonths.bind(this);
     this.getFirstFocusableDay = this.getFirstFocusableDay.bind(this);
     this.setDayPickerRef = this.setDayPickerRef.bind(this);
@@ -681,6 +687,30 @@ export default class DayPickerRangeController extends React.Component {
     });
   }
 
+  onMonthChange(newMonth) {
+    const { numberOfMonths, enableOutsideDays, orientation } = this.props;
+    const withoutTransitionMonths = orientation === VERTICAL_SCROLLABLE;
+    const newVisibleDays =
+      getVisibleDays(newMonth, numberOfMonths, enableOutsideDays, withoutTransitionMonths);
+
+    this.setState({
+      currentMonth: newMonth.clone(),
+      visibleDays: this.getModifiers(newVisibleDays),
+    });
+  }
+
+  onYearChange(newMonth) {
+    const { numberOfMonths, enableOutsideDays, orientation } = this.props;
+    const withoutTransitionMonths = orientation === VERTICAL_SCROLLABLE;
+    const newVisibleDays =
+      getVisibleDays(newMonth, numberOfMonths, enableOutsideDays, withoutTransitionMonths);
+
+    this.setState({
+      currentMonth: newMonth.clone(),
+      visibleDays: this.getModifiers(newVisibleDays),
+    });
+  }
+
   onMultiplyScrollableMonths() {
     const { numberOfMonths, enableOutsideDays } = this.props;
     const { currentMonth, visibleDays } = this.state;
@@ -1003,6 +1033,7 @@ export default class DayPickerRangeController extends React.Component {
       renderCalendarDay,
       renderDayContents,
       renderCalendarInfo,
+      renderCaption,
       calendarInfoPosition,
       onBlur,
       isFocused,
@@ -1030,6 +1061,8 @@ export default class DayPickerRangeController extends React.Component {
         onDayMouseLeave={this.onDayMouseLeave}
         onPrevMonthClick={this.onPrevMonthClick}
         onNextMonthClick={this.onNextMonthClick}
+        onMonthChange={this.onMonthChange}
+        onYearChange={this.onYearChange}
         onMultiplyScrollableMonths={this.onMultiplyScrollableMonths}
         monthFormat={monthFormat}
         renderMonth={renderMonth}
@@ -1044,6 +1077,7 @@ export default class DayPickerRangeController extends React.Component {
         renderCalendarDay={renderCalendarDay}
         renderDayContents={renderDayContents}
         renderCalendarInfo={renderCalendarInfo}
+        renderCaption={renderCaption}
         calendarInfoPosition={calendarInfoPosition}
         firstDayOfWeek={firstDayOfWeek}
         hideKeyboardShortcutsPanel={hideKeyboardShortcutsPanel}
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 45f05ccdfc..6f8314307c 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -68,6 +68,7 @@ const propTypes = forbidExtraProps({
   renderCalendarDay: PropTypes.func,
   renderDayContents: PropTypes.func,
   renderCalendarInfo: PropTypes.func,
+  renderCaption: PropTypes.func,
   calendarInfoPosition: CalendarInfoPositionShape,
 
   // accessibility
@@ -122,6 +123,7 @@ const defaultProps = {
   renderCalendarDay: undefined,
   renderDayContents: null,
   renderCalendarInfo: null,
+  renderCaption: null,
   calendarInfoPosition: INFO_POSITION_BOTTOM,
 
   // accessibility
@@ -172,8 +174,11 @@ export default class DayPickerSingleDateController extends React.Component {
 
     this.onPrevMonthClick = this.onPrevMonthClick.bind(this);
     this.onNextMonthClick = this.onNextMonthClick.bind(this);
+    this.onMonthChange = this.onMonthChange.bind(this);
+    this.onYearChange = this.onYearChange.bind(this);
 
     this.getFirstFocusableDay = this.getFirstFocusableDay.bind(this);
+    this.setDayPickerRef = this.setDayPickerRef.bind(this);
   }
 
   componentDidMount() {
@@ -397,6 +402,29 @@ export default class DayPickerSingleDateController extends React.Component {
     });
   }
 
+  onMonthChange(newMonth) {
+    const { numberOfMonths, enableOutsideDays, orientation } = this.props;
+    const withoutTransitionMonths = orientation === VERTICAL_SCROLLABLE;
+    const newVisibleDays =
+      getVisibleDays(newMonth, numberOfMonths, enableOutsideDays, withoutTransitionMonths);
+
+    this.setState({
+      currentMonth: newMonth.clone(),
+      visibleDays: this.getModifiers(newVisibleDays),
+    });
+  }
+
+  onYearChange(newMonth) {
+    const { numberOfMonths, enableOutsideDays, orientation } = this.props;
+    const withoutTransitionMonths = orientation === VERTICAL_SCROLLABLE;
+    const newVisibleDays =
+      getVisibleDays(newMonth, numberOfMonths, enableOutsideDays, withoutTransitionMonths);
+
+    this.setState({
+      currentMonth: newMonth.clone(),
+      visibleDays: this.getModifiers(newVisibleDays),
+    });
+  }
 
   getFirstFocusableDay(newMonth) {
     const { date, numberOfMonths } = this.props;
@@ -457,6 +485,10 @@ export default class DayPickerSingleDateController extends React.Component {
     return { currentMonth, visibleDays };
   }
 
+  setDayPickerRef(ref) {
+    this.dayPicker = ref;
+  }
+
   addModifier(updatedDays, day, modifier) {
     const { numberOfMonths: numberOfVisibleMonths, enableOutsideDays, orientation } = this.props;
     const { currentMonth: firstVisibleMonth, visibleDays } = this.state;
@@ -607,6 +639,7 @@ export default class DayPickerSingleDateController extends React.Component {
       renderCalendarDay,
       renderDayContents,
       renderCalendarInfo,
+      renderCaption,
       calendarInfoPosition,
       isFocused,
       isRTL,
@@ -625,6 +658,7 @@ export default class DayPickerSingleDateController extends React.Component {
 
     return (
       <DayPicker
+        ref={this.setDayPickerRef}
         orientation={orientation}
         enableOutsideDays={enableOutsideDays}
         modifiers={visibleDays}
@@ -634,6 +668,8 @@ export default class DayPickerSingleDateController extends React.Component {
         onDayMouseLeave={this.onDayMouseLeave}
         onPrevMonthClick={this.onPrevMonthClick}
         onNextMonthClick={this.onNextMonthClick}
+        onMonthChange={this.onMonthChange}
+        onYearChange={this.onYearChange}
         monthFormat={monthFormat}
         withPortal={withPortal}
         hidden={!focused}
@@ -647,6 +683,7 @@ export default class DayPickerSingleDateController extends React.Component {
         renderCalendarDay={renderCalendarDay}
         renderDayContents={renderDayContents}
         renderCalendarInfo={renderCalendarInfo}
+        renderCaption={renderCaption}
         calendarInfoPosition={calendarInfoPosition}
         isFocused={isFocused}
         getFirstFocusableDay={this.getFirstFocusableDay}
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index 4dc66d97c2..45ea65e0b7 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -101,6 +101,7 @@ const defaultProps = {
   // day presentation and interaction related props
   renderCalendarDay: undefined,
   renderDayContents: null,
+  renderCaption: null,
   enableOutsideDays: false,
   isDayBlocked: () => false,
   isOutsideRange: day => !isInclusivelyAfterDay(day, moment()),
@@ -405,6 +406,7 @@ class SingleDatePicker extends React.Component {
       renderCalendarDay,
       renderDayContents,
       renderCalendarInfo,
+      renderCaption,
       calendarInfoPosition,
       hideKeyboardShortcutsPanel,
       firstDayOfWeek,
@@ -479,6 +481,7 @@ class SingleDatePicker extends React.Component {
           renderCalendarDay={renderCalendarDay}
           renderDayContents={renderDayContents}
           renderCalendarInfo={renderCalendarInfo}
+          renderCaption={renderCaption}
           calendarInfoPosition={calendarInfoPosition}
           isFocused={isDayPickerFocused}
           showKeyboardShortcuts={showKeyboardShortcuts}
diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js
index 03a21cd416..3772b2c1f5 100644
--- a/src/shapes/DateRangePickerShape.js
+++ b/src/shapes/DateRangePickerShape.js
@@ -79,6 +79,7 @@ export default {
   // day presentation and interaction related props
   renderCalendarDay: PropTypes.func,
   renderDayContents: PropTypes.func,
+  renderCaption: PropTypes.func,
   minimumNights: PropTypes.number,
   enableOutsideDays: PropTypes.bool,
   isDayBlocked: PropTypes.func,
diff --git a/src/shapes/SingleDatePickerShape.js b/src/shapes/SingleDatePickerShape.js
index bcd7628afa..9adc57d9ca 100644
--- a/src/shapes/SingleDatePickerShape.js
+++ b/src/shapes/SingleDatePickerShape.js
@@ -73,6 +73,7 @@ export default {
   // day presentation and interaction related props
   renderCalendarDay: PropTypes.func,
   renderDayContents: PropTypes.func,
+  renderCaption: PropTypes.func,
   enableOutsideDays: PropTypes.bool,
   isDayBlocked: PropTypes.func,
   isOutsideRange: PropTypes.func,
diff --git a/src/utils/isNextMonth.js b/src/utils/isNextMonth.js
new file mode 100644
index 0000000000..0971299915
--- /dev/null
+++ b/src/utils/isNextMonth.js
@@ -0,0 +1,6 @@
+import moment from 'moment';
+
+export default function isNextMonth(a, b) {
+  if (!moment.isMoment(a) || !moment.isMoment(b)) return false;
+  return b.isSame(a.clone().add(1, 'month'), 'month');
+}
diff --git a/src/utils/isPrevMonth.js b/src/utils/isPrevMonth.js
new file mode 100644
index 0000000000..7c6f9257cc
--- /dev/null
+++ b/src/utils/isPrevMonth.js
@@ -0,0 +1,6 @@
+import moment from 'moment';
+
+export default function isPrevMonth(a, b) {
+  if (!moment.isMoment(a) || !moment.isMoment(b)) return false;
+  return b.isSame(a.clone().subtract(1, 'month'), 'month');
+}
diff --git a/test/components/DayPicker_spec.jsx b/test/components/DayPicker_spec.jsx
index 6a4776a722..1a4e2f3710 100644
--- a/test/components/DayPicker_spec.jsx
+++ b/test/components/DayPicker_spec.jsx
@@ -423,6 +423,50 @@ describe('DayPicker', () => {
     });
   });
 
+  describe('#onMonthChange', () => {
+    it('sets state.monthTransition to "month_selection"', () => {
+      const wrapper = shallow(<DayPicker />).dive();
+      wrapper.instance().onMonthChange();
+      expect(wrapper.state().monthTransition).to.equal('month_selection');
+    });
+
+    it('sets state.nextFocusedDate to passed in date', () => {
+      const wrapper = shallow(<DayPicker />).dive();
+      const date = moment();
+      wrapper.instance().onMonthChange(date);
+      expect(wrapper.state().nextFocusedDate).to.equal(date);
+    });
+
+    it('sets state.currentMonth to passed in month', () => {
+      const wrapper = shallow(<DayPicker />).dive();
+      const date = moment();
+      wrapper.instance().onMonthChange(date);
+      expect(wrapper.state().currentMonth).to.equal(date);
+    });
+  });
+
+  describe('#onYearChange', () => {
+    it('sets state.yearTransition to "year_selection"', () => {
+      const wrapper = shallow(<DayPicker />).dive();
+      wrapper.instance().onYearChange();
+      expect(wrapper.state().monthTransition).to.equal('year_selection');
+    });
+
+    it('sets state.nextFocusedDate to passed in date', () => {
+      const wrapper = shallow(<DayPicker />).dive();
+      const date = moment();
+      wrapper.instance().onYearChange(date);
+      expect(wrapper.state().nextFocusedDate).to.equal(date);
+    });
+
+    it('sets state.currentMonth to passed in year', () => {
+      const wrapper = shallow(<DayPicker />).dive();
+      const date = moment();
+      wrapper.instance().onYearChange(date);
+      expect(wrapper.state().currentMonth).to.equal(date);
+    });
+  });
+
   describe('#onPrevMonthClick', () => {
     it('sets state.monthTransition to "prev"', () => {
       const wrapper = shallow(<DayPicker />).dive();
diff --git a/test/utils/isNextMonth__spec.js b/test/utils/isNextMonth__spec.js
new file mode 100644
index 0000000000..eb04c5c037
--- /dev/null
+++ b/test/utils/isNextMonth__spec.js
@@ -0,0 +1,32 @@
+import moment from 'moment';
+import { expect } from 'chai';
+
+import isNextMonth from '../../src/utils/isNextMonth';
+
+const today = moment();
+const nextMonth = moment().add(1, 'months');
+const twoMonths = moment().add(2, 'months');
+
+describe('isNextMonth', () => {
+  it('returns true if second argument is the next month after the first', () => {
+    expect(isNextMonth(today, nextMonth)).to.equal(true);
+  });
+
+  it('returns false if second argument is not the next month after the first', () => {
+    expect(isNextMonth(nextMonth, today)).to.equal(false);
+  });
+
+  it('returns false if second argument is more than one month after the first', () => {
+    expect(isNextMonth(today, twoMonths)).to.equal(false);
+  });
+
+  describe('non-moment arguments', () => {
+    it('is false if first argument is not a moment object', () => {
+      expect(isNextMonth(null, today)).to.equal(false);
+    });
+
+    it('is false if second argument is not a moment object', () => {
+      expect(isNextMonth(today, 'foo')).to.equal(false);
+    });
+  });
+});
diff --git a/test/utils/isPrevMonth_spec.js b/test/utils/isPrevMonth_spec.js
new file mode 100644
index 0000000000..3866eabea6
--- /dev/null
+++ b/test/utils/isPrevMonth_spec.js
@@ -0,0 +1,32 @@
+import moment from 'moment';
+import { expect } from 'chai';
+
+import isPrevMonth from '../../src/utils/isPrevMonth';
+
+const today = moment();
+const lastMonth = moment().subtract(1, 'months');
+const twoMonthsAgo = moment().subtract(2, 'months');
+
+describe('isPrevMonth', () => {
+  it('returns true if second argument is the month before the first', () => {
+    expect(isPrevMonth(today, lastMonth)).to.equal(true);
+  });
+
+  it('returns false if second argument is not the month before the first', () => {
+    expect(isPrevMonth(lastMonth, today)).to.equal(false);
+  });
+
+  it('returns false if second argument is more than one month before the first', () => {
+    expect(isPrevMonth(today, twoMonthsAgo)).to.equal(false);
+  });
+
+  describe('non-moment arguments', () => {
+    it('is false if first argument is not a moment object', () => {
+      expect(isPrevMonth(null, today)).to.equal(false);
+    });
+
+    it('is false if second argument is not a moment object', () => {
+      expect(isPrevMonth(today, 'foo')).to.equal(false);
+    });
+  });
+});

From d3668f828f9d98095b7480062cb26ac31396f017 Mon Sep 17 00:00:00 2001
From: Carl Scott <carl.scott@solertium.com>
Date: Fri, 6 Apr 2018 17:36:46 -0400
Subject: [PATCH 219/618] Example of date picker with custom caption

---
 stories/DayPickerSingleDateController.js | 32 ++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/stories/DayPickerSingleDateController.js b/stories/DayPickerSingleDateController.js
index 0b22b74e45..bffe9003e1 100644
--- a/stories/DayPickerSingleDateController.js
+++ b/stories/DayPickerSingleDateController.js
@@ -114,6 +114,38 @@ storiesOf('DayPickerSingleDateController', module)
       numberOfMonths={1}
     />
   ))
+  .addWithInfo('single month, custom caption', () => (
+    <DayPickerSingleDateControllerWrapper
+      onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
+      onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
+      onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
+      numberOfMonths={1}
+      renderCaption={({ month, onMonthSelect, onYearSelect }) => (
+        <div style={{ display: 'flex', justifyContent: 'center' }}>
+          <div>
+            <select
+              value={month.month()}
+              onChange={(e) => { onMonthSelect(month, e.target.value); }}
+            >
+              {moment.months().map((label, value) => (
+                <option value={value}>{label}</option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <select
+              value={month.year()}
+              onChange={(e) => { onYearSelect(month, e.target.value); }}
+            >
+              <option value={moment().year() - 1}>Last year</option>
+              <option value={moment().year()}>{moment().year()}</option>
+              <option value={moment().year() + 1}>Next year</option>
+            </select>
+          </div>
+        </div>
+      )}
+    />
+  ))
   .addWithInfo('3 months', () => (
     <DayPickerSingleDateControllerWrapper
       onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}

From 07fe347ea32f75553e66691cb7409fec00bdb948 Mon Sep 17 00:00:00 2001
From: Carl Scott <carl.scott@solertium.com>
Date: Fri, 13 Apr 2018 10:53:41 -0400
Subject: [PATCH 220/618] CalendarMonth prop destructuring and code cleanup

Destructure a couple props to remove the `this` reference
and tidy up the display call to `renderCaption`.
---
 src/components/CalendarMonth.jsx     | 7 +++++--
 src/components/CalendarMonthGrid.jsx | 8 ++++----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/CalendarMonth.jsx b/src/components/CalendarMonth.jsx
index 2576812324..103278cfce 100644
--- a/src/components/CalendarMonth.jsx
+++ b/src/components/CalendarMonth.jsx
@@ -192,8 +192,11 @@ class CalendarMonth extends React.Component {
             verticalScrollable && styles.CalendarMonth_caption__verticalScrollable,
           )}
         >
-          {renderCaption && renderCaption({ month, onMonthSelect, onYearSelect })}
-          {!renderCaption && <strong>{monthTitle}</strong>}
+          {
+            renderCaption ?
+              renderCaption({ month, onMonthSelect, onYearSelect }) :
+              <strong>{monthTitle}</strong>
+          }
         </div>
 
         <table
diff --git a/src/components/CalendarMonthGrid.jsx b/src/components/CalendarMonthGrid.jsx
index 0275163398..9a4d4d60bd 100644
--- a/src/components/CalendarMonthGrid.jsx
+++ b/src/components/CalendarMonthGrid.jsx
@@ -203,7 +203,7 @@ class CalendarMonthGrid extends React.Component {
 
   onMonthSelect(currentMonth, newMonthVal) {
     const newMonth = currentMonth.clone();
-    const { orientation } = this.props;
+    const { onMonthChange, orientation } = this.props;
     const { months } = this.state;
     const withoutTransitionMonths = orientation === VERTICAL_SCROLLABLE;
     let initialMonthSubtraction = months.indexOf(currentMonth);
@@ -211,12 +211,12 @@ class CalendarMonthGrid extends React.Component {
       initialMonthSubtraction -= 1;
     }
     newMonth.set('month', newMonthVal).subtract(initialMonthSubtraction, 'months');
-    this.props.onMonthChange(newMonth);
+    onMonthChange(newMonth);
   }
 
   onYearSelect(currentMonth, newYearVal) {
     const newMonth = currentMonth.clone();
-    const { orientation } = this.props;
+    const { onYearChange, orientation } = this.props;
     const { months } = this.state;
     const withoutTransitionMonths = orientation === VERTICAL_SCROLLABLE;
     let initialMonthSubtraction = months.indexOf(currentMonth);
@@ -224,7 +224,7 @@ class CalendarMonthGrid extends React.Component {
       initialMonthSubtraction -= 1;
     }
     newMonth.set('year', newYearVal).subtract(initialMonthSubtraction, 'months');
-    this.props.onYearChange(newMonth);
+    onYearChange(newMonth);
   }
 
   setContainerRef(ref) {

From 22617a26c2669eafd0d607624c011e24ebee080d Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Thu, 31 May 2018 10:54:37 -0700
Subject: [PATCH 221/618] Address my own comments! <3

- add story for daypickerrangecontroller
- document callbacks in readme
- make month comparison utils more performant
---
 README.md                                     |  6 ++--
 src/components/CalendarMonthGrid.jsx          |  3 +-
 src/components/DayPicker.jsx                  |  2 ++
 src/components/DayPickerRangeController.jsx   |  8 +----
 .../DayPickerSingleDateController.jsx         |  8 +----
 src/shapes/DateRangePickerShape.js            |  2 +-
 src/shapes/SingleDatePickerShape.js           |  2 +-
 src/utils/isNextMonth.js                      |  4 ++-
 src/utils/isPrevMonth.js                      |  4 ++-
 src/utils/isSameMonth.js                      |  9 ++++++
 stories/DayPickerRangeController.js           | 32 +++++++++++++++++++
 ...NextMonth__spec.js => isNextMonth_spec.js} |  0
 test/utils/isSameMonth_spec.js                | 27 ++++++++++++++++
 13 files changed, 85 insertions(+), 22 deletions(-)
 create mode 100644 src/utils/isSameMonth.js
 rename test/utils/{isNextMonth__spec.js => isNextMonth_spec.js} (100%)
 create mode 100644 test/utils/isSameMonth_spec.js

diff --git a/README.md b/README.md
index d41a916ac0..a0e89759d1 100644
--- a/README.md
+++ b/README.md
@@ -149,7 +149,7 @@ numberOfMonths: PropTypes.number,
 keepOpenOnDateSelect: PropTypes.bool,
 reopenPickerOnClearDates: PropTypes.bool,
 renderCalendarInfo: PropTypes.func,
-renderCaption: PropTypes.func,
+renderCaption: PropTypes.func, PropTypes.func, // ({ month, onMonthSelect, onYearSelect }) => PropTypes.node,
 hideKeyboardShortcutsPanel: PropTypes.bool,
 
 // navigation related props
@@ -228,7 +228,7 @@ numberOfMonths: PropTypes.number,
 keepOpenOnDateSelect: PropTypes.bool,
 reopenPickerOnClearDate: PropTypes.bool,
 renderCalendarInfo: PropTypes.func,
-renderCaption: PropTypes.func,
+renderCaption: PropTypes.func, // ({ month, onMonthSelect, onYearSelect }) => PropTypes.node,
 hideKeyboardShortcutsPanel: PropTypes.bool,
 daySize: nonNegativeInteger,
 isRTL: PropTypes.bool,
@@ -282,7 +282,7 @@ The following is a list of other *OPTIONAL* props you may provide to the `DayPic
   withPortal: PropTypes.bool,
   initialVisibleMonth: PropTypes.func,
   renderCalendarInfo: PropTypes.func,
-  renderCaption: PropTypes.func,
+  renderCaption: PropTypes.func, // ({ month, onMonthSelect, onYearSelect }) => PropTypes.node,
   onOutsideClick: PropTypes.func,
   keepOpenOnDateSelect: PropTypes.bool,
   noBorder: PropTypes.bool,
diff --git a/src/components/CalendarMonthGrid.jsx b/src/components/CalendarMonthGrid.jsx
index 9a4d4d60bd..ea11f0560f 100644
--- a/src/components/CalendarMonthGrid.jsx
+++ b/src/components/CalendarMonthGrid.jsx
@@ -211,6 +211,7 @@ class CalendarMonthGrid extends React.Component {
       initialMonthSubtraction -= 1;
     }
     newMonth.set('month', newMonthVal).subtract(initialMonthSubtraction, 'months');
+    this.calendarMonthHeights = [];
     onMonthChange(newMonth);
   }
 
@@ -224,13 +225,13 @@ class CalendarMonthGrid extends React.Component {
       initialMonthSubtraction -= 1;
     }
     newMonth.set('year', newYearVal).subtract(initialMonthSubtraction, 'months');
+    this.calendarMonthHeights = [];
     onYearChange(newMonth);
   }
 
   setContainerRef(ref) {
     this.container = ref;
   }
-
   render() {
     const {
       enableOutsideDays,
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index d86abe223f..afe36c9e1b 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -460,6 +460,7 @@ class DayPicker extends React.Component {
       translationValue: 0.00001,
       focusedDate: null,
       nextFocusedDate: currentMonth,
+      // hasSetHeight: false,
       currentMonth,
     });
   }
@@ -472,6 +473,7 @@ class DayPicker extends React.Component {
       translationValue: 0.0001,
       focusedDate: null,
       nextFocusedDate: currentMonth,
+      // hasSetHeight: false,
       currentMonth,
     });
   }
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index c30296648a..0f5e9f4cad 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -60,6 +60,7 @@ const propTypes = forbidExtraProps({
 
   // DayPicker props
   renderMonth: PropTypes.func,
+  renderCaption: PropTypes.func,
   enableOutsideDays: PropTypes.bool,
   numberOfMonths: PropTypes.number,
   orientation: ScrollableOrientationShape,
@@ -80,7 +81,6 @@ const propTypes = forbidExtraProps({
   renderCalendarDay: PropTypes.func,
   renderDayContents: PropTypes.func,
   renderCalendarInfo: PropTypes.func,
-  renderCaption: PropTypes.func,
   calendarInfoPosition: CalendarInfoPositionShape,
   firstDayOfWeek: DayOfWeekShape,
   verticalHeight: nonNegativeInteger,
@@ -223,7 +223,6 @@ export default class DayPickerRangeController extends React.Component {
     this.onYearChange = this.onYearChange.bind(this);
     this.onMultiplyScrollableMonths = this.onMultiplyScrollableMonths.bind(this);
     this.getFirstFocusableDay = this.getFirstFocusableDay.bind(this);
-    this.setDayPickerRef = this.setDayPickerRef.bind(this);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -802,10 +801,6 @@ export default class DayPickerRangeController extends React.Component {
     return { currentMonth, visibleDays };
   }
 
-  setDayPickerRef(ref) {
-    this.dayPicker = ref;
-  }
-
   addModifier(updatedDays, day, modifier) {
     const { numberOfMonths: numberOfVisibleMonths, enableOutsideDays, orientation } = this.props;
     const { currentMonth: firstVisibleMonth, visibleDays } = this.state;
@@ -1051,7 +1046,6 @@ export default class DayPickerRangeController extends React.Component {
 
     return (
       <DayPicker
-        ref={this.setDayPickerRef}
         orientation={orientation}
         enableOutsideDays={enableOutsideDays}
         modifiers={visibleDays}
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 6f8314307c..9d4ef212d7 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -46,6 +46,7 @@ const propTypes = forbidExtraProps({
 
   // DayPicker props
   renderMonth: PropTypes.func,
+  renderCaption: PropTypes.func,
   enableOutsideDays: PropTypes.bool,
   numberOfMonths: PropTypes.number,
   orientation: ScrollableOrientationShape,
@@ -68,7 +69,6 @@ const propTypes = forbidExtraProps({
   renderCalendarDay: PropTypes.func,
   renderDayContents: PropTypes.func,
   renderCalendarInfo: PropTypes.func,
-  renderCaption: PropTypes.func,
   calendarInfoPosition: CalendarInfoPositionShape,
 
   // accessibility
@@ -178,7 +178,6 @@ export default class DayPickerSingleDateController extends React.Component {
     this.onYearChange = this.onYearChange.bind(this);
 
     this.getFirstFocusableDay = this.getFirstFocusableDay.bind(this);
-    this.setDayPickerRef = this.setDayPickerRef.bind(this);
   }
 
   componentDidMount() {
@@ -485,10 +484,6 @@ export default class DayPickerSingleDateController extends React.Component {
     return { currentMonth, visibleDays };
   }
 
-  setDayPickerRef(ref) {
-    this.dayPicker = ref;
-  }
-
   addModifier(updatedDays, day, modifier) {
     const { numberOfMonths: numberOfVisibleMonths, enableOutsideDays, orientation } = this.props;
     const { currentMonth: firstVisibleMonth, visibleDays } = this.state;
@@ -658,7 +653,6 @@ export default class DayPickerSingleDateController extends React.Component {
 
     return (
       <DayPicker
-        ref={this.setDayPickerRef}
         orientation={orientation}
         enableOutsideDays={enableOutsideDays}
         modifiers={visibleDays}
diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js
index 3772b2c1f5..8794f6ebff 100644
--- a/src/shapes/DateRangePickerShape.js
+++ b/src/shapes/DateRangePickerShape.js
@@ -48,6 +48,7 @@ export default {
 
   // calendar presentation and interaction related props
   renderMonth: PropTypes.func,
+  renderCaption: PropTypes.func,
   orientation: OrientationShape,
   anchorDirection: anchorDirectionShape,
   openDirection: openDirectionShape,
@@ -79,7 +80,6 @@ export default {
   // day presentation and interaction related props
   renderCalendarDay: PropTypes.func,
   renderDayContents: PropTypes.func,
-  renderCaption: PropTypes.func,
   minimumNights: PropTypes.number,
   enableOutsideDays: PropTypes.bool,
   isDayBlocked: PropTypes.func,
diff --git a/src/shapes/SingleDatePickerShape.js b/src/shapes/SingleDatePickerShape.js
index 9adc57d9ca..aabc64c21d 100644
--- a/src/shapes/SingleDatePickerShape.js
+++ b/src/shapes/SingleDatePickerShape.js
@@ -41,6 +41,7 @@ export default {
 
   // calendar presentation and interaction related props
   renderMonth: PropTypes.func,
+  renderCaption: PropTypes.func,
   orientation: OrientationShape,
   anchorDirection: anchorDirectionShape,
   openDirection: openDirectionShape,
@@ -73,7 +74,6 @@ export default {
   // day presentation and interaction related props
   renderCalendarDay: PropTypes.func,
   renderDayContents: PropTypes.func,
-  renderCaption: PropTypes.func,
   enableOutsideDays: PropTypes.bool,
   isDayBlocked: PropTypes.func,
   isOutsideRange: PropTypes.func,
diff --git a/src/utils/isNextMonth.js b/src/utils/isNextMonth.js
index 0971299915..088cd139b1 100644
--- a/src/utils/isNextMonth.js
+++ b/src/utils/isNextMonth.js
@@ -1,6 +1,8 @@
 import moment from 'moment';
 
+import isSameMonth from './isSameMonth';
+
 export default function isNextMonth(a, b) {
   if (!moment.isMoment(a) || !moment.isMoment(b)) return false;
-  return b.isSame(a.clone().add(1, 'month'), 'month');
+  return isSameMonth(a.clone().add(1, 'month'), b);
 }
diff --git a/src/utils/isPrevMonth.js b/src/utils/isPrevMonth.js
index 7c6f9257cc..6b7d9a8a3e 100644
--- a/src/utils/isPrevMonth.js
+++ b/src/utils/isPrevMonth.js
@@ -1,6 +1,8 @@
 import moment from 'moment';
 
+import isSameMonth from './isSameMonth';
+
 export default function isPrevMonth(a, b) {
   if (!moment.isMoment(a) || !moment.isMoment(b)) return false;
-  return b.isSame(a.clone().subtract(1, 'month'), 'month');
+  return isSameMonth(a.clone().subtract(1, 'month'), b);
 }
diff --git a/src/utils/isSameMonth.js b/src/utils/isSameMonth.js
new file mode 100644
index 0000000000..6d29d244e7
--- /dev/null
+++ b/src/utils/isSameMonth.js
@@ -0,0 +1,9 @@
+import moment from 'moment';
+
+export default function isSameMonth(a, b) {
+  if (!moment.isMoment(a) || !moment.isMoment(b)) return false;
+  // Compare least significant, most likely to change units first
+  // Moment's isSame clones moment inputs and is a tad slow
+  return a.month() === b.month() &&
+    a.year() === b.year();
+}
diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
index 6d3ea8be29..35ba8fd1a0 100644
--- a/stories/DayPickerRangeController.js
+++ b/stories/DayPickerRangeController.js
@@ -148,6 +148,38 @@ storiesOf('DayPickerRangeController', module)
       numberOfMonths={1}
     />
   ))
+  .addWithInfo('single month, custom caption', () => (
+    <DayPickerRangeControllerWrapper
+      onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
+      onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
+      onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
+      numberOfMonths={1}
+      renderCaption={({ month, onMonthSelect, onYearSelect }) => (
+        <div style={{ display: 'flex', justifyContent: 'center' }}>
+          <div>
+            <select
+              value={month.month()}
+              onChange={(e) => { onMonthSelect(month, e.target.value); }}
+            >
+              {moment.months().map((label, value) => (
+                <option value={value}>{label}</option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <select
+              value={month.year()}
+              onChange={(e) => { onYearSelect(month, e.target.value); }}
+            >
+              <option value={moment().year() - 1}>Last year</option>
+              <option value={moment().year()}>{moment().year()}</option>
+              <option value={moment().year() + 1}>Next year</option>
+            </select>
+          </div>
+        </div>
+      )}
+    />
+  ))
   .addWithInfo('3 months', () => (
     <DayPickerRangeControllerWrapper
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
diff --git a/test/utils/isNextMonth__spec.js b/test/utils/isNextMonth_spec.js
similarity index 100%
rename from test/utils/isNextMonth__spec.js
rename to test/utils/isNextMonth_spec.js
diff --git a/test/utils/isSameMonth_spec.js b/test/utils/isSameMonth_spec.js
new file mode 100644
index 0000000000..ad56705705
--- /dev/null
+++ b/test/utils/isSameMonth_spec.js
@@ -0,0 +1,27 @@
+import moment from 'moment';
+import { expect } from 'chai';
+
+import isSameMonth from '../../src/utils/isSameMonth';
+
+const today = moment();
+const nextMonth = moment().add(1, 'month');
+
+describe('isSameMonth', () => {
+  it('returns true if args are the same month', () => {
+    expect(isSameMonth(today, today)).to.equal(true);
+  });
+
+  it('returns false if args are not the same month', () => {
+    expect(isSameMonth(today, nextMonth)).to.equal(false);
+  });
+
+  describe('non-moment object arguments', () => {
+    it('is false if first argument is not a moment object', () => {
+      expect(isSameMonth(null, today)).to.equal(false);
+    });
+
+    it('is false if second argument is not a moment object', () => {
+      expect(isSameMonth(today, 'foo')).to.equal(false);
+    });
+  });
+});

From 7313f823ab7f4fb9c52f3279589f0b50890bc93f Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Wed, 13 Jun 2018 13:55:57 -0700
Subject: [PATCH 222/618] Adjust height appropriately based on new month/year

This required a slight change in how the height animation is handled. Namely,
the height animation is now always on after the initial render.
---
 src/components/DayPicker.jsx       | 57 +++++++++++++++++++-----------
 test/components/DayPicker_spec.jsx |  6 ++--
 2 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index afe36c9e1b..091546f826 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -189,12 +189,12 @@ class DayPicker extends React.Component {
       onKeyboardShortcutsPanelClose() {},
       isTouchDevice: isTouchDevice(),
       withMouseInteractions: true,
-      hasSetHeight: false,
       calendarInfoWidth: 0,
-      monthTitleHeight: 0,
+      monthTitleHeight: null,
+      hasSetHeight: false,
     };
 
-    this.setCalendarMonthWeeks();
+    this.setCalendarMonthWeeks(currentMonth);
 
     this.calendarMonthGridHeight = 0;
     this.setCalendarInfoWidthTimeout = null;
@@ -219,6 +219,7 @@ class DayPicker extends React.Component {
   }
 
   componentDidMount() {
+    const { currentMonth } = this.state;
     if (this.calendarInfo) {
       this.setState({
         isTouchDevice: isTouchDevice(),
@@ -228,7 +229,7 @@ class DayPicker extends React.Component {
       this.setState({ isTouchDevice: isTouchDevice() });
     }
 
-    this.setCalendarMonthWeeks();
+    this.setCalendarMonthWeeks(currentMonth);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -453,6 +454,9 @@ class DayPicker extends React.Component {
   }
 
   onMonthChange(currentMonth) {
+    this.setCalendarMonthWeeks(currentMonth);
+    this.calculateAndSetDayPickerHeight();
+
     // Translation value is a hack to force an invisible transition that
     // properly rerenders the CalendarMonthGrid
     this.setState({
@@ -460,12 +464,14 @@ class DayPicker extends React.Component {
       translationValue: 0.00001,
       focusedDate: null,
       nextFocusedDate: currentMonth,
-      // hasSetHeight: false,
       currentMonth,
     });
   }
 
   onYearChange(currentMonth) {
+    this.setCalendarMonthWeeks(currentMonth);
+    this.calculateAndSetDayPickerHeight();
+
     // Translation value is a hack to force an invisible transition that
     // properly rerenders the CalendarMonthGrid
     this.setState({
@@ -473,7 +479,6 @@ class DayPicker extends React.Component {
       translationValue: 0.0001,
       focusedDate: null,
       nextFocusedDate: currentMonth,
-      // hasSetHeight: false,
       currentMonth,
     });
   }
@@ -553,23 +558,15 @@ class DayPicker extends React.Component {
   }
 
   setMonthTitleHeight(monthTitleHeight) {
-    const { daySize } = this.props;
-    const calendarMonthWeeksHeight = Math.max(0, ...this.calendarMonthWeeks) * (daySize - 1);
-    const newMonthHeight = monthTitleHeight + calendarMonthWeeksHeight + 1;
-
-    if (this.isHorizontal()) {
-      this.adjustDayPickerHeight(newMonthHeight);
-    }
-
     this.setState({
       monthTitleHeight,
-      hasSetHeight: true,
+    }, () => {
+      this.calculateAndSetDayPickerHeight();
     });
   }
 
-  setCalendarMonthWeeks() {
+  setCalendarMonthWeeks(currentMonth) {
     const { numberOfMonths } = this.props;
-    const { currentMonth } = this.state;
 
     this.calendarMonthWeeks = [];
     let month = currentMonth.clone().subtract(1, 'months');
@@ -719,8 +716,26 @@ class DayPicker extends React.Component {
   adjustDayPickerHeight(newMonthHeight) {
     const monthHeight = newMonthHeight + MONTH_PADDING;
     if (monthHeight !== this.calendarMonthGridHeight) {
-      this.calendarMonthGridHeight = monthHeight;
       this.transitionContainer.style.height = `${monthHeight}px`;
+      if (!this.calendarMonthGridHeight) {
+        setTimeout(() => {
+          this.setState({ hasSetHeight: true });
+        }, 0);
+      }
+      this.calendarMonthGridHeight = monthHeight;
+    }
+  }
+
+  calculateAndSetDayPickerHeight() {
+    const { daySize, numberOfMonths } = this.props;
+    const { monthTitleHeight } = this.state;
+
+    const visibleCalendarWeeks = this.calendarMonthWeeks.slice(1, numberOfMonths + 1);
+    const calendarMonthWeeksHeight = Math.max(0, ...visibleCalendarWeeks) * (daySize - 1);
+    const newMonthHeight = monthTitleHeight + calendarMonthWeeksHeight + 1;
+
+    if (this.isHorizontal()) {
+      this.adjustDayPickerHeight(newMonthHeight);
     }
   }
 
@@ -902,7 +917,7 @@ class DayPicker extends React.Component {
       keyboardShortcutButtonLocation = withPortal ? TOP_LEFT : TOP_RIGHT;
     }
 
-    const isHorizontalAndAnimating = isHorizontal && isCalendarMonthGridAnimating;
+    const shouldAnimateHeight = isHorizontal && hasSetHeight;
 
     const calendarInfoPositionTop = calendarInfoPosition === INFO_POSITION_TOP;
     const calendarInfoPositionBottom = calendarInfoPosition === INFO_POSITION_BOTTOM;
@@ -956,7 +971,7 @@ class DayPicker extends React.Component {
           isHorizontal && withPortal && styles.DayPicker_portal__horizontal,
           this.isVertical() && withPortal && styles.DayPicker_portal__vertical,
           dayPickerStyle,
-          !hasSetHeight && styles.DayPicker__hidden,
+          !monthTitleHeight && styles.DayPicker__hidden,
           !noBorder && styles.DayPicker__withBorder,
         )}
       >
@@ -995,7 +1010,7 @@ class DayPicker extends React.Component {
               <div
                 {...css(
                   styles.DayPicker_transitionContainer,
-                  isHorizontalAndAnimating && styles.DayPicker_transitionContainer__horizontal,
+                  shouldAnimateHeight && styles.DayPicker_transitionContainer__horizontal,
                   this.isVertical() && styles.DayPicker_transitionContainer__vertical,
                   verticalScrollable && styles.DayPicker_transitionContainer__verticalScrollable,
                   transitionContainerStyle,
diff --git a/test/components/DayPicker_spec.jsx b/test/components/DayPicker_spec.jsx
index 1a4e2f3710..a0c42805b9 100644
--- a/test/components/DayPicker_spec.jsx
+++ b/test/components/DayPicker_spec.jsx
@@ -426,7 +426,8 @@ describe('DayPicker', () => {
   describe('#onMonthChange', () => {
     it('sets state.monthTransition to "month_selection"', () => {
       const wrapper = shallow(<DayPicker />).dive();
-      wrapper.instance().onMonthChange();
+      const date = moment();
+      wrapper.instance().onMonthChange(date);
       expect(wrapper.state().monthTransition).to.equal('month_selection');
     });
 
@@ -448,7 +449,8 @@ describe('DayPicker', () => {
   describe('#onYearChange', () => {
     it('sets state.yearTransition to "year_selection"', () => {
       const wrapper = shallow(<DayPicker />).dive();
-      wrapper.instance().onYearChange();
+      const date = moment();
+      wrapper.instance().onYearChange(date);
       expect(wrapper.state().monthTransition).to.equal('year_selection');
     });
 

From 08c997cb81f0ec25a89373bd2e6968fc15e8b214 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Fri, 15 Jun 2018 15:08:04 -0700
Subject: [PATCH 223/618] Add CalendarMonthGrid tests

---
 src/components/CalendarMonthGrid.jsx       |  2 --
 src/components/DayPicker.jsx               |  2 --
 test/components/CalendarMonthGrid_spec.jsx | 25 +++++++++++++++++++++-
 test/components/DayPicker_spec.jsx         |  1 -
 4 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/components/CalendarMonthGrid.jsx b/src/components/CalendarMonthGrid.jsx
index ea11f0560f..3080891ebc 100644
--- a/src/components/CalendarMonthGrid.jsx
+++ b/src/components/CalendarMonthGrid.jsx
@@ -211,7 +211,6 @@ class CalendarMonthGrid extends React.Component {
       initialMonthSubtraction -= 1;
     }
     newMonth.set('month', newMonthVal).subtract(initialMonthSubtraction, 'months');
-    this.calendarMonthHeights = [];
     onMonthChange(newMonth);
   }
 
@@ -225,7 +224,6 @@ class CalendarMonthGrid extends React.Component {
       initialMonthSubtraction -= 1;
     }
     newMonth.set('year', newYearVal).subtract(initialMonthSubtraction, 'months');
-    this.calendarMonthHeights = [];
     onYearChange(newMonth);
   }
 
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 091546f826..bc368dc1bc 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -677,10 +677,8 @@ class DayPicker extends React.Component {
       const numberOfWeeks = getNumberOfCalendarMonthWeeks(newInvisibleMonth, firstDayOfWeek);
       this.calendarMonthWeeks = [...this.calendarMonthWeeks.slice(1), numberOfWeeks];
     } else if (monthTransition === MONTH_SELECTION_TRANSITION) {
-      // TODO: add this.calendarMonthWeeks update
       if (onMonthChange) onMonthChange(newMonth);
     } else if (monthTransition === YEAR_SELECTION_TRANSITION) {
-      // TODO: add this.calendarMonthWeeks update
       if (onYearChange) onYearChange(newMonth);
     }
 
diff --git a/test/components/CalendarMonthGrid_spec.jsx b/test/components/CalendarMonthGrid_spec.jsx
index 95cf9ea736..f90832cbab 100644
--- a/test/components/CalendarMonthGrid_spec.jsx
+++ b/test/components/CalendarMonthGrid_spec.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { expect } from 'chai';
 import { shallow } from 'enzyme';
 import moment from 'moment';
+import sinon from 'sinon-sandbox';
 
 import CalendarMonth from '../../src/components/CalendarMonth';
 import CalendarMonthGrid from '../../src/components/CalendarMonthGrid';
@@ -16,7 +17,7 @@ describe('CalendarMonthGrid', () => {
   });
 
   it('has style equal to getTransformStyles(foo)', () => {
-    const translationValue = 'foo';
+    const translationValue = 100;
     const transformStyles = getTransformStyles(`translateX(${translationValue}px)`);
     const wrapper = shallow(<CalendarMonthGrid translationValue={translationValue} />).dive();
     Object.keys(transformStyles).forEach((key) => {
@@ -64,4 +65,26 @@ describe('CalendarMonthGrid', () => {
 
     expect(Object.keys(collisions).length).to.equal(months.length);
   });
+
+  describe('#onMonthSelect', () => {
+    it('calls onMonthChange', () => {
+      const onMonthChangeSpy = sinon.spy();
+      const wrapper = shallow(<CalendarMonthGrid onMonthChange={onMonthChangeSpy} />).dive();
+      const currentMonth = moment();
+      const newMonthVal = (currentMonth.month() + 5) % 12;
+      wrapper.instance().onMonthSelect(currentMonth, newMonthVal);
+      expect(onMonthChangeSpy.callCount).to.equal(1);
+    });
+  });
+
+  describe('#onYearSelect', () => {
+    it('calls onYearChange', () => {
+      const onYearChangeSpy = sinon.spy();
+      const wrapper = shallow(<CalendarMonthGrid onYearChange={onYearChangeSpy} />).dive();
+      const currentMonth = moment();
+      const newMonthVal = (currentMonth.month() + 5) % 12;
+      wrapper.instance().onYearSelect(currentMonth, newMonthVal);
+      expect(onYearChangeSpy.callCount).to.equal(1);
+    });
+  });
 });
diff --git a/test/components/DayPicker_spec.jsx b/test/components/DayPicker_spec.jsx
index a0c42805b9..0093dba73a 100644
--- a/test/components/DayPicker_spec.jsx
+++ b/test/components/DayPicker_spec.jsx
@@ -22,7 +22,6 @@ const event = { preventDefault() {}, stopPropagation() {} };
 describe('DayPicker', () => {
   beforeEach(() => {
     sinon.stub(PureDayPicker.prototype, 'adjustDayPickerHeight');
-    sinon.stub(PureDayPicker.prototype, 'updateStateAfterMonthTransition');
   });
 
   afterEach(() => {

From 6a5d8ee83ac91b5bf0e52101e037533a57e2769b Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Tue, 19 Jun 2018 14:20:51 -0700
Subject: [PATCH 224/618] Rename renderMonth to renderMonthTitle and
 renderCaption to renderMonthElement

---
 README.md                                     | 10 ++++-----
 examples/DateRangePickerWrapper.jsx           |  2 +-
 examples/PresetDateRangePicker.jsx            |  2 +-
 examples/SingleDatePickerWrapper.jsx          |  2 +-
 src/components/CalendarMonth.jsx              | 20 ++++++++---------
 src/components/CalendarMonthGrid.jsx          | 18 +++++++--------
 src/components/DateRangePicker.jsx            | 12 +++++-----
 src/components/DayPicker.jsx                  | 22 +++++++++----------
 src/components/DayPickerRangeController.jsx   | 18 +++++++--------
 .../DayPickerSingleDateController.jsx         | 18 +++++++--------
 src/components/SingleDatePicker.jsx           | 12 +++++-----
 src/shapes/DateRangePickerShape.js            |  6 ++---
 src/shapes/SingleDatePickerShape.js           |  6 ++---
 stories/DateRangePicker.js                    |  2 +-
 stories/DayPickerRangeController.js           |  2 +-
 stories/DayPickerSingleDateController.js      |  2 +-
 stories/SingleDatePicker.js                   |  2 +-
 17 files changed, 78 insertions(+), 78 deletions(-)

diff --git a/README.md b/README.md
index a0e89759d1..f4484fd142 100644
--- a/README.md
+++ b/README.md
@@ -133,7 +133,7 @@ small: PropTypes.bool,
 regular: PropTypes.bool,
 
 // calendar presentation and interaction related props
-renderMonth: PropTypes.func,
+renderMonthText: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'), // (month) => PropTypes.string,
 orientation: PropTypes.oneOf([HORIZONTAL_ORIENTATION, VERTICAL_ORIENTATION]),
 anchorDirection: PropTypes.oneOf([ANCHOR_LEFT, ANCHOR_RIGHT]),
 horizontalMargin: PropTypes.number,
@@ -149,7 +149,7 @@ numberOfMonths: PropTypes.number,
 keepOpenOnDateSelect: PropTypes.bool,
 reopenPickerOnClearDates: PropTypes.bool,
 renderCalendarInfo: PropTypes.func,
-renderCaption: PropTypes.func, PropTypes.func, // ({ month, onMonthSelect, onYearSelect }) => PropTypes.node,
+renderMonthElement: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'), PropTypes.func, // ({ month, onMonthSelect, onYearSelect }) => PropTypes.node,
 hideKeyboardShortcutsPanel: PropTypes.bool,
 
 // navigation related props
@@ -214,7 +214,7 @@ small: PropTypes.bool,
 regular: PropTypes.bool,
 
 // calendar presentation and interaction related props
-renderMonth: PropTypes.func,
+renderMonthText: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'), // (month) => PropTypes.string,
 orientation: PropTypes.oneOf([HORIZONTAL_ORIENTATION, VERTICAL_ORIENTATION]),
 anchorDirection: PropTypes.oneOf([ANCHOR_LEFT, ANCHOR_RIGHT]),
 horizontalMargin: PropTypes.number,
@@ -228,7 +228,7 @@ numberOfMonths: PropTypes.number,
 keepOpenOnDateSelect: PropTypes.bool,
 reopenPickerOnClearDate: PropTypes.bool,
 renderCalendarInfo: PropTypes.func,
-renderCaption: PropTypes.func, // ({ month, onMonthSelect, onYearSelect }) => PropTypes.node,
+renderMonthElement: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'), // ({ month, onMonthSelect, onYearSelect }) => PropTypes.node,
 hideKeyboardShortcutsPanel: PropTypes.bool,
 daySize: nonNegativeInteger,
 isRTL: PropTypes.bool,
@@ -282,7 +282,7 @@ The following is a list of other *OPTIONAL* props you may provide to the `DayPic
   withPortal: PropTypes.bool,
   initialVisibleMonth: PropTypes.func,
   renderCalendarInfo: PropTypes.func,
-  renderCaption: PropTypes.func, // ({ month, onMonthSelect, onYearSelect }) => PropTypes.node,
+  renderMonthElement: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'), // ({ month, onMonthSelect, onYearSelect }) => PropTypes.node,
   onOutsideClick: PropTypes.func,
   keepOpenOnDateSelect: PropTypes.bool,
   noBorder: PropTypes.bool,
diff --git a/examples/DateRangePickerWrapper.jsx b/examples/DateRangePickerWrapper.jsx
index a6f507ace0..ce78bb9bee 100644
--- a/examples/DateRangePickerWrapper.jsx
+++ b/examples/DateRangePickerWrapper.jsx
@@ -53,7 +53,7 @@ const defaultProps = {
   regular: false,
 
   // calendar presentation and interaction related props
-  renderMonth: null,
+  renderMonthText: null,
   orientation: HORIZONTAL_ORIENTATION,
   anchorDirection: ANCHOR_LEFT,
   horizontalMargin: 0,
diff --git a/examples/PresetDateRangePicker.jsx b/examples/PresetDateRangePicker.jsx
index f88e48b2ed..ce8640a79b 100644
--- a/examples/PresetDateRangePicker.jsx
+++ b/examples/PresetDateRangePicker.jsx
@@ -59,7 +59,7 @@ const defaultProps = {
   customCloseIcon: null,
 
   // calendar presentation and interaction related props
-  renderMonth: null,
+  renderMonthText: null,
   orientation: HORIZONTAL_ORIENTATION,
   anchorDirection: ANCHOR_LEFT,
   horizontalMargin: 0,
diff --git a/examples/SingleDatePickerWrapper.jsx b/examples/SingleDatePickerWrapper.jsx
index 9e65e6ef16..92a309f7a8 100644
--- a/examples/SingleDatePickerWrapper.jsx
+++ b/examples/SingleDatePickerWrapper.jsx
@@ -45,7 +45,7 @@ const defaultProps = {
   keepFocusOnInput: false,
 
   // calendar presentation and interaction related props
-  renderMonth: null,
+  renderMonthText: null,
   orientation: HORIZONTAL_ORIENTATION,
   anchorDirection: ANCHOR_LEFT,
   horizontalMargin: 0,
diff --git a/src/components/CalendarMonth.jsx b/src/components/CalendarMonth.jsx
index 103278cfce..945ac515a1 100644
--- a/src/components/CalendarMonth.jsx
+++ b/src/components/CalendarMonth.jsx
@@ -4,7 +4,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import shallowCompare from 'react-addons-shallow-compare';
 import momentPropTypes from 'react-moment-proptypes';
-import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
+import { forbidExtraProps, mutuallyExclusiveProps, nonNegativeInteger } from 'airbnb-prop-types';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 import moment from 'moment';
 
@@ -42,10 +42,10 @@ const propTypes = forbidExtraProps({
   onDayMouseLeave: PropTypes.func,
   onMonthSelect: PropTypes.func,
   onYearSelect: PropTypes.func,
-  renderMonth: PropTypes.func,
+  renderMonthText: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'),
   renderCalendarDay: PropTypes.func,
   renderDayContents: PropTypes.func,
-  renderCaption: PropTypes.func,
+  renderMonthElement: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'),
   firstDayOfWeek: DayOfWeekShape,
   setMonthTitleHeight: PropTypes.func,
   verticalBorderSpacing: nonNegativeInteger,
@@ -71,10 +71,10 @@ const defaultProps = {
   onDayMouseLeave() {},
   onMonthSelect() {},
   onYearSelect() {},
-  renderMonth: null,
+  renderMonthText: null,
   renderCalendarDay: props => (<CalendarDay {...props} />),
   renderDayContents: null,
-  renderCaption: null,
+  renderMonthElement: null,
   firstDayOfWeek: null,
   setMonthTitleHeight: null,
 
@@ -157,10 +157,10 @@ class CalendarMonth extends React.Component {
       onDayMouseLeave,
       onMonthSelect,
       onYearSelect,
-      renderMonth,
+      renderMonthText,
       renderCalendarDay,
       renderDayContents,
-      renderCaption,
+      renderMonthElement,
       daySize,
       focusedDate,
       isFocused,
@@ -171,7 +171,7 @@ class CalendarMonth extends React.Component {
     } = this.props;
 
     const { weeks } = this.state;
-    const monthTitle = renderMonth ? renderMonth(month) : month.format(monthFormat);
+    const monthTitle = renderMonthText ? renderMonthText(month) : month.format(monthFormat);
 
     const verticalScrollable = orientation === VERTICAL_SCROLLABLE;
 
@@ -193,8 +193,8 @@ class CalendarMonth extends React.Component {
           )}
         >
           {
-            renderCaption ?
-              renderCaption({ month, onMonthSelect, onYearSelect }) :
+            renderMonthElement ?
+              renderMonthElement({ month, onMonthSelect, onYearSelect }) :
               <strong>{monthTitle}</strong>
           }
         </div>
diff --git a/src/components/CalendarMonthGrid.jsx b/src/components/CalendarMonthGrid.jsx
index 3080891ebc..934383a1a7 100644
--- a/src/components/CalendarMonthGrid.jsx
+++ b/src/components/CalendarMonthGrid.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import shallowCompare from 'react-addons-shallow-compare';
 import momentPropTypes from 'react-moment-proptypes';
-import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
+import { forbidExtraProps, mutuallyExclusiveProps, nonNegativeInteger } from 'airbnb-prop-types';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 import moment from 'moment';
 import { addEventListener } from 'consolidated-events';
@@ -44,11 +44,11 @@ const propTypes = forbidExtraProps({
   onMonthTransitionEnd: PropTypes.func,
   onMonthChange: PropTypes.func,
   onYearChange: PropTypes.func,
-  renderMonth: PropTypes.func,
+  renderMonthText: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'),
   renderCalendarDay: PropTypes.func,
   renderDayContents: PropTypes.func,
   translationValue: PropTypes.number,
-  renderCaption: PropTypes.func,
+  renderMonthElement: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'),
   daySize: nonNegativeInteger,
   focusedDate: momentPropTypes.momentObj, // indicates focusable day
   isFocused: PropTypes.bool, // indicates whether or not to move focus to focusable day
@@ -78,11 +78,11 @@ const defaultProps = {
   onMonthChange() {},
   onYearChange() {},
   onMonthTransitionEnd() {},
-  renderMonth: null,
+  renderMonthText: null,
   renderCalendarDay: undefined,
   renderDayContents: null,
   translationValue: null,
-  renderCaption: null,
+  renderMonthElement: null,
   daySize: DAY_SIZE,
   focusedDate: null,
   isFocused: false,
@@ -244,10 +244,10 @@ class CalendarMonthGrid extends React.Component {
       onDayMouseEnter,
       onDayMouseLeave,
       onDayClick,
-      renderMonth,
+      renderMonthText,
       renderCalendarDay,
       renderDayContents,
-      renderCaption,
+      renderMonthElement,
       onMonthTransitionEnd,
       firstDayOfWeek,
       focusedDate,
@@ -333,10 +333,10 @@ class CalendarMonthGrid extends React.Component {
                 onDayClick={onDayClick}
                 onMonthSelect={this.onMonthSelect}
                 onYearSelect={this.onYearSelect}
-                renderMonth={renderMonth}
+                renderMonthText={renderMonthText}
                 renderCalendarDay={renderCalendarDay}
                 renderDayContents={renderDayContents}
-                renderCaption={renderCaption}
+                renderMonthElement={renderMonthElement}
                 firstDayOfWeek={firstDayOfWeek}
                 daySize={daySize}
                 focusedDate={isVisible ? focusedDate : null}
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 413ad07ce8..4172e28cd5 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -68,7 +68,7 @@ const defaultProps = {
   keepFocusOnInput: false,
 
   // calendar presentation and interaction related props
-  renderMonth: null,
+  renderMonthText: null,
   orientation: HORIZONTAL_ORIENTATION,
   anchorDirection: ANCHOR_LEFT,
   openDirection: OPEN_DOWN,
@@ -103,7 +103,7 @@ const defaultProps = {
   // day presentation and interaction related props
   renderCalendarDay: undefined,
   renderDayContents: null,
-  renderCaption: null,
+  renderMonthElement: null,
   minimumNights: 1,
   enableOutsideDays: false,
   isDayBlocked: () => false,
@@ -351,7 +351,7 @@ class DateRangePicker extends React.Component {
       numberOfMonths,
       orientation,
       monthFormat,
-      renderMonth,
+      renderMonthText,
       navPrev,
       navNext,
       onPrevMonthClick,
@@ -370,7 +370,7 @@ class DateRangePicker extends React.Component {
       renderCalendarDay,
       renderDayContents,
       renderCalendarInfo,
-      renderCaption,
+      renderMonthElement,
       calendarInfoPosition,
       firstDayOfWeek,
       initialVisibleMonth,
@@ -441,7 +441,7 @@ class DateRangePicker extends React.Component {
           startDate={startDate}
           endDate={endDate}
           monthFormat={monthFormat}
-          renderMonth={renderMonth}
+          renderMonthText={renderMonthText}
           withPortal={withAnyPortal}
           daySize={daySize}
           initialVisibleMonth={initialVisibleMonthThunk}
@@ -456,7 +456,7 @@ class DateRangePicker extends React.Component {
           renderCalendarDay={renderCalendarDay}
           renderDayContents={renderDayContents}
           renderCalendarInfo={renderCalendarInfo}
-          renderCaption={renderCaption}
+          renderMonthElement={renderMonthElement}
           calendarInfoPosition={calendarInfoPosition}
           isFocused={isDayPickerFocused}
           showKeyboardShortcuts={showKeyboardShortcuts}
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index bc368dc1bc..ede34de71c 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import shallowCompare from 'react-addons-shallow-compare';
-import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
+import { forbidExtraProps, mutuallyExclusiveProps, nonNegativeInteger } from 'airbnb-prop-types';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 
 import moment from 'moment';
@@ -82,8 +82,8 @@ const propTypes = forbidExtraProps({
   onMultiplyScrollableMonths: PropTypes.func, // VERTICAL_SCROLLABLE daypickers only
 
   // month props
-  renderMonth: PropTypes.func,
-  renderCaption: PropTypes.func,
+  renderMonthText: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'),
+  renderMonthElement: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'),
 
   // day props
   modifiers: PropTypes.object,
@@ -137,8 +137,8 @@ export const defaultProps = {
   onMultiplyScrollableMonths() {},
 
   // month props
-  renderMonth: null,
-  renderCaption: null,
+  renderMonthText: null,
+  renderMonthElement: null,
 
   // day props
   modifiers: {},
@@ -238,7 +238,7 @@ class DayPicker extends React.Component {
       isFocused,
       showKeyboardShortcuts,
       onBlur,
-      renderMonth,
+      renderMonthText,
     } = nextProps;
     const { currentMonth } = this.state;
 
@@ -278,7 +278,7 @@ class DayPicker extends React.Component {
       }
     }
 
-    if (renderMonth !== this.props.renderMonth) {
+    if (renderMonthText !== this.props.renderMonthText) {
       this.setState({
         monthTitleHeight: null,
       });
@@ -867,11 +867,11 @@ class DayPicker extends React.Component {
       onDayMouseEnter,
       onDayMouseLeave,
       firstDayOfWeek,
-      renderMonth,
+      renderMonthText,
       renderCalendarDay,
       renderDayContents,
       renderCalendarInfo,
-      renderCaption,
+      renderMonthElement,
       calendarInfoPosition,
       hideKeyboardShortcutsPanel,
       onOutsideClick,
@@ -1030,10 +1030,10 @@ class DayPicker extends React.Component {
                   onDayMouseLeave={onDayMouseLeave}
                   onMonthChange={this.onMonthChange}
                   onYearChange={this.onYearChange}
-                  renderMonth={renderMonth}
+                  renderMonthText={renderMonthText}
                   renderCalendarDay={renderCalendarDay}
                   renderDayContents={renderDayContents}
-                  renderCaption={renderCaption}
+                  renderMonthElement={renderMonthElement}
                   onMonthTransitionEnd={this.updateStateAfterMonthTransition}
                   monthFormat={monthFormat}
                   daySize={daySize}
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 0f5e9f4cad..19dd8b68bc 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import momentPropTypes from 'react-moment-proptypes';
-import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
+import { forbidExtraProps, mutuallyExclusiveProps, nonNegativeInteger } from 'airbnb-prop-types';
 import moment from 'moment';
 import values from 'object.values';
 import isTouchDevice from 'is-touch-device';
@@ -59,8 +59,8 @@ const propTypes = forbidExtraProps({
   isDayHighlighted: PropTypes.func,
 
   // DayPicker props
-  renderMonth: PropTypes.func,
-  renderCaption: PropTypes.func,
+  renderMonthText: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'),
+  renderMonthElement: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'),
   enableOutsideDays: PropTypes.bool,
   numberOfMonths: PropTypes.number,
   orientation: ScrollableOrientationShape,
@@ -119,7 +119,7 @@ const defaultProps = {
   isDayHighlighted() {},
 
   // DayPicker props
-  renderMonth: null,
+  renderMonthText: null,
   enableOutsideDays: false,
   numberOfMonths: 1,
   orientation: HORIZONTAL_ORIENTATION,
@@ -141,7 +141,7 @@ const defaultProps = {
   renderCalendarDay: undefined,
   renderDayContents: null,
   renderCalendarInfo: null,
-  renderCaption: null,
+  renderMonthElement: null,
   calendarInfoPosition: INFO_POSITION_BOTTOM,
   firstDayOfWeek: null,
   verticalHeight: null,
@@ -1014,7 +1014,7 @@ export default class DayPickerRangeController extends React.Component {
       numberOfMonths,
       orientation,
       monthFormat,
-      renderMonth,
+      renderMonthText,
       navPrev,
       navNext,
       noNavButtons,
@@ -1028,7 +1028,7 @@ export default class DayPickerRangeController extends React.Component {
       renderCalendarDay,
       renderDayContents,
       renderCalendarInfo,
-      renderCaption,
+      renderMonthElement,
       calendarInfoPosition,
       onBlur,
       isFocused,
@@ -1059,7 +1059,7 @@ export default class DayPickerRangeController extends React.Component {
         onYearChange={this.onYearChange}
         onMultiplyScrollableMonths={this.onMultiplyScrollableMonths}
         monthFormat={monthFormat}
-        renderMonth={renderMonth}
+        renderMonthText={renderMonthText}
         withPortal={withPortal}
         hidden={!focusedInput}
         initialVisibleMonth={() => currentMonth}
@@ -1071,7 +1071,7 @@ export default class DayPickerRangeController extends React.Component {
         renderCalendarDay={renderCalendarDay}
         renderDayContents={renderDayContents}
         renderCalendarInfo={renderCalendarInfo}
-        renderCaption={renderCaption}
+        renderMonthElement={renderMonthElement}
         calendarInfoPosition={calendarInfoPosition}
         firstDayOfWeek={firstDayOfWeek}
         hideKeyboardShortcutsPanel={hideKeyboardShortcutsPanel}
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 9d4ef212d7..1dd938e424 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import momentPropTypes from 'react-moment-proptypes';
-import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
+import { forbidExtraProps, mutuallyExclusiveProps, nonNegativeInteger } from 'airbnb-prop-types';
 import moment from 'moment';
 import values from 'object.values';
 import isTouchDevice from 'is-touch-device';
@@ -45,8 +45,8 @@ const propTypes = forbidExtraProps({
   isDayHighlighted: PropTypes.func,
 
   // DayPicker props
-  renderMonth: PropTypes.func,
-  renderCaption: PropTypes.func,
+  renderMonthText: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'),
+  renderMonthElement: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'),
   enableOutsideDays: PropTypes.bool,
   numberOfMonths: PropTypes.number,
   orientation: ScrollableOrientationShape,
@@ -99,7 +99,7 @@ const defaultProps = {
   isDayHighlighted() {},
 
   // DayPicker props
-  renderMonth: null,
+  renderMonthText: null,
   enableOutsideDays: false,
   numberOfMonths: 1,
   orientation: HORIZONTAL_ORIENTATION,
@@ -123,7 +123,7 @@ const defaultProps = {
   renderCalendarDay: undefined,
   renderDayContents: null,
   renderCalendarInfo: null,
-  renderCaption: null,
+  renderMonthElement: null,
   calendarInfoPosition: INFO_POSITION_BOTTOM,
 
   // accessibility
@@ -621,7 +621,7 @@ export default class DayPickerSingleDateController extends React.Component {
       numberOfMonths,
       orientation,
       monthFormat,
-      renderMonth,
+      renderMonthText,
       navPrev,
       navNext,
       onOutsideClick,
@@ -634,7 +634,7 @@ export default class DayPickerSingleDateController extends React.Component {
       renderCalendarDay,
       renderDayContents,
       renderCalendarInfo,
-      renderCaption,
+      renderMonthElement,
       calendarInfoPosition,
       isFocused,
       isRTL,
@@ -673,11 +673,11 @@ export default class DayPickerSingleDateController extends React.Component {
         onOutsideClick={onOutsideClick}
         navPrev={navPrev}
         navNext={navNext}
-        renderMonth={renderMonth}
+        renderMonthText={renderMonthText}
         renderCalendarDay={renderCalendarDay}
         renderDayContents={renderDayContents}
         renderCalendarInfo={renderCalendarInfo}
-        renderCaption={renderCaption}
+        renderMonthElement={renderMonthElement}
         calendarInfoPosition={calendarInfoPosition}
         isFocused={isFocused}
         getFirstFocusableDay={this.getFirstFocusableDay}
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index 45ea65e0b7..4537a8293c 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -96,12 +96,12 @@ const defaultProps = {
   onClose() {},
 
   // month presentation and interaction related props
-  renderMonth: null,
+  renderMonthText: null,
 
   // day presentation and interaction related props
   renderCalendarDay: undefined,
   renderDayContents: null,
-  renderCaption: null,
+  renderMonthElement: null,
   enableOutsideDays: false,
   isDayBlocked: () => false,
   isOutsideRange: day => !isInclusivelyAfterDay(day, moment()),
@@ -402,11 +402,11 @@ class SingleDatePicker extends React.Component {
       withFullScreenPortal,
       keepOpenOnDateSelect,
       initialVisibleMonth,
-      renderMonth,
+      renderMonthText,
       renderCalendarDay,
       renderDayContents,
       renderCalendarInfo,
-      renderCaption,
+      renderMonthElement,
       calendarInfoPosition,
       hideKeyboardShortcutsPanel,
       firstDayOfWeek,
@@ -477,11 +477,11 @@ class SingleDatePicker extends React.Component {
           onPrevMonthClick={onPrevMonthClick}
           onNextMonthClick={onNextMonthClick}
           onClose={onClose}
-          renderMonth={renderMonth}
+          renderMonthText={renderMonthText}
           renderCalendarDay={renderCalendarDay}
           renderDayContents={renderDayContents}
           renderCalendarInfo={renderCalendarInfo}
-          renderCaption={renderCaption}
+          renderMonthElement={renderMonthElement}
           calendarInfoPosition={calendarInfoPosition}
           isFocused={isDayPickerFocused}
           showKeyboardShortcuts={showKeyboardShortcuts}
diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js
index 8794f6ebff..e1775e0296 100644
--- a/src/shapes/DateRangePickerShape.js
+++ b/src/shapes/DateRangePickerShape.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import momentPropTypes from 'react-moment-proptypes';
-import { nonNegativeInteger } from 'airbnb-prop-types';
+import { mutuallyExclusiveProps, nonNegativeInteger } from 'airbnb-prop-types';
 
 import { DateRangePickerPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
@@ -47,8 +47,8 @@ export default {
   keepFocusOnInput: PropTypes.bool,
 
   // calendar presentation and interaction related props
-  renderMonth: PropTypes.func,
-  renderCaption: PropTypes.func,
+  renderMonthText: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'),
+  renderMonthElement: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'),
   orientation: OrientationShape,
   anchorDirection: anchorDirectionShape,
   openDirection: openDirectionShape,
diff --git a/src/shapes/SingleDatePickerShape.js b/src/shapes/SingleDatePickerShape.js
index aabc64c21d..1ed90e6f73 100644
--- a/src/shapes/SingleDatePickerShape.js
+++ b/src/shapes/SingleDatePickerShape.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import momentPropTypes from 'react-moment-proptypes';
-import { nonNegativeInteger } from 'airbnb-prop-types';
+import { mutuallyExclusiveProps, nonNegativeInteger } from 'airbnb-prop-types';
 
 import { SingleDatePickerPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
@@ -40,8 +40,8 @@ export default {
   keepFocusOnInput: PropTypes.bool,
 
   // calendar presentation and interaction related props
-  renderMonth: PropTypes.func,
-  renderCaption: PropTypes.func,
+  renderMonthText: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'),
+  renderMonthElement: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'),
   orientation: OrientationShape,
   anchorDirection: anchorDirectionShape,
   openDirection: openDirectionShape,
diff --git a/stories/DateRangePicker.js b/stories/DateRangePicker.js
index 5dcf3833fc..5e9b0561a1 100644
--- a/stories/DateRangePicker.js
+++ b/stories/DateRangePicker.js
@@ -91,7 +91,7 @@ storiesOf('DateRangePicker (DRP)', module)
         stateDateWrapper={momentJalaali}
         startDatePlaceholderText="تاریخ شروع"
         endDatePlaceholderText="تاریخ پایان"
-        renderMonth={month => momentJalaali(month).format('jMMMM jYYYY')}
+        renderMonthText={month => momentJalaali(month).format('jMMMM jYYYY')}
         renderDayContents={day => momentJalaali(day).format('jD')}
       />
     );
diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
index 35ba8fd1a0..77486e99b3 100644
--- a/stories/DayPickerRangeController.js
+++ b/stories/DayPickerRangeController.js
@@ -154,7 +154,7 @@ storiesOf('DayPickerRangeController', module)
       onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
       numberOfMonths={1}
-      renderCaption={({ month, onMonthSelect, onYearSelect }) => (
+      renderMonthElement={({ month, onMonthSelect, onYearSelect }) => (
         <div style={{ display: 'flex', justifyContent: 'center' }}>
           <div>
             <select
diff --git a/stories/DayPickerSingleDateController.js b/stories/DayPickerSingleDateController.js
index bffe9003e1..bbaaacca9b 100644
--- a/stories/DayPickerSingleDateController.js
+++ b/stories/DayPickerSingleDateController.js
@@ -120,7 +120,7 @@ storiesOf('DayPickerSingleDateController', module)
       onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
       numberOfMonths={1}
-      renderCaption={({ month, onMonthSelect, onYearSelect }) => (
+      renderMonthElement={({ month, onMonthSelect, onYearSelect }) => (
         <div style={{ display: 'flex', justifyContent: 'center' }}>
           <div>
             <select
diff --git a/stories/SingleDatePicker.js b/stories/SingleDatePicker.js
index 621c8bfc18..bab15200da 100644
--- a/stories/SingleDatePicker.js
+++ b/stories/SingleDatePicker.js
@@ -54,7 +54,7 @@ storiesOf('SingleDatePicker (SDP)', module)
     return (
       <SingleDatePickerWrapper
         placeholder="تقویم فارسی"
-        renderMonth={month => momentJalaali(month).format('jMMMM jYYYY')}
+        renderMonthText={month => momentJalaali(month).format('jMMMM jYYYY')}
         renderDayContents={day => momentJalaali(day).format('jD')}
       />
     );

From 47d2da88824ae2cd1356c25d226c9771dd4eac83 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Fri, 8 Jun 2018 11:32:22 -0700
Subject: [PATCH 225/618] Remove default styling (border, etc.) from custom
 month nav buttons

---
 src/components/DayPickerNavigation.jsx | 94 +++++++++++++++++---------
 stories/DateRangePicker_calendar.js    | 59 ++++++++--------
 stories/DayPickerRangeController.js    | 31 ++++++++-
 3 files changed, 124 insertions(+), 60 deletions(-)

diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index 5bcd3a27a4..321ace8cf7 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -95,13 +95,22 @@ function DayPickerNavigation({
     );
   }
 
+  const isDefaultNav =
+    isVerticalScrollable ? isDefaultNavNext : (isDefaultNavNext || isDefaultNavPrev);
+
   return (
     <div
       {...css(
-        styles.DayPickerNavigation_container,
-        isHorizontal && styles.DayPickerNavigation_container__horizontal,
-        isVertical && styles.DayPickerNavigation_container__vertical,
-        isVerticalScrollable && styles.DayPickerNavigation_container__verticalScrollable,
+        styles.DayPickerNavigation,
+        isHorizontal && styles.DayPickerNavigation__horizontal,
+        ...isVertical && [
+          styles.DayPickerNavigation__vertical,
+          isDefaultNav && styles.DayPickerNavigation__verticalDefault,
+        ],
+        ...isVerticalScrollable && [
+          styles.DayPickerNavigation__verticalScrollable,
+          isDefaultNav && styles.DayPickerNavigation__verticalScrollableDefault,
+        ],
       )}
     >
       {!isVerticalScrollable && (
@@ -111,13 +120,18 @@ function DayPickerNavigation({
             isDefaultNavPrev && styles.DayPickerNavigation_button__default,
             ...(isHorizontal && [
               styles.DayPickerNavigation_button__horizontal,
-              !isRTL && styles.DayPickerNavigation_leftButton__horizontal,
-              isRTL && styles.DayPickerNavigation_rightButton__horizontal,
+              ...isDefaultNavPrev && [
+                styles.DayPickerNavigation_button__horizontalDefault,
+                !isRTL && styles.DayPickerNavigation_leftButton__horizontalDefault,
+                isRTL && styles.DayPickerNavigation_rightButton__horizontalDefault,
+              ],
             ]),
             ...(isVertical && [
               styles.DayPickerNavigation_button__vertical,
-              styles.DayPickerNavigation_prevButton__vertical,
-              isDefaultNavPrev && styles.DayPickerNavigation_button__vertical__default,
+              ...isDefaultNavPrev && [
+                styles.DayPickerNavigation_button__verticalDefault,
+                styles.DayPickerNavigation_prevButton__verticalDefault,
+              ],
             ]),
           )}
           type="button"
@@ -137,16 +151,22 @@ function DayPickerNavigation({
           isDefaultNavNext && styles.DayPickerNavigation_button__default,
           ...(isHorizontal && [
             styles.DayPickerNavigation_button__horizontal,
-            isRTL && styles.DayPickerNavigation_leftButton__horizontal,
-            !isRTL && styles.DayPickerNavigation_rightButton__horizontal,
+            ...isDefaultNavNext && [
+              styles.DayPickerNavigation_button__horizontalDefault,
+              isRTL && styles.DayPickerNavigation_leftButton__horizontalDefault,
+              !isRTL && styles.DayPickerNavigation_rightButton__horizontalDefault,
+            ],
           ]),
           ...(isVertical && [
             styles.DayPickerNavigation_button__vertical,
             styles.DayPickerNavigation_nextButton__vertical,
-            isDefaultNavNext && styles.DayPickerNavigation_button__vertical__default,
-            isDefaultNavNext && styles.DayPickerNavigation_nextButton__vertical__default,
+            ...isDefaultNavNext && [
+              styles.DayPickerNavigation_button__verticalDefault,
+              styles.DayPickerNavigation_nextButton__verticalDefault,
+              isVerticalScrollable &&
+                styles.DayPickerNavigation_nextButton__verticalScrollableDefault,
+            ],
           ]),
-          isVerticalScrollable && styles.DayPickerNavigation_nextButton__verticalScrollable,
         )}
         type="button"
         aria-label={phrases.jumpToNextMonth}
@@ -165,32 +185,33 @@ DayPickerNavigation.propTypes = propTypes;
 DayPickerNavigation.defaultProps = defaultProps;
 
 export default withStyles(({ reactDates: { color, zIndex } }) => ({
-  DayPickerNavigation_container: {
+  DayPickerNavigation: {
     position: 'relative',
     zIndex: zIndex + 2,
   },
 
-  DayPickerNavigation_container__horizontal: {
-  },
+  DayPickerNavigation__horizontal: {},
+  DayPickerNavigation__vertical: {},
+  DayPickerNavigation__verticalScrollable: {},
 
-  DayPickerNavigation_container__vertical: {
-    background: color.background,
-    boxShadow: '0 0 5px 2px rgba(0, 0, 0, 0.1)',
+  DayPickerNavigation__verticalDefault: {
     position: 'absolute',
+    width: '100%',
+    height: 52,
     bottom: 0,
     left: 0,
-    height: 52,
-    width: '100%',
   },
 
-  DayPickerNavigation_container__verticalScrollable: {
+  DayPickerNavigation__verticalScrollableDefault: {
     position: 'relative',
   },
 
   DayPickerNavigation_button: {
     cursor: 'pointer',
-    lineHeight: 0.78,
     userSelect: 'none',
+    border: 0,
+    padding: 0,
+    margin: 0,
   },
 
   DayPickerNavigation_button__default: {
@@ -212,36 +233,45 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
   },
 
   DayPickerNavigation_button__horizontal: {
+  },
+
+  DayPickerNavigation_button__horizontalDefault: {
+    position: 'absolute',
+    top: 18,
+    lineHeight: 0.78,
     borderRadius: 3,
     padding: '6px 9px',
-    top: 18,
-    position: 'absolute',
   },
 
-  DayPickerNavigation_leftButton__horizontal: {
+  DayPickerNavigation_leftButton__horizontalDefault: {
     left: 22,
   },
 
-  DayPickerNavigation_rightButton__horizontal: {
+  DayPickerNavigation_rightButton__horizontalDefault: {
     right: 22,
   },
 
   DayPickerNavigation_button__vertical: {
-    display: 'inline-block',
+  },
+
+  DayPickerNavigation_button__verticalDefault: {
+    padding: 5,
+    background: color.background,
+    boxShadow: '0 0 5px 2px rgba(0, 0, 0, 0.1)',
     position: 'relative',
+    display: 'inline-block',
     height: '100%',
     width: '50%',
   },
 
-  DayPickerNavigation_button__vertical__default: {
-    padding: 5,
+  DayPickerNavigation_prevButton__verticalDefault: {
   },
 
-  DayPickerNavigation_nextButton__vertical__default: {
+  DayPickerNavigation_nextButton__verticalDefault: {
     borderLeft: 0,
   },
 
-  DayPickerNavigation_nextButton__verticalScrollable: {
+  DayPickerNavigation_nextButton__verticalScrollableDefault: {
     width: '100%',
   },
 
diff --git a/stories/DateRangePicker_calendar.js b/stories/DateRangePicker_calendar.js
index 0b4f810e09..81e93a5d55 100644
--- a/stories/DateRangePicker_calendar.js
+++ b/stories/DateRangePicker_calendar.js
@@ -6,31 +6,27 @@ import { VERTICAL_ORIENTATION, ANCHOR_RIGHT, OPEN_UP } from '../src/constants';
 
 import DateRangePickerWrapper from '../examples/DateRangePickerWrapper';
 
-const TestPrevIcon = () => (
-  <span
-    style={{
-      border: '1px solid #dce0e0',
-      backgroundColor: '#fff',
-      color: '#484848',
-      padding: '3px',
-    }}
-  >
-    Prev
-  </span>
-);
-
-const TestNextIcon = () => (
-  <span
-    style={{
-      border: '1px solid #dce0e0',
-      backgroundColor: '#fff',
-      color: '#484848',
-      padding: '3px',
-    }}
-  >
-    Next
-  </span>
-);
+function CustomMonthNav({ children, style }) {
+  return (
+    <span
+      style={{
+        border: '1px solid #dce0e0',
+        borderRadius: 2,
+        backgroundColor: '#fff',
+        color: '#484848',
+        fontSize: 24,
+        padding: '0 3px',
+        position: 'absolute',
+        marginTop: -2,
+        top: 30,
+        left: 26,
+        ...style,
+      }}
+    >
+      {children}
+    </span>
+  );
+}
 
 const TestCustomInfoPanel = () => (
   <div
@@ -126,8 +122,17 @@ storiesOf('DRP - Calendar Props', module)
   ))
   .addWithInfo('with custom month navigation', () => (
     <DateRangePickerWrapper
-      navPrev={<TestPrevIcon />}
-      navNext={<TestNextIcon />}
+      navPrev={<CustomMonthNav>&#8249;</CustomMonthNav>}
+      navNext={<CustomMonthNav style={{ left: 48 }}>&#8250;</CustomMonthNav>}
+      numberOfMonths={1}
+      autoFocus
+    />
+  ))
+  .addWithInfo('vertical with custom month navigation', () => (
+    <DateRangePickerWrapper
+      orientation={VERTICAL_ORIENTATION}
+      navPrev={<CustomMonthNav>&#8249;</CustomMonthNav>}
+      navNext={<CustomMonthNav style={{ left: 48 }}>&#8250;</CustomMonthNav>}
       autoFocus
     />
   ))
diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
index 77486e99b3..dea15c12ee 100644
--- a/stories/DayPickerRangeController.js
+++ b/stories/DayPickerRangeController.js
@@ -197,7 +197,7 @@ storiesOf('DayPickerRangeController', module)
     />
   ))
   .addWithInfo('vertical scrollable', () => (
-    <div style={{ height: 300 }}>
+    <div style={{ height: 500 }}>
       <DayPickerRangeControllerWrapper
         onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
         onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
@@ -208,6 +208,35 @@ storiesOf('DayPickerRangeController', module)
       />
     </div>
   ))
+  .addWithInfo('vertical scrollable with custom month nav', () => (
+    <div style={{ height: 500 }}>
+      <DayPickerRangeControllerWrapper
+        onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
+        onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
+        onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
+        orientation={VERTICAL_SCROLLABLE}
+        numberOfMonths={3}
+        verticalHeight={300}
+        navNext={
+          <div style={{ position: 'relative' }}>
+            <span
+              style={{
+                position: 'absolute',
+                bottom: 20,
+                left: 50,
+                fontSize: 24,
+                border: '1px solid gray',
+                width: 200,
+                padding: 10,
+              }}
+            >
+              Show More Months
+            </span>
+          </div>
+        }
+      />
+    </div>
+  ))
   .addWithInfo('with custom month navigation', () => (
     <DayPickerRangeControllerWrapper
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}

From f784da4eb9509143484167c29a75a501d295c6eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sa=C3=BAl=20de=20Le=C3=B3n=20Guerrero?=
 <sauldeleonguerrero@gmail.com>
Date: Thu, 21 Jun 2018 08:21:38 +0200
Subject: [PATCH 226/618] Update DayPickerRangeController.jsx

Added "onMonthChange", "onYearChange" propTypes in order to hide warnings
---
 src/components/DayPickerRangeController.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 19dd8b68bc..baa922c622 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -85,7 +85,9 @@ const propTypes = forbidExtraProps({
   firstDayOfWeek: DayOfWeekShape,
   verticalHeight: nonNegativeInteger,
   transitionDuration: nonNegativeInteger,
-
+  onMonthChange: PropTypes.func,
+  onYearChange: PropTypes.func,
+  
   // accessibility
   onBlur: PropTypes.func,
   isFocused: PropTypes.bool,

From 431b8dff1206545a1b82856bb60ac1acf70acbe5 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Thu, 21 Jun 2018 17:30:48 -0700
Subject: [PATCH 227/618] Remove onMonthChange/onYearChange default prop

---
 examples/DayPickerRangeControllerWrapper.jsx | 6 ++++++
 src/components/DayPickerRangeController.jsx  | 6 +-----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/examples/DayPickerRangeControllerWrapper.jsx b/examples/DayPickerRangeControllerWrapper.jsx
index 283ab46e19..5e6d786bae 100644
--- a/examples/DayPickerRangeControllerWrapper.jsx
+++ b/examples/DayPickerRangeControllerWrapper.jsx
@@ -32,9 +32,12 @@ const propTypes = forbidExtraProps({
   enableOutsideDays: PropTypes.bool,
   numberOfMonths: PropTypes.number,
   orientation: ScrollableOrientationShape,
+  verticalHeight: PropTypes.number,
   withPortal: PropTypes.bool,
   initialVisibleMonth: PropTypes.func,
   renderCalendarInfo: PropTypes.func,
+  renderMonthElement: PropTypes.func,
+  renderMonthText: PropTypes.func,
 
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
@@ -71,6 +74,7 @@ const defaultProps = {
 
   // calendar presentation and interaction related props
   orientation: HORIZONTAL_ORIENTATION,
+  verticalHeight: undefined,
   withPortal: false,
   initialVisibleMonth: null,
   numberOfMonths: 2,
@@ -78,6 +82,8 @@ const defaultProps = {
   keepOpenOnDateSelect: false,
   renderCalendarInfo: null,
   isRTL: false,
+  renderMonthText: null,
+  renderMonthElement: null,
 
   // navigation related props
   navPrev: null,
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index baa922c622..4fb31c342a 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -85,9 +85,7 @@ const propTypes = forbidExtraProps({
   firstDayOfWeek: DayOfWeekShape,
   verticalHeight: nonNegativeInteger,
   transitionDuration: nonNegativeInteger,
-  onMonthChange: PropTypes.func,
-  onYearChange: PropTypes.func,
-  
+
   // accessibility
   onBlur: PropTypes.func,
   isFocused: PropTypes.bool,
@@ -136,8 +134,6 @@ const defaultProps = {
 
   onPrevMonthClick() {},
   onNextMonthClick() {},
-  onMonthChange() {},
-  onYearChange() {},
   onOutsideClick() {},
 
   renderCalendarDay: undefined,

From 9c5d828129f8f11af1d41345d196e0be0aec09b9 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Thu, 21 Jun 2018 19:38:16 -0700
Subject: [PATCH 228/618] Remove OutsideClickHandler export

---
 src/components/OutsideClickHandler.jsx | 8 --------
 src/index.js                           | 1 -
 2 files changed, 9 deletions(-)
 delete mode 100644 src/components/OutsideClickHandler.jsx

diff --git a/src/components/OutsideClickHandler.jsx b/src/components/OutsideClickHandler.jsx
deleted file mode 100644
index e1b9b4ef1c..0000000000
--- a/src/components/OutsideClickHandler.jsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import OutsideClickHandler from 'react-outside-click-handler';
-
-console.warn(`
-  The 'react-dates' OutsideClickHandler export is deprecated.
-  Please install and import from 'react-outside-click-handler' instead.
-`);
-
-export default OutsideClickHandler;
diff --git a/src/index.js b/src/index.js
index 674fc99cc9..e94529f3f9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -8,7 +8,6 @@ export { default as DateRangePickerShape } from './shapes/DateRangePickerShape';
 export { default as DayPicker } from './components/DayPicker';
 export { default as DayPickerRangeController } from './components/DayPickerRangeController';
 export { default as DayPickerSingleDateController } from './components/DayPickerSingleDateController';
-export { default as OutsideClickHandler } from './components/OutsideClickHandler';
 export { default as SingleDatePicker } from './components/SingleDatePicker';
 export { default as SingleDatePickerInput } from './components/SingleDatePickerInput';
 export { default as SingleDatePickerShape } from './shapes/SingleDatePickerShape';

From 6a19133b6138cddadb9a145bf738e3e5542807e7 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Thu, 21 Jun 2018 20:56:00 -0700
Subject: [PATCH 229/618] Version 17.0.0

---
 CHANGELOG.md | 16 ++++++++++++++++
 package.json |  2 +-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 43bd69488a..861f049f14 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,21 @@
 # Change Log
 
+## 17.0.0
+- [fix] Replace dumb quotes with smart quotes in default phrases ([#1168](https://github.com/airbnb/react-dates/pull/1168))
+- [fix] Fix outside day movement on hover ([#1178](https://github.com/airbnb/react-dates/pull/1178))
+- [fix] Add `focusable="false"` to SVGs ([#1190](https://github.com/airbnb/react-dates/pull/1190))
+- [fix] Use `react-outside-click-handler` instead of the internal component ([#1191](https://github.com/airbnb/react-dates/pull/1191))
+- [breaking] Change the way month heights are calculated and update the name of some `CalendarMonth`/`CalendarMonthGrid` props ([#1192](https://github.com/airbnb/react-dates/pull/1192))
+- [new] Pass nextMonth to `onPrevMonthClick`/`onNextMonthClick` ([#1207](https://github.com/airbnb/react-dates/pull/1207))
+- [new] Allow input border styles to be overridden in the theme ([#1201](https://github.com/airbnb/react-dates/pull/1201))
+- [new] Allow consolidated-events@2.0.0 ([#1218](https://github.com/airbnb/react-dates/pull/1218))
+- [fix] Remove input.blur() call to fix a focus trap in Safari/IE ([#1214](https://github.com/airbnb/react-dates/pull/1214))
+- [new] Add support for month/year transitions ([#1106](https://github.com/airbnb/react-dates/pull/1106))
+- [breaking] Rename renderMonth=>renderMonthText and renderCaption=>renderMonthElement ([#1220](https://github.com/airbnb/react-dates/pull/1220))
+- [breaking] Remove default styling *completely* from the `navNext`/`navPrev` props, including position ([#1204](https://github.com/airbnb/react-dates/pull/1204))
+- [fix] Fix propType warnings for `onMonthChange`/`onYearChange` ([#1222](https://github.com/airbnb/react-dates/pull/1222))
+- [breaking] Remove `OutsideClickHandler` export entirely ([#1225](https://github.com/airbnb/react-dates/pull/1225))
+
 ## 16.7.0
 - [fix] Force border-radius to be 0 on the inputs ([#1157](https://github.com/airbnb/react-dates/pull/1157))
 - [fix] Clear previous min nights modifiers, not current ([#994](https://github.com/airbnb/react-dates/pull/994))
diff --git a/package.json b/package.json
index 41d881248a..9f2c5b0372 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "16.7.0",
+  "version": "17.0.0",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 77e876ee4bcbd97e72112e5a85f74f017a1f86d7 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Sun, 24 Jun 2018 15:31:50 -0700
Subject: [PATCH 230/618] [New] add `ModifiersShape`; use it on various
 components

---
 src/components/CalendarDay.jsx       | 3 ++-
 src/components/CalendarMonth.jsx     | 3 ++-
 src/components/CalendarMonthGrid.jsx | 3 ++-
 src/components/DayPicker.jsx         | 3 ++-
 src/shapes/ModifiersShape.js         | 3 +++
 5 files changed, 11 insertions(+), 4 deletions(-)
 create mode 100644 src/shapes/ModifiersShape.js

diff --git a/src/components/CalendarDay.jsx b/src/components/CalendarDay.jsx
index dff18ed3a7..b89b5b8336 100644
--- a/src/components/CalendarDay.jsx
+++ b/src/components/CalendarDay.jsx
@@ -9,6 +9,7 @@ import moment from 'moment';
 import { CalendarDayPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
 import getCalendarDaySettings from '../utils/getCalendarDaySettings';
+import ModifiersShape from '../shapes/ModifiersShape';
 
 import { DAY_SIZE } from '../constants';
 
@@ -17,7 +18,7 @@ const propTypes = forbidExtraProps({
   day: momentPropTypes.momentObj,
   daySize: nonNegativeInteger,
   isOutsideDay: PropTypes.bool,
-  modifiers: PropTypes.instanceOf(Set),
+  modifiers: ModifiersShape,
   isFocused: PropTypes.bool,
   tabIndex: PropTypes.oneOf([0, -1]),
   onDayClick: PropTypes.func,
diff --git a/src/components/CalendarMonth.jsx b/src/components/CalendarMonth.jsx
index 59e63a140f..b41d2d664c 100644
--- a/src/components/CalendarMonth.jsx
+++ b/src/components/CalendarMonth.jsx
@@ -19,6 +19,7 @@ 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';
 
@@ -34,7 +35,7 @@ const propTypes = forbidExtraProps({
   month: momentPropTypes.momentObj,
   isVisible: PropTypes.bool,
   enableOutsideDays: PropTypes.bool,
-  modifiers: PropTypes.object,
+  modifiers: PropTypes.objectOf(ModifiersShape),
   orientation: ScrollableOrientationShape,
   daySize: nonNegativeInteger,
   onDayClick: PropTypes.func,
diff --git a/src/components/CalendarMonthGrid.jsx b/src/components/CalendarMonthGrid.jsx
index 9a5e254915..c573ed8d12 100644
--- a/src/components/CalendarMonthGrid.jsx
+++ b/src/components/CalendarMonthGrid.jsx
@@ -19,6 +19,7 @@ import toISOMonthString from '../utils/toISOMonthString';
 import isPrevMonth from '../utils/isPrevMonth';
 import isNextMonth from '../utils/isNextMonth';
 
+import ModifiersShape from '../shapes/ModifiersShape';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
 
@@ -36,7 +37,7 @@ const propTypes = forbidExtraProps({
   initialMonth: momentPropTypes.momentObj,
   isAnimating: PropTypes.bool,
   numberOfMonths: PropTypes.number,
-  modifiers: PropTypes.object,
+  modifiers: PropTypes.objectOf(PropTypes.objectOf(ModifiersShape)),
   orientation: ScrollableOrientationShape,
   onDayClick: PropTypes.func,
   onDayMouseEnter: PropTypes.func,
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 80a152aff0..d9dc54bfd2 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -26,6 +26,7 @@ import calculateDimension from '../utils/calculateDimension';
 import getActiveElement from '../utils/getActiveElement';
 import isDayVisible from '../utils/isDayVisible';
 
+import ModifiersShape from '../shapes/ModifiersShape';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
 import CalendarInfoPositionShape from '../shapes/CalendarInfoPositionShape';
@@ -86,7 +87,7 @@ const propTypes = forbidExtraProps({
   renderMonthElement: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'),
 
   // day props
-  modifiers: PropTypes.object,
+  modifiers: PropTypes.objectOf(PropTypes.objectOf(ModifiersShape)),
   renderCalendarDay: PropTypes.func,
   renderDayContents: PropTypes.func,
   onDayClick: PropTypes.func,
diff --git a/src/shapes/ModifiersShape.js b/src/shapes/ModifiersShape.js
new file mode 100644
index 0000000000..898b98be95
--- /dev/null
+++ b/src/shapes/ModifiersShape.js
@@ -0,0 +1,3 @@
+import PropTypes from 'prop-types';
+
+export default PropTypes.instanceOf(Set);

From 9fe1b282f6a4d8efa59956683c72d6c5b3cd7055 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Fri, 29 Jun 2018 10:54:28 -0700
Subject: [PATCH 231/618] Improving the modifiers PropType to require a Set of
 strings.

---
 src/shapes/ModifiersShape.js | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/shapes/ModifiersShape.js b/src/shapes/ModifiersShape.js
index 898b98be95..309e3c29cd 100644
--- a/src/shapes/ModifiersShape.js
+++ b/src/shapes/ModifiersShape.js
@@ -1,3 +1,20 @@
 import PropTypes from 'prop-types';
+import { and } from 'airbnb-prop-types';
 
-export default PropTypes.instanceOf(Set);
+export default and([
+  PropTypes.instanceOf(Set),
+  function modifiers(props, propName, ...rest) {
+    const { [propName]: propValue } = props;
+    let firstError;
+    [...propValue].some((v, i) => {
+      const fakePropName = `${propName}: index ${i}`;
+      firstError = PropTypes.string.isRequired(
+        { [fakePropName]: v },
+        fakePropName,
+        ...rest,
+      );
+      return firstError != null;
+    });
+    return firstError == null ? null : firstError;
+  },
+], 'Modifiers (Set of Strings)');

From b9e346057d92a8e8ef01e66e699797f323da4d59 Mon Sep 17 00:00:00 2001
From: Philip Weiss <philip.weiss@airbnb.com>
Date: Fri, 29 Jun 2018 11:38:02 -0700
Subject: [PATCH 232/618] run build script in CI

---
 .travis.yml  | 7 +++++--
 package.json | 2 +-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index b9e1b8ac5a..f515349352 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -14,6 +14,7 @@ before_script:
   - 'if [ -n "${KARMA-}" ]; then sleep 3; fi'
 script:
   - 'if [ -n "${LINT-}" ]; then npm run lint ; fi'
+  - 'if [ -n "${BUILD-}" ]; then npm run lint ; fi'
   - 'if [ "${TEST-}" = true ]; then npm run tests-only ; fi'
   - 'if [ -n "${KARMA-}" ]; then npm run tests-karma ; fi'
   - 'if [ -n "${COVERAGE-}" ] && [ "${TRAVIS_BRANCH-}" = "master" ]; then npm run cover; cat ./coverage/lcov.info | ./node_modules/.bin/coveralls ; fi'
@@ -28,12 +29,14 @@ sudo: false
 matrix:
   fast_finish: true
   include:
+    - node_js: "lts/*"
+      env: LINT=true TEST=false
+    - node_js: "lts/*"
+      env: BUILD=true TEST=false
     - node_js: "lts/*"
       env: COVERAGE=true TEST=false
     - node_js: "lts/*"
       env: KARMA=true TEST=false
-    - node_js: "lts/*"
-      env: LINT=true TEST=false
   allow_failures:
     - node_js: "9"
     - node_js: "7"
diff --git a/package.json b/package.json
index 9f2c5b0372..b2e4bb20d6 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "tests-only": "npm run mocha --silent test",
     "pretests-karma": "npm run react",
     "tests-karma": "karma start",
-    "test": "npm run tests-only",
+    "test": "npm run build && npm run tests-only",
     "storybook": "start-storybook -p 6006",
     "storybook:css": "npm run build:css && start-storybook -p 6006 -c .storybook-css",
     "tag": "git tag v$npm_package_version",

From 83ec316167b499ce939058973da0aff30e70d178 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Sat, 30 Jun 2018 00:16:36 -0700
Subject: [PATCH 233/618] [Dev Deps] update `eslint-config-airbnb`,
 `eslint-plugin-import`, `eslint-plugin-react`, `coveralls`,
 `babel-plugin-inline-react-svg`, `airbnb-js-shims`, `@storybook/react`,
 `@storybook/addon-options`, `@storybook/addon-links`,
 `@storybook/addon-info`, `@storybook/addon-actions`, `sinon`, `sass-loader`

 - also update linting errors
---
 .eslintrc                                     |  6 +-
 package.json                                  | 26 ++++----
 src/components/CalendarMonth.jsx              | 23 ++++---
 src/components/CalendarMonthGrid.jsx          | 19 ++++--
 src/components/DateInput.jsx                  |  3 +-
 src/components/DateRangePicker.jsx            | 21 +++---
 .../DateRangePickerInputController.jsx        | 21 ++++--
 src/components/DayPicker.jsx                  | 28 ++++----
 src/components/DayPickerKeyboardShortcuts.jsx | 10 +--
 src/components/DayPickerNavigation.jsx        |  9 +--
 src/components/DayPickerRangeController.jsx   | 66 ++++++++++++-------
 .../DayPickerSingleDateController.jsx         | 53 ++++++++++-----
 src/components/KeyboardShortcutRow.jsx        |  1 -
 src/components/SingleDatePicker.jsx           | 24 ++++---
 src/components/SingleDatePickerInput.jsx      |  2 +
 src/shapes/DateRangePickerShape.js            | 16 ++---
 src/shapes/SingleDatePickerShape.js           | 12 ++--
 src/utils/calculateDimension.js               |  8 +--
 src/utils/disableScroll.js                    |  7 +-
 src/utils/getCalendarDaySettings.js           |  2 +-
 src/utils/getInputHeight.js                   |  8 +--
 src/utils/isSameDay.js                        |  6 +-
 src/utils/isSameMonth.js                      |  4 +-
 src/utils/toMomentObject.js                   |  6 +-
 test/components/CalendarDay_spec.jsx          |  5 +-
 test/utils/getDetachedContainerStyles_spec.js |  7 +-
 test/utils/getVisibleDays_spec.js             |  1 -
 27 files changed, 236 insertions(+), 158 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 7f3ac6ee19..3495c1d12e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -16,8 +16,6 @@
   },
 
   "rules": {
-    "no-mixed-operators": [2, { "allowSamePrecedence": true }],
-
     "jsx-a11y/click-events-have-key-events": 1, // TODO: enable
 
     "react/no-did-mount-set-state": 0, // necessary for server-rendering
@@ -25,9 +23,11 @@
     "react-with-styles/no-unused-styles": 2,
 
     "no-restricted-imports": 0, // TODO: enable with full RTL support
+
+    "react/jsx-one-expression-per-line": 1, // TODO: enable once fixed upstream
   },
 
   "settings": {
-     "propWrapperFunctions": ["forbidExtraProps", "exact", "Object.freeze"]
+    "propWrapperFunctions": ["forbidExtraProps", "exact", "Object.freeze"],
   }
 }
diff --git a/package.json b/package.json
index b2e4bb20d6..861a458607 100644
--- a/package.json
+++ b/package.json
@@ -51,17 +51,17 @@
   },
   "homepage": "https://github.com/airbnb/react-dates#readme",
   "devDependencies": {
-    "@storybook/addon-actions": "^3.4.7",
-    "@storybook/addon-info": "^3.4.7",
-    "@storybook/addon-links": "^3.4.7",
-    "@storybook/addon-options": "^3.4.7",
-    "@storybook/react": "^3.4.7",
-    "airbnb-js-shims": "^1.6.0",
+    "@storybook/addon-actions": "^3.4.8",
+    "@storybook/addon-info": "^3.4.8",
+    "@storybook/addon-links": "^3.4.8",
+    "@storybook/addon-options": "^3.4.8",
+    "@storybook/react": "^3.4.8",
+    "airbnb-js-shims": "^2.0.0",
     "aphrodite": "^2.2.2",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.4",
-    "babel-plugin-inline-react-svg": "^0.5.2",
+    "babel-plugin-inline-react-svg": "^0.5.3",
     "babel-plugin-inline-svg": "^1.0.0",
     "babel-plugin-istanbul": "^4.1.6",
     "babel-plugin-syntax-jsx": "^6.18.0",
@@ -70,15 +70,15 @@
     "babel-register": "^6.26.0",
     "chai": "^4.1.2",
     "clean-css": "^4.1.11",
-    "coveralls": "^3.0.1",
+    "coveralls": "^3.0.2",
     "cross-env": "^5.2.0",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-helper": "^1.2.3",
     "eslint": "^4.19.1",
-    "eslint-config-airbnb": "^16.1.0",
-    "eslint-plugin-import": "^2.12.0",
+    "eslint-config-airbnb": "^17.0.0",
+    "eslint-plugin-import": "^2.13.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.9.1",
+    "eslint-plugin-react": "^7.10.0",
     "eslint-plugin-react-with-styles": "^2.0.0",
     "git-directory-deploy": "^1.5.1",
     "imports-loader": "^0.8.0",
@@ -103,8 +103,8 @@
     "react-with-styles-interface-css-compiler": "^1.1.2",
     "rimraf": "^2.6.2",
     "safe-publish-latest": "^1.1.1",
-    "sass-loader": "^7.0.2",
-    "sinon": "^6.0.0",
+    "sass-loader": "^7.0.3",
+    "sinon": "^6.0.1",
     "sinon-sandbox": "^1.0.2",
     "style-loader": "^0.20.3",
     "webpack": "^2.6.1"
diff --git a/src/components/CalendarMonth.jsx b/src/components/CalendarMonth.jsx
index 945ac515a1..59e63a140f 100644
--- a/src/components/CalendarMonth.jsx
+++ b/src/components/CalendarMonth.jsx
@@ -110,9 +110,16 @@ class CalendarMonth extends React.Component {
 
   componentWillReceiveProps(nextProps) {
     const { month, enableOutsideDays, firstDayOfWeek } = nextProps;
-    if (!month.isSame(this.props.month)
-        || enableOutsideDays !== this.props.enableOutsideDays
-        || firstDayOfWeek !== this.props.firstDayOfWeek) {
+    const {
+      month: prevMonth,
+      enableOutsideDays: prevEnableOutsideDays,
+      firstDayOfWeek: prevFirstDayOfWeek,
+    } = this.props;
+    if (
+      !month.isSame(prevMonth)
+      || enableOutsideDays !== prevEnableOutsideDays
+      || firstDayOfWeek !== prevFirstDayOfWeek
+    ) {
       this.setState({
         weeks: getCalendarMonthWeeks(
           month,
@@ -192,11 +199,11 @@ class CalendarMonth extends React.Component {
             verticalScrollable && styles.CalendarMonth_caption__verticalScrollable,
           )}
         >
-          {
-            renderMonthElement ?
-              renderMonthElement({ month, onMonthSelect, onYearSelect }) :
-              <strong>{monthTitle}</strong>
-          }
+          {renderMonthElement ? (
+            renderMonthElement({ month, onMonthSelect, onYearSelect })
+          ) : (
+            <strong>{monthTitle}</strong>
+          )}
         </div>
 
         <table
diff --git a/src/components/CalendarMonthGrid.jsx b/src/components/CalendarMonthGrid.jsx
index 934383a1a7..9a5e254915 100644
--- a/src/components/CalendarMonthGrid.jsx
+++ b/src/components/CalendarMonthGrid.jsx
@@ -140,15 +140,19 @@ class CalendarMonthGrid extends React.Component {
     const { initialMonth, numberOfMonths, orientation } = nextProps;
     const { months } = this.state;
 
-    const hasMonthChanged = !this.props.initialMonth.isSame(initialMonth, 'month');
-    const hasNumberOfMonthsChanged = this.props.numberOfMonths !== numberOfMonths;
+    const {
+      initialMonth: prevInitialMonth,
+      numberOfMonths: prevNumberOfMonths,
+    } = this.props;
+    const hasMonthChanged = !prevInitialMonth.isSame(initialMonth, 'month');
+    const hasNumberOfMonthsChanged = prevNumberOfMonths !== numberOfMonths;
     let newMonths = months;
 
     if (hasMonthChanged && !hasNumberOfMonthsChanged) {
-      if (isNextMonth(this.props.initialMonth, initialMonth)) {
+      if (isNextMonth(prevInitialMonth, initialMonth)) {
         newMonths = months.slice(1);
         newMonths.push(months[months.length - 1].clone().add(1, 'month'));
-      } else if (isPrevMonth(this.props.initialMonth, initialMonth)) {
+      } else if (isPrevMonth(prevInitialMonth, initialMonth)) {
         newMonths = months.slice(0, months.length - 1);
         newMonths.unshift(months[0].clone().subtract(1, 'month'));
       } else {
@@ -230,6 +234,7 @@ class CalendarMonthGrid extends React.Component {
   setContainerRef(ref) {
     this.container = ref;
   }
+
   render() {
     const {
       enableOutsideDays,
@@ -268,9 +273,9 @@ class CalendarMonthGrid extends React.Component {
 
     const calendarMonthWidth = getCalendarMonthWidth(daySize);
 
-    const width = isVertical || isVerticalScrollable ?
-      calendarMonthWidth :
-      (numberOfMonths + 2) * calendarMonthWidth;
+    const width = isVertical || isVerticalScrollable
+      ? calendarMonthWidth
+      : (numberOfMonths + 2) * calendarMonthWidth;
 
     const transformType = (isVertical || isVerticalScrollable) ? 'translateY' : 'translateX';
     const transformValue = `${transformType}(${translationValue}px)`;
diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
index e91a582a97..512e9c7a88 100644
--- a/src/components/DateInput.jsx
+++ b/src/components/DateInput.jsx
@@ -97,7 +97,8 @@ class DateInput extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (this.state.dateString && nextProps.displayValue) {
+    const { dateString } = this.state;
+    if (dateString && nextProps.displayValue) {
       this.setState({
         dateString: '',
       });
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 4172e28cd5..00adc25342 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -153,7 +153,8 @@ class DateRangePicker extends React.Component {
     this.responsivizePickerPosition();
     this.disableScroll();
 
-    if (this.props.focusedInput) {
+    const { focusedInput } = this.props;
+    if (focusedInput) {
       this.setState({
         isDateRangePickerInputFocused: true,
       });
@@ -167,11 +168,12 @@ class DateRangePicker extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    if (!prevProps.focusedInput && this.props.focusedInput && this.isOpened()) {
+    const { focusedInput } = this.props;
+    if (!prevProps.focusedInput && focusedInput && this.isOpened()) {
       // The date picker just changed from being closed to being open.
       this.responsivizePickerPosition();
       this.disableScroll();
-    } else if (prevProps.focusedInput && !this.props.focusedInput && !this.isOpened()) {
+    } else if (prevProps.focusedInput && !focusedInput && !this.isOpened()) {
       // The date picker just changed from being open to being closed.
       if (this.enableScroll) this.enableScroll();
     }
@@ -188,9 +190,10 @@ class DateRangePicker extends React.Component {
       onClose,
       startDate,
       endDate,
+      appendToBody,
     } = this.props;
     if (!this.isOpened()) return;
-    if (this.props.appendToBody && this.dayPickerContainer.contains(event.target)) return;
+    if (appendToBody && this.dayPickerContainer.contains(event.target)) return;
 
     this.setState({
       isDateRangePickerInputFocused: false,
@@ -213,10 +216,9 @@ class DateRangePicker extends React.Component {
 
     if (focusedInput) {
       const withAnyPortal = withPortal || withFullScreenPortal;
-      const moveFocusToDayPicker =
-        withAnyPortal ||
-        (readOnly && !keepFocusOnInput) ||
-        (this.isTouchDevice && !keepFocusOnInput);
+      const moveFocusToDayPicker = withAnyPortal
+        || (readOnly && !keepFocusOnInput)
+        || (this.isTouchDevice && !keepFocusOnInput);
 
       if (moveFocusToDayPicker) {
         this.onDayPickerFocus();
@@ -261,7 +263,8 @@ class DateRangePicker extends React.Component {
   }
 
   disableScroll() {
-    if (!this.props.appendToBody && !this.props.disableScroll) return;
+    const { appendToBody, disableScroll: propDisableScroll } = this.props;
+    if (!appendToBody && !propDisableScroll) return;
     if (!this.isOpened()) return;
 
     // Disable scroll for every ancestor of this DateRangePicker up to the
diff --git a/src/components/DateRangePickerInputController.jsx b/src/components/DateRangePickerInputController.jsx
index 2400eed216..138ef48d28 100644
--- a/src/components/DateRangePickerInputController.jsx
+++ b/src/components/DateRangePickerInputController.jsx
@@ -20,7 +20,12 @@ import toLocalizedDateString from '../utils/toLocalizedDateString';
 import isInclusivelyAfterDay from '../utils/isInclusivelyAfterDay';
 import isBeforeDay from '../utils/isBeforeDay';
 
-import { START_DATE, END_DATE, ICON_BEFORE_POSITION, OPEN_DOWN } from '../constants';
+import {
+  START_DATE,
+  END_DATE,
+  ICON_BEFORE_POSITION,
+  OPEN_DOWN,
+} from '../constants';
 
 const propTypes = forbidExtraProps({
   startDate: momentPropTypes.momentObj,
@@ -161,8 +166,9 @@ export default class DateRangePickerInputController extends React.Component {
 
     const endDate = toMomentObject(endDateString, this.getDisplayFormat());
 
-    const isEndDateValid = endDate && !isOutsideRange(endDate) &&
-      !(startDate && isBeforeDay(endDate, startDate.clone().add(minimumNights, 'days')));
+    const isEndDateValid = endDate
+      && !isOutsideRange(endDate)
+      && !(startDate && isBeforeDay(endDate, startDate.clone().add(minimumNights, 'days')));
     if (isEndDateValid) {
       onDatesChange({ startDate, endDate });
       if (!keepOpenOnDateSelect) this.onClearFocus();
@@ -203,10 +209,11 @@ export default class DateRangePickerInputController extends React.Component {
     } = this.props;
 
     const startDate = toMomentObject(startDateString, this.getDisplayFormat());
-    const isEndDateBeforeStartDate = startDate &&
-      isBeforeDay(endDate, startDate.clone().add(minimumNights, 'days'));
-    const isStartDateValid = startDate && !isOutsideRange(startDate) &&
-      !(disabled === END_DATE && isEndDateBeforeStartDate);
+    const isEndDateBeforeStartDate = startDate
+      && isBeforeDay(endDate, startDate.clone().add(minimumNights, 'days'));
+    const isStartDateValid = startDate
+      && !isOutsideRange(startDate)
+      && !(disabled === END_DATE && isEndDateBeforeStartDate);
 
     if (isStartDateValid) {
       if (isEndDateBeforeStartDate) {
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index ede34de71c..80a152aff0 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -251,13 +251,19 @@ class DayPicker extends React.Component {
       }
     }
 
-    if (nextProps.daySize !== this.props.daySize) {
+    const {
+      daySize,
+      isFocused: prevIsFocused,
+      renderMonthText: prevRenderMonthText,
+    } = this.props;
+
+    if (nextProps.daySize !== daySize) {
       this.setState({
         calendarMonthWidth: getCalendarMonthWidth(nextProps.daySize),
       });
     }
 
-    if (isFocused !== this.props.isFocused) {
+    if (isFocused !== prevIsFocused) {
       if (isFocused) {
         const focusedDate = this.getFocusedDay(currentMonth);
 
@@ -278,7 +284,7 @@ class DayPicker extends React.Component {
       }
     }
 
-    if (renderMonthText !== this.props.renderMonthText) {
+    if (renderMonthText !== prevRenderMonthText) {
       this.setState({
         monthTitleHeight: null,
       });
@@ -626,9 +632,9 @@ class DayPicker extends React.Component {
 
     if (onMultiplyScrollableMonths) onMultiplyScrollableMonths(e);
 
-    this.setState({
-      scrollableMonthMultiple: this.state.scrollableMonthMultiple + 1,
-    });
+    this.setState(({ scrollableMonthMultiple }) => ({
+      scrollableMonthMultiple: scrollableMonthMultiple + 1,
+    }));
   }
 
   isHorizontal() {
@@ -701,9 +707,9 @@ class DayPicker extends React.Component {
       if (withMouseInteractions) {
         const activeElement = getActiveElement();
         if (
-          activeElement &&
-          activeElement !== document.body &&
-          this.container.contains(activeElement)
+          activeElement
+          && activeElement !== document.body
+          && this.container.contains(activeElement)
         ) {
           activeElement.blur();
         }
@@ -1049,7 +1055,7 @@ class DayPicker extends React.Component {
                 {verticalScrollable && this.renderNavigation()}
               </div>
 
-              {!isTouch && !hideKeyboardShortcutsPanel &&
+              {!isTouch && !hideKeyboardShortcutsPanel && (
                 <DayPickerKeyboardShortcuts
                   block={this.isVertical() && !withPortal}
                   buttonLocation={keyboardShortcutButtonLocation}
@@ -1058,7 +1064,7 @@ class DayPicker extends React.Component {
                   closeKeyboardShortcutsPanel={this.closeKeyboardShortcutsPanel}
                   phrases={phrases}
                 />
-              }
+              )}
             </div>
 
           </div>
diff --git a/src/components/DayPickerKeyboardShortcuts.jsx b/src/components/DayPickerKeyboardShortcuts.jsx
index d571a82cc7..2d19a1262b 100644
--- a/src/components/DayPickerKeyboardShortcuts.jsx
+++ b/src/components/DayPickerKeyboardShortcuts.jsx
@@ -76,7 +76,8 @@ class DayPickerKeyboardShortcuts extends React.Component {
   constructor(...args) {
     super(...args);
 
-    this.keyboardShortcuts = getKeyboardShortcuts(this.props.phrases);
+    const { phrases } = this.props;
+    this.keyboardShortcuts = getKeyboardShortcuts(phrases);
 
     this.onShowKeyboardShortcutsButtonClick = this.onShowKeyboardShortcutsButtonClick.bind(this);
     this.setShowKeyboardShortcutsButtonRef = this.setShowKeyboardShortcutsButtonRef.bind(this);
@@ -86,7 +87,8 @@ class DayPickerKeyboardShortcuts extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.phrases !== this.props.phrases) {
+    const { phrases } = this.props;
+    if (nextProps.phrases !== phrases) {
       this.keyboardShortcuts = getKeyboardShortcuts(nextProps.phrases);
     }
   }
@@ -211,7 +213,7 @@ class DayPickerKeyboardShortcuts extends React.Component {
           </span>
         </button>
 
-        {showKeyboardShortcutsPanel &&
+        {showKeyboardShortcutsPanel && (
           <div
             {...css(styles.DayPickerKeyboardShortcuts_panel)}
             role="dialog"
@@ -255,7 +257,7 @@ class DayPickerKeyboardShortcuts extends React.Component {
               ))}
             </ul>
           </div>
-        }
+        )}
       </div>
     );
   }
diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index 321ace8cf7..760e178923 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -95,8 +95,9 @@ function DayPickerNavigation({
     );
   }
 
-  const isDefaultNav =
-    isVerticalScrollable ? isDefaultNavNext : (isDefaultNavNext || isDefaultNavPrev);
+  const isDefaultNav = isVerticalScrollable
+    ? isDefaultNavNext
+    : (isDefaultNavNext || isDefaultNavPrev);
 
   return (
     <div
@@ -163,8 +164,8 @@ function DayPickerNavigation({
             ...isDefaultNavNext && [
               styles.DayPickerNavigation_button__verticalDefault,
               styles.DayPickerNavigation_nextButton__verticalDefault,
-              isVerticalScrollable &&
-                styles.DayPickerNavigation_nextButton__verticalScrollableDefault,
+              isVerticalScrollable
+                && styles.DayPickerNavigation_nextButton__verticalScrollableDefault,
             ],
           ]),
         )}
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 4fb31c342a..257048d75c 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -164,7 +164,8 @@ const defaultProps = {
 const getChooseAvailableDatePhrase = (phrases, focusedInput) => {
   if (focusedInput === START_DATE) {
     return phrases.chooseAvailableStartDate;
-  } else if (focusedInput === END_DATE) {
+  }
+  if (focusedInput === END_DATE) {
     return phrases.chooseAvailableEndDate;
   }
   return phrases.chooseAvailableDate;
@@ -282,12 +283,12 @@ export default class DayPickerRangeController extends React.Component {
     const didFocusChange = focusedInput !== prevFocusedInput;
 
     if (
-      numberOfMonths !== prevNumberOfMonths ||
-      enableOutsideDays !== prevEnableOutsideDays ||
-      (
-        initialVisibleMonth !== prevInitialVisibleMonth &&
-        !prevFocusedInput &&
-        didFocusChange
+      numberOfMonths !== prevNumberOfMonths
+      || enableOutsideDays !== prevEnableOutsideDays
+      || (
+        initialVisibleMonth !== prevInitialVisibleMonth
+        && !prevFocusedInput
+        && didFocusChange
       )
     ) {
       const newMonthState = this.getStateForNewMonth(nextProps);
@@ -474,8 +475,8 @@ export default class DayPickerRangeController extends React.Component {
       }
     } else if (focusedInput === START_DATE) {
       const lastAllowedStartDate = endDate && endDate.clone().subtract(minimumNights, 'days');
-      const isStartDateAfterEndDate = isBeforeDay(lastAllowedStartDate, day) ||
-        isAfterDay(startDate, endDate);
+      const isStartDateAfterEndDate = isBeforeDay(lastAllowedStartDate, day)
+        || isAfterDay(startDate, endDate);
       const isEndDateDisabled = disabled === END_DATE;
 
       if (!isEndDateDisabled || !isStartDateAfterEndDate) {
@@ -514,6 +515,7 @@ export default class DayPickerRangeController extends React.Component {
   }
 
   onDayMouseEnter(day) {
+    /* eslint react/destructuring-assignment: 1 */
     if (this.isTouchDevice) return;
     const {
       startDate,
@@ -539,6 +541,7 @@ export default class DayPickerRangeController extends React.Component {
           end,
         };
 
+        // eslint-disable-next-line react/destructuring-assignment
         if (this.state.dateOffset && this.state.dateOffset.start && this.state.dateOffset.end) {
           modifiers = this.deleteModifierFromRange(modifiers, this.state.dateOffset.start, this.state.dateOffset.end, 'hovered-offset');
         }
@@ -687,8 +690,12 @@ export default class DayPickerRangeController extends React.Component {
   onMonthChange(newMonth) {
     const { numberOfMonths, enableOutsideDays, orientation } = this.props;
     const withoutTransitionMonths = orientation === VERTICAL_SCROLLABLE;
-    const newVisibleDays =
-      getVisibleDays(newMonth, numberOfMonths, enableOutsideDays, withoutTransitionMonths);
+    const newVisibleDays = getVisibleDays(
+      newMonth,
+      numberOfMonths,
+      enableOutsideDays,
+      withoutTransitionMonths,
+    );
 
     this.setState({
       currentMonth: newMonth.clone(),
@@ -699,8 +706,12 @@ export default class DayPickerRangeController extends React.Component {
   onYearChange(newMonth) {
     const { numberOfMonths, enableOutsideDays, orientation } = this.props;
     const withoutTransitionMonths = orientation === VERTICAL_SCROLLABLE;
-    const newVisibleDays =
-      getVisibleDays(newMonth, numberOfMonths, enableOutsideDays, withoutTransitionMonths);
+    const newVisibleDays = getVisibleDays(
+      newMonth,
+      numberOfMonths,
+      enableOutsideDays,
+      withoutTransitionMonths,
+    );
 
     this.setState({
       currentMonth: newMonth.clone(),
@@ -945,12 +956,17 @@ export default class DayPickerRangeController extends React.Component {
   isDayAfterHoveredStartDate(day) {
     const { startDate, endDate, minimumNights } = this.props;
     const { hoverDate } = this.state || {};
-    return !!startDate && !endDate && !this.isBlocked(day) && isNextDay(hoverDate, day) &&
-      minimumNights > 0 && isSameDay(hoverDate, startDate);
+    return !!startDate
+      && !endDate
+      && !this.isBlocked(day)
+      && isNextDay(hoverDate, day)
+      && minimumNights > 0
+      && isSameDay(hoverDate, startDate);
   }
 
   isEndDate(day) {
-    return isSameDay(day, this.props.endDate);
+    const { endDate } = this.props;
+    return isSameDay(day, endDate);
   }
 
   isHovered(day) {
@@ -963,12 +979,12 @@ export default class DayPickerRangeController extends React.Component {
     const { startDate, endDate } = this.props;
     const { hoverDate } = this.state || {};
 
-    const isForwardRange = !!startDate && !endDate &&
-      (day.isBetween(startDate, hoverDate) ||
-       isSameDay(hoverDate, day));
-    const isBackwardRange = !!endDate && !startDate &&
-      (day.isBetween(hoverDate, endDate) ||
-       isSameDay(hoverDate, day));
+    const isForwardRange = !!startDate && !endDate && (
+      day.isBetween(startDate, hoverDate) || isSameDay(hoverDate, day)
+    );
+    const isBackwardRange = !!endDate && !startDate && (
+      day.isBetween(hoverDate, endDate) || isSameDay(hoverDate, day)
+    );
 
     const isValidDayHovered = hoverDate && !this.isBlocked(hoverDate);
 
@@ -981,11 +997,13 @@ export default class DayPickerRangeController extends React.Component {
   }
 
   isLastInRange(day) {
-    return this.isInSelectedSpan(day) && isNextDay(day, this.props.endDate);
+    const { endDate } = this.props;
+    return this.isInSelectedSpan(day) && isNextDay(day, endDate);
   }
 
   isStartDate(day) {
-    return isSameDay(day, this.props.startDate);
+    const { startDate } = this.props;
+    return isSameDay(day, startDate);
   }
 
   isBlocked(day) {
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 1dd938e424..de3462aff0 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -195,23 +195,33 @@ export default class DayPickerSingleDateController extends React.Component {
       numberOfMonths,
       enableOutsideDays,
     } = nextProps;
+    const {
+      isOutsideRange: prevIsOutsideRange,
+      isDayBlocked: prevIsDayBlocked,
+      isDayHighlighted: prevIsDayHighlighted,
+      numberOfMonths: prevNumberOfMonths,
+      enableOutsideDays: prevEnableOutsideDays,
+      initialVisibleMonth: prevInitialVisibleMonth,
+      focused: prevFocused,
+      date: prevDate,
+    } = this.props;
     let { visibleDays } = this.state;
 
     let recomputeOutsideRange = false;
     let recomputeDayBlocked = false;
     let recomputeDayHighlighted = false;
 
-    if (isOutsideRange !== this.props.isOutsideRange) {
+    if (isOutsideRange !== prevIsOutsideRange) {
       this.modifiers['blocked-out-of-range'] = day => isOutsideRange(day);
       recomputeOutsideRange = true;
     }
 
-    if (isDayBlocked !== this.props.isDayBlocked) {
+    if (isDayBlocked !== prevIsDayBlocked) {
       this.modifiers['blocked-calendar'] = day => isDayBlocked(day);
       recomputeDayBlocked = true;
     }
 
-    if (isDayHighlighted !== this.props.isDayHighlighted) {
+    if (isDayHighlighted !== prevIsDayHighlighted) {
       this.modifiers['highlighted-calendar'] = day => isDayHighlighted(day);
       recomputeDayHighlighted = true;
     }
@@ -221,12 +231,12 @@ export default class DayPickerSingleDateController extends React.Component {
     );
 
     if (
-      numberOfMonths !== this.props.numberOfMonths ||
-      enableOutsideDays !== this.props.enableOutsideDays ||
-      (
-        initialVisibleMonth !== this.props.initialVisibleMonth &&
-        !this.props.focused &&
-        focused
+      numberOfMonths !== prevNumberOfMonths
+      || enableOutsideDays !== prevEnableOutsideDays
+      || (
+        initialVisibleMonth !== prevInitialVisibleMonth
+        && !prevFocused
+        && focused
       )
     ) {
       const newMonthState = this.getStateForNewMonth(nextProps);
@@ -238,13 +248,13 @@ export default class DayPickerSingleDateController extends React.Component {
       });
     }
 
-    const didDateChange = date !== this.props.date;
-    const didFocusChange = focused !== this.props.focused;
+    const didDateChange = date !== prevDate;
+    const didFocusChange = focused !== prevFocused;
 
     let modifiers = {};
 
     if (didDateChange) {
-      modifiers = this.deleteModifier(modifiers, this.props.date, 'selected');
+      modifiers = this.deleteModifier(modifiers, prevDate, 'selected');
       modifiers = this.addModifier(modifiers, date, 'selected');
     }
 
@@ -404,8 +414,12 @@ export default class DayPickerSingleDateController extends React.Component {
   onMonthChange(newMonth) {
     const { numberOfMonths, enableOutsideDays, orientation } = this.props;
     const withoutTransitionMonths = orientation === VERTICAL_SCROLLABLE;
-    const newVisibleDays =
-      getVisibleDays(newMonth, numberOfMonths, enableOutsideDays, withoutTransitionMonths);
+    const newVisibleDays = getVisibleDays(
+      newMonth,
+      numberOfMonths,
+      enableOutsideDays,
+      withoutTransitionMonths,
+    );
 
     this.setState({
       currentMonth: newMonth.clone(),
@@ -416,8 +430,12 @@ export default class DayPickerSingleDateController extends React.Component {
   onYearChange(newMonth) {
     const { numberOfMonths, enableOutsideDays, orientation } = this.props;
     const withoutTransitionMonths = orientation === VERTICAL_SCROLLABLE;
-    const newVisibleDays =
-      getVisibleDays(newMonth, numberOfMonths, enableOutsideDays, withoutTransitionMonths);
+    const newVisibleDays = getVisibleDays(
+      newMonth,
+      numberOfMonths,
+      enableOutsideDays,
+      withoutTransitionMonths,
+    );
 
     this.setState({
       currentMonth: newMonth.clone(),
@@ -599,7 +617,8 @@ export default class DayPickerSingleDateController extends React.Component {
   }
 
   isSelected(day) {
-    return isSameDay(day, this.props.date);
+    const { date } = this.props;
+    return isSameDay(day, date);
   }
 
   isToday(day) {
diff --git a/src/components/KeyboardShortcutRow.jsx b/src/components/KeyboardShortcutRow.jsx
index fed00a93ac..e5e0457de9 100644
--- a/src/components/KeyboardShortcutRow.jsx
+++ b/src/components/KeyboardShortcutRow.jsx
@@ -90,4 +90,3 @@ export default withStyles(({ reactDates: { color } }) => ({
     marginLeft: 8,
   },
 }))(KeyboardShortcutRow);
-
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index 4537a8293c..8cd27f1810 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -155,7 +155,9 @@ class SingleDatePicker extends React.Component {
     this.responsivizePickerPosition();
     this.disableScroll();
 
-    if (this.props.focused) {
+    const { focused } = this.props;
+
+    if (focused) {
       this.setState({
         isInputFocused: true,
       });
@@ -165,10 +167,11 @@ class SingleDatePicker extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    if (!prevProps.focused && this.props.focused) {
+    const { focused } = this.props;
+    if (!prevProps.focused && focused) {
       this.responsivizePickerPosition();
       this.disableScroll();
-    } else if (prevProps.focused && !this.props.focused) {
+    } else if (prevProps.focused && !focused) {
       if (this.enableScroll) this.enableScroll();
     }
   }
@@ -212,10 +215,9 @@ class SingleDatePicker extends React.Component {
     } = this.props;
 
     const withAnyPortal = withPortal || withFullScreenPortal;
-    const moveFocusToDayPicker =
-      withAnyPortal ||
-      (readOnly && !keepFocusOnInput) ||
-      (this.isTouchDevice && !keepFocusOnInput);
+    const moveFocusToDayPicker = withAnyPortal
+      || (readOnly && !keepFocusOnInput)
+      || (this.isTouchDevice && !keepFocusOnInput);
 
     if (moveFocusToDayPicker) {
       this.onDayPickerFocus();
@@ -234,9 +236,10 @@ class SingleDatePicker extends React.Component {
       focused,
       onFocusChange,
       onClose,
+      appendToBody,
     } = this.props;
     if (!focused) return;
-    if (this.props.appendToBody && this.dayPickerContainer.contains(event.target)) return;
+    if (appendToBody && this.dayPickerContainer.contains(event.target)) return;
 
     this.setState({
       isInputFocused: false,
@@ -293,8 +296,9 @@ class SingleDatePicker extends React.Component {
   }
 
   disableScroll() {
-    if (!this.props.appendToBody && !this.props.disableScroll) return;
-    if (!this.props.focused) return;
+    const { appendToBody, disableScroll: propDisableScroll, focused } = this.props;
+    if (!appendToBody && !propDisableScroll) return;
+    if (!focused) return;
 
     // Disable scroll for every ancestor of this <SingleDatePicker> up to the
     // document level. This ensures the input and the picker never move. Other
diff --git a/src/components/SingleDatePickerInput.jsx b/src/components/SingleDatePickerInput.jsx
index 2ad4f8102b..35daae6ae3 100644
--- a/src/components/SingleDatePickerInput.jsx
+++ b/src/components/SingleDatePickerInput.jsx
@@ -87,6 +87,8 @@ const defaultProps = {
   phrases: SingleDatePickerInputPhrases,
 };
 
+/* eslint react/no-this-in-sfc: 1 */
+
 function SingleDatePickerInput({
   id,
   placeholder,
diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js
index e1775e0296..a4da75ff7e 100644
--- a/src/shapes/DateRangePickerShape.js
+++ b/src/shapes/DateRangePickerShape.js
@@ -5,14 +5,14 @@ import { mutuallyExclusiveProps, nonNegativeInteger } from 'airbnb-prop-types';
 import { DateRangePickerPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
 
-import FocusedInputShape from '../shapes/FocusedInputShape';
-import IconPositionShape from '../shapes/IconPositionShape';
-import OrientationShape from '../shapes/OrientationShape';
-import DisabledShape from '../shapes/DisabledShape';
-import anchorDirectionShape from '../shapes/AnchorDirectionShape';
-import openDirectionShape from '../shapes/OpenDirectionShape';
-import DayOfWeekShape from '../shapes/DayOfWeekShape';
-import CalendarInfoPositionShape from '../shapes/CalendarInfoPositionShape';
+import FocusedInputShape from './FocusedInputShape';
+import IconPositionShape from './IconPositionShape';
+import OrientationShape from './OrientationShape';
+import DisabledShape from './DisabledShape';
+import anchorDirectionShape from './AnchorDirectionShape';
+import openDirectionShape from './OpenDirectionShape';
+import DayOfWeekShape from './DayOfWeekShape';
+import CalendarInfoPositionShape from './CalendarInfoPositionShape';
 
 export default {
   // required props for a functional interactive DateRangePicker
diff --git a/src/shapes/SingleDatePickerShape.js b/src/shapes/SingleDatePickerShape.js
index 1ed90e6f73..eb28bbb308 100644
--- a/src/shapes/SingleDatePickerShape.js
+++ b/src/shapes/SingleDatePickerShape.js
@@ -5,12 +5,12 @@ import { mutuallyExclusiveProps, nonNegativeInteger } from 'airbnb-prop-types';
 import { SingleDatePickerPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
 
-import IconPositionShape from '../shapes/IconPositionShape';
-import OrientationShape from '../shapes/OrientationShape';
-import anchorDirectionShape from '../shapes/AnchorDirectionShape';
-import openDirectionShape from '../shapes/OpenDirectionShape';
-import DayOfWeekShape from '../shapes/DayOfWeekShape';
-import CalendarInfoPositionShape from '../shapes/CalendarInfoPositionShape';
+import IconPositionShape from './IconPositionShape';
+import OrientationShape from './OrientationShape';
+import anchorDirectionShape from './AnchorDirectionShape';
+import openDirectionShape from './OpenDirectionShape';
+import DayOfWeekShape from './DayOfWeekShape';
+import CalendarInfoPositionShape from './CalendarInfoPositionShape';
 
 export default {
   // required props for a functional interactive SingleDatePicker
diff --git a/src/utils/calculateDimension.js b/src/utils/calculateDimension.js
index 41ef6afb43..bbc7778021 100644
--- a/src/utils/calculateDimension.js
+++ b/src/utils/calculateDimension.js
@@ -16,10 +16,10 @@ export default function calculateDimension(el, axis, borderBox = false, withMarg
   // Get the inner size
   if (!borderBox) {
     size -= (
-      parseFloat(style[`padding${axisStart}`]) +
-      parseFloat(style[`padding${axisEnd}`]) +
-      parseFloat(style[`border${axisStart}Width`]) +
-      parseFloat(style[`border${axisEnd}Width`])
+      parseFloat(style[`padding${axisStart}`])
+      + parseFloat(style[`padding${axisEnd}`])
+      + parseFloat(style[`border${axisStart}Width`])
+      + parseFloat(style[`border${axisEnd}Width`])
     );
   }
 
diff --git a/src/utils/disableScroll.js b/src/utils/disableScroll.js
index 7815a4f7af..e8c6d506ee 100644
--- a/src/utils/disableScroll.js
+++ b/src/utils/disableScroll.js
@@ -56,10 +56,9 @@ export function getScrollAncestorsOverflowY(node, acc = new Map()) {
  */
 export default function disableScroll(node) {
   const scrollAncestorsOverflowY = getScrollAncestorsOverflowY(node);
-  const toggle = on =>
-    scrollAncestorsOverflowY.forEach((overflowY, ancestor) => {
-      ancestor.style.setProperty('overflow-y', on ? 'hidden' : overflowY);
-    });
+  const toggle = on => scrollAncestorsOverflowY.forEach((overflowY, ancestor) => {
+    ancestor.style.setProperty('overflow-y', on ? 'hidden' : overflowY);
+  });
 
   toggle(true);
   return () => toggle(false);
diff --git a/src/utils/getCalendarDaySettings.js b/src/utils/getCalendarDaySettings.js
index d599c67f69..ca5e78f05b 100644
--- a/src/utils/getCalendarDaySettings.js
+++ b/src/utils/getCalendarDaySettings.js
@@ -1,4 +1,4 @@
-import getPhrase from '../utils/getPhrase';
+import getPhrase from './getPhrase';
 import { BLOCKED_MODIFIER } from '../constants';
 
 export default function getCalendarDaySettings(day, ariaLabelFormat, daySize, modifiers, phrases) {
diff --git a/src/utils/getInputHeight.js b/src/utils/getInputHeight.js
index 47be040a31..ff44619ad0 100644
--- a/src/utils/getInputHeight.js
+++ b/src/utils/getInputHeight.js
@@ -51,13 +51,13 @@ export default function getInputHeight({
 }, small) {
   const calcLineHeight = small ? lineHeight_small : lineHeight;
 
-  const padding = small ?
-    getPadding(
+  const padding = small
+    ? getPadding(
       displayTextPaddingVertical_small,
       displayTextPaddingTop_small,
       displayTextPaddingBottom_small,
-    ) :
-    getPadding(
+    )
+    : getPadding(
       displayTextPaddingVertical,
       displayTextPaddingTop,
       displayTextPaddingBottom,
diff --git a/src/utils/isSameDay.js b/src/utils/isSameDay.js
index d3e3a7fcae..497d72f281 100644
--- a/src/utils/isSameDay.js
+++ b/src/utils/isSameDay.js
@@ -4,7 +4,7 @@ export default function isSameDay(a, b) {
   if (!moment.isMoment(a) || !moment.isMoment(b)) return false;
   // Compare least significant, most likely to change units first
   // Moment's isSame clones moment inputs and is a tad slow
-  return a.date() === b.date() &&
-    a.month() === b.month() &&
-    a.year() === b.year();
+  return a.date() === b.date()
+    && a.month() === b.month()
+    && a.year() === b.year();
 }
diff --git a/src/utils/isSameMonth.js b/src/utils/isSameMonth.js
index 6d29d244e7..d0bdf5e0e6 100644
--- a/src/utils/isSameMonth.js
+++ b/src/utils/isSameMonth.js
@@ -4,6 +4,6 @@ export default function isSameMonth(a, b) {
   if (!moment.isMoment(a) || !moment.isMoment(b)) return false;
   // Compare least significant, most likely to change units first
   // Moment's isSame clones moment inputs and is a tad slow
-  return a.month() === b.month() &&
-    a.year() === b.year();
+  return a.month() === b.month()
+    && a.year() === b.year();
 }
diff --git a/src/utils/toMomentObject.js b/src/utils/toMomentObject.js
index 261922e58e..743a320f35 100644
--- a/src/utils/toMomentObject.js
+++ b/src/utils/toMomentObject.js
@@ -3,9 +3,9 @@ import moment from 'moment';
 import { DISPLAY_FORMAT, ISO_FORMAT } from '../constants';
 
 export default function toMomentObject(dateString, customFormat) {
-  const dateFormats = customFormat ?
-    [customFormat, DISPLAY_FORMAT, ISO_FORMAT] :
-    [DISPLAY_FORMAT, ISO_FORMAT];
+  const dateFormats = customFormat
+    ? [customFormat, DISPLAY_FORMAT, ISO_FORMAT]
+    : [DISPLAY_FORMAT, ISO_FORMAT];
 
   const date = moment(dateString, dateFormats, true);
   return date.isValid() ? date.hour(12) : null;
diff --git a/test/components/CalendarDay_spec.jsx b/test/components/CalendarDay_spec.jsx
index e062954d9a..f1cac8268f 100644
--- a/test/components/CalendarDay_spec.jsx
+++ b/test/components/CalendarDay_spec.jsx
@@ -36,8 +36,9 @@ describe('CalendarDay', () => {
       const modifiers = new Set([BLOCKED_MODIFIER]);
       const renderDayContents = (day, mods) => `${day.format('dddd')}${mods.has(BLOCKED_MODIFIER) ? 'BLOCKED' : ''}`;
       const expected = `${moment().format('dddd')}BLOCKED`;
-      const wrapper =
-        shallow(<CalendarDay renderDayContents={renderDayContents} modifiers={modifiers} />).dive();
+      const wrapper = shallow((
+        <CalendarDay renderDayContents={renderDayContents} modifiers={modifiers} />
+      )).dive();
       expect(wrapper.text()).to.equal(expected);
     });
 
diff --git a/test/utils/getDetachedContainerStyles_spec.js b/test/utils/getDetachedContainerStyles_spec.js
index ccfb52d2f9..5dbe2cc801 100644
--- a/test/utils/getDetachedContainerStyles_spec.js
+++ b/test/utils/getDetachedContainerStyles_spec.js
@@ -3,7 +3,12 @@ import wrap from 'mocha-wrap';
 
 import getDetachedContainerStyles from '../../src/utils/getDetachedContainerStyles';
 
-import { OPEN_DOWN, OPEN_UP, ANCHOR_LEFT, ANCHOR_RIGHT } from '../../src/constants';
+import {
+  OPEN_DOWN,
+  OPEN_UP,
+  ANCHOR_LEFT,
+  ANCHOR_RIGHT,
+} from '../../src/constants';
 
 const describeIfNoWindow = typeof document === 'undefined' ? describe : describe.skip;
 
diff --git a/test/utils/getVisibleDays_spec.js b/test/utils/getVisibleDays_spec.js
index ba98b8b94c..ee91893554 100644
--- a/test/utils/getVisibleDays_spec.js
+++ b/test/utils/getVisibleDays_spec.js
@@ -30,4 +30,3 @@ describe('getVisibleDays', () => {
     expect(containsToday.length > 0).to.equal(true);
   });
 });
-

From 3eb2170dbb960514cac35cd7728ca5a614473ed1 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Sat, 30 Jun 2018 13:20:06 -0700
Subject: [PATCH 234/618] [Tests] ensure that propType errors fail the build

---
 scripts/buildCSS.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/scripts/buildCSS.js b/scripts/buildCSS.js
index 15d12f9379..ef3ab0a769 100644
--- a/scripts/buildCSS.js
+++ b/scripts/buildCSS.js
@@ -8,6 +8,9 @@ const compileCSS = require('react-with-styles-interface-css-compiler');
 const registerMaxSpecificity = require('react-with-styles-interface-css/dist/utils/registerMaxSpecificity').default;
 const registerCSSInterfaceWithDefaultTheme = require('../src/utils/registerCSSInterfaceWithDefaultTheme').default;
 
+console.error = msg => { throw new SyntaxError(msg); };
+console.warn = msg => { throw new SyntaxError(msg); };
+
 const args = process.argv.slice(2);
 const optimizeForProduction = args.includes('-o') || args.includes('--optimize');
 

From 2c45275bc4ac925fbbfffe348f38076790fe727a Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Tue, 3 Jul 2018 15:06:24 -0700
Subject: [PATCH 235/618] [Dev Deps] update `eslint-plugin-jsx-a11y`, `sinon`

---
 .eslintrc    | 2 ++
 package.json | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 3495c1d12e..e633be7bfe 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -25,6 +25,8 @@
     "no-restricted-imports": 0, // TODO: enable with full RTL support
 
     "react/jsx-one-expression-per-line": 1, // TODO: enable once fixed upstream
+
+    "jsx-a11y/aria-proptypes": 1, // TODO: https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/454
   },
 
   "settings": {
diff --git a/package.json b/package.json
index 861a458607..bf5041bd2e 100644
--- a/package.json
+++ b/package.json
@@ -77,7 +77,7 @@
     "eslint": "^4.19.1",
     "eslint-config-airbnb": "^17.0.0",
     "eslint-plugin-import": "^2.13.0",
-    "eslint-plugin-jsx-a11y": "^6.0.3",
+    "eslint-plugin-jsx-a11y": "^6.1.0",
     "eslint-plugin-react": "^7.10.0",
     "eslint-plugin-react-with-styles": "^2.0.0",
     "git-directory-deploy": "^1.5.1",
@@ -104,7 +104,7 @@
     "rimraf": "^2.6.2",
     "safe-publish-latest": "^1.1.1",
     "sass-loader": "^7.0.3",
-    "sinon": "^6.0.1",
+    "sinon": "^6.1.0",
     "sinon-sandbox": "^1.0.2",
     "style-loader": "^0.20.3",
     "webpack": "^2.6.1"

From 9c246075f74f9d76c4274a2e1de26286874c905d Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Tue, 10 Jul 2018 13:24:57 -0700
Subject: [PATCH 236/618] Fix minimum nights availability issue

---
 src/components/DayPickerRangeController.jsx   |  40 +++--
 .../DayPickerRangeController_spec.jsx         | 151 ++++++++++--------
 2 files changed, 108 insertions(+), 83 deletions(-)

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 257048d75c..4cc1d8d762 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -370,29 +370,16 @@ export default class DayPickerRangeController extends React.Component {
       }
     }
 
-    if (minimumNights > 0 && startDate && focusedInput === END_DATE) {
-      modifiers = this.addModifierToRange(
-        modifiers,
-        startDate,
-        startDate.clone().add(minimumNights, 'days'),
-        'blocked-minimum-nights',
-      );
-    }
-
     if (didFocusChange || recomputePropModifiers) {
       values(visibleDays).forEach((days) => {
         Object.keys(days).forEach((day) => {
           const momentObj = moment(day);
-
-          if (this.isBlocked(momentObj)) {
-            modifiers = this.addModifier(modifiers, momentObj, 'blocked');
-          } else {
-            modifiers = this.deleteModifier(modifiers, momentObj, 'blocked');
-          }
+          let isBlocked = false;
 
           if (didFocusChange || recomputeOutsideRange) {
             if (isOutsideRange(momentObj)) {
               modifiers = this.addModifier(modifiers, momentObj, 'blocked-out-of-range');
+              isBlocked = true;
             } else {
               modifiers = this.deleteModifier(modifiers, momentObj, 'blocked-out-of-range');
             }
@@ -401,11 +388,18 @@ export default class DayPickerRangeController extends React.Component {
           if (didFocusChange || recomputeDayBlocked) {
             if (isDayBlocked(momentObj)) {
               modifiers = this.addModifier(modifiers, momentObj, 'blocked-calendar');
+              isBlocked = true;
             } else {
               modifiers = this.deleteModifier(modifiers, momentObj, 'blocked-calendar');
             }
           }
 
+          if (isBlocked) {
+            modifiers = this.addModifier(modifiers, momentObj, 'blocked');
+          } else {
+            modifiers = this.deleteModifier(modifiers, momentObj, 'blocked');
+          }
+
           if (didFocusChange || recomputeDayHighlighted) {
             if (isDayHighlighted(momentObj)) {
               modifiers = this.addModifier(modifiers, momentObj, 'highlighted-calendar');
@@ -417,6 +411,22 @@ export default class DayPickerRangeController extends React.Component {
       });
     }
 
+    if (minimumNights > 0 && startDate && focusedInput === END_DATE) {
+      modifiers = this.addModifierToRange(
+        modifiers,
+        startDate,
+        startDate.clone().add(minimumNights, 'days'),
+        'blocked-minimum-nights',
+      );
+
+      modifiers = this.addModifierToRange(
+        modifiers,
+        startDate,
+        startDate.clone().add(minimumNights, 'days'),
+        'blocked',
+      );
+    }
+
     const today = moment();
     if (!isSameDay(this.today, today)) {
       modifiers = this.deleteModifier(modifiers, this.today, 'today');
diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index 2c479d59fa..cb19f698c9 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -728,8 +728,11 @@ describe('DayPickerRangeController', () => {
           describe('new focusedInput !== END_DATE', () => {
             it('does not call addModifierFromRange with `blocked-minimum-nights', () => {
               const addModifierToRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifierToRange');
+              const startDate = moment(today);
               const wrapper = shallow(<DayPickerRangeController
                 {...props}
+                focusedInput={END_DATE}
+                startDate={startDate}
                 minimumNights={5}
               />);
               wrapper.instance().componentWillReceiveProps({
@@ -741,6 +744,43 @@ describe('DayPickerRangeController', () => {
               const minimumNightsCalls = getCallsByModifier(addModifierToRangeSpy, 'blocked-minimum-nights');
               expect(minimumNightsCalls.length).to.equal(0);
             });
+
+            it('updates state to remove `blocked-minimum-nights` and `blocked` from the appropriate days', () => {
+              const startDate = today;
+              const minimumNights = 5;
+              const wrapper = shallow(<DayPickerRangeController
+                {...props}
+                focusedInput={END_DATE}
+                startDate={startDate}
+                minimumNights={minimumNights}
+              />);
+              const { visibleDays } = wrapper.state();
+              let day = moment(today);
+              for (let i = 0; i < minimumNights; i += 1) {
+                const monthString = toISOMonthString(day);
+                const dateString = toISODateString(day);
+                expect(visibleDays[monthString][dateString]).to.include('blocked-minimum-nights');
+                expect(visibleDays[monthString][dateString]).to.include('blocked');
+                day.add(1, 'day');
+              }
+
+              wrapper.instance().componentWillReceiveProps({
+                ...props,
+                startDate,
+                focusedInput: START_DATE,
+                minimumNights,
+              });
+
+              const { visibleDays: newVisibleDays } = wrapper.state();
+              day = moment(today);
+              for (let i = 0; i < minimumNights; i += 1) {
+                const monthString = toISOMonthString(day);
+                const dateString = toISODateString(day);
+                expect(newVisibleDays[monthString][dateString]).not.to.include('blocked-minimum-nights');
+                expect(newVisibleDays[monthString][dateString]).not.to.include('blocked');
+                day.add(1, 'day');
+              }
+            });
           });
 
           describe('focusedInput === END_DATE', () => {
@@ -765,79 +805,54 @@ describe('DayPickerRangeController', () => {
               expect(minimumNightsCalls[0].args[1]).to.equal(startDate);
               expect(isSameDay(minimumNightsCalls[0].args[2], minimumNightsEndSpan)).to.equal(true);
             });
-          });
-        });
-      });
 
-      describe('blocked', () => {
-        describe('focusedInput did not change', () => {
-          it('does not call isBlocked', () => {
-            const isBlockedStub = sinon.stub(DayPickerRangeController.prototype, 'isBlocked');
-            const wrapper = shallow(<DayPickerRangeController {...props} />);
-            isBlockedStub.resetHistory();
-            wrapper.instance().componentWillReceiveProps({
-              ...props,
-            });
-            expect(isBlockedStub.callCount).to.equal(0);
-          });
-        });
-
-        describe('focusedInput changed', () => {
-          const numVisibleDays = 3;
-          let visibleDays;
-          beforeEach(() => {
-            const startOfMonth = today.clone().startOf('month');
-            visibleDays = {
-              [toISOMonthString(startOfMonth)]: {
-                [toISODateString(startOfMonth)]: [],
-                [toISODateString(startOfMonth.clone().add(1, 'day'))]: [],
-                [toISODateString(startOfMonth.clone().add(2, 'days'))]: [],
-              },
-            };
-          });
-
-          it('calls isBlocked for every visible day', () => {
-            const isBlockedStub = sinon.stub(DayPickerRangeController.prototype, 'isBlocked');
-            const wrapper = shallow(<DayPickerRangeController {...props} />);
-            wrapper.setState({ visibleDays });
-            isBlockedStub.resetHistory();
-            wrapper.instance().componentWillReceiveProps({
-              ...props,
-              focusedInput: END_DATE,
-            });
-            expect(isBlockedStub.callCount).to.equal(numVisibleDays);
-          });
-
-          it('if isBlocked(day) is true calls addModifier with `blocked` for each day', () => {
-            const addModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifier');
-            sinon.stub(DayPickerRangeController.prototype, 'isBlocked').returns(true);
-            const wrapper = shallow(<DayPickerRangeController {...props} />);
-            wrapper.setState({ visibleDays });
-            wrapper.instance().componentWillReceiveProps({
-              ...props,
-              focusedInput: START_DATE,
+            it('updates state to include `blocked-minimum-nights` on the appropriate days', () => {
+              const startDate = today;
+              const minimumNights = 5;
+              const wrapper = shallow(<DayPickerRangeController
+                {...props}
+                startDate={startDate}
+                minimumNights={minimumNights}
+              />);
+              wrapper.instance().componentWillReceiveProps({
+                ...props,
+                startDate,
+                focusedInput: END_DATE,
+                minimumNights,
+              });
+              const { visibleDays } = wrapper.state();
+              const day = moment(today);
+              for (let i = 0; i < minimumNights; i += 1) {
+                const monthString = toISOMonthString(day);
+                const dateString = toISODateString(day);
+                expect(visibleDays[monthString][dateString]).to.include('blocked-minimum-nights');
+                day.add(1, 'day');
+              }
             });
-            const blockedCalendarCalls = getCallsByModifier(addModifierSpy, 'blocked');
-            expect(blockedCalendarCalls.length).to.equal(numVisibleDays);
-          });
 
-          it('if isBlocked(day) is false calls deleteModifier with day and `blocked`', () => {
-            const deleteModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifier');
-            sinon.stub(DayPickerRangeController.prototype, 'isBlocked').returns(false);
-            const wrapper = shallow((
-              <DayPickerRangeController
+            it('updates state to include `blocked` on the appropriate days', () => {
+              const startDate = today;
+              const minimumNights = 5;
+              const wrapper = shallow(<DayPickerRangeController
                 {...props}
-                minimumNights={0}
-              />
-            ));
-            wrapper.setState({ visibleDays });
-            wrapper.instance().componentWillReceiveProps({
-              ...props,
-              minimumNights: 0,
-              focusedInput: END_DATE,
+                startDate={startDate}
+                minimumNights={minimumNights}
+              />);
+              wrapper.instance().componentWillReceiveProps({
+                ...props,
+                startDate,
+                focusedInput: END_DATE,
+                minimumNights,
+              });
+              const { visibleDays } = wrapper.state();
+              const day = moment(today);
+              for (let i = 0; i < minimumNights; i += 1) {
+                const monthString = toISOMonthString(day);
+                const dateString = toISODateString(day);
+                expect(visibleDays[monthString][dateString]).to.include('blocked');
+                day.add(1, 'day');
+              }
             });
-            const blockedCalendarCalls = getCallsByModifier(deleteModifierSpy, 'blocked');
-            expect(blockedCalendarCalls.length).to.equal(numVisibleDays);
           });
         });
       });

From ab8c80bc987f7bab8d9b6b93865b8c65e8ea63e6 Mon Sep 17 00:00:00 2001
From: brosewarne <Ben.Rosewarne@comparethemarket.com.au>
Date: Tue, 25 Jul 2017 11:50:46 +1000
Subject: [PATCH 237/618] Update conditions when adjustDayPickerHeight is
 called

* Added checks for daySize and orientation in DayPicker.componentDidUpdate() so that DayPicker height is recalculated if either of these change between renders
* Added new tests for DayPicker.componentDidUpdate
---
 src/components/DayPicker.jsx       | 16 ++++++++++++--
 test/components/DayPicker_spec.jsx | 34 ++++++++++++++++++++++++++++++
 2 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index d9dc54bfd2..2a950c78e9 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -316,8 +316,20 @@ class DayPicker extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    const { isFocused } = this.props;
-    const { focusedDate } = this.state;
+    const {
+      orientation, daySize, isFocused, numberOfMonths,
+    } = this.props;
+    const { focusedDate, monthTitleHeight } = this.state;
+
+    if (
+      this.isHorizontal()
+      && (orientation !== prevProps.orientation || daySize !== prevProps.daySize)
+    ) {
+      const visibleCalendarWeeks = this.calendarMonthWeeks.slice(1, numberOfMonths + 1);
+      const calendarMonthWeeksHeight = Math.max(0, ...visibleCalendarWeeks) * (daySize - 1);
+      const newMonthHeight = monthTitleHeight + calendarMonthWeeksHeight + 1;
+      this.adjustDayPickerHeight(newMonthHeight);
+    }
 
     if (!prevProps.isFocused && isFocused && !focusedDate) {
       this.container.focus();
diff --git a/test/components/DayPicker_spec.jsx b/test/components/DayPicker_spec.jsx
index 0093dba73a..04a6bd53cf 100644
--- a/test/components/DayPicker_spec.jsx
+++ b/test/components/DayPicker_spec.jsx
@@ -796,6 +796,23 @@ describe('DayPicker', () => {
           expect(adjustDayPickerHeightSpy.calledTwice).to.equal(false);
         });
 
+        it('calls adjustDayPickerHeight if orientation has changed from HORIZONTAL_ORIENTATION to VERTICAL_ORIENTATION', () => {
+          const wrapper = mount(<DayPicker orientation={HORIZONTAL_ORIENTATION} />);
+          wrapper.setState({
+            orientation: VERTICAL_ORIENTATION,
+          });
+          expect(adjustDayPickerHeightSpy).to.have.property('callCount', 2);
+        });
+
+        it('calls adjustDayPickerHeight if daySize has changed', () => {
+          const wrapper = mount(<DayPicker daySize={39} orientation={HORIZONTAL_ORIENTATION} />);
+          wrapper.setState({
+            daySize: 40,
+            orientation: HORIZONTAL_ORIENTATION,
+          });
+          expect(adjustDayPickerHeightSpy).to.have.property('callCount', 2);
+        });
+
         it('calls updateStateAfterMonthTransition if state.monthTransition is truthy', () => {
           const wrapper = mount(<DayPicker orientation={HORIZONTAL_ORIENTATION} />);
           wrapper.setState({
@@ -830,6 +847,23 @@ describe('DayPicker', () => {
           expect(adjustDayPickerHeightSpy.called).to.equal(false);
         });
 
+        it('calls adjustDayPickerHeight if orientation has changed from VERTICAL_ORIENTATION to HORIZONTAL_ORIENTATION', () => {
+          const wrapper = mount(<DayPicker orientation={VERTICAL_ORIENTATION} />);
+          wrapper.setState({
+            orientation: HORIZONTAL_ORIENTATION,
+          });
+          expect(adjustDayPickerHeightSpy).to.have.property('callCount', 2);
+        });
+
+        it('calls adjustDayPickerHeight if daySize has changed', () => {
+          const wrapper = mount(<DayPicker daySize={39} orientation={VERTICAL_ORIENTATION} />);
+          wrapper.setState({
+            daySize: 40,
+            orientation: VERTICAL_ORIENTATION,
+          });
+          expect(adjustDayPickerHeightSpy).to.have.property('callCount', 2);
+        });
+
         it('calls updateStateAfterMonthTransition if state.monthTransition is truthy', () => {
           const wrapper = mount(<DayPicker orientation={VERTICAL_ORIENTATION} />);
           wrapper.setState({

From 095864cbc8b68f1fcacfcfb7182281a79830a0b4 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Mon, 9 Jul 2018 13:41:55 -0700
Subject: [PATCH 238/618] Do not pass in undefined onOutsideClick to the
 OutsideClickHandler

---
 src/components/DateRangePicker.jsx  | 99 +++++++++++++++--------------
 src/components/SingleDatePicker.jsx | 81 ++++++++++++-----------
 2 files changed, 97 insertions(+), 83 deletions(-)

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 00adc25342..0eca351ae4 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -529,10 +529,54 @@ class DateRangePicker extends React.Component {
 
     const { isDateRangePickerInputFocused } = this.state;
 
-    const onOutsideClick = (!withPortal && !withFullScreenPortal) ? this.onOutsideClick : undefined;
+    const enableOutsideClick = (!withPortal && !withFullScreenPortal);
 
     const hideFang = verticalSpacing < FANG_HEIGHT_PX;
 
+    const input = (
+      <DateRangePickerInputController
+        startDate={startDate}
+        startDateId={startDateId}
+        startDatePlaceholderText={startDatePlaceholderText}
+        isStartDateFocused={focusedInput === START_DATE}
+        endDate={endDate}
+        endDateId={endDateId}
+        endDatePlaceholderText={endDatePlaceholderText}
+        isEndDateFocused={focusedInput === END_DATE}
+        displayFormat={displayFormat}
+        showClearDates={showClearDates}
+        showCaret={!withPortal && !withFullScreenPortal && !hideFang}
+        showDefaultInputIcon={showDefaultInputIcon}
+        inputIconPosition={inputIconPosition}
+        customInputIcon={customInputIcon}
+        customArrowIcon={customArrowIcon}
+        customCloseIcon={customCloseIcon}
+        disabled={disabled}
+        required={required}
+        readOnly={readOnly}
+        openDirection={openDirection}
+        reopenPickerOnClearDates={reopenPickerOnClearDates}
+        keepOpenOnDateSelect={keepOpenOnDateSelect}
+        isOutsideRange={isOutsideRange}
+        minimumNights={minimumNights}
+        withFullScreenPortal={withFullScreenPortal}
+        onDatesChange={onDatesChange}
+        onFocusChange={this.onDateRangePickerInputFocus}
+        onKeyDownArrowDown={this.onDayPickerFocus}
+        onKeyDownQuestionMark={this.showKeyboardShortcutsPanel}
+        onClose={onClose}
+        phrases={phrases}
+        screenReaderMessage={screenReaderInputMessage}
+        isFocused={isDateRangePickerInputFocused}
+        isRTL={isRTL}
+        noBorder={noBorder}
+        block={block}
+        small={small}
+        regular={regular}
+        verticalSpacing={verticalSpacing}
+      />
+    );
+
     return (
       <div
         ref={this.setContainerRef}
@@ -541,51 +585,14 @@ class DateRangePicker extends React.Component {
           block && styles.DateRangePicker__block,
         )}
       >
-        <OutsideClickHandler onOutsideClick={onOutsideClick}>
-          <DateRangePickerInputController
-            startDate={startDate}
-            startDateId={startDateId}
-            startDatePlaceholderText={startDatePlaceholderText}
-            isStartDateFocused={focusedInput === START_DATE}
-            endDate={endDate}
-            endDateId={endDateId}
-            endDatePlaceholderText={endDatePlaceholderText}
-            isEndDateFocused={focusedInput === END_DATE}
-            displayFormat={displayFormat}
-            showClearDates={showClearDates}
-            showCaret={!withPortal && !withFullScreenPortal && !hideFang}
-            showDefaultInputIcon={showDefaultInputIcon}
-            inputIconPosition={inputIconPosition}
-            customInputIcon={customInputIcon}
-            customArrowIcon={customArrowIcon}
-            customCloseIcon={customCloseIcon}
-            disabled={disabled}
-            required={required}
-            readOnly={readOnly}
-            openDirection={openDirection}
-            reopenPickerOnClearDates={reopenPickerOnClearDates}
-            keepOpenOnDateSelect={keepOpenOnDateSelect}
-            isOutsideRange={isOutsideRange}
-            minimumNights={minimumNights}
-            withFullScreenPortal={withFullScreenPortal}
-            onDatesChange={onDatesChange}
-            onFocusChange={this.onDateRangePickerInputFocus}
-            onKeyDownArrowDown={this.onDayPickerFocus}
-            onKeyDownQuestionMark={this.showKeyboardShortcutsPanel}
-            onClose={onClose}
-            phrases={phrases}
-            screenReaderMessage={screenReaderInputMessage}
-            isFocused={isDateRangePickerInputFocused}
-            isRTL={isRTL}
-            noBorder={noBorder}
-            block={block}
-            small={small}
-            regular={regular}
-            verticalSpacing={verticalSpacing}
-          />
-
-          {this.maybeRenderDayPickerWithPortal()}
-        </OutsideClickHandler>
+        {enableOutsideClick && (
+          <OutsideClickHandler onOutsideClick={this.onOutsideClick}>
+            {input}
+            {this.maybeRenderDayPickerWithPortal()}
+          </OutsideClickHandler>
+        )}
+        {!enableOutsideClick && input}
+        {!enableOutsideClick && this.maybeRenderDayPickerWithPortal()}
       </div>
     );
   }
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index 8cd27f1810..86d204b7bc 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -551,10 +551,45 @@ class SingleDatePicker extends React.Component {
 
     const displayValue = this.getDateString(date);
 
-    const onOutsideClick = (!withPortal && !withFullScreenPortal) ? this.onClearFocus : undefined;
+    const enableOutsideClick = (!withPortal && !withFullScreenPortal);
 
     const hideFang = verticalSpacing < FANG_HEIGHT_PX;
 
+    const input = (
+      <SingleDatePickerInput
+        id={id}
+        placeholder={placeholder}
+        focused={focused}
+        isFocused={isInputFocused}
+        disabled={disabled}
+        required={required}
+        readOnly={readOnly}
+        openDirection={openDirection}
+        showCaret={!withPortal && !withFullScreenPortal && !hideFang}
+        onClearDate={this.clearDate}
+        showClearDate={showClearDate}
+        showDefaultInputIcon={showDefaultInputIcon}
+        inputIconPosition={inputIconPosition}
+        customCloseIcon={customCloseIcon}
+        customInputIcon={customInputIcon}
+        displayValue={displayValue}
+        onChange={this.onChange}
+        onFocus={this.onFocus}
+        onKeyDownShiftTab={this.onClearFocus}
+        onKeyDownTab={this.onClearFocus}
+        onKeyDownArrowDown={this.onDayPickerFocus}
+        onKeyDownQuestionMark={this.showKeyboardShortcutsPanel}
+        screenReaderMessage={screenReaderInputMessage}
+        phrases={phrases}
+        isRTL={isRTL}
+        noBorder={noBorder}
+        block={block}
+        small={small}
+        regular={regular}
+        verticalSpacing={verticalSpacing}
+      />
+    );
+
     return (
       <div
         ref={this.setContainerRef}
@@ -563,42 +598,14 @@ class SingleDatePicker extends React.Component {
           block && styles.SingleDatePicker__block,
         )}
       >
-        <OutsideClickHandler onOutsideClick={onOutsideClick}>
-          <SingleDatePickerInput
-            id={id}
-            placeholder={placeholder}
-            focused={focused}
-            isFocused={isInputFocused}
-            disabled={disabled}
-            required={required}
-            readOnly={readOnly}
-            openDirection={openDirection}
-            showCaret={!withPortal && !withFullScreenPortal && !hideFang}
-            onClearDate={this.clearDate}
-            showClearDate={showClearDate}
-            showDefaultInputIcon={showDefaultInputIcon}
-            inputIconPosition={inputIconPosition}
-            customCloseIcon={customCloseIcon}
-            customInputIcon={customInputIcon}
-            displayValue={displayValue}
-            onChange={this.onChange}
-            onFocus={this.onFocus}
-            onKeyDownShiftTab={this.onClearFocus}
-            onKeyDownTab={this.onClearFocus}
-            onKeyDownArrowDown={this.onDayPickerFocus}
-            onKeyDownQuestionMark={this.showKeyboardShortcutsPanel}
-            screenReaderMessage={screenReaderInputMessage}
-            phrases={phrases}
-            isRTL={isRTL}
-            noBorder={noBorder}
-            block={block}
-            small={small}
-            regular={regular}
-            verticalSpacing={verticalSpacing}
-          />
-
-          {this.maybeRenderDayPickerWithPortal()}
-        </OutsideClickHandler>
+        {enableOutsideClick && (
+          <OutsideClickHandler onOutsideClick={this.onClearFocus}>
+            {input}
+            {this.maybeRenderDayPickerWithPortal()}
+          </OutsideClickHandler>
+        )}
+        {!enableOutsideClick && input}
+        {!enableOutsideClick && this.maybeRenderDayPickerWithPortal()}
       </div>
     );
   }

From 660b26722b3431ceb95f294059e3a660c76b1080 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Fri, 13 Jul 2018 11:20:09 -0700
Subject: [PATCH 239/618] Version 17.1.0

---
 CHANGELOG.md | 6 ++++++
 package.json | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 861f049f14..a34726301b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Change Log
 
+## 17.1.0
+- [new] Add `ModifiersShape` and use throughout the codebase ([#1231](https://github.com/airbnb/react-dates/pull/1231))
+- [fix] Fix minimum nights `blocked` modifiers being applied incorrectly ([#1259](https://github.com/airbnb/react-dates/pull/1259))
+- [fix] Update conditions where `adjustDayPickerHeight` is called ([#1241](https://github.com/airbnb/react-dates/pull/1241))
+- [fix] Do not render `OutsideClickHandler` unnecessarily ([#1256](https://github.com/airbnb/react-dates/pull/1256))
+
 ## 17.0.0
 - [fix] Replace dumb quotes with smart quotes in default phrases ([#1168](https://github.com/airbnb/react-dates/pull/1168))
 - [fix] Fix outside day movement on hover ([#1178](https://github.com/airbnb/react-dates/pull/1178))
diff --git a/package.json b/package.json
index bf5041bd2e..821eb028c1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "17.0.0",
+  "version": "17.1.0",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From d5d4a658c3a3f5119b1ab132d5af288ae1be9485 Mon Sep 17 00:00:00 2001
From: notjiam <notjiam@gmail.com>
Date: Sat, 14 Jul 2018 19:46:10 +0700
Subject: [PATCH 240/618] Selected dates not painted when load more months
 issue

 - Add regression tests for modifier if vertically scrollable load more months
---
 src/components/DayPickerRangeController.jsx   |  8 ++-
 .../DayPickerSingleDateController.jsx         |  8 ++-
 .../DayPickerRangeController_spec.jsx         | 58 +++++++++++++++++-
 .../DayPickerSingleDateController_spec.jsx    | 59 +++++++++++++++++++
 4 files changed, 128 insertions(+), 5 deletions(-)

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 4cc1d8d762..9a853b3b2d 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -826,7 +826,9 @@ export default class DayPickerRangeController extends React.Component {
 
     let currentMonth = firstVisibleMonth;
     let numberOfMonths = numberOfVisibleMonths;
-    if (orientation !== VERTICAL_SCROLLABLE) {
+    if (orientation === VERTICAL_SCROLLABLE) {
+      numberOfMonths = Object.keys(visibleDays).length;
+    } else {
       currentMonth = currentMonth.clone().subtract(1, 'month');
       numberOfMonths += 2;
     }
@@ -889,7 +891,9 @@ export default class DayPickerRangeController extends React.Component {
     const { currentMonth: firstVisibleMonth, visibleDays } = this.state;
     let currentMonth = firstVisibleMonth;
     let numberOfMonths = numberOfVisibleMonths;
-    if (orientation !== VERTICAL_SCROLLABLE) {
+    if (orientation === VERTICAL_SCROLLABLE) {
+      numberOfMonths = Object.keys(visibleDays).length;
+    } else {
       currentMonth = currentMonth.clone().subtract(1, 'month');
       numberOfMonths += 2;
     }
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index de3462aff0..d131a2e3b3 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -508,7 +508,9 @@ export default class DayPickerSingleDateController extends React.Component {
 
     let currentMonth = firstVisibleMonth;
     let numberOfMonths = numberOfVisibleMonths;
-    if (orientation !== VERTICAL_SCROLLABLE) {
+    if (orientation === VERTICAL_SCROLLABLE) {
+      numberOfMonths = Object.keys(visibleDays).length;
+    } else {
       currentMonth = currentMonth.clone().subtract(1, 'month');
       numberOfMonths += 2;
     }
@@ -560,7 +562,9 @@ export default class DayPickerSingleDateController extends React.Component {
 
     let currentMonth = firstVisibleMonth;
     let numberOfMonths = numberOfVisibleMonths;
-    if (orientation !== VERTICAL_SCROLLABLE) {
+    if (orientation === VERTICAL_SCROLLABLE) {
+      numberOfMonths = Object.keys(visibleDays).length;
+    } else {
       currentMonth = currentMonth.clone().subtract(1, 'month');
       numberOfMonths += 2;
     }
diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index cb19f698c9..c7d32a582a 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -16,7 +16,7 @@ import isSameDay from '../../src/utils/isSameDay';
 import * as isDayVisible from '../../src/utils/isDayVisible';
 import getVisibleDays from '../../src/utils/getVisibleDays';
 
-import { START_DATE, END_DATE } from '../../src/constants';
+import { START_DATE, END_DATE, VERTICAL_SCROLLABLE } from '../../src/constants';
 
 // Set to noon to mimic how days in the picker are configured internally
 const today = moment().startOf('day').hours(12);
@@ -2557,6 +2557,34 @@ describe('DayPickerRangeController', () => {
       const modifiers = wrapper.instance().addModifier({}, today, modifierToAdd);
       expect(Array.from(modifiers[monthISO][todayISO])).to.contain(modifierToAdd);
     });
+
+    it('return new modifier if vertically scrollable load more months', () => {
+      const modifierToAdd = 'foo';
+      const numberOfMonths = 2;
+      const nextMonth = today.clone().add(numberOfMonths, 'month');
+      const nextMonthISO = toISOMonthString(nextMonth);
+      const nextMonthDayISO = toISODateString(nextMonth);
+      const updatedDays = {
+        [nextMonthISO]: { [nextMonthDayISO]: new Set(['bar', 'baz']) },
+      };
+      const wrapper = shallow((
+        <DayPickerRangeController
+          onDatesChange={sinon.stub()}
+          onFocusChange={sinon.stub()}
+          numberOfMonths={numberOfMonths}
+          orientation={VERTICAL_SCROLLABLE}
+        />
+      ));
+      wrapper.setState({
+        currentMonth: today,
+        visibleDays: {
+          ...getVisibleDays(today, numberOfMonths),
+          ...getVisibleDays(nextMonth, numberOfMonths),
+        },
+      });
+      const modifiers = wrapper.instance().addModifier(updatedDays, nextMonth, modifierToAdd);
+      expect(Array.from(modifiers[nextMonthISO][nextMonthDayISO])).to.contain(modifierToAdd);
+    });
   });
 
   describe('#addModifierToRange', () => {
@@ -2693,6 +2721,34 @@ describe('DayPickerRangeController', () => {
       const modifiers = wrapper.instance().deleteModifier({}, today, modifierToDelete);
       expect(Array.from(modifiers[monthISO][todayISO])).to.not.contain(modifierToDelete);
     });
+
+    it('return new modifier if vertically scrollable load more months', () => {
+      const modifierToDelete = 'foo';
+      const numberOfMonths = 2;
+      const nextMonth = today.clone().add(numberOfMonths, 'month');
+      const nextMonthISO = toISOMonthString(nextMonth);
+      const nextMonthDayISO = toISODateString(nextMonth);
+      const updatedDays = {
+        [nextMonthISO]: { [nextMonthDayISO]: new Set(['foo', 'bar', 'baz']) },
+      };
+      const wrapper = shallow((
+        <DayPickerRangeController
+          onDatesChange={sinon.stub()}
+          onFocusChange={sinon.stub()}
+          numberOfMonths={numberOfMonths}
+          orientation={VERTICAL_SCROLLABLE}
+        />
+      ));
+      wrapper.setState({
+        currentMonth: today,
+        visibleDays: {
+          ...getVisibleDays(today, numberOfMonths),
+          ...getVisibleDays(nextMonth, numberOfMonths),
+        },
+      });
+      const modifiers = wrapper.instance().deleteModifier(updatedDays, nextMonth, modifierToDelete);
+      expect(Array.from(modifiers[nextMonthISO][nextMonthDayISO])).to.not.contain(modifierToDelete);
+    });
   });
 
   describe('#deleteModifierFromRange', () => {
diff --git a/test/components/DayPickerSingleDateController_spec.jsx b/test/components/DayPickerSingleDateController_spec.jsx
index 7e0cc67c7a..e23e048aff 100644
--- a/test/components/DayPickerSingleDateController_spec.jsx
+++ b/test/components/DayPickerSingleDateController_spec.jsx
@@ -10,6 +10,9 @@ import DayPickerSingleDateController from '../../src/components/DayPickerSingleD
 import toISODateString from '../../src/utils/toISODateString';
 import toISOMonthString from '../../src/utils/toISOMonthString';
 import * as isDayVisible from '../../src/utils/isDayVisible';
+import getVisibleDays from '../../src/utils/getVisibleDays';
+
+import { VERTICAL_SCROLLABLE } from '../../src/constants';
 
 // Set to noon to mimic how days in the picker are configured internally
 const today = moment().startOf('day').hours(12);
@@ -1134,6 +1137,34 @@ describe('DayPickerSingleDateController', () => {
       const modifiers = wrapper.instance().addModifier({}, today, modifierToAdd);
       expect(Array.from(modifiers[monthISO][todayISO])).to.contain(modifierToAdd);
     });
+
+    it('return new modifier if vertically scrollable load more months', () => {
+      const modifierToAdd = 'foo';
+      const numberOfMonths = 2;
+      const nextMonth = today.clone().add(numberOfMonths, 'month');
+      const nextMonthISO = toISOMonthString(nextMonth);
+      const nextMonthDayISO = toISODateString(nextMonth);
+      const updatedDays = {
+        [nextMonthISO]: { [nextMonthDayISO]: new Set(['bar', 'baz']) },
+      };
+      const wrapper = shallow((
+        <DayPickerSingleDateController
+          onDatesChange={sinon.stub()}
+          onFocusChange={sinon.stub()}
+          numberOfMonths={numberOfMonths}
+          orientation={VERTICAL_SCROLLABLE}
+        />
+      ));
+      wrapper.setState({
+        currentMonth: today,
+        visibleDays: {
+          ...getVisibleDays(today, numberOfMonths),
+          ...getVisibleDays(nextMonth, numberOfMonths),
+        },
+      });
+      const modifiers = wrapper.instance().addModifier(updatedDays, nextMonth, modifierToAdd);
+      expect(Array.from(modifiers[nextMonthISO][nextMonthDayISO])).to.contain(modifierToAdd);
+    });
   });
 
   describe('#deleteModifier', () => {
@@ -1219,6 +1250,34 @@ describe('DayPickerSingleDateController', () => {
       const modifiers = wrapper.instance().deleteModifier({}, today, modifierToDelete);
       expect(Array.from(modifiers[monthISO][todayISO])).to.not.contain(modifierToDelete);
     });
+
+    it('return new modifier if vertically scrollable load more months', () => {
+      const modifierToDelete = 'foo';
+      const numberOfMonths = 2;
+      const nextMonth = today.clone().add(numberOfMonths, 'month');
+      const nextMonthISO = toISOMonthString(nextMonth);
+      const nextMonthDayISO = toISODateString(nextMonth);
+      const updatedDays = {
+        [nextMonthISO]: { [nextMonthDayISO]: new Set(['foo', 'bar', 'baz']) },
+      };
+      const wrapper = shallow((
+        <DayPickerSingleDateController
+          onDatesChange={sinon.stub()}
+          onFocusChange={sinon.stub()}
+          numberOfMonths={numberOfMonths}
+          orientation={VERTICAL_SCROLLABLE}
+        />
+      ));
+      wrapper.setState({
+        currentMonth: today,
+        visibleDays: {
+          ...getVisibleDays(today, numberOfMonths),
+          ...getVisibleDays(nextMonth, numberOfMonths),
+        },
+      });
+      const modifiers = wrapper.instance().deleteModifier(updatedDays, nextMonth, modifierToDelete);
+      expect(Array.from(modifiers[nextMonthISO][nextMonthDayISO])).to.not.contain(modifierToDelete);
+    });
   });
 
   describe('modifiers', () => {

From 93c5b989f4eba87f3dafb1a21f7a334ab264e061 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Sun, 15 Jul 2018 22:15:35 -0700
Subject: [PATCH 241/618] [Dev Deps] update `babel-loader`,
 `babel-preset-airbnb`, `eslint-plugin-jsx-a11y`, `node-sass`, `sinon`,
 `sinon-sandbox`

---
 .eslintrc                                      |  2 --
 package.json                                   | 12 ++++++------
 src/components/SingleDatePickerInput.jsx       |  4 ++--
 test/components/SingleDatePickerInput_spec.jsx |  2 +-
 4 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index e633be7bfe..3495c1d12e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -25,8 +25,6 @@
     "no-restricted-imports": 0, // TODO: enable with full RTL support
 
     "react/jsx-one-expression-per-line": 1, // TODO: enable once fixed upstream
-
-    "jsx-a11y/aria-proptypes": 1, // TODO: https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/454
   },
 
   "settings": {
diff --git a/package.json b/package.json
index 821eb028c1..4258b35528 100644
--- a/package.json
+++ b/package.json
@@ -60,13 +60,13 @@
     "aphrodite": "^2.2.2",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
-    "babel-loader": "^7.1.4",
+    "babel-loader": "^7.1.5",
     "babel-plugin-inline-react-svg": "^0.5.3",
     "babel-plugin-inline-svg": "^1.0.0",
     "babel-plugin-istanbul": "^4.1.6",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-replace-object-assign": "^1.0.0",
-    "babel-preset-airbnb": "^2.5.1",
+    "babel-preset-airbnb": "^2.5.2",
     "babel-register": "^6.26.0",
     "chai": "^4.1.2",
     "clean-css": "^4.1.11",
@@ -77,7 +77,7 @@
     "eslint": "^4.19.1",
     "eslint-config-airbnb": "^17.0.0",
     "eslint-plugin-import": "^2.13.0",
-    "eslint-plugin-jsx-a11y": "^6.1.0",
+    "eslint-plugin-jsx-a11y": "^6.1.1",
     "eslint-plugin-react": "^7.10.0",
     "eslint-plugin-react-with-styles": "^2.0.0",
     "git-directory-deploy": "^1.5.1",
@@ -94,7 +94,7 @@
     "mocha-wrap": "^2.1.2",
     "moment": "^2.22.2",
     "moment-jalaali": "^0.7.4",
-    "node-sass": "^4.9.0",
+    "node-sass": "^4.9.2",
     "nyc": "^12.0.2",
     "raw-loader": "^0.5.1",
     "react": "^0.14 || ^15.5.4 || ^16.1.1",
@@ -104,8 +104,8 @@
     "rimraf": "^2.6.2",
     "safe-publish-latest": "^1.1.1",
     "sass-loader": "^7.0.3",
-    "sinon": "^6.1.0",
-    "sinon-sandbox": "^1.0.2",
+    "sinon": "^6.1.3",
+    "sinon-sandbox": "^2.0.0",
     "style-loader": "^0.20.3",
     "webpack": "^2.6.1"
   },
diff --git a/src/components/SingleDatePickerInput.jsx b/src/components/SingleDatePickerInput.jsx
index 35daae6ae3..e5ad5f3273 100644
--- a/src/components/SingleDatePickerInput.jsx
+++ b/src/components/SingleDatePickerInput.jsx
@@ -195,8 +195,8 @@ function SingleDatePickerInput({
           type="button"
           aria-label={phrases.clearDate}
           disabled={disabled}
-          onMouseEnter={this.onClearDateMouseEnter}
-          onMouseLeave={this.onClearDateMouseLeave}
+          onMouseEnter={this && this.onClearDateMouseEnter}
+          onMouseLeave={this && this.onClearDateMouseLeave}
           onClick={onClearDate}
         >
           {closeIcon}
diff --git a/test/components/SingleDatePickerInput_spec.jsx b/test/components/SingleDatePickerInput_spec.jsx
index cd82e7ba6f..285b744e27 100644
--- a/test/components/SingleDatePickerInput_spec.jsx
+++ b/test/components/SingleDatePickerInput_spec.jsx
@@ -78,7 +78,7 @@ describe('SingleDatePickerInput', () => {
         )).dive();
         const clearDateWrapper = wrapper.find('button');
         clearDateWrapper.simulate('click');
-        expect(onClearDateSpy.called).to.equal(true);
+        expect(onClearDateSpy).to.have.property('called', true);
       });
     });
   });

From c3a62fa356d41401b4bfb9c692c1a37e0090b5ee Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Tue, 17 Jul 2018 16:12:36 -0700
Subject: [PATCH 242/618] Set DayPickerNavigation__horizontal height to 0

- For apps with a top-level line-height defined, not having this value set to zero will cause some weird vertical alignment
---
 src/components/DayPickerNavigation.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index 760e178923..f70ee770ad 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -191,7 +191,10 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     zIndex: zIndex + 2,
   },
 
-  DayPickerNavigation__horizontal: {},
+  DayPickerNavigation__horizontal: {
+    height: 0,
+  },
+
   DayPickerNavigation__vertical: {},
   DayPickerNavigation__verticalScrollable: {},
 

From 7fb63a3850343874147bd045dbaf0865da7beeea Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Tue, 17 Jul 2018 17:02:14 -0700
Subject: [PATCH 243/618] Version 17.1.1

---
 CHANGELOG.md | 3 +++
 package.json | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a34726301b..f344d55e4d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # Change Log
 
+## 17.1.1
+- [fix] Set `DayPickerNavigation__horizontal` height to zero ([#1265](https://github.com/airbnb/react-dates/pull/1265))
+
 ## 17.1.0
 - [new] Add `ModifiersShape` and use throughout the codebase ([#1231](https://github.com/airbnb/react-dates/pull/1231))
 - [fix] Fix minimum nights `blocked` modifiers being applied incorrectly ([#1259](https://github.com/airbnb/react-dates/pull/1259))
diff --git a/package.json b/package.json
index 4258b35528..268b1e29c9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "17.1.0",
+  "version": "17.1.1",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 8c5c0006d45043a7947d153788ecdfd18ae0ed9a Mon Sep 17 00:00:00 2001
From: Nick Bakken <nick.bakken@bluestembrands.com>
Date: Wed, 25 Jul 2018 16:07:35 -0500
Subject: [PATCH 244/618] Giving internal state 'dateString' first priority for
 input value.

---
 src/components/DateInput.jsx       |  2 +-
 test/components/DateInput_spec.jsx | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
index 512e9c7a88..e0f54a95e9 100644
--- a/src/components/DateInput.jsx
+++ b/src/components/DateInput.jsx
@@ -187,7 +187,7 @@ class DateInput extends React.Component {
       theme: { reactDates },
     } = this.props;
 
-    const value = displayValue || dateString || '';
+    const value = dateString || displayValue || '';
     const screenReaderMessageId = `DateInput__screen-reader-message-${id}`;
 
     const withFang = showCaret && focused;
diff --git a/test/components/DateInput_spec.jsx b/test/components/DateInput_spec.jsx
index 2b36326933..58452cc4a6 100644
--- a/test/components/DateInput_spec.jsx
+++ b/test/components/DateInput_spec.jsx
@@ -31,6 +31,16 @@ describe('DateInput', () => {
         expect(wrapper.find('input').props().value).to.equal(DATE_STRING);
       });
 
+      it('props.displayValue overrides dateString when not null', () => {
+        const DATE_STRING = 'foobar';
+        const DISPLAY_VALUE = 'display-value';
+        const wrapper = shallow(<DateInput id="date" />).dive();
+        wrapper.setState({ dateString: DATE_STRING });
+        expect(wrapper.find('input').props().value).to.equal(DATE_STRING);
+        wrapper.setProps({ displayValue: DISPLAY_VALUE });
+        expect(wrapper.find('input').props().value).to.equal(DISPLAY_VALUE);
+      });
+
       describe('props.readOnly is truthy', () => {
         it('sets readOnly', () => {
           const wrapper = shallow(<DateInput id="date" readOnly />).dive();

From 5c1322ce1477f8783b45aaa69345b3be74efda83 Mon Sep 17 00:00:00 2001
From: andrew_hunt <andrew.hunt@airbnb.com>
Date: Wed, 1 Aug 2018 15:09:51 -0700
Subject: [PATCH 245/618] tests for vertical scroll modifiers

---
 .../DayPickerRangeController_spec.jsx         | 27 +++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index c7d32a582a..c62180465f 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -2522,7 +2522,7 @@ describe('DayPickerRangeController', () => {
       expect(Object.keys(modifiers[toISOMonthString(today)])).to.contain(toISODateString(today));
     });
 
-    it('return value no longer has modifier arg for day if was in first arg', () => {
+    it('return value now has modifier arg for day if was in first arg', () => {
       const modifierToAdd = 'foo';
       const monthISO = toISOMonthString(today);
       const todayISO = toISODateString(today);
@@ -2539,7 +2539,7 @@ describe('DayPickerRangeController', () => {
       expect(Array.from(modifiers[monthISO][todayISO])).to.contain(modifierToAdd);
     });
 
-    it('return value no longer has modifier arg for day if was in state', () => {
+    it('return value now has modifier arg for day if was in state', () => {
       const modifierToAdd = 'foo';
       const monthISO = toISOMonthString(today);
       const todayISO = toISODateString(today);
@@ -2587,6 +2587,29 @@ describe('DayPickerRangeController', () => {
     });
   });
 
+  it('return value now has modifier arg for day after multiplying number of months', () => {
+    const modifierToAdd = 'foo';
+    const futureDateAfterMultiply = today.clone().add(4, 'months');
+    const monthISO = toISOMonthString(futureDateAfterMultiply);
+    const todayISO = toISODateString(futureDateAfterMultiply);
+    const updatedDays = {
+      [monthISO]: { [todayISO]: new Set(['bar', 'baz']) },
+    };
+    const wrapper = shallow((
+      <DayPickerRangeController
+        onDatesChange={sinon.stub()}
+        onFocusChange={sinon.stub()}
+        orientation={VERTICAL_SCROLLABLE}
+        numberOfMonths={3}
+      />
+    )).instance();
+    let modifiers = wrapper.addModifier(updatedDays, futureDateAfterMultiply, modifierToAdd);
+    expect(Array.from(modifiers[monthISO][todayISO])).to.not.contain(modifierToAdd);
+    wrapper.onMultiplyScrollableMonths();
+    modifiers = wrapper.addModifier(updatedDays, futureDateAfterMultiply, modifierToAdd);
+    expect(Array.from(modifiers[monthISO][todayISO])).to.contain(modifierToAdd);
+  });
+
   describe('#addModifierToRange', () => {
     let addModifierSpy;
     beforeEach(() => {

From bc4cae4786ac6f510491dcf1f378596f2bf8f6cd Mon Sep 17 00:00:00 2001
From: andrew_hunt <andrew.hunt@airbnb.com>
Date: Fri, 3 Aug 2018 16:57:21 -0700
Subject: [PATCH 246/618] [verticalscrollable] add spacing and scrollbar theme

---
 src/components/CalendarMonth.jsx         |  2 +-
 src/components/CalendarMonthGrid.jsx     | 24 ++++++++++++++--
 src/components/DayPicker.jsx             | 35 ++++++++++++++++++------
 src/theme/DefaultTheme.js                |  4 +++
 src/utils/getCalendarMonthWidth.js       |  6 ++--
 test/utils/getCalendarMonthWidth_spec.js |  2 +-
 6 files changed, 56 insertions(+), 17 deletions(-)

diff --git a/src/components/CalendarMonth.jsx b/src/components/CalendarMonth.jsx
index b41d2d664c..12a5f5214c 100644
--- a/src/components/CalendarMonth.jsx
+++ b/src/components/CalendarMonth.jsx
@@ -249,7 +249,7 @@ export default withStyles(({ reactDates: { color, font, spacing } }) => ({
   CalendarMonth: {
     background: color.background,
     textAlign: 'center',
-    padding: '0 13px',
+    padding: `0 ${spacing.calendarMonthHorizontalPadding}px`,
     verticalAlign: 'top',
     userSelect: 'none',
   },
diff --git a/src/components/CalendarMonthGrid.jsx b/src/components/CalendarMonthGrid.jsx
index c573ed8d12..afa5bf7d07 100644
--- a/src/components/CalendarMonthGrid.jsx
+++ b/src/components/CalendarMonthGrid.jsx
@@ -260,6 +260,7 @@ class CalendarMonthGrid extends React.Component {
       isFocused,
       isRTL,
       styles,
+      theme: { reactDates: theme },
       phrases,
       dayAriaLabelFormat,
       transitionDuration,
@@ -272,7 +273,10 @@ class CalendarMonthGrid extends React.Component {
     const isVerticalScrollable = orientation === VERTICAL_SCROLLABLE;
     const isHorizontal = orientation === HORIZONTAL_ORIENTATION;
 
-    const calendarMonthWidth = getCalendarMonthWidth(daySize);
+    const calendarMonthWidth = getCalendarMonthWidth(
+      daySize,
+      theme.spacing.calendarMonthHorizontalPadding,
+    );
 
     const width = isVertical || isVerticalScrollable
       ? calendarMonthWidth
@@ -363,7 +367,14 @@ class CalendarMonthGrid extends React.Component {
 CalendarMonthGrid.propTypes = propTypes;
 CalendarMonthGrid.defaultProps = defaultProps;
 
-export default withStyles(({ reactDates: { color, zIndex } }) => ({
+export default withStyles(({
+  reactDates: {
+    color,
+    noScrollBarOnVerticalScrollable,
+    spacing,
+    zIndex,
+  },
+}) => ({
   CalendarMonthGrid: {
     background: color.background,
     textAlign: 'left',
@@ -376,7 +387,7 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
 
   CalendarMonthGrid__horizontal: {
     position: 'absolute',
-    left: 9,
+    left: spacing.dayPickerHorizontalPadding,
   },
 
   CalendarMonthGrid__vertical: {
@@ -386,6 +397,13 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
   CalendarMonthGrid__vertical_scrollable: {
     margin: '0 auto',
     overflowY: 'scroll',
+    ...noScrollBarOnVerticalScrollable && {
+      '-webkitOverflowScrolling': 'touch',
+      '::-webkit-scrollbar': {
+        '-webkit-appearance': 'none',
+        display: 'none',
+      },
+    },
   },
 
   CalendarMonthGrid_month__horizontal: {
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 2a950c78e9..36934ba528 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -44,7 +44,6 @@ import {
 } from '../constants';
 
 const MONTH_PADDING = 23;
-const DAY_PICKER_PADDING = 9;
 const PREV_TRANSITION = 'prev';
 const NEXT_TRANSITION = 'next';
 const MONTH_SELECTION_TRANSITION = 'month_selection';
@@ -173,8 +172,10 @@ class DayPicker extends React.Component {
       focusedDate = props.getFirstFocusableDay(currentMonth);
     }
 
+    const { reactDates: { spacing: { calendarMonthHorizontalPadding } } } = props.theme;
+
     const translationValue = props.isRTL && this.isHorizontal()
-      ? -getCalendarMonthWidth(props.daySize)
+      ? -getCalendarMonthWidth(props.daySize, calendarMonthHorizontalPadding)
       : 0;
 
     this.hasSetInitialVisibleMonth = !props.hidden;
@@ -183,7 +184,7 @@ class DayPicker extends React.Component {
       monthTransition: null,
       translationValue,
       scrollableMonthMultiple: 1,
-      calendarMonthWidth: getCalendarMonthWidth(props.daySize),
+      calendarMonthWidth: getCalendarMonthWidth(props.daySize, calendarMonthHorizontalPadding),
       focusedDate: (!props.hidden || props.isFocused) ? focusedDate : null,
       nextFocusedDate: null,
       showKeyboardShortcuts: props.showKeyboardShortcuts,
@@ -240,6 +241,7 @@ class DayPicker extends React.Component {
       showKeyboardShortcuts,
       onBlur,
       renderMonthText,
+      theme: { reactDates: { spacing: calendarMonthHorizontalPadding } },
     } = nextProps;
     const { currentMonth } = this.state;
 
@@ -260,7 +262,8 @@ class DayPicker extends React.Component {
 
     if (nextProps.daySize !== daySize) {
       this.setState({
-        calendarMonthWidth: getCalendarMonthWidth(nextProps.daySize),
+        calendarMonthWidth:
+          getCalendarMonthWidth(nextProps.daySize, calendarMonthHorizontalPadding),
       });
     }
 
@@ -899,6 +902,7 @@ class DayPicker extends React.Component {
       isFocused,
       isRTL,
       styles,
+      theme,
       phrases,
       verticalHeight,
       dayAriaLabelFormat,
@@ -907,6 +911,8 @@ class DayPicker extends React.Component {
       verticalBorderSpacing,
     } = this.props;
 
+    const { reactDates: { spacing: { dayPickerHorizontalPadding } } } = theme;
+
     const isHorizontal = this.isHorizontal();
 
     const numOfWeekHeaders = this.isVertical() ? 1 : numberOfMonths;
@@ -956,7 +962,8 @@ class DayPicker extends React.Component {
       : 0;
 
     const firstVisibleMonthIndex = this.getFirstVisibleIndex();
-    const wrapperHorizontalWidth = (calendarMonthWidth * numberOfMonths) + (2 * DAY_PICKER_PADDING);
+    const wrapperHorizontalWidth = (calendarMonthWidth * numberOfMonths)
+      + (2 * dayPickerHorizontalPadding);
     // Adding `1px` because of whitespace between 2 inline-block
     const fullHorizontalWidth = wrapperHorizontalWidth + calendarInfoPanelWidth + 1;
 
@@ -1093,7 +1100,12 @@ DayPicker.propTypes = propTypes;
 DayPicker.defaultProps = defaultProps;
 
 export { DayPicker as PureDayPicker };
-export default withStyles(({ reactDates: { color, font, zIndex } }) => ({
+
+export default withStyles(({
+  reactDates: {
+    color, font, noScrollBarOnVerticalScrollable, spacing, zIndex,
+  },
+}) => ({
   DayPicker: {
     background: color.background,
     position: 'relative',
@@ -1147,7 +1159,7 @@ export default withStyles(({ reactDates: { color, font, zIndex } }) => ({
   },
 
   DayPicker_weekHeaders__horizontal: {
-    marginLeft: 9,
+    marginLeft: spacing.dayPickerHorizontalPadding,
   },
 
   DayPicker_weekHeader: {
@@ -1155,7 +1167,7 @@ export default withStyles(({ reactDates: { color, font, zIndex } }) => ({
     position: 'absolute',
     top: 62,
     zIndex: zIndex + 2,
-    padding: '0 13px',
+    padding: `0 ${spacing.calendarMonthHorizontalPadding}px`,
     textAlign: 'left',
   },
 
@@ -1210,5 +1222,12 @@ export default withStyles(({ reactDates: { color, font, zIndex } }) => ({
     right: 0,
     left: 0,
     overflowY: 'scroll',
+    ...noScrollBarOnVerticalScrollable && {
+      '-webkitOverflowScrolling': 'touch',
+      '::-webkit-scrollbar': {
+        '-webkit-appearance': 'none',
+        display: 'none',
+      },
+    },
   },
 }))(DayPicker);
diff --git a/src/theme/DefaultTheme.js b/src/theme/DefaultTheme.js
index 4ba4e8d928..8ff23daa80 100644
--- a/src/theme/DefaultTheme.js
+++ b/src/theme/DefaultTheme.js
@@ -153,6 +153,8 @@ export default {
     },
 
     spacing: {
+      calendarMonthHorizontalPadding: 13,
+      dayPickerHorizontalPadding: 9,
       captionPaddingTop: 22,
       captionPaddingBottom: 37,
       inputPadding: 0,
@@ -176,6 +178,8 @@ export default {
       arrowWidth: 24,
     },
 
+    noScrollBarOnVerticalScrollable: false,
+
     font: {
       size: 14,
       captionSize: 18,
diff --git a/src/utils/getCalendarMonthWidth.js b/src/utils/getCalendarMonthWidth.js
index 735ee39a66..c576a189ac 100644
--- a/src/utils/getCalendarMonthWidth.js
+++ b/src/utils/getCalendarMonthWidth.js
@@ -1,5 +1,3 @@
-const CALENDAR_MONTH_PADDING = 9;
-
-export default function getCalendarMonthWidth(daySize) {
-  return (7 * (daySize + 1)) + (2 * (CALENDAR_MONTH_PADDING + 1));
+export default function getCalendarMonthWidth(daySize, calendarMonthPadding) {
+  return (7 * daySize) + (2 * calendarMonthPadding) + 1;
 }
diff --git a/test/utils/getCalendarMonthWidth_spec.js b/test/utils/getCalendarMonthWidth_spec.js
index d7ef344518..0b20cb9e18 100644
--- a/test/utils/getCalendarMonthWidth_spec.js
+++ b/test/utils/getCalendarMonthWidth_spec.js
@@ -4,6 +4,6 @@ import getCalendarMonthWidth from '../../src/utils/getCalendarMonthWidth';
 
 describe('#getCalendarMonthWidth', () => {
   it('correctly calculates width for default day size of 39', () => {
-    expect(getCalendarMonthWidth(39)).to.equal(300);
+    expect(getCalendarMonthWidth(39, 13)).to.equal(300);
   });
 });

From 0ec2d729167a3352bb874ae13e4f59fefa8b4854 Mon Sep 17 00:00:00 2001
From: andrew_hunt <andrew.hunt@airbnb.com>
Date: Tue, 7 Aug 2018 21:27:26 -0700
Subject: [PATCH 247/618] implement maja suggestions

---
 src/components/CalendarMonth.jsx              | 31 ++++++++++---------
 src/components/CalendarMonthGrid.jsx          | 11 ++++---
 src/components/DayPicker.jsx                  | 31 +++++++++++++------
 src/components/DayPickerRangeController.jsx   |  4 +++
 .../DayPickerSingleDateController.jsx         |  4 +++
 src/components/SingleDatePicker.jsx           |  3 ++
 src/shapes/SingleDatePickerShape.js           |  1 +
 src/theme/DefaultTheme.js                     |  1 -
 stories/DayPickerRangeController.js           | 13 ++++++++
 9 files changed, 69 insertions(+), 30 deletions(-)

diff --git a/src/components/CalendarMonth.jsx b/src/components/CalendarMonth.jsx
index 12a5f5214c..e9487fe7e9 100644
--- a/src/components/CalendarMonth.jsx
+++ b/src/components/CalendarMonth.jsx
@@ -25,7 +25,6 @@ import DayOfWeekShape from '../shapes/DayOfWeekShape';
 
 import {
   HORIZONTAL_ORIENTATION,
-  VERTICAL_ORIENTATION,
   VERTICAL_SCROLLABLE,
   DAY_SIZE,
 } from '../constants';
@@ -33,6 +32,7 @@ import {
 const propTypes = forbidExtraProps({
   ...withStylesPropTypes,
   month: momentPropTypes.momentObj,
+  horizontalMonthPadding: nonNegativeInteger,
   isVisible: PropTypes.bool,
   enableOutsideDays: PropTypes.bool,
   modifiers: PropTypes.objectOf(ModifiersShape),
@@ -62,6 +62,7 @@ const propTypes = forbidExtraProps({
 
 const defaultProps = {
   month: moment(),
+  horizontalMonthPadding: 13,
   isVisible: true,
   enableOutsideDays: false,
   modifiers: {},
@@ -155,26 +156,27 @@ class CalendarMonth extends React.Component {
 
   render() {
     const {
-      month,
-      monthFormat,
-      orientation,
+      dayAriaLabelFormat,
+      daySize,
+      focusedDate,
+      horizontalMonthPadding,
+      isFocused,
       isVisible,
       modifiers,
+      month,
+      monthFormat,
       onDayClick,
       onDayMouseEnter,
       onDayMouseLeave,
       onMonthSelect,
       onYearSelect,
-      renderMonthText,
+      orientation,
+      phrases,
       renderCalendarDay,
       renderDayContents,
       renderMonthElement,
-      daySize,
-      focusedDate,
-      isFocused,
+      renderMonthText,
       styles,
-      phrases,
-      dayAriaLabelFormat,
       verticalBorderSpacing,
     } = this.props;
 
@@ -187,9 +189,7 @@ class CalendarMonth extends React.Component {
       <div
         {...css(
           styles.CalendarMonth,
-          orientation === HORIZONTAL_ORIENTATION && styles.CalendarMonth__horizontal,
-          orientation === VERTICAL_ORIENTATION && styles.CalendarMonth__vertical,
-          verticalScrollable && styles.CalendarMonth__verticalScrollable,
+          { padding: `0 ${horizontalMonthPadding}px` },
         )}
         data-visible={isVisible}
       >
@@ -203,7 +203,9 @@ class CalendarMonth extends React.Component {
           {renderMonthElement ? (
             renderMonthElement({ month, onMonthSelect, onYearSelect })
           ) : (
-            <strong>{monthTitle}</strong>
+            <strong>
+              {monthTitle}
+            </strong>
           )}
         </div>
 
@@ -249,7 +251,6 @@ export default withStyles(({ reactDates: { color, font, spacing } }) => ({
   CalendarMonth: {
     background: color.background,
     textAlign: 'center',
-    padding: `0 ${spacing.calendarMonthHorizontalPadding}px`,
     verticalAlign: 'top',
     userSelect: 'none',
   },
diff --git a/src/components/CalendarMonthGrid.jsx b/src/components/CalendarMonthGrid.jsx
index afa5bf7d07..40cad0ee45 100644
--- a/src/components/CalendarMonthGrid.jsx
+++ b/src/components/CalendarMonthGrid.jsx
@@ -34,6 +34,7 @@ const propTypes = forbidExtraProps({
   ...withStylesPropTypes,
   enableOutsideDays: PropTypes.bool,
   firstVisibleMonthIndex: PropTypes.number,
+  horizontalMonthPadding: nonNegativeInteger,
   initialMonth: momentPropTypes.momentObj,
   isAnimating: PropTypes.bool,
   numberOfMonths: PropTypes.number,
@@ -68,6 +69,7 @@ const propTypes = forbidExtraProps({
 const defaultProps = {
   enableOutsideDays: false,
   firstVisibleMonthIndex: 0,
+  horizontalMonthPadding: 13,
   initialMonth: moment(),
   isAnimating: false,
   numberOfMonths: 1,
@@ -240,6 +242,7 @@ class CalendarMonthGrid extends React.Component {
     const {
       enableOutsideDays,
       firstVisibleMonthIndex,
+      horizontalMonthPadding,
       isAnimating,
       modifiers,
       numberOfMonths,
@@ -260,7 +263,6 @@ class CalendarMonthGrid extends React.Component {
       isFocused,
       isRTL,
       styles,
-      theme: { reactDates: theme },
       phrases,
       dayAriaLabelFormat,
       transitionDuration,
@@ -275,7 +277,7 @@ class CalendarMonthGrid extends React.Component {
 
     const calendarMonthWidth = getCalendarMonthWidth(
       daySize,
-      theme.spacing.calendarMonthHorizontalPadding,
+      horizontalMonthPadding,
     );
 
     const width = isVertical || isVerticalScrollable
@@ -355,6 +357,7 @@ class CalendarMonthGrid extends React.Component {
                 setMonthTitleHeight={setMonthTitleHeight}
                 dayAriaLabelFormat={dayAriaLabelFormat}
                 verticalBorderSpacing={verticalBorderSpacing}
+                horizontalMonthPadding={horizontalMonthPadding}
               />
             </div>
           );
@@ -397,13 +400,13 @@ export default withStyles(({
   CalendarMonthGrid__vertical_scrollable: {
     margin: '0 auto',
     overflowY: 'scroll',
-    ...noScrollBarOnVerticalScrollable && {
+    ...(noScrollBarOnVerticalScrollable && {
       '-webkitOverflowScrolling': 'touch',
       '::-webkit-scrollbar': {
         '-webkit-appearance': 'none',
         display: 'none',
       },
-    },
+    }),
   },
 
   CalendarMonthGrid_month__horizontal: {
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 36934ba528..7612db7510 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -70,6 +70,7 @@ const propTypes = forbidExtraProps({
   noBorder: PropTypes.bool,
   transitionDuration: nonNegativeInteger,
   verticalBorderSpacing: nonNegativeInteger,
+  horizontalMonthPadding: nonNegativeInteger,
 
   // navigation props
   navPrev: PropTypes.node,
@@ -125,6 +126,7 @@ export const defaultProps = {
   noBorder: false,
   transitionDuration: undefined,
   verticalBorderSpacing: undefined,
+  horizontalMonthPadding: 13,
 
   // navigation props
   navPrev: null,
@@ -172,10 +174,10 @@ class DayPicker extends React.Component {
       focusedDate = props.getFirstFocusableDay(currentMonth);
     }
 
-    const { reactDates: { spacing: { calendarMonthHorizontalPadding } } } = props.theme;
+    const { horizontalMonthPadding } = props;
 
     const translationValue = props.isRTL && this.isHorizontal()
-      ? -getCalendarMonthWidth(props.daySize, calendarMonthHorizontalPadding)
+      ? -getCalendarMonthWidth(props.daySize, horizontalMonthPadding)
       : 0;
 
     this.hasSetInitialVisibleMonth = !props.hidden;
@@ -184,7 +186,7 @@ class DayPicker extends React.Component {
       monthTransition: null,
       translationValue,
       scrollableMonthMultiple: 1,
-      calendarMonthWidth: getCalendarMonthWidth(props.daySize, calendarMonthHorizontalPadding),
+      calendarMonthWidth: getCalendarMonthWidth(props.daySize, horizontalMonthPadding),
       focusedDate: (!props.hidden || props.isFocused) ? focusedDate : null,
       nextFocusedDate: null,
       showKeyboardShortcuts: props.showKeyboardShortcuts,
@@ -241,7 +243,7 @@ class DayPicker extends React.Component {
       showKeyboardShortcuts,
       onBlur,
       renderMonthText,
-      theme: { reactDates: { spacing: calendarMonthHorizontalPadding } },
+      horizontalMonthPadding,
     } = nextProps;
     const { currentMonth } = this.state;
 
@@ -262,8 +264,10 @@ class DayPicker extends React.Component {
 
     if (nextProps.daySize !== daySize) {
       this.setState({
-        calendarMonthWidth:
-          getCalendarMonthWidth(nextProps.daySize, calendarMonthHorizontalPadding),
+        calendarMonthWidth: getCalendarMonthWidth(
+          nextProps.daySize,
+          horizontalMonthPadding,
+        ),
       });
     }
 
@@ -816,6 +820,7 @@ class DayPicker extends React.Component {
   renderWeekHeader(index) {
     const {
       daySize,
+      horizontalMonthPadding,
       orientation,
       weekDayFormat,
       styles,
@@ -854,6 +859,7 @@ class DayPicker extends React.Component {
           this.isVertical() && styles.DayPicker_weekHeader__vertical,
           verticalScrollable && styles.DayPicker_weekHeader__verticalScrollable,
           weekHeaderStyle,
+          { padding: `0 ${horizontalMonthPadding}px` },
         )}
         key={`week-${index}`}
       >
@@ -909,6 +915,7 @@ class DayPicker extends React.Component {
       noBorder,
       transitionDuration,
       verticalBorderSpacing,
+      horizontalMonthPadding,
     } = this.props;
 
     const { reactDates: { spacing: { dayPickerHorizontalPadding } } } = theme;
@@ -1071,6 +1078,7 @@ class DayPicker extends React.Component {
                   dayAriaLabelFormat={dayAriaLabelFormat}
                   transitionDuration={transitionDuration}
                   verticalBorderSpacing={verticalBorderSpacing}
+                  horizontalMonthPadding={horizontalMonthPadding}
                 />
                 {verticalScrollable && this.renderNavigation()}
               </div>
@@ -1103,7 +1111,11 @@ export { DayPicker as PureDayPicker };
 
 export default withStyles(({
   reactDates: {
-    color, font, noScrollBarOnVerticalScrollable, spacing, zIndex,
+    color,
+    font,
+    noScrollBarOnVerticalScrollable,
+    spacing,
+    zIndex,
   },
 }) => ({
   DayPicker: {
@@ -1167,7 +1179,6 @@ export default withStyles(({
     position: 'absolute',
     top: 62,
     zIndex: zIndex + 2,
-    padding: `0 ${spacing.calendarMonthHorizontalPadding}px`,
     textAlign: 'left',
   },
 
@@ -1222,12 +1233,12 @@ export default withStyles(({
     right: 0,
     left: 0,
     overflowY: 'scroll',
-    ...noScrollBarOnVerticalScrollable && {
+    ...(noScrollBarOnVerticalScrollable && {
       '-webkitOverflowScrolling': 'touch',
       '::-webkit-scrollbar': {
         '-webkit-appearance': 'none',
         display: 'none',
       },
-    },
+    }),
   },
 }))(DayPicker);
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 9a853b3b2d..d982a7cfa5 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -70,6 +70,7 @@ const propTypes = forbidExtraProps({
   daySize: nonNegativeInteger,
   noBorder: PropTypes.bool,
   verticalBorderSpacing: nonNegativeInteger,
+  horizontalMonthPadding: nonNegativeInteger,
 
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
@@ -146,6 +147,7 @@ const defaultProps = {
   noBorder: false,
   transitionDuration: undefined,
   verticalBorderSpacing: undefined,
+  horizontalMonthPadding: 13,
 
   // accessibility
   onBlur() {},
@@ -1070,6 +1072,7 @@ export default class DayPickerRangeController extends React.Component {
       noBorder,
       transitionDuration,
       verticalBorderSpacing,
+      horizontalMonthPadding,
     } = this.props;
 
     const { currentMonth, phrases, visibleDays } = this.state;
@@ -1117,6 +1120,7 @@ export default class DayPickerRangeController extends React.Component {
         verticalBorderSpacing={verticalBorderSpacing}
         noBorder={noBorder}
         transitionDuration={transitionDuration}
+        horizontalMonthPadding={horizontalMonthPadding}
       />
     );
   }
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index d131a2e3b3..57d9e8d425 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -59,6 +59,7 @@ const propTypes = forbidExtraProps({
   noBorder: PropTypes.bool,
   verticalBorderSpacing: nonNegativeInteger,
   transitionDuration: nonNegativeInteger,
+  horizontalMonthPadding: nonNegativeInteger,
 
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
@@ -112,6 +113,7 @@ const defaultProps = {
   noBorder: false,
   verticalBorderSpacing: undefined,
   transitionDuration: undefined,
+  horizontalMonthPadding: 13,
 
   navPrev: null,
   navNext: null,
@@ -670,6 +672,7 @@ export default class DayPickerSingleDateController extends React.Component {
       noBorder,
       transitionDuration,
       verticalBorderSpacing,
+      horizontalMonthPadding,
     } = this.props;
 
     const { currentMonth, visibleDays } = this.state;
@@ -715,6 +718,7 @@ export default class DayPickerSingleDateController extends React.Component {
         noBorder={noBorder}
         transitionDuration={transitionDuration}
         verticalBorderSpacing={verticalBorderSpacing}
+        horizontalMonthPadding={horizontalMonthPadding}
       />
     );
   }
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index 86d204b7bc..6c6206ca49 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -86,6 +86,7 @@ const defaultProps = {
   isRTL: false,
   verticalHeight: null,
   transitionDuration: undefined,
+  horizontalMonthPadding: 13,
 
   // navigation related props
   navPrev: null,
@@ -427,6 +428,7 @@ class SingleDatePicker extends React.Component {
       verticalHeight,
       transitionDuration,
       verticalSpacing,
+      horizontalMonthPadding,
       small,
       theme: { reactDates },
     } = this.props;
@@ -501,6 +503,7 @@ class SingleDatePicker extends React.Component {
           weekDayFormat={weekDayFormat}
           verticalHeight={verticalHeight}
           transitionDuration={transitionDuration}
+          horizontalMonthPadding={horizontalMonthPadding}
         />
 
         {withFullScreenPortal && (
diff --git a/src/shapes/SingleDatePickerShape.js b/src/shapes/SingleDatePickerShape.js
index eb28bbb308..f4e672509d 100644
--- a/src/shapes/SingleDatePickerShape.js
+++ b/src/shapes/SingleDatePickerShape.js
@@ -62,6 +62,7 @@ export default {
   isRTL: PropTypes.bool,
   verticalHeight: nonNegativeInteger,
   transitionDuration: nonNegativeInteger,
+  horizontalMonthPadding: nonNegativeInteger,
 
   // navigation related props
   navPrev: PropTypes.node,
diff --git a/src/theme/DefaultTheme.js b/src/theme/DefaultTheme.js
index 8ff23daa80..d5071efd6e 100644
--- a/src/theme/DefaultTheme.js
+++ b/src/theme/DefaultTheme.js
@@ -153,7 +153,6 @@ export default {
     },
 
     spacing: {
-      calendarMonthHorizontalPadding: 13,
       dayPickerHorizontalPadding: 9,
       captionPaddingTop: 22,
       captionPaddingBottom: 37,
diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
index dea15c12ee..3c3e5dbb24 100644
--- a/stories/DayPickerRangeController.js
+++ b/stories/DayPickerRangeController.js
@@ -360,6 +360,19 @@ storiesOf('DayPickerRangeController', module)
       verticalBorderSpacing={16}
     />
   ))
+  .addWithInfo('with custom horizontal month spacing applied', () => (
+    <div style={{ height: 500 }}>
+      <DayPickerRangeControllerWrapper
+        onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
+        onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
+        onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
+        orientation={VERTICAL_SCROLLABLE}
+        numberOfMonths={6}
+        verticalHeight={800}
+        horizontalMonthPadding={0}
+      />
+    </div>
+  ))
   .addWithInfo('with no nav buttons', () => (
     <DayPickerRangeControllerWrapper
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}

From d35a736732b9884d5e3e4a2e8bd496a031d7b44d Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Mon, 13 Aug 2018 16:21:41 -0700
Subject: [PATCH 248/618] Change month nav buttons to be divs with
 role="button"

Custom month nav buttons are not currently clickable in Firefox. Changing them to divs addresses the problem. This is due to the difference in treatment of button elements by Firefox (absolutely positioned children of <button> elements that are rendered outside of the <button> visually are not interactive).

Separately, this work highlighted the fact that custom month navigation does not currently have a focus ring. That is something not addressed by this commit but which will be investigated in the near future.
---
 src/components/DayPickerNavigation.jsx       | 24 +++++++++++++++-----
 test/components/DayPickerNavigation_spec.jsx | 10 ++++----
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index f70ee770ad..421959cb91 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -115,7 +115,9 @@ function DayPickerNavigation({
       )}
     >
       {!isVerticalScrollable && (
-        <button
+        <div
+          role="button"
+          tabIndex="0"
           {...css(
             styles.DayPickerNavigation_button,
             isDefaultNavPrev && styles.DayPickerNavigation_button__default,
@@ -135,18 +137,23 @@ function DayPickerNavigation({
               ],
             ]),
           )}
-          type="button"
           aria-label={phrases.jumpToPrevMonth}
           onClick={onPrevMonthClick}
+          onKeyUp={(e) => {
+            const { key } = e;
+            if (key === 'Enter' || key === ' ') onPrevMonthClick(e);
+          }}
           onMouseUp={(e) => {
             e.currentTarget.blur();
           }}
         >
           {navPrevIcon}
-        </button>
+        </div>
       )}
 
-      <button
+      <div
+        role="button"
+        tabIndex="0"
         {...css(
           styles.DayPickerNavigation_button,
           isDefaultNavNext && styles.DayPickerNavigation_button__default,
@@ -169,15 +176,18 @@ function DayPickerNavigation({
             ],
           ]),
         )}
-        type="button"
         aria-label={phrases.jumpToNextMonth}
         onClick={onNextMonthClick}
+        onKeyUp={(e) => {
+          const { key } = e;
+          if (key === 'Enter' || key === ' ') onNextMonthClick(e);
+        }}
         onMouseUp={(e) => {
           e.currentTarget.blur();
         }}
       >
         {navNextIcon}
-      </button>
+      </div>
     </div>
   );
 }
@@ -283,11 +293,13 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     height: 19,
     width: 19,
     fill: color.core.grayLight,
+    display: 'block',
   },
 
   DayPickerNavigation_svg__vertical: {
     height: 42,
     width: 42,
     fill: color.text,
+    display: 'block',
   },
 }))(DayPickerNavigation);
diff --git a/test/components/DayPickerNavigation_spec.jsx b/test/components/DayPickerNavigation_spec.jsx
index eddcb0f5cc..d99924de0a 100644
--- a/test/components/DayPickerNavigation_spec.jsx
+++ b/test/components/DayPickerNavigation_spec.jsx
@@ -8,14 +8,14 @@ import { VERTICAL_SCROLLABLE } from '../../src/constants';
 
 describe('DayPickerNavigation', () => {
   describe('#render', () => {
-    it('renders two buttons', () => {
+    it('renders two role="button" divs', () => {
       const wrapper = shallow(<DayPickerNavigation />).dive();
-      expect(wrapper.find('button')).to.have.lengthOf(2);
+      expect(wrapper.find('[role="button"]')).to.have.lengthOf(2);
     });
 
     it('renders one button when vertically scrollable', () => {
       const wrapper = shallow(<DayPickerNavigation orientation={VERTICAL_SCROLLABLE} />).dive();
-      expect(wrapper.find('button')).to.have.lengthOf(1);
+      expect(wrapper.find('[role="button"]')).to.have.lengthOf(1);
     });
   });
 
@@ -24,7 +24,7 @@ describe('DayPickerNavigation', () => {
       const onPrevMonthStub = sinon.stub();
       const prevMonthButton = shallow(<DayPickerNavigation
         onPrevMonthClick={onPrevMonthStub}
-      />).dive().find('button').at(0);
+      />).dive().find('[role="button"]').at(0);
       prevMonthButton.simulate('click');
       expect(onPrevMonthStub).to.have.property('callCount', 1);
     });
@@ -33,7 +33,7 @@ describe('DayPickerNavigation', () => {
       const onNextMonthStub = sinon.stub();
       const nextMonthButton = shallow(<DayPickerNavigation
         onNextMonthClick={onNextMonthStub}
-      />).dive().find('button').at(1);
+      />).dive().find('[role="button"]').at(1);
       nextMonthButton.simulate('click');
       expect(onNextMonthStub).to.have.property('callCount', 1);
     });

From 5493a1797d8cfa398b1f52f19a9acbe3e9e1dfd1 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Tue, 14 Aug 2018 13:01:24 -0700
Subject: [PATCH 249/618] Version 17.2.0

---
 CHANGELOG.md | 6 ++++++
 package.json | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f344d55e4d..e9b752327e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Change Log
 
+## 17.2.0
+- [fix] Add modifiers for next months in the vertical scrollable datepickers ([#1293](https://github.com/airbnb/react-dates/pull/1293))
+- [fix] Fix cursor jumping to the end of the controlled input when typing ([#1287](https://github.com/airbnb/react-dates/pull/1287))
+- [new] Add `horizontalMonthPadding` prop and `dayPickerHorizontalPadding` and `noScrollBarOnVerticalScrollable` theme variables ([#1298](https://github.com/airbnb/react-dates/pull/1298))
+- [fix] Fix issue where custom month navigation was not clickable in FF ([#1305](https://github.com/airbnb/react-dates/pull/1305))
+
 ## 17.1.1
 - [fix] Set `DayPickerNavigation__horizontal` height to zero ([#1265](https://github.com/airbnb/react-dates/pull/1265))
 
diff --git a/package.json b/package.json
index 268b1e29c9..a1d2807d84 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "17.1.1",
+  "version": "17.2.0",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From ebf83a1eb3bd3745d6a73dea671d93d23585d1a6 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Wed, 15 Aug 2018 13:48:51 -0700
Subject: [PATCH 250/618] [Dev Deps] update `@storybook/addon-actions`,
 `@storybook/addon-info`, `@storybook/addon-links`,
 `@storybook/addon-options`, `@storybook/react`, `airbnb-js-shims`,
 `babel-plugin-inline-react-svg`, `babel-preset-airbnb`, `clean-css`,
 `enzyme`, `enzyme-adapter-react-helper`, `eslint`, `eslint-config-airbnb`,
 `eslint-plugin-import`, `eslint-plugin-react`,
 `eslint-plugin-react-with-styles`, `react-with-styles-interface-aphrodite`,
 `safe-publish-latest`, `sass-loader`, `sinon`

---
 package.json | 40 ++++++++++++++++++++--------------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/package.json b/package.json
index a1d2807d84..4f1b50806f 100644
--- a/package.json
+++ b/package.json
@@ -51,35 +51,35 @@
   },
   "homepage": "https://github.com/airbnb/react-dates#readme",
   "devDependencies": {
-    "@storybook/addon-actions": "^3.4.8",
-    "@storybook/addon-info": "^3.4.8",
-    "@storybook/addon-links": "^3.4.8",
-    "@storybook/addon-options": "^3.4.8",
-    "@storybook/react": "^3.4.8",
-    "airbnb-js-shims": "^2.0.0",
+    "@storybook/addon-actions": "^3.4.10",
+    "@storybook/addon-info": "^3.4.10",
+    "@storybook/addon-links": "^3.4.10",
+    "@storybook/addon-options": "^3.4.10",
+    "@storybook/react": "^3.4.10",
+    "airbnb-js-shims": "^2.1.0",
     "aphrodite": "^2.2.2",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.5",
-    "babel-plugin-inline-react-svg": "^0.5.3",
+    "babel-plugin-inline-react-svg": "^0.5.4",
     "babel-plugin-inline-svg": "^1.0.0",
     "babel-plugin-istanbul": "^4.1.6",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-replace-object-assign": "^1.0.0",
-    "babel-preset-airbnb": "^2.5.2",
+    "babel-preset-airbnb": "^2.5.3",
     "babel-register": "^6.26.0",
     "chai": "^4.1.2",
-    "clean-css": "^4.1.11",
+    "clean-css": "^4.2.1",
     "coveralls": "^3.0.2",
     "cross-env": "^5.2.0",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-helper": "^1.2.3",
-    "eslint": "^4.19.1",
-    "eslint-config-airbnb": "^17.0.0",
-    "eslint-plugin-import": "^2.13.0",
+    "enzyme": "^3.4.1",
+    "enzyme-adapter-react-helper": "^1.3.0",
+    "eslint": "^5.3.0",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-jsx-a11y": "^6.1.1",
-    "eslint-plugin-react": "^7.10.0",
-    "eslint-plugin-react-with-styles": "^2.0.0",
+    "eslint-plugin-react": "^7.11.1",
+    "eslint-plugin-react-with-styles": "^2.1.0",
     "git-directory-deploy": "^1.5.1",
     "imports-loader": "^0.8.0",
     "in-publish": "^2.0.0",
@@ -99,12 +99,12 @@
     "raw-loader": "^0.5.1",
     "react": "^0.14 || ^15.5.4 || ^16.1.1",
     "react-dom": "^0.14 || ^15.5.4 || ^16.1.1",
-    "react-with-styles-interface-aphrodite": "^5.0.0",
+    "react-with-styles-interface-aphrodite": "^5.0.1",
     "react-with-styles-interface-css-compiler": "^1.1.2",
     "rimraf": "^2.6.2",
-    "safe-publish-latest": "^1.1.1",
-    "sass-loader": "^7.0.3",
-    "sinon": "^6.1.3",
+    "safe-publish-latest": "^1.1.2",
+    "sass-loader": "^7.1.0",
+    "sinon": "^6.1.5",
     "sinon-sandbox": "^2.0.0",
     "style-loader": "^0.20.3",
     "webpack": "^2.6.1"

From 750071b582e402eb0456485176c5c87048d7148d Mon Sep 17 00:00:00 2001
From: Joe Lencioni <joe.lencioni@airbnb.com>
Date: Wed, 22 Aug 2018 15:23:25 -0700
Subject: [PATCH 251/618] Remove propTypes in production

This will help reduce the bundle size impact. Note that any consumers
who are depending on any react-dates components having a `.propTypes`
property will no longer work as expected after this change.

I enabled this using wrap mode, which adds `process.env.NODE_ENV`
checks, which is a pretty standard method for React apps. I believe this
will allow this library to have propTypes in development, but for them
to be minified out in production builds.

To make this safe to enable in this repo, I enabled the
react/forbid-foreign-prop-types ESLint rule, which was written
specifically for the benefit of this plugin.

Here's a diff showing what effect this has on the esm build:

  https://gist.github.com/lencioni/1b436d365570394ccde659c829ba02c3
---
 .babelrc     | 19 +++++++++++++++++++
 .eslintrc    |  2 ++
 package.json |  1 +
 3 files changed, 22 insertions(+)

diff --git a/.babelrc b/.babelrc
index b2c285575c..43edf38fa4 100644
--- a/.babelrc
+++ b/.babelrc
@@ -8,6 +8,7 @@
         "istanbul"
       ]
     },
+
     "development": {
       "presets": ["airbnb"],
       "plugins": [
@@ -15,25 +16,43 @@
         ["transform-replace-object-assign", { "moduleSpecifier": "object.assign" }],
       ],
     },
+
     "production": {
       "presets": ["airbnb"],
       "plugins": [
         "inline-react-svg",
         ["transform-replace-object-assign", { "moduleSpecifier": "object.assign" }],
+        ["transform-react-remove-prop-types", {
+          "mode": "wrap",
+          "additionalLibraries": ["airbnb-prop-types"],
+          "ignoreFilenames": ["node_modules"],
+        }],
       ],
     },
+
     "cjs": {
       "presets": ["airbnb"],
       "plugins": [
         "inline-react-svg",
         ["transform-replace-object-assign", { "moduleSpecifier": "object.assign" }],
+        ["transform-react-remove-prop-types", {
+          "mode": "wrap",
+          "additionalLibraries": ["airbnb-prop-types"],
+          "ignoreFilenames": ["node_modules"],
+        }],
       ],
     },
+
     "esm": {
       "presets": [["airbnb", { modules: false }]],
       "plugins": [
         "inline-react-svg",
         ["transform-replace-object-assign", { "moduleSpecifier": "object.assign" }],
+        ["transform-react-remove-prop-types", {
+          "mode": "wrap",
+          "additionalLibraries": ["airbnb-prop-types"],
+          "ignoreFilenames": ["node_modules"],
+        }],
       ],
     },
   },
diff --git a/.eslintrc b/.eslintrc
index 3495c1d12e..7e07f00e93 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -16,6 +16,8 @@
   },
 
   "rules": {
+    "react/forbid-foreign-prop-types": 2, // For babel-plugin-transform-react-remove-prop-types
+
     "jsx-a11y/click-events-have-key-events": 1, // TODO: enable
 
     "react/no-did-mount-set-state": 0, // necessary for server-rendering
diff --git a/package.json b/package.json
index 4f1b50806f..7276584600 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,7 @@
     "babel-plugin-inline-svg": "^1.0.0",
     "babel-plugin-istanbul": "^4.1.6",
     "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.15",
     "babel-plugin-transform-replace-object-assign": "^1.0.0",
     "babel-preset-airbnb": "^2.5.3",
     "babel-register": "^6.26.0",

From c8df10b395093b4a8e18aacccc89871c486c4512 Mon Sep 17 00:00:00 2001
From: Joe Lencioni <joe.lencioni@airbnb.com>
Date: Wed, 29 Aug 2018 13:10:47 -0700
Subject: [PATCH 252/618] =?UTF-8?q?Update=20babel-preset-airbnb=202.5.3=20?=
 =?UTF-8?q?=E2=86=92=202.6.0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This new version includes an option for removing propTypes, so I am
removing that plugin in favor of using the preset option.
---
 .babelrc     | 21 +++------------------
 package.json |  3 +--
 2 files changed, 4 insertions(+), 20 deletions(-)

diff --git a/.babelrc b/.babelrc
index 43edf38fa4..84513b5eec 100644
--- a/.babelrc
+++ b/.babelrc
@@ -18,41 +18,26 @@
     },
 
     "production": {
-      "presets": ["airbnb"],
+      "presets": [["airbnb", { removePropTypes: true }]],
       "plugins": [
         "inline-react-svg",
         ["transform-replace-object-assign", { "moduleSpecifier": "object.assign" }],
-        ["transform-react-remove-prop-types", {
-          "mode": "wrap",
-          "additionalLibraries": ["airbnb-prop-types"],
-          "ignoreFilenames": ["node_modules"],
-        }],
       ],
     },
 
     "cjs": {
-      "presets": ["airbnb"],
+      "presets": [["airbnb", { removePropTypes: true }]],
       "plugins": [
         "inline-react-svg",
         ["transform-replace-object-assign", { "moduleSpecifier": "object.assign" }],
-        ["transform-react-remove-prop-types", {
-          "mode": "wrap",
-          "additionalLibraries": ["airbnb-prop-types"],
-          "ignoreFilenames": ["node_modules"],
-        }],
       ],
     },
 
     "esm": {
-      "presets": [["airbnb", { modules: false }]],
+      "presets": [["airbnb", { modules: false, removePropTypes: true }]],
       "plugins": [
         "inline-react-svg",
         ["transform-replace-object-assign", { "moduleSpecifier": "object.assign" }],
-        ["transform-react-remove-prop-types", {
-          "mode": "wrap",
-          "additionalLibraries": ["airbnb-prop-types"],
-          "ignoreFilenames": ["node_modules"],
-        }],
       ],
     },
   },
diff --git a/package.json b/package.json
index 7276584600..8e76eb7563 100644
--- a/package.json
+++ b/package.json
@@ -65,9 +65,8 @@
     "babel-plugin-inline-svg": "^1.0.0",
     "babel-plugin-istanbul": "^4.1.6",
     "babel-plugin-syntax-jsx": "^6.18.0",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.15",
     "babel-plugin-transform-replace-object-assign": "^1.0.0",
-    "babel-preset-airbnb": "^2.5.3",
+    "babel-preset-airbnb": "^2.6.0",
     "babel-register": "^6.26.0",
     "chai": "^4.1.2",
     "clean-css": "^4.2.1",

From e362c8e053af600a095f93fea1ff3ec582364a27 Mon Sep 17 00:00:00 2001
From: Joseph Cota <jcota@getaroom.com>
Date: Thu, 30 Aug 2018 12:16:07 -0500
Subject: [PATCH 253/618] Working to resolve #1297.  Conditionally using
 `React.PureComponent` instead of `React.Component`

---
 .storybook/config.js                          |  5 +++++
 package.json                                  |  3 ++-
 src/components/CalendarDay.jsx                | 12 +++++------
 src/components/CalendarMonth.jsx              | 12 +++++------
 src/components/CalendarMonthGrid.jsx          | 12 +++++------
 src/components/CustomizableCalendarDay.jsx    | 12 +++++------
 src/components/DateInput.jsx                  |  7 +++++--
 src/components/DateRangePicker.jsx            | 12 +++++------
 src/components/DateRangePickerInput.jsx       |  3 ++-
 .../DateRangePickerInputController.jsx        |  6 +++++-
 src/components/DayPicker.jsx                  | 12 +++++------
 src/components/DayPickerKeyboardShortcuts.jsx |  7 +++++--
 src/components/DayPickerNavigation.jsx        |  3 ++-
 src/components/DayPickerRangeController.jsx   |  5 ++++-
 .../DayPickerSingleDateController.jsx         |  5 ++++-
 src/components/KeyboardShortcutRow.jsx        |  3 ++-
 src/components/SingleDatePicker.jsx           |  7 +++++--
 src/components/SingleDatePickerInput.jsx      |  3 ++-
 src/utils/baseClass.js                        | 20 +++++++++++++++++++
 19 files changed, 93 insertions(+), 56 deletions(-)
 create mode 100644 src/utils/baseClass.js

diff --git a/.storybook/config.js b/.storybook/config.js
index 3764b18a9f..aad08cf18b 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -1,4 +1,9 @@
 import React from 'react';
+if (process.env.NODE_ENV !== 'production') {
+  const {whyDidYouUpdate} = require('why-did-you-update');
+  whyDidYouUpdate(React);
+}
+
 import moment from 'moment';
 import aphroditeInterface from 'react-with-styles-interface-aphrodite';
 
diff --git a/package.json b/package.json
index 4f1b50806f..8e6145659a 100644
--- a/package.json
+++ b/package.json
@@ -107,7 +107,8 @@
     "sinon": "^6.1.5",
     "sinon-sandbox": "^2.0.0",
     "style-loader": "^0.20.3",
-    "webpack": "^2.6.1"
+    "webpack": "^2.6.1",
+    "why-did-you-update": "^0.1.1"
   },
   "dependencies": {
     "airbnb-prop-types": "^2.10.0",
diff --git a/src/components/CalendarDay.jsx b/src/components/CalendarDay.jsx
index b89b5b8336..f2b4b0c56f 100644
--- a/src/components/CalendarDay.jsx
+++ b/src/components/CalendarDay.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import shallowCompare from 'react-addons-shallow-compare';
 import momentPropTypes from 'react-moment-proptypes';
 import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
@@ -10,6 +9,7 @@ import { CalendarDayPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
 import getCalendarDaySettings from '../utils/getCalendarDaySettings';
 import ModifiersShape from '../shapes/ModifiersShape';
+import baseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import { DAY_SIZE } from '../constants';
 
@@ -48,17 +48,15 @@ const defaultProps = {
   phrases: CalendarDayPhrases,
 };
 
-class CalendarDay extends React.Component {
+const BaseClass = baseClass();
+
+class CalendarDay extends BaseClass {
   constructor(...args) {
     super(...args);
 
     this.setButtonRef = this.setButtonRef.bind(this);
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState);
-  }
-
   componentDidUpdate(prevProps) {
     const { isFocused, tabIndex } = this.props;
     if (tabIndex === 0) {
@@ -339,4 +337,4 @@ export default withStyles(({ reactDates: { color, font } }) => ({
   CalendarDay__today: {},
   CalendarDay__firstDayOfWeek: {},
   CalendarDay__lastDayOfWeek: {},
-}))(CalendarDay);
+}), { pureComponent: pureComponentAvailable })(CalendarDay);
diff --git a/src/components/CalendarMonth.jsx b/src/components/CalendarMonth.jsx
index e9487fe7e9..3a18012082 100644
--- a/src/components/CalendarMonth.jsx
+++ b/src/components/CalendarMonth.jsx
@@ -2,7 +2,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import shallowCompare from 'react-addons-shallow-compare';
 import momentPropTypes from 'react-moment-proptypes';
 import { forbidExtraProps, mutuallyExclusiveProps, nonNegativeInteger } from 'airbnb-prop-types';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
@@ -22,6 +21,7 @@ import toISODateString from '../utils/toISODateString';
 import ModifiersShape from '../shapes/ModifiersShape';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
+import baseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import {
   HORIZONTAL_ORIENTATION,
@@ -90,7 +90,9 @@ const defaultProps = {
   verticalBorderSpacing: undefined,
 };
 
-class CalendarMonth extends React.Component {
+const BaseClass = baseClass();
+
+class CalendarMonth extends BaseClass {
   constructor(props) {
     super(props);
 
@@ -132,10 +134,6 @@ class CalendarMonth extends React.Component {
     }
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState);
-  }
-
   componentWillUnmount() {
     if (this.setMonthTitleHeightTimeout) {
       clearTimeout(this.setMonthTitleHeightTimeout);
@@ -277,4 +275,4 @@ export default withStyles(({ reactDates: { color, font, spacing } }) => ({
     paddingTop: 12,
     paddingBottom: 7,
   },
-}))(CalendarMonth);
+}), { pureComponent: pureComponentAvailable })(CalendarMonth);
diff --git a/src/components/CalendarMonthGrid.jsx b/src/components/CalendarMonthGrid.jsx
index 40cad0ee45..031b5561b2 100644
--- a/src/components/CalendarMonthGrid.jsx
+++ b/src/components/CalendarMonthGrid.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import shallowCompare from 'react-addons-shallow-compare';
 import momentPropTypes from 'react-moment-proptypes';
 import { forbidExtraProps, mutuallyExclusiveProps, nonNegativeInteger } from 'airbnb-prop-types';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
@@ -22,6 +21,7 @@ import isNextMonth from '../utils/isNextMonth';
 import ModifiersShape from '../shapes/ModifiersShape';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
+import baseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import {
   HORIZONTAL_ORIENTATION,
@@ -114,7 +114,9 @@ function getMonths(initialMonth, numberOfMonths, withoutTransitionMonths) {
   return months;
 }
 
-class CalendarMonthGrid extends React.Component {
+const BaseClass = baseClass();
+
+class CalendarMonthGrid extends BaseClass {
   constructor(props) {
     super(props);
     const withoutTransitionMonths = props.orientation === VERTICAL_SCROLLABLE;
@@ -180,10 +182,6 @@ class CalendarMonthGrid extends React.Component {
     });
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState);
-  }
-
   componentDidUpdate() {
     const {
       isAnimating,
@@ -425,4 +423,4 @@ export default withStyles(({
   CalendarMonthGrid_month__hidden: {
     visibility: 'hidden',
   },
-}))(CalendarMonthGrid);
+}), { pureComponent: pureComponentAvailable })(CalendarMonthGrid);
diff --git a/src/components/CustomizableCalendarDay.jsx b/src/components/CustomizableCalendarDay.jsx
index 80c90a34ff..991d93c6a0 100644
--- a/src/components/CustomizableCalendarDay.jsx
+++ b/src/components/CustomizableCalendarDay.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import shallowCompare from 'react-addons-shallow-compare';
 import momentPropTypes from 'react-moment-proptypes';
 import { forbidExtraProps, nonNegativeInteger, or } from 'airbnb-prop-types';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
@@ -9,6 +8,7 @@ import moment from 'moment';
 import { CalendarDayPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
 import getCalendarDaySettings from '../utils/getCalendarDaySettings';
+import baseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import { DAY_SIZE } from '../constants';
 import DefaultTheme from '../theme/DefaultTheme';
@@ -212,7 +212,9 @@ const defaultProps = {
   phrases: CalendarDayPhrases,
 };
 
-class CustomizableCalendarDay extends React.Component {
+const BaseClass = baseClass();
+
+class CustomizableCalendarDay extends BaseClass {
   constructor(...args) {
     super(...args);
 
@@ -223,10 +225,6 @@ class CustomizableCalendarDay extends React.Component {
     this.setButtonRef = this.setButtonRef.bind(this);
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState);
-  }
-
   componentDidUpdate(prevProps) {
     const { isFocused, tabIndex } = this.props;
     if (tabIndex === 0) {
@@ -369,4 +367,4 @@ export default withStyles(({ reactDates: { font } }) => ({
   CalendarDay__defaultCursor: {
     cursor: 'default',
   },
-}))(CustomizableCalendarDay);
+}), { pureComponent: pureComponentAvailable })(CustomizableCalendarDay);
diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
index e0f54a95e9..714a5f0b76 100644
--- a/src/components/DateInput.jsx
+++ b/src/components/DateInput.jsx
@@ -7,6 +7,7 @@ import isTouchDevice from 'is-touch-device';
 
 import getInputHeight from '../utils/getInputHeight';
 import openDirectionShape from '../shapes/OpenDirectionShape';
+import baseClass, { pureComponentAvailable } from '../utils/baseClass';
 import {
   OPEN_DOWN,
   OPEN_UP,
@@ -77,7 +78,9 @@ const defaultProps = {
   isFocused: false,
 };
 
-class DateInput extends React.Component {
+const BaseClass = baseClass();
+
+class DateInput extends BaseClass {
   constructor(props) {
     super(props);
 
@@ -379,4 +382,4 @@ export default withStyles(({
     stroke: color.core.border,
     fill: 'transparent',
   },
-}))(DateInput);
+}), { pureComponent: pureComponentAvailable })(DateInput);
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 0eca351ae4..48af3d13fc 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import shallowCompare from 'react-addons-shallow-compare';
 import moment from 'moment';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 import { Portal } from 'react-portal';
@@ -16,6 +15,7 @@ import getDetachedContainerStyles from '../utils/getDetachedContainerStyles';
 import getInputHeight from '../utils/getInputHeight';
 import isInclusivelyAfterDay from '../utils/isInclusivelyAfterDay';
 import disableScroll from '../utils/disableScroll';
+import baseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import DateRangePickerInputController from './DateRangePickerInputController';
 import DayPickerRangeController from './DayPickerRangeController';
@@ -118,7 +118,9 @@ const defaultProps = {
   dayAriaLabelFormat: undefined,
 };
 
-class DateRangePicker extends React.Component {
+const BaseClass = baseClass();
+
+class DateRangePicker extends BaseClass {
   constructor(props) {
     super(props);
     this.state = {
@@ -163,10 +165,6 @@ class DateRangePicker extends React.Component {
     this.isTouchDevice = isTouchDevice();
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState);
-  }
-
   componentDidUpdate(prevProps) {
     const { focusedInput } = this.props;
     if (!prevProps.focusedInput && focusedInput && this.isOpened()) {
@@ -674,4 +672,4 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     width: 15,
     fill: color.core.grayLighter,
   },
-}))(DateRangePicker);
+}), { pureComponent: pureComponentAvailable })(DateRangePicker);
diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index 46b039bb6f..a2c01268c1 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -10,6 +10,7 @@ import openDirectionShape from '../shapes/OpenDirectionShape';
 import DateInput from './DateInput';
 import IconPositionShape from '../shapes/IconPositionShape';
 import DisabledShape from '../shapes/DisabledShape';
+import { pureComponentAvailable } from '../utils/baseClass';
 
 import RightArrow from './RightArrow';
 import LeftArrow from './LeftArrow';
@@ -396,4 +397,4 @@ export default withStyles(({ reactDates: { border, color, sizing } }) => ({
     width: 14,
     verticalAlign: 'middle',
   },
-}))(DateRangePickerInput);
+}), { pureComponent: pureComponentAvailable })(DateRangePickerInput);
diff --git a/src/components/DateRangePickerInputController.jsx b/src/components/DateRangePickerInputController.jsx
index 138ef48d28..e883abf826 100644
--- a/src/components/DateRangePickerInputController.jsx
+++ b/src/components/DateRangePickerInputController.jsx
@@ -20,6 +20,8 @@ import toLocalizedDateString from '../utils/toLocalizedDateString';
 import isInclusivelyAfterDay from '../utils/isInclusivelyAfterDay';
 import isBeforeDay from '../utils/isBeforeDay';
 
+import baseClass from '../utils/baseClass';
+
 import {
   START_DATE,
   END_DATE,
@@ -131,7 +133,9 @@ const defaultProps = {
   isRTL: false,
 };
 
-export default class DateRangePickerInputController extends React.Component {
+const BaseClass = baseClass();
+
+export default class DateRangePickerInputController extends BaseClass {
   constructor(props) {
     super(props);
 
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 7612db7510..1412796438 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import shallowCompare from 'react-addons-shallow-compare';
 import { forbidExtraProps, mutuallyExclusiveProps, nonNegativeInteger } from 'airbnb-prop-types';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 
@@ -30,6 +29,7 @@ import ModifiersShape from '../shapes/ModifiersShape';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
 import CalendarInfoPositionShape from '../shapes/CalendarInfoPositionShape';
+import baseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import {
   HORIZONTAL_ORIENTATION,
@@ -163,7 +163,9 @@ export const defaultProps = {
   dayAriaLabelFormat: undefined,
 };
 
-class DayPicker extends React.Component {
+const BaseClass = baseClass();
+
+class DayPicker extends BaseClass {
   constructor(props) {
     super(props);
 
@@ -299,10 +301,6 @@ class DayPicker extends React.Component {
     }
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState);
-  }
-
   componentWillUpdate() {
     const { transitionDuration } = this.props;
 
@@ -1241,4 +1239,4 @@ export default withStyles(({
       },
     }),
   },
-}))(DayPicker);
+}), { pureComponent: pureComponentAvailable })(DayPicker);
diff --git a/src/components/DayPickerKeyboardShortcuts.jsx b/src/components/DayPickerKeyboardShortcuts.jsx
index 2d19a1262b..b5ce951a10 100644
--- a/src/components/DayPickerKeyboardShortcuts.jsx
+++ b/src/components/DayPickerKeyboardShortcuts.jsx
@@ -5,6 +5,7 @@ import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 
 import { DayPickerKeyboardShortcutsPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
+import baseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import KeyboardShortcutRow from './KeyboardShortcutRow';
 import CloseButton from './CloseButton';
@@ -72,7 +73,9 @@ function getKeyboardShortcuts(phrases) {
   ];
 }
 
-class DayPickerKeyboardShortcuts extends React.Component {
+const BaseClass = baseClass();
+
+class DayPickerKeyboardShortcuts extends BaseClass {
   constructor(...args) {
     super(...args);
 
@@ -394,4 +397,4 @@ export default withStyles(({ reactDates: { color, font, zIndex } }) => ({
       fill: color.core.grayLight,
     },
   },
-}))(DayPickerKeyboardShortcuts);
+}), { pureComponent: pureComponentAvailable })(DayPickerKeyboardShortcuts);
diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index 421959cb91..9183337bd1 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -5,6 +5,7 @@ import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 
 import { DayPickerNavigationPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
+import { pureComponentAvailable } from '../utils/baseClass';
 
 import LeftArrow from './LeftArrow';
 import RightArrow from './RightArrow';
@@ -302,4 +303,4 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     fill: color.text,
     display: 'block',
   },
-}))(DayPickerNavigation);
+}), { pureComponent: pureComponentAvailable })(DayPickerNavigation);
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index d982a7cfa5..25d9bbc20d 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -28,6 +28,7 @@ import FocusedInputShape from '../shapes/FocusedInputShape';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
 import CalendarInfoPositionShape from '../shapes/CalendarInfoPositionShape';
+import baseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import {
   START_DATE,
@@ -173,7 +174,9 @@ const getChooseAvailableDatePhrase = (phrases, focusedInput) => {
   return phrases.chooseAvailableDate;
 };
 
-export default class DayPickerRangeController extends React.Component {
+const BaseClass = baseClass();
+
+export default class DayPickerRangeController extends BaseClass {
   constructor(props) {
     super(props);
 
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 57d9e8d425..8abf0c0dc9 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -21,6 +21,7 @@ import toISOMonthString from '../utils/toISOMonthString';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
 import CalendarInfoPositionShape from '../shapes/CalendarInfoPositionShape';
+import baseClass from '../utils/baseClass';
 
 import {
   HORIZONTAL_ORIENTATION,
@@ -142,7 +143,9 @@ const defaultProps = {
   isRTL: false,
 };
 
-export default class DayPickerSingleDateController extends React.Component {
+const BaseClass = baseClass();
+
+export default class DayPickerSingleDateController extends BaseClass {
   constructor(props) {
     super(props);
 
diff --git a/src/components/KeyboardShortcutRow.jsx b/src/components/KeyboardShortcutRow.jsx
index e5e0457de9..eb87b3320d 100644
--- a/src/components/KeyboardShortcutRow.jsx
+++ b/src/components/KeyboardShortcutRow.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { forbidExtraProps } from 'airbnb-prop-types';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
+import { pureComponentAvailable } from '../utils/baseClass';
 
 const propTypes = forbidExtraProps({
   ...withStylesPropTypes,
@@ -89,4 +90,4 @@ export default withStyles(({ reactDates: { color } }) => ({
     wordBreak: 'break-word',
     marginLeft: 8,
   },
-}))(KeyboardShortcutRow);
+}), { pureComponent: pureComponentAvailable })(KeyboardShortcutRow);
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index 6c6206ca49..ebe73d894c 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -17,6 +17,7 @@ import getDetachedContainerStyles from '../utils/getDetachedContainerStyles';
 import getInputHeight from '../utils/getInputHeight';
 import isInclusivelyAfterDay from '../utils/isInclusivelyAfterDay';
 import disableScroll from '../utils/disableScroll';
+import baseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import SingleDatePickerInput from './SingleDatePickerInput';
 import DayPickerSingleDateController from './DayPickerSingleDateController';
@@ -116,7 +117,9 @@ const defaultProps = {
   dayAriaLabelFormat: undefined,
 };
 
-class SingleDatePicker extends React.Component {
+const BaseClass = baseClass();
+
+class SingleDatePicker extends BaseClass {
   constructor(props) {
     super(props);
 
@@ -690,4 +693,4 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     width: 15,
     fill: color.core.grayLighter,
   },
-}))(SingleDatePicker);
+}), { pureComponent: pureComponentAvailable })(SingleDatePicker);
diff --git a/src/components/SingleDatePickerInput.jsx b/src/components/SingleDatePickerInput.jsx
index e5ad5f3273..d0afa206c0 100644
--- a/src/components/SingleDatePickerInput.jsx
+++ b/src/components/SingleDatePickerInput.jsx
@@ -14,6 +14,7 @@ import CalendarIcon from './CalendarIcon';
 
 import openDirectionShape from '../shapes/OpenDirectionShape';
 import { ICON_BEFORE_POSITION, ICON_AFTER_POSITION, OPEN_DOWN } from '../constants';
+import { pureComponentAvailable } from '../utils/baseClass';
 
 const propTypes = forbidExtraProps({
   ...withStylesPropTypes,
@@ -310,4 +311,4 @@ export default withStyles(({ reactDates: { border, color } }) => ({
     width: 14,
     verticalAlign: 'middle',
   },
-}))(SingleDatePickerInput);
+}), { pureComponent: pureComponentAvailable })(SingleDatePickerInput);
diff --git a/src/utils/baseClass.js b/src/utils/baseClass.js
new file mode 100644
index 0000000000..7acddbb977
--- /dev/null
+++ b/src/utils/baseClass.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import shallowCompare from 'react-addons-shallow-compare';
+
+export const pureComponentAvailable = typeof React.PureComponent !== 'undefined';
+
+export default function baseClass(pureComponent = pureComponentAvailable) {
+  if (pureComponent) {
+    if (!React.PureComponent) {
+      throw new ReferenceError('withStyles() pureComponent option requires React 15.3.0 or later');
+    }
+
+    return React.PureComponent;
+  }
+
+  return class BaseClass extends React.Component {
+    shouldComponentUpdate(nextProps, nextState) {
+      return shallowCompare(this, nextProps, nextState);
+    }
+  };
+}

From 1935ac0408517893fa6f8232e71296d4889d52f1 Mon Sep 17 00:00:00 2001
From: Joseph Cota <jcota@getaroom.com>
Date: Thu, 30 Aug 2018 13:06:39 -0500
Subject: [PATCH 254/618] Making requested changes...   - Both
 `pureComponentAvailable` and `baseClass` are now functions   - Using `extends
 baseClass()` instead of defining `BaseClass = baseClass()`   - Fixing the
 lint on `DayPickerRangeController` for `pureComponentAvailable` being defined
 but not used

---
 src/components/CalendarDay.jsx                    | 6 ++----
 src/components/CalendarMonth.jsx                  | 6 ++----
 src/components/CalendarMonthGrid.jsx              | 6 ++----
 src/components/CustomizableCalendarDay.jsx        | 6 ++----
 src/components/DateInput.jsx                      | 6 ++----
 src/components/DateRangePicker.jsx                | 6 ++----
 src/components/DateRangePickerInput.jsx           | 2 +-
 src/components/DateRangePickerInputController.jsx | 4 +---
 src/components/DayPicker.jsx                      | 6 ++----
 src/components/DayPickerKeyboardShortcuts.jsx     | 6 ++----
 src/components/DayPickerNavigation.jsx            | 2 +-
 src/components/DayPickerRangeController.jsx       | 6 ++----
 src/components/DayPickerSingleDateController.jsx  | 4 +---
 src/components/KeyboardShortcutRow.jsx            | 2 +-
 src/components/SingleDatePicker.jsx               | 6 ++----
 src/components/SingleDatePickerInput.jsx          | 2 +-
 src/utils/baseClass.js                            | 4 ++--
 17 files changed, 28 insertions(+), 52 deletions(-)

diff --git a/src/components/CalendarDay.jsx b/src/components/CalendarDay.jsx
index f2b4b0c56f..f6b5744a35 100644
--- a/src/components/CalendarDay.jsx
+++ b/src/components/CalendarDay.jsx
@@ -48,9 +48,7 @@ const defaultProps = {
   phrases: CalendarDayPhrases,
 };
 
-const BaseClass = baseClass();
-
-class CalendarDay extends BaseClass {
+class CalendarDay extends baseClass() {
   constructor(...args) {
     super(...args);
 
@@ -337,4 +335,4 @@ export default withStyles(({ reactDates: { color, font } }) => ({
   CalendarDay__today: {},
   CalendarDay__firstDayOfWeek: {},
   CalendarDay__lastDayOfWeek: {},
-}), { pureComponent: pureComponentAvailable })(CalendarDay);
+}), { pureComponent: pureComponentAvailable() })(CalendarDay);
diff --git a/src/components/CalendarMonth.jsx b/src/components/CalendarMonth.jsx
index 3a18012082..987ec499b2 100644
--- a/src/components/CalendarMonth.jsx
+++ b/src/components/CalendarMonth.jsx
@@ -90,9 +90,7 @@ const defaultProps = {
   verticalBorderSpacing: undefined,
 };
 
-const BaseClass = baseClass();
-
-class CalendarMonth extends BaseClass {
+class CalendarMonth extends baseClass() {
   constructor(props) {
     super(props);
 
@@ -275,4 +273,4 @@ export default withStyles(({ reactDates: { color, font, spacing } }) => ({
     paddingTop: 12,
     paddingBottom: 7,
   },
-}), { pureComponent: pureComponentAvailable })(CalendarMonth);
+}), { pureComponent: pureComponentAvailable() })(CalendarMonth);
diff --git a/src/components/CalendarMonthGrid.jsx b/src/components/CalendarMonthGrid.jsx
index 031b5561b2..d5910aa861 100644
--- a/src/components/CalendarMonthGrid.jsx
+++ b/src/components/CalendarMonthGrid.jsx
@@ -114,9 +114,7 @@ function getMonths(initialMonth, numberOfMonths, withoutTransitionMonths) {
   return months;
 }
 
-const BaseClass = baseClass();
-
-class CalendarMonthGrid extends BaseClass {
+class CalendarMonthGrid extends baseClass() {
   constructor(props) {
     super(props);
     const withoutTransitionMonths = props.orientation === VERTICAL_SCROLLABLE;
@@ -423,4 +421,4 @@ export default withStyles(({
   CalendarMonthGrid_month__hidden: {
     visibility: 'hidden',
   },
-}), { pureComponent: pureComponentAvailable })(CalendarMonthGrid);
+}), { pureComponent: pureComponentAvailable() })(CalendarMonthGrid);
diff --git a/src/components/CustomizableCalendarDay.jsx b/src/components/CustomizableCalendarDay.jsx
index 991d93c6a0..2609cbbeff 100644
--- a/src/components/CustomizableCalendarDay.jsx
+++ b/src/components/CustomizableCalendarDay.jsx
@@ -212,9 +212,7 @@ const defaultProps = {
   phrases: CalendarDayPhrases,
 };
 
-const BaseClass = baseClass();
-
-class CustomizableCalendarDay extends BaseClass {
+class CustomizableCalendarDay extends baseClass() {
   constructor(...args) {
     super(...args);
 
@@ -367,4 +365,4 @@ export default withStyles(({ reactDates: { font } }) => ({
   CalendarDay__defaultCursor: {
     cursor: 'default',
   },
-}), { pureComponent: pureComponentAvailable })(CustomizableCalendarDay);
+}), { pureComponent: pureComponentAvailable() })(CustomizableCalendarDay);
diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
index 714a5f0b76..9683f0afb5 100644
--- a/src/components/DateInput.jsx
+++ b/src/components/DateInput.jsx
@@ -78,9 +78,7 @@ const defaultProps = {
   isFocused: false,
 };
 
-const BaseClass = baseClass();
-
-class DateInput extends BaseClass {
+class DateInput extends baseClass() {
   constructor(props) {
     super(props);
 
@@ -382,4 +380,4 @@ export default withStyles(({
     stroke: color.core.border,
     fill: 'transparent',
   },
-}), { pureComponent: pureComponentAvailable })(DateInput);
+}), { pureComponent: pureComponentAvailable() })(DateInput);
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 48af3d13fc..1fdf152e85 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -118,9 +118,7 @@ const defaultProps = {
   dayAriaLabelFormat: undefined,
 };
 
-const BaseClass = baseClass();
-
-class DateRangePicker extends BaseClass {
+class DateRangePicker extends baseClass() {
   constructor(props) {
     super(props);
     this.state = {
@@ -672,4 +670,4 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     width: 15,
     fill: color.core.grayLighter,
   },
-}), { pureComponent: pureComponentAvailable })(DateRangePicker);
+}), { pureComponent: pureComponentAvailable() })(DateRangePicker);
diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index a2c01268c1..3e7a978be0 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -397,4 +397,4 @@ export default withStyles(({ reactDates: { border, color, sizing } }) => ({
     width: 14,
     verticalAlign: 'middle',
   },
-}), { pureComponent: pureComponentAvailable })(DateRangePickerInput);
+}), { pureComponent: pureComponentAvailable() })(DateRangePickerInput);
diff --git a/src/components/DateRangePickerInputController.jsx b/src/components/DateRangePickerInputController.jsx
index e883abf826..b6cf859af1 100644
--- a/src/components/DateRangePickerInputController.jsx
+++ b/src/components/DateRangePickerInputController.jsx
@@ -133,9 +133,7 @@ const defaultProps = {
   isRTL: false,
 };
 
-const BaseClass = baseClass();
-
-export default class DateRangePickerInputController extends BaseClass {
+export default class DateRangePickerInputController extends baseClass() {
   constructor(props) {
     super(props);
 
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 1412796438..94cfc2645f 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -163,9 +163,7 @@ export const defaultProps = {
   dayAriaLabelFormat: undefined,
 };
 
-const BaseClass = baseClass();
-
-class DayPicker extends BaseClass {
+class DayPicker extends baseClass() {
   constructor(props) {
     super(props);
 
@@ -1239,4 +1237,4 @@ export default withStyles(({
       },
     }),
   },
-}), { pureComponent: pureComponentAvailable })(DayPicker);
+}), { pureComponent: pureComponentAvailable() })(DayPicker);
diff --git a/src/components/DayPickerKeyboardShortcuts.jsx b/src/components/DayPickerKeyboardShortcuts.jsx
index b5ce951a10..f0bdb720fd 100644
--- a/src/components/DayPickerKeyboardShortcuts.jsx
+++ b/src/components/DayPickerKeyboardShortcuts.jsx
@@ -73,9 +73,7 @@ function getKeyboardShortcuts(phrases) {
   ];
 }
 
-const BaseClass = baseClass();
-
-class DayPickerKeyboardShortcuts extends BaseClass {
+class DayPickerKeyboardShortcuts extends baseClass() {
   constructor(...args) {
     super(...args);
 
@@ -397,4 +395,4 @@ export default withStyles(({ reactDates: { color, font, zIndex } }) => ({
       fill: color.core.grayLight,
     },
   },
-}), { pureComponent: pureComponentAvailable })(DayPickerKeyboardShortcuts);
+}), { pureComponent: pureComponentAvailable() })(DayPickerKeyboardShortcuts);
diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index 9183337bd1..5d98abbf8c 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -303,4 +303,4 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     fill: color.text,
     display: 'block',
   },
-}), { pureComponent: pureComponentAvailable })(DayPickerNavigation);
+}), { pureComponent: pureComponentAvailable() })(DayPickerNavigation);
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 25d9bbc20d..653a1e1c4d 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -28,7 +28,7 @@ import FocusedInputShape from '../shapes/FocusedInputShape';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
 import CalendarInfoPositionShape from '../shapes/CalendarInfoPositionShape';
-import baseClass, { pureComponentAvailable } from '../utils/baseClass';
+import baseClass from '../utils/baseClass';
 
 import {
   START_DATE,
@@ -174,9 +174,7 @@ const getChooseAvailableDatePhrase = (phrases, focusedInput) => {
   return phrases.chooseAvailableDate;
 };
 
-const BaseClass = baseClass();
-
-export default class DayPickerRangeController extends BaseClass {
+export default class DayPickerRangeController extends baseClass() {
   constructor(props) {
     super(props);
 
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 8abf0c0dc9..b675faa514 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -143,9 +143,7 @@ const defaultProps = {
   isRTL: false,
 };
 
-const BaseClass = baseClass();
-
-export default class DayPickerSingleDateController extends BaseClass {
+export default class DayPickerSingleDateController extends baseClass() {
   constructor(props) {
     super(props);
 
diff --git a/src/components/KeyboardShortcutRow.jsx b/src/components/KeyboardShortcutRow.jsx
index eb87b3320d..aa814feace 100644
--- a/src/components/KeyboardShortcutRow.jsx
+++ b/src/components/KeyboardShortcutRow.jsx
@@ -90,4 +90,4 @@ export default withStyles(({ reactDates: { color } }) => ({
     wordBreak: 'break-word',
     marginLeft: 8,
   },
-}), { pureComponent: pureComponentAvailable })(KeyboardShortcutRow);
+}), { pureComponent: pureComponentAvailable() })(KeyboardShortcutRow);
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index ebe73d894c..a8a4e157db 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -117,9 +117,7 @@ const defaultProps = {
   dayAriaLabelFormat: undefined,
 };
 
-const BaseClass = baseClass();
-
-class SingleDatePicker extends BaseClass {
+class SingleDatePicker extends baseClass() {
   constructor(props) {
     super(props);
 
@@ -693,4 +691,4 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     width: 15,
     fill: color.core.grayLighter,
   },
-}), { pureComponent: pureComponentAvailable })(SingleDatePicker);
+}), { pureComponent: pureComponentAvailable() })(SingleDatePicker);
diff --git a/src/components/SingleDatePickerInput.jsx b/src/components/SingleDatePickerInput.jsx
index d0afa206c0..82be6d9c8e 100644
--- a/src/components/SingleDatePickerInput.jsx
+++ b/src/components/SingleDatePickerInput.jsx
@@ -311,4 +311,4 @@ export default withStyles(({ reactDates: { border, color } }) => ({
     width: 14,
     verticalAlign: 'middle',
   },
-}), { pureComponent: pureComponentAvailable })(SingleDatePickerInput);
+}), { pureComponent: pureComponentAvailable() })(SingleDatePickerInput);
diff --git a/src/utils/baseClass.js b/src/utils/baseClass.js
index 7acddbb977..5d63d7bcef 100644
--- a/src/utils/baseClass.js
+++ b/src/utils/baseClass.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import shallowCompare from 'react-addons-shallow-compare';
 
-export const pureComponentAvailable = typeof React.PureComponent !== 'undefined';
+export const pureComponentAvailable = () => typeof React.PureComponent !== 'undefined';
 
-export default function baseClass(pureComponent = pureComponentAvailable) {
+export default function baseClass(pureComponent = pureComponentAvailable()) {
   if (pureComponent) {
     if (!React.PureComponent) {
       throw new ReferenceError('withStyles() pureComponent option requires React 15.3.0 or later');

From 65cf032c54b1d9a632077e5bea9c9b6bcacce575 Mon Sep 17 00:00:00 2001
From: Joseph Cota <jcota@getaroom.com>
Date: Thu, 30 Aug 2018 14:04:18 -0500
Subject: [PATCH 255/618] Adding JSDOC to allow eslint to properly apply the
 react component linters.

---
 src/components/CalendarDay.jsx                    | 1 +
 src/components/CalendarMonth.jsx                  | 1 +
 src/components/CalendarMonthGrid.jsx              | 1 +
 src/components/CustomizableCalendarDay.jsx        | 1 +
 src/components/DateInput.jsx                      | 1 +
 src/components/DateRangePicker.jsx                | 1 +
 src/components/DateRangePickerInputController.jsx | 1 +
 src/components/DayPicker.jsx                      | 1 +
 src/components/DayPickerKeyboardShortcuts.jsx     | 1 +
 src/components/DayPickerRangeController.jsx       | 1 +
 src/components/DayPickerSingleDateController.jsx  | 1 +
 src/components/SingleDatePicker.jsx               | 1 +
 12 files changed, 12 insertions(+)

diff --git a/src/components/CalendarDay.jsx b/src/components/CalendarDay.jsx
index f6b5744a35..60ed3dece4 100644
--- a/src/components/CalendarDay.jsx
+++ b/src/components/CalendarDay.jsx
@@ -48,6 +48,7 @@ const defaultProps = {
   phrases: CalendarDayPhrases,
 };
 
+/** @extends React.Component */
 class CalendarDay extends baseClass() {
   constructor(...args) {
     super(...args);
diff --git a/src/components/CalendarMonth.jsx b/src/components/CalendarMonth.jsx
index 987ec499b2..1b4bb80e26 100644
--- a/src/components/CalendarMonth.jsx
+++ b/src/components/CalendarMonth.jsx
@@ -90,6 +90,7 @@ const defaultProps = {
   verticalBorderSpacing: undefined,
 };
 
+/** @extends React.Component */
 class CalendarMonth extends baseClass() {
   constructor(props) {
     super(props);
diff --git a/src/components/CalendarMonthGrid.jsx b/src/components/CalendarMonthGrid.jsx
index d5910aa861..a2cf4c123a 100644
--- a/src/components/CalendarMonthGrid.jsx
+++ b/src/components/CalendarMonthGrid.jsx
@@ -114,6 +114,7 @@ function getMonths(initialMonth, numberOfMonths, withoutTransitionMonths) {
   return months;
 }
 
+/** @extends React.Component */
 class CalendarMonthGrid extends baseClass() {
   constructor(props) {
     super(props);
diff --git a/src/components/CustomizableCalendarDay.jsx b/src/components/CustomizableCalendarDay.jsx
index 2609cbbeff..0500825f8c 100644
--- a/src/components/CustomizableCalendarDay.jsx
+++ b/src/components/CustomizableCalendarDay.jsx
@@ -212,6 +212,7 @@ const defaultProps = {
   phrases: CalendarDayPhrases,
 };
 
+/** @extends React.Component */
 class CustomizableCalendarDay extends baseClass() {
   constructor(...args) {
     super(...args);
diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
index 9683f0afb5..59e088d176 100644
--- a/src/components/DateInput.jsx
+++ b/src/components/DateInput.jsx
@@ -78,6 +78,7 @@ const defaultProps = {
   isFocused: false,
 };
 
+/** @extends React.Component */
 class DateInput extends baseClass() {
   constructor(props) {
     super(props);
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 1fdf152e85..4f1b4ad494 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -118,6 +118,7 @@ const defaultProps = {
   dayAriaLabelFormat: undefined,
 };
 
+/** @extends React.Component */
 class DateRangePicker extends baseClass() {
   constructor(props) {
     super(props);
diff --git a/src/components/DateRangePickerInputController.jsx b/src/components/DateRangePickerInputController.jsx
index b6cf859af1..ab1d5558da 100644
--- a/src/components/DateRangePickerInputController.jsx
+++ b/src/components/DateRangePickerInputController.jsx
@@ -133,6 +133,7 @@ const defaultProps = {
   isRTL: false,
 };
 
+/** @extends React.Component */
 export default class DateRangePickerInputController extends baseClass() {
   constructor(props) {
     super(props);
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 94cfc2645f..10d869b253 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -163,6 +163,7 @@ export const defaultProps = {
   dayAriaLabelFormat: undefined,
 };
 
+/** @extends React.Component */
 class DayPicker extends baseClass() {
   constructor(props) {
     super(props);
diff --git a/src/components/DayPickerKeyboardShortcuts.jsx b/src/components/DayPickerKeyboardShortcuts.jsx
index f0bdb720fd..e9742841b9 100644
--- a/src/components/DayPickerKeyboardShortcuts.jsx
+++ b/src/components/DayPickerKeyboardShortcuts.jsx
@@ -73,6 +73,7 @@ function getKeyboardShortcuts(phrases) {
   ];
 }
 
+/** @extends React.Component */
 class DayPickerKeyboardShortcuts extends baseClass() {
   constructor(...args) {
     super(...args);
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 653a1e1c4d..81962d6fdb 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -174,6 +174,7 @@ const getChooseAvailableDatePhrase = (phrases, focusedInput) => {
   return phrases.chooseAvailableDate;
 };
 
+/** @extends React.Component */
 export default class DayPickerRangeController extends baseClass() {
   constructor(props) {
     super(props);
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index b675faa514..b0cf01a13a 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -143,6 +143,7 @@ const defaultProps = {
   isRTL: false,
 };
 
+/** @extends React.Component */
 export default class DayPickerSingleDateController extends baseClass() {
   constructor(props) {
     super(props);
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index a8a4e157db..7812959a2c 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -117,6 +117,7 @@ const defaultProps = {
   dayAriaLabelFormat: undefined,
 };
 
+/** @extends React.Component */
 class SingleDatePicker extends baseClass() {
   constructor(props) {
     super(props);

From a2fc9ac35066dcee77d798307f18c67e7d5e8178 Mon Sep 17 00:00:00 2001
From: Joseph Cota <jcota@getaroom.com>
Date: Thu, 30 Aug 2018 16:10:48 -0500
Subject: [PATCH 256/618] Now both `BaseClass` and `pureComponentAvailable` are
 set at module load, instead of using a function.

---
 src/components/CalendarDay.jsx                    | 6 +++---
 src/components/CalendarMonth.jsx                  | 6 +++---
 src/components/CalendarMonthGrid.jsx              | 6 +++---
 src/components/CustomizableCalendarDay.jsx        | 6 +++---
 src/components/DateInput.jsx                      | 6 +++---
 src/components/DateRangePicker.jsx                | 6 +++---
 src/components/DateRangePickerInput.jsx           | 2 +-
 src/components/DateRangePickerInputController.jsx | 4 ++--
 src/components/DayPicker.jsx                      | 6 +++---
 src/components/DayPickerKeyboardShortcuts.jsx     | 6 +++---
 src/components/DayPickerNavigation.jsx            | 2 +-
 src/components/DayPickerRangeController.jsx       | 4 ++--
 src/components/DayPickerSingleDateController.jsx  | 4 ++--
 src/components/KeyboardShortcutRow.jsx            | 2 +-
 src/components/SingleDatePicker.jsx               | 6 +++---
 src/components/SingleDatePickerInput.jsx          | 2 +-
 src/utils/baseClass.js                            | 8 +++++---
 17 files changed, 42 insertions(+), 40 deletions(-)

diff --git a/src/components/CalendarDay.jsx b/src/components/CalendarDay.jsx
index 60ed3dece4..9751093945 100644
--- a/src/components/CalendarDay.jsx
+++ b/src/components/CalendarDay.jsx
@@ -9,7 +9,7 @@ import { CalendarDayPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
 import getCalendarDaySettings from '../utils/getCalendarDaySettings';
 import ModifiersShape from '../shapes/ModifiersShape';
-import baseClass, { pureComponentAvailable } from '../utils/baseClass';
+import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import { DAY_SIZE } from '../constants';
 
@@ -49,7 +49,7 @@ const defaultProps = {
 };
 
 /** @extends React.Component */
-class CalendarDay extends baseClass() {
+class CalendarDay extends BaseClass {
   constructor(...args) {
     super(...args);
 
@@ -336,4 +336,4 @@ export default withStyles(({ reactDates: { color, font } }) => ({
   CalendarDay__today: {},
   CalendarDay__firstDayOfWeek: {},
   CalendarDay__lastDayOfWeek: {},
-}), { pureComponent: pureComponentAvailable() })(CalendarDay);
+}), { pureComponent: pureComponentAvailable })(CalendarDay);
diff --git a/src/components/CalendarMonth.jsx b/src/components/CalendarMonth.jsx
index 1b4bb80e26..d41db7aaea 100644
--- a/src/components/CalendarMonth.jsx
+++ b/src/components/CalendarMonth.jsx
@@ -21,7 +21,7 @@ import toISODateString from '../utils/toISODateString';
 import ModifiersShape from '../shapes/ModifiersShape';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
-import baseClass, { pureComponentAvailable } from '../utils/baseClass';
+import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import {
   HORIZONTAL_ORIENTATION,
@@ -91,7 +91,7 @@ const defaultProps = {
 };
 
 /** @extends React.Component */
-class CalendarMonth extends baseClass() {
+class CalendarMonth extends BaseClass {
   constructor(props) {
     super(props);
 
@@ -274,4 +274,4 @@ export default withStyles(({ reactDates: { color, font, spacing } }) => ({
     paddingTop: 12,
     paddingBottom: 7,
   },
-}), { pureComponent: pureComponentAvailable() })(CalendarMonth);
+}), { pureComponent: pureComponentAvailable })(CalendarMonth);
diff --git a/src/components/CalendarMonthGrid.jsx b/src/components/CalendarMonthGrid.jsx
index a2cf4c123a..363a99755f 100644
--- a/src/components/CalendarMonthGrid.jsx
+++ b/src/components/CalendarMonthGrid.jsx
@@ -21,7 +21,7 @@ import isNextMonth from '../utils/isNextMonth';
 import ModifiersShape from '../shapes/ModifiersShape';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
-import baseClass, { pureComponentAvailable } from '../utils/baseClass';
+import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import {
   HORIZONTAL_ORIENTATION,
@@ -115,7 +115,7 @@ function getMonths(initialMonth, numberOfMonths, withoutTransitionMonths) {
 }
 
 /** @extends React.Component */
-class CalendarMonthGrid extends baseClass() {
+class CalendarMonthGrid extends BaseClass {
   constructor(props) {
     super(props);
     const withoutTransitionMonths = props.orientation === VERTICAL_SCROLLABLE;
@@ -422,4 +422,4 @@ export default withStyles(({
   CalendarMonthGrid_month__hidden: {
     visibility: 'hidden',
   },
-}), { pureComponent: pureComponentAvailable() })(CalendarMonthGrid);
+}), { pureComponent: pureComponentAvailable })(CalendarMonthGrid);
diff --git a/src/components/CustomizableCalendarDay.jsx b/src/components/CustomizableCalendarDay.jsx
index 0500825f8c..f90aae1035 100644
--- a/src/components/CustomizableCalendarDay.jsx
+++ b/src/components/CustomizableCalendarDay.jsx
@@ -8,7 +8,7 @@ import moment from 'moment';
 import { CalendarDayPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
 import getCalendarDaySettings from '../utils/getCalendarDaySettings';
-import baseClass, { pureComponentAvailable } from '../utils/baseClass';
+import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import { DAY_SIZE } from '../constants';
 import DefaultTheme from '../theme/DefaultTheme';
@@ -213,7 +213,7 @@ const defaultProps = {
 };
 
 /** @extends React.Component */
-class CustomizableCalendarDay extends baseClass() {
+class CustomizableCalendarDay extends BaseClass {
   constructor(...args) {
     super(...args);
 
@@ -366,4 +366,4 @@ export default withStyles(({ reactDates: { font } }) => ({
   CalendarDay__defaultCursor: {
     cursor: 'default',
   },
-}), { pureComponent: pureComponentAvailable() })(CustomizableCalendarDay);
+}), { pureComponent: pureComponentAvailable })(CustomizableCalendarDay);
diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
index 59e088d176..8c14d8b58c 100644
--- a/src/components/DateInput.jsx
+++ b/src/components/DateInput.jsx
@@ -7,7 +7,7 @@ import isTouchDevice from 'is-touch-device';
 
 import getInputHeight from '../utils/getInputHeight';
 import openDirectionShape from '../shapes/OpenDirectionShape';
-import baseClass, { pureComponentAvailable } from '../utils/baseClass';
+import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 import {
   OPEN_DOWN,
   OPEN_UP,
@@ -79,7 +79,7 @@ const defaultProps = {
 };
 
 /** @extends React.Component */
-class DateInput extends baseClass() {
+class DateInput extends BaseClass {
   constructor(props) {
     super(props);
 
@@ -381,4 +381,4 @@ export default withStyles(({
     stroke: color.core.border,
     fill: 'transparent',
   },
-}), { pureComponent: pureComponentAvailable() })(DateInput);
+}), { pureComponent: pureComponentAvailable })(DateInput);
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 4f1b4ad494..c87e72c73d 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -15,7 +15,7 @@ import getDetachedContainerStyles from '../utils/getDetachedContainerStyles';
 import getInputHeight from '../utils/getInputHeight';
 import isInclusivelyAfterDay from '../utils/isInclusivelyAfterDay';
 import disableScroll from '../utils/disableScroll';
-import baseClass, { pureComponentAvailable } from '../utils/baseClass';
+import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import DateRangePickerInputController from './DateRangePickerInputController';
 import DayPickerRangeController from './DayPickerRangeController';
@@ -119,7 +119,7 @@ const defaultProps = {
 };
 
 /** @extends React.Component */
-class DateRangePicker extends baseClass() {
+class DateRangePicker extends BaseClass {
   constructor(props) {
     super(props);
     this.state = {
@@ -671,4 +671,4 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     width: 15,
     fill: color.core.grayLighter,
   },
-}), { pureComponent: pureComponentAvailable() })(DateRangePicker);
+}), { pureComponent: pureComponentAvailable })(DateRangePicker);
diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index 3e7a978be0..a2c01268c1 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -397,4 +397,4 @@ export default withStyles(({ reactDates: { border, color, sizing } }) => ({
     width: 14,
     verticalAlign: 'middle',
   },
-}), { pureComponent: pureComponentAvailable() })(DateRangePickerInput);
+}), { pureComponent: pureComponentAvailable })(DateRangePickerInput);
diff --git a/src/components/DateRangePickerInputController.jsx b/src/components/DateRangePickerInputController.jsx
index ab1d5558da..e248838459 100644
--- a/src/components/DateRangePickerInputController.jsx
+++ b/src/components/DateRangePickerInputController.jsx
@@ -20,7 +20,7 @@ import toLocalizedDateString from '../utils/toLocalizedDateString';
 import isInclusivelyAfterDay from '../utils/isInclusivelyAfterDay';
 import isBeforeDay from '../utils/isBeforeDay';
 
-import baseClass from '../utils/baseClass';
+import BaseClass from '../utils/baseClass';
 
 import {
   START_DATE,
@@ -134,7 +134,7 @@ const defaultProps = {
 };
 
 /** @extends React.Component */
-export default class DateRangePickerInputController extends baseClass() {
+export default class DateRangePickerInputController extends BaseClass {
   constructor(props) {
     super(props);
 
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 10d869b253..2ddc92a300 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -29,7 +29,7 @@ import ModifiersShape from '../shapes/ModifiersShape';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
 import CalendarInfoPositionShape from '../shapes/CalendarInfoPositionShape';
-import baseClass, { pureComponentAvailable } from '../utils/baseClass';
+import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import {
   HORIZONTAL_ORIENTATION,
@@ -164,7 +164,7 @@ export const defaultProps = {
 };
 
 /** @extends React.Component */
-class DayPicker extends baseClass() {
+class DayPicker extends BaseClass {
   constructor(props) {
     super(props);
 
@@ -1238,4 +1238,4 @@ export default withStyles(({
       },
     }),
   },
-}), { pureComponent: pureComponentAvailable() })(DayPicker);
+}), { pureComponent: pureComponentAvailable })(DayPicker);
diff --git a/src/components/DayPickerKeyboardShortcuts.jsx b/src/components/DayPickerKeyboardShortcuts.jsx
index e9742841b9..2ddad15352 100644
--- a/src/components/DayPickerKeyboardShortcuts.jsx
+++ b/src/components/DayPickerKeyboardShortcuts.jsx
@@ -5,7 +5,7 @@ import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 
 import { DayPickerKeyboardShortcutsPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
-import baseClass, { pureComponentAvailable } from '../utils/baseClass';
+import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import KeyboardShortcutRow from './KeyboardShortcutRow';
 import CloseButton from './CloseButton';
@@ -74,7 +74,7 @@ function getKeyboardShortcuts(phrases) {
 }
 
 /** @extends React.Component */
-class DayPickerKeyboardShortcuts extends baseClass() {
+class DayPickerKeyboardShortcuts extends BaseClass {
   constructor(...args) {
     super(...args);
 
@@ -396,4 +396,4 @@ export default withStyles(({ reactDates: { color, font, zIndex } }) => ({
       fill: color.core.grayLight,
     },
   },
-}), { pureComponent: pureComponentAvailable() })(DayPickerKeyboardShortcuts);
+}), { pureComponent: pureComponentAvailable })(DayPickerKeyboardShortcuts);
diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index 5d98abbf8c..9183337bd1 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -303,4 +303,4 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     fill: color.text,
     display: 'block',
   },
-}), { pureComponent: pureComponentAvailable() })(DayPickerNavigation);
+}), { pureComponent: pureComponentAvailable })(DayPickerNavigation);
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 81962d6fdb..7bfe6d9582 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -28,7 +28,7 @@ import FocusedInputShape from '../shapes/FocusedInputShape';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
 import CalendarInfoPositionShape from '../shapes/CalendarInfoPositionShape';
-import baseClass from '../utils/baseClass';
+import BaseClass from '../utils/baseClass';
 
 import {
   START_DATE,
@@ -175,7 +175,7 @@ const getChooseAvailableDatePhrase = (phrases, focusedInput) => {
 };
 
 /** @extends React.Component */
-export default class DayPickerRangeController extends baseClass() {
+export default class DayPickerRangeController extends BaseClass {
   constructor(props) {
     super(props);
 
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index b0cf01a13a..120d5d229c 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -21,7 +21,7 @@ import toISOMonthString from '../utils/toISOMonthString';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
 import CalendarInfoPositionShape from '../shapes/CalendarInfoPositionShape';
-import baseClass from '../utils/baseClass';
+import BaseClass from '../utils/baseClass';
 
 import {
   HORIZONTAL_ORIENTATION,
@@ -144,7 +144,7 @@ const defaultProps = {
 };
 
 /** @extends React.Component */
-export default class DayPickerSingleDateController extends baseClass() {
+export default class DayPickerSingleDateController extends BaseClass {
   constructor(props) {
     super(props);
 
diff --git a/src/components/KeyboardShortcutRow.jsx b/src/components/KeyboardShortcutRow.jsx
index aa814feace..eb87b3320d 100644
--- a/src/components/KeyboardShortcutRow.jsx
+++ b/src/components/KeyboardShortcutRow.jsx
@@ -90,4 +90,4 @@ export default withStyles(({ reactDates: { color } }) => ({
     wordBreak: 'break-word',
     marginLeft: 8,
   },
-}), { pureComponent: pureComponentAvailable() })(KeyboardShortcutRow);
+}), { pureComponent: pureComponentAvailable })(KeyboardShortcutRow);
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index 7812959a2c..b6f45f9f47 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -17,7 +17,7 @@ import getDetachedContainerStyles from '../utils/getDetachedContainerStyles';
 import getInputHeight from '../utils/getInputHeight';
 import isInclusivelyAfterDay from '../utils/isInclusivelyAfterDay';
 import disableScroll from '../utils/disableScroll';
-import baseClass, { pureComponentAvailable } from '../utils/baseClass';
+import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import SingleDatePickerInput from './SingleDatePickerInput';
 import DayPickerSingleDateController from './DayPickerSingleDateController';
@@ -118,7 +118,7 @@ const defaultProps = {
 };
 
 /** @extends React.Component */
-class SingleDatePicker extends baseClass() {
+class SingleDatePicker extends BaseClass {
   constructor(props) {
     super(props);
 
@@ -692,4 +692,4 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     width: 15,
     fill: color.core.grayLighter,
   },
-}), { pureComponent: pureComponentAvailable() })(SingleDatePicker);
+}), { pureComponent: pureComponentAvailable })(SingleDatePicker);
diff --git a/src/components/SingleDatePickerInput.jsx b/src/components/SingleDatePickerInput.jsx
index 82be6d9c8e..d0afa206c0 100644
--- a/src/components/SingleDatePickerInput.jsx
+++ b/src/components/SingleDatePickerInput.jsx
@@ -311,4 +311,4 @@ export default withStyles(({ reactDates: { border, color } }) => ({
     width: 14,
     verticalAlign: 'middle',
   },
-}), { pureComponent: pureComponentAvailable() })(SingleDatePickerInput);
+}), { pureComponent: pureComponentAvailable })(SingleDatePickerInput);
diff --git a/src/utils/baseClass.js b/src/utils/baseClass.js
index 5d63d7bcef..106919a5a2 100644
--- a/src/utils/baseClass.js
+++ b/src/utils/baseClass.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import shallowCompare from 'react-addons-shallow-compare';
 
-export const pureComponentAvailable = () => typeof React.PureComponent !== 'undefined';
+export const pureComponentAvailable = typeof React.PureComponent !== 'undefined';
 
-export default function baseClass(pureComponent = pureComponentAvailable()) {
+const baseClass = (pureComponent = pureComponentAvailable) => {
   if (pureComponent) {
     if (!React.PureComponent) {
       throw new ReferenceError('withStyles() pureComponent option requires React 15.3.0 or later');
@@ -17,4 +17,6 @@ export default function baseClass(pureComponent = pureComponentAvailable()) {
       return shallowCompare(this, nextProps, nextState);
     }
   };
-}
+};
+
+export default baseClass();

From e230c612d5465e462aac04cfa189f4109ccf3a32 Mon Sep 17 00:00:00 2001
From: Joseph Cota <jcota@getaroom.com>
Date: Fri, 31 Aug 2018 11:16:59 -0500
Subject: [PATCH 257/618] Making requested change

---
 src/utils/baseClass.js | 23 ++++++-----------------
 1 file changed, 6 insertions(+), 17 deletions(-)

diff --git a/src/utils/baseClass.js b/src/utils/baseClass.js
index 106919a5a2..1cb78c4c5c 100644
--- a/src/utils/baseClass.js
+++ b/src/utils/baseClass.js
@@ -1,22 +1,11 @@
 import React from 'react';
 import shallowCompare from 'react-addons-shallow-compare';
 
-export const pureComponentAvailable = typeof React.PureComponent !== 'undefined';
-
-const baseClass = (pureComponent = pureComponentAvailable) => {
-  if (pureComponent) {
-    if (!React.PureComponent) {
-      throw new ReferenceError('withStyles() pureComponent option requires React 15.3.0 or later');
-    }
-
-    return React.PureComponent;
+class BaseClass extends (React.PureComponent || React.Component) {
+  [React.PureComponent || 'shouldComponentUpdate'](nextProps, nextState) {
+    return shallowCompare(this, nextProps, nextState);
   }
+}
 
-  return class BaseClass extends React.Component {
-    shouldComponentUpdate(nextProps, nextState) {
-      return shallowCompare(this, nextProps, nextState);
-    }
-  };
-};
-
-export default baseClass();
+export const pureComponentAvailable = typeof React.PureComponent !== 'undefined';
+export default BaseClass;

From 22c33ab621b019f2717ed8d098aebe8c2761f3ce Mon Sep 17 00:00:00 2001
From: Joseph Cota <jcota@getaroom.com>
Date: Tue, 4 Sep 2018 11:18:47 -0500
Subject: [PATCH 258/618] Updating the readme about overriding base class

---
 README.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/README.md b/README.md
index f4484fd142..baf2a77a28 100644
--- a/README.md
+++ b/README.md
@@ -65,6 +65,14 @@ Create a CSS file with the contents of `require.resolve('react-dates/lib/css/_da
 
 To see this in action, you can check out https://github.com/majapw/react-dates-demo which adds `react-dates` on top of a simple `create-react-app` setup.
 
+#### Overriding Base Class
+By default `react-dates` will use `PureComponent` conditionally if it is available.  However, it is possible to override this setting and use `Component` and `shouldComponentUpdate` instead. It is also possible to override the logic in `build/util/baseClass` if you know that you are using a React version with `PureComponent`.
+  ```javascript
+    import React from 'react';
+    export default React.PureComponent;
+    export const pureComponentAvailable = true;
+  ```
+
 #### Overriding styles
 Right now, the easiest way to tweak `react-dates` to your heart's content is to create another stylesheet to override the default react-dates styles. For example, you could create a file named `react_dates_overrides.css` with the following contents:
 

From 88fc16a21b2afdd51b4dfa6c8831a31cdd9d06c6 Mon Sep 17 00:00:00 2001
From: Joseph Cota <jcota@getaroom.com>
Date: Tue, 4 Sep 2018 17:40:56 -0500
Subject: [PATCH 259/618] couple of small tweaks.

---
 .storybook/config.js   | 2 +-
 src/utils/baseClass.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.storybook/config.js b/.storybook/config.js
index aad08cf18b..84d2cd28e9 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -1,6 +1,6 @@
 import React from 'react';
 if (process.env.NODE_ENV !== 'production') {
-  const {whyDidYouUpdate} = require('why-did-you-update');
+  const { whyDidYouUpdate } = require('why-did-you-update');
   whyDidYouUpdate(React);
 }
 
diff --git a/src/utils/baseClass.js b/src/utils/baseClass.js
index 1cb78c4c5c..4075a02bd2 100644
--- a/src/utils/baseClass.js
+++ b/src/utils/baseClass.js
@@ -2,7 +2,7 @@ import React from 'react';
 import shallowCompare from 'react-addons-shallow-compare';
 
 class BaseClass extends (React.PureComponent || React.Component) {
-  [React.PureComponent || 'shouldComponentUpdate'](nextProps, nextState) {
+  [!React.PureComponent && 'shouldComponentUpdate'](nextProps, nextState) {
     return shallowCompare(this, nextProps, nextState);
   }
 }

From 970eb4298da1cbe7a5a6991e9293fe70f9d0eaf0 Mon Sep 17 00:00:00 2001
From: David <david.arthur.thompson@gmail.com>
Date: Tue, 28 Aug 2018 19:50:06 +0100
Subject: [PATCH 260/618] changing border-styles to minimize border overlapping

---
 src/components/CalendarDay.jsx | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/components/CalendarDay.jsx b/src/components/CalendarDay.jsx
index 9751093945..2f8fc54c80 100644
--- a/src/components/CalendarDay.jsx
+++ b/src/components/CalendarDay.jsx
@@ -185,7 +185,7 @@ export default withStyles(({ reactDates: { color, font } }) => ({
 
     ':hover': {
       background: color.core.borderLight,
-      border: `1px double ${color.core.borderLight}`,
+      border: `1px solid ${color.core.borderLight}`,
       color: 'inherit',
     },
   },
@@ -239,58 +239,62 @@ export default withStyles(({ reactDates: { color, font } }) => ({
 
   CalendarDay__selected_span: {
     background: color.selectedSpan.backgroundColor,
-    border: `1px solid ${color.selectedSpan.borderColor}`,
+    border: `1px double ${color.selectedSpan.borderColor}`,
     color: color.selectedSpan.color,
 
     ':hover': {
       background: color.selectedSpan.backgroundColor_hover,
-      border: `1px solid ${color.selectedSpan.borderColor}`,
+      border: `1px double ${color.selectedSpan.borderColor}`,
       color: color.selectedSpan.color_active,
     },
 
     ':active': {
       background: color.selectedSpan.backgroundColor_active,
-      border: `1px solid ${color.selectedSpan.borderColor}`,
+      border: `1px double ${color.selectedSpan.borderColor}`,
       color: color.selectedSpan.color_active,
     },
   },
 
   CalendarDay__last_in_range: {
-    borderRight: color.core.primary,
+    borderStyle: 'solid',
+
+    ':hover': {
+      borderStyle: 'solid',
+    },
   },
 
   CalendarDay__selected: {
     background: color.selected.backgroundColor,
-    border: `1px solid ${color.selected.borderColor}`,
+    border: `1px double ${color.selected.borderColor}`,
     color: color.selected.color,
 
     ':hover': {
       background: color.selected.backgroundColor_hover,
-      border: `1px solid ${color.selected.borderColor}`,
+      border: `1px double ${color.selected.borderColor}`,
       color: color.selected.color_active,
     },
 
     ':active': {
       background: color.selected.backgroundColor_active,
-      border: `1px solid ${color.selected.borderColor}`,
+      border: `1px double ${color.selected.borderColor}`,
       color: color.selected.color_active,
     },
   },
 
   CalendarDay__hovered_span: {
     background: color.hoveredSpan.backgroundColor,
-    border: `1px solid ${color.hoveredSpan.borderColor}`,
+    border: `1px double ${color.hoveredSpan.borderColor}`,
     color: color.hoveredSpan.color,
 
     ':hover': {
       background: color.hoveredSpan.backgroundColor_hover,
-      border: `1px solid ${color.hoveredSpan.borderColor}`,
+      border: `1px double ${color.hoveredSpan.borderColor}`,
       color: color.hoveredSpan.color_active,
     },
 
     ':active': {
       background: color.hoveredSpan.backgroundColor_active,
-      border: `1px solid ${color.hoveredSpan.borderColor}`,
+      border: `1px double ${color.hoveredSpan.borderColor}`,
       color: color.hoveredSpan.color_active,
     },
   },

From b31a50ca17f53a9acf6b7d94f655a5b37ed549d5 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Tue, 4 Sep 2018 16:58:30 -0700
Subject: [PATCH 261/618] Modify styles for CustomizableCalendarDay as well

---
 src/components/CustomizableCalendarDay.jsx | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/CustomizableCalendarDay.jsx b/src/components/CustomizableCalendarDay.jsx
index f90aae1035..ee1a613d3a 100644
--- a/src/components/CustomizableCalendarDay.jsx
+++ b/src/components/CustomizableCalendarDay.jsx
@@ -81,7 +81,7 @@ export const defaultStyles = {
 
   hover: {
     background: color.core.borderLight,
-    border: `1px double ${color.core.borderLight}`,
+    border: `1px solid ${color.core.borderLight}`,
     color: 'inherit',
   },
 };
@@ -139,40 +139,44 @@ export const blockedOutOfRangeStyles = {
 
 export const hoveredSpanStyles = {
   background: color.hoveredSpan.backgroundColor,
-  border: `1px solid ${color.hoveredSpan.borderColor}`,
+  border: `1px double ${color.hoveredSpan.borderColor}`,
   color: color.hoveredSpan.color,
 
   hover: {
     background: color.hoveredSpan.backgroundColor_hover,
-    border: `1px solid ${color.hoveredSpan.borderColor}`,
+    border: `1px double ${color.hoveredSpan.borderColor}`,
     color: color.hoveredSpan.color_active,
   },
 };
 
 export const selectedSpanStyles = {
   background: color.selectedSpan.backgroundColor,
-  border: `1px solid ${color.selectedSpan.borderColor}`,
+  border: `1px double ${color.selectedSpan.borderColor}`,
   color: color.selectedSpan.color,
 
   hover: {
     background: color.selectedSpan.backgroundColor_hover,
-    border: `1px solid ${color.selectedSpan.borderColor}`,
+    border: `1px double ${color.selectedSpan.borderColor}`,
     color: color.selectedSpan.color_active,
   },
 };
 
 export const lastInRangeStyles = {
-  borderRight: color.core.primary,
+  borderStyle: 'solid',
+
+  hover: {
+    borderStyle: 'solid',
+  },
 };
 
 export const selectedStyles = {
   background: color.selected.backgroundColor,
-  border: `1px solid ${color.selected.borderColor}`,
+  border: `1px double ${color.selected.borderColor}`,
   color: color.selected.color,
 
   hover: {
     background: color.selected.backgroundColor_hover,
-    border: `1px solid ${color.selected.borderColor}`,
+    border: `1px double ${color.selected.borderColor}`,
     color: color.selected.color_active,
   },
 };

From d136c69102d6bb4f6afe4e3d430856a18cd2a735 Mon Sep 17 00:00:00 2001
From: dumblole <move2234@gmail.com>
Date: Wed, 5 Sep 2018 18:38:24 -0400
Subject: [PATCH 262/618] reverted changes added changes without the
 reformatting

---
 README.md | 35 ++++++++++++++++++++++++-----------
 1 file changed, 24 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index baf2a77a28..c0c89f27cd 100644
--- a/README.md
+++ b/README.md
@@ -74,26 +74,39 @@ By default `react-dates` will use `PureComponent` conditionally if it is availab
   ```
 
 #### Overriding styles
-Right now, the easiest way to tweak `react-dates` to your heart's content is to create another stylesheet to override the default react-dates styles. For example, you could create a file named `react_dates_overrides.css` with the following contents:
+Right now, the easiest way to tweak `react-dates` to your heart's content is to create another stylesheet to override the default react-dates styles. For example, you could create a file named `react_dates_overrides.css` with the following contents (Make sure when you import said file to your `app.js`, you import it after the `react-dates` styles):
 
 ```css
-.CalendarDay__highlighted_calendar {
-  background: #82E0AA;
-  color: #186A3B;
+// NOTE: the order of these styles DO matter
+
+// Will edit everything selected including everything between a range of dates
+.CalendarDay__selected_span {
+  background: #82e0aa; //background
+  color: white; //text
+  border: 1px solid $light-red; //defualt styles include a border
+}
+
+// Will edit selected date or the endpoints of a range of dates
+.CalendarDay__selected {
+  background: $dark-red;
+  color: white;
 }
 
-.CalendarDay__highlighted_calendar:hover {
-  background: #58D68D;
-  color: #186A3B;
+// Will edit when hovered over. _span style also has this property
+.CalendarDay__selected:hover {
+  background: orange;
+  color: white;
 }
 
-.CalendarDay__highlighted_calendar:active {
-  background: #58D68D;
-  color: #186A3B;
+// Will edit when the second date (end date) in a range of dates
+// is not yet selected. Edits the dates between your mouse and said date
+.CalendarDay__hovered_span:hover,
+.CalendarDay__hovered_span {
+  background: brown;
 }
 ```
 
-This would override the background and text colors applied to highlighted calendar days. You can use this method with the default set-up to override any aspect of the calendar to have it better fit to your particular needs.
+This would override the background and text colors applied to highlighted calendar days. You can use this method with the default set-up to override any aspect of the calendar to have it better fit to your particular needs. If there are any styles that you need that aren't listed here, you can always check the source css of each element.
 
 ### Make some awesome datepickers
 

From dcf8f8d44ef1adb52d6de90d0b9741d729baa834 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Wed, 5 Sep 2018 15:44:24 -0700
Subject: [PATCH 263/618] Only blur the activeElement after the month
 transition if available.

---
 src/components/DayPicker.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 2ddc92a300..04694b38d1 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -727,6 +727,7 @@ class DayPicker extends BaseClass {
           activeElement
           && activeElement !== document.body
           && this.container.contains(activeElement)
+          && activeElement.blur
         ) {
           activeElement.blur();
         }

From 486a0988a9e75660bf2ff3a94cdb1f2c2ea34ec0 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Wed, 5 Sep 2018 16:39:50 -0700
Subject: [PATCH 264/618] Version 18.0.0

---
 CHANGELOG.md | 8 ++++++++
 package.json | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e9b752327e..a86e448292 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # Change Log
 
+<!-- - []  ([#](https://github.com/airbnb/react-dates/pull/)) -->
+
+## 18.0.0
+- [fix] Conditionally use `PureComponent` instead of `Component` ([#1335](https://github.com/airbnb/react-dates/pull/1335))
+- [breaking] Remove propTypes in production ([#1322](https://github.com/airbnb/react-dates/pull/1322))
+- [fix] Change border-styles to minimise overlap ([#1328](https://github.com/airbnb/react-dates/pull/1328))
+- [fix] Only blur the `activeElement` when available ([#1345](https://github.com/airbnb/react-dates/pull/1345))
+
 ## 17.2.0
 - [fix] Add modifiers for next months in the vertical scrollable datepickers ([#1293](https://github.com/airbnb/react-dates/pull/1293))
 - [fix] Fix cursor jumping to the end of the controlled input when typing ([#1287](https://github.com/airbnb/react-dates/pull/1287))
diff --git a/package.json b/package.json
index 5e126ec79b..0d5916b1a0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "17.2.0",
+  "version": "18.0.0",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 14758c4f5f57ac05f4440c389a9b368c54783c6e Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Thu, 6 Sep 2018 12:47:38 -0700
Subject: [PATCH 265/618] Center vertical month navigation

---
 src/components/DayPickerNavigation.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index 9183337bd1..2bd2e5a38c 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -275,6 +275,7 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     boxShadow: '0 0 5px 2px rgba(0, 0, 0, 0.1)',
     position: 'relative',
     display: 'inline-block',
+    textAlign: 'center',
     height: '100%',
     width: '50%',
   },
@@ -301,6 +302,5 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     height: 42,
     width: 42,
     fill: color.text,
-    display: 'block',
   },
 }), { pureComponent: pureComponentAvailable })(DayPickerNavigation);

From 6c7cbdec2cc82452b0a0f7f70d7efeeb22bc8847 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Fri, 7 Sep 2018 09:00:53 -0700
Subject: [PATCH 266/618] [Fix] react-with-styles v3 requires
 react-with-direction as a peer dep; this provides it but forwards the peer
 dep requirement

Fixes #1348.
---
 package.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b1cf995269..322cc48f9b 100644
--- a/package.json
+++ b/package.json
@@ -120,13 +120,15 @@
     "react-addons-shallow-compare": "^15.6.2",
     "react-moment-proptypes": "^1.5.0",
     "react-portal": "^4.1.2",
+    "react-with-direction": "^1.3.0",
     "react-with-styles": "^3.1.0",
     "react-with-styles-interface-css": "^4.0.1"
   },
   "peerDependencies": {
     "moment": "^2.18.1",
     "react": "^0.14 || ^15.5.4 || ^16.1.1",
-    "react-dom": "^0.14 || ^15.5.4 || ^16.1.1"
+    "react-dom": "^0.14 || ^15.5.4 || ^16.1.1",
+    "react-with-direction": "^1.3.0"
   },
   "greenkeeper": {
     "ignore": [

From e61d74cf71762ca9c45c1160b6256d7b8c712084 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Fri, 7 Sep 2018 09:00:53 -0700
Subject: [PATCH 267/618] [Fix] react-with-styles v3 requires
 react-with-direction as a peer dep; this provides it but forwards the peer
 dep requirement

Fixes #1348.
---
 package.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 0d5916b1a0..e67df95cd5 100644
--- a/package.json
+++ b/package.json
@@ -122,13 +122,15 @@
     "react-moment-proptypes": "^1.6.0",
     "react-outside-click-handler": "^1.2.0",
     "react-portal": "^4.1.5",
+    "react-with-direction": "^1.3.0",
     "react-with-styles": "^3.2.0",
     "react-with-styles-interface-css": "^4.0.2"
   },
   "peerDependencies": {
     "moment": "^2.18.1",
     "react": "^0.14 || ^15.5.4 || ^16.1.1",
-    "react-dom": "^0.14 || ^15.5.4 || ^16.1.1"
+    "react-dom": "^0.14 || ^15.5.4 || ^16.1.1",
+    "react-with-direction": "^1.3.0"
   },
   "greenkeeper": {
     "ignore": [

From 9f20a0ed496a893e4e643206182bd1ef6c017eea Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Fri, 7 Sep 2018 09:08:37 -0700
Subject: [PATCH 268/618] v16.7.1

---
 .travis.yml  | 7 +++++--
 CHANGELOG.md | 3 +++
 package.json | 2 +-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index b9e1b8ac5a..f515349352 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -14,6 +14,7 @@ before_script:
   - 'if [ -n "${KARMA-}" ]; then sleep 3; fi'
 script:
   - 'if [ -n "${LINT-}" ]; then npm run lint ; fi'
+  - 'if [ -n "${BUILD-}" ]; then npm run lint ; fi'
   - 'if [ "${TEST-}" = true ]; then npm run tests-only ; fi'
   - 'if [ -n "${KARMA-}" ]; then npm run tests-karma ; fi'
   - 'if [ -n "${COVERAGE-}" ] && [ "${TRAVIS_BRANCH-}" = "master" ]; then npm run cover; cat ./coverage/lcov.info | ./node_modules/.bin/coveralls ; fi'
@@ -28,12 +29,14 @@ sudo: false
 matrix:
   fast_finish: true
   include:
+    - node_js: "lts/*"
+      env: LINT=true TEST=false
+    - node_js: "lts/*"
+      env: BUILD=true TEST=false
     - node_js: "lts/*"
       env: COVERAGE=true TEST=false
     - node_js: "lts/*"
       env: KARMA=true TEST=false
-    - node_js: "lts/*"
-      env: LINT=true TEST=false
   allow_failures:
     - node_js: "9"
     - node_js: "7"
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 43bd69488a..696d914d97 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # Change Log
 
+## 16.7.1
+- [fix] react-with-styles v3 requires react-with-direction as a peer dep; this provides it but forwards the peer dep requirement ([#1348](https://github.com/airbnb/react-dates/issues/1348))
+
 ## 16.7.0
 - [fix] Force border-radius to be 0 on the inputs ([#1157](https://github.com/airbnb/react-dates/pull/1157))
 - [fix] Clear previous min nights modifiers, not current ([#994](https://github.com/airbnb/react-dates/pull/994))
diff --git a/package.json b/package.json
index 322cc48f9b..58af576334 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "16.7.0",
+  "version": "16.7.1",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 1f0f0839cf5cd655cf55ffecc35efb0c4b24a6d0 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Fri, 7 Sep 2018 09:21:58 -0700
Subject: [PATCH 269/618] [meta] make postpublish skip gh-pages publishing
 unless the tag is "latest"

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e67df95cd5..dfb2dd604a 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
     "preversion": "npm run test && npm run check-changelog && npm run check-only-changelog-changed",
     "postversion": "git commit package.json CHANGELOG.md -m \"Version $npm_package_version\" && npm run tag && git push && git push --tags && npm publish --registry=https://registry.npmjs.org/",
     "prepublish": "in-publish && safe-publish-latest && npm run build || not-in-publish",
-    "postpublish": "npm run gh-pages",
+    "postpublish": "[ \"${npm_config_tag:-latest}\" != latest ] || npm run gh-pages",
     "check-changelog": "expr $(git status --porcelain 2>/dev/null| grep \"^\\s*M.*CHANGELOG.md\" | wc -l) >/dev/null || (echo 'Please edit CHANGELOG.md' && exit 1)",
     "check-only-changelog-changed": "(expr $(git status --porcelain 2>/dev/null| grep -v \"CHANGELOG.md\" | wc -l) >/dev/null && echo 'Only CHANGELOG.md may have uncommitted changes' && exit 1) || exit 0"
   },

From 9242a7a65a0464122071b1647a2981763299d647 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Fri, 7 Sep 2018 10:20:52 -0700
Subject: [PATCH 270/618] Version 18.0.1

---
 CHANGELOG.md | 2 ++
 package.json | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3aca3ed849..dc9aeaeb6c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,8 @@
 # Change Log
 
 <!-- - []  ([#](https://github.com/airbnb/react-dates/pull/)) -->
+## 18.0.1
+- [fix] Center vertical month navigation ([#1347](https://github.com/airbnb/react-dates/pull/1347))
 
 ## 18.0.0
 - [fix] Conditionally use `PureComponent` instead of `Component` ([#1335](https://github.com/airbnb/react-dates/pull/1335))
diff --git a/package.json b/package.json
index dfb2dd604a..4af6f76963 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "18.0.0",
+  "version": "18.0.1",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 4584261e1c829223b5789d5c086c0596f285a4cb Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Fri, 7 Sep 2018 14:17:06 -0700
Subject: [PATCH 271/618] Remove svgo from "inline-react-svg" babel plugin
 options

---
 .babelrc | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/.babelrc b/.babelrc
index 84513b5eec..58ca44aa31 100644
--- a/.babelrc
+++ b/.babelrc
@@ -3,7 +3,9 @@
     "test": {
       "presets": ["airbnb"],
       "plugins": [
-        "inline-react-svg",
+        ["inline-react-svg", {
+          "svgo": false
+        }],
         ["transform-replace-object-assign", { "moduleSpecifier": "object.assign" }],
         "istanbul"
       ]
@@ -12,7 +14,9 @@
     "development": {
       "presets": ["airbnb"],
       "plugins": [
-        "inline-react-svg",
+        ["inline-react-svg", {
+          "svgo": false
+        }],
         ["transform-replace-object-assign", { "moduleSpecifier": "object.assign" }],
       ],
     },
@@ -20,7 +24,9 @@
     "production": {
       "presets": [["airbnb", { removePropTypes: true }]],
       "plugins": [
-        "inline-react-svg",
+        ["inline-react-svg", {
+          "svgo": false
+        }],
         ["transform-replace-object-assign", { "moduleSpecifier": "object.assign" }],
       ],
     },
@@ -28,7 +34,9 @@
     "cjs": {
       "presets": [["airbnb", { removePropTypes: true }]],
       "plugins": [
-        "inline-react-svg",
+        ["inline-react-svg", {
+          "svgo": false
+        }],
         ["transform-replace-object-assign", { "moduleSpecifier": "object.assign" }],
       ],
     },
@@ -36,7 +44,9 @@
     "esm": {
       "presets": [["airbnb", { modules: false, removePropTypes: true }]],
       "plugins": [
-        "inline-react-svg",
+        ["inline-react-svg", {
+          "svgo": false
+        }],
         ["transform-replace-object-assign", { "moduleSpecifier": "object.assign" }],
       ],
     },

From c0c52de8f863ae80087a0d331176e6b2fd5a40bc Mon Sep 17 00:00:00 2001
From: dumblole <move2234@gmail.com>
Date: Sun, 9 Sep 2018 15:19:09 -0400
Subject: [PATCH 272/618] css-var-update-typo

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index c0c89f27cd..8d5be2583e 100644
--- a/README.md
+++ b/README.md
@@ -83,7 +83,7 @@ Right now, the easiest way to tweak `react-dates` to your heart's content is to
 .CalendarDay__selected_span {
   background: #82e0aa; //background
   color: white; //text
-  border: 1px solid $light-red; //defualt styles include a border
+  border: 1px solid $light-red; //default styles include a border
 }
 
 // Will edit selected date or the endpoints of a range of dates

From 3638a28ad9949891aed4a169faeeffa9357037ae Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Sun, 9 Sep 2018 21:35:37 -0700
Subject: [PATCH 273/618] Version 18.0.2

---
 CHANGELOG.md | 1 +
 package.json | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dc9aeaeb6c..143ecba9cf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- - []  ([#](https://github.com/airbnb/react-dates/pull/)) -->
 ## 18.0.1
 - [fix] Center vertical month navigation ([#1347](https://github.com/airbnb/react-dates/pull/1347))
+- [fix] Remove svgo from "inline-react-svg" babel plugin options ([#1350](https://github.com/airbnb/react-dates/pull/1350))
 
 ## 18.0.0
 - [fix] Conditionally use `PureComponent` instead of `Component` ([#1335](https://github.com/airbnb/react-dates/pull/1335))
diff --git a/package.json b/package.json
index 4af6f76963..4b752cc0fe 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "18.0.1",
+  "version": "18.0.2",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 7677cf502f73e5b2a0f23ea89d1fb0c2e31f4a48 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Mon, 10 Sep 2018 09:30:26 -0700
Subject: [PATCH 274/618] Fix CHANGELOG for v18.0.2

---
 CHANGELOG.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 143ecba9cf..dc2a3a286b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,9 +1,11 @@
 # Change Log
 
 <!-- - []  ([#](https://github.com/airbnb/react-dates/pull/)) -->
+## 18.0.2
+- [fix] Remove svgo from "inline-react-svg" babel plugin options ([#1350](https://github.com/airbnb/react-dates/pull/1350))
+
 ## 18.0.1
 - [fix] Center vertical month navigation ([#1347](https://github.com/airbnb/react-dates/pull/1347))
-- [fix] Remove svgo from "inline-react-svg" babel plugin options ([#1350](https://github.com/airbnb/react-dates/pull/1350))
 
 ## 18.0.0
 - [fix] Conditionally use `PureComponent` instead of `Component` ([#1335](https://github.com/airbnb/react-dates/pull/1335))

From 50c382f7cf3e3ba60f4fdaa00eae53cf06d3c97b Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Wed, 12 Sep 2018 16:29:27 -0700
Subject: [PATCH 275/618] Revert "Merge pull request #1335 from
 getaroom/PureComponent-Upgrade"

This reverts commit f2536b6ee768ba7e766cc23c14cc0008facd5e24, reversing
changes made to ebf83a1eb3bd3745d6a73dea671d93d23585d1a6.
---
 .storybook/config.js                              |  5 -----
 README.md                                         |  8 --------
 package.json                                      |  3 +--
 src/components/CalendarDay.jsx                    | 11 +++++++----
 src/components/CalendarMonth.jsx                  | 11 +++++++----
 src/components/CalendarMonthGrid.jsx              | 11 +++++++----
 src/components/CustomizableCalendarDay.jsx        | 11 +++++++----
 src/components/DateInput.jsx                      |  6 ++----
 src/components/DateRangePicker.jsx                | 11 +++++++----
 src/components/DateRangePickerInput.jsx           |  3 +--
 src/components/DateRangePickerInputController.jsx |  5 +----
 src/components/DayPicker.jsx                      | 11 +++++++----
 src/components/DayPickerKeyboardShortcuts.jsx     |  6 ++----
 src/components/DayPickerNavigation.jsx            |  3 +--
 src/components/DayPickerRangeController.jsx       |  4 +---
 src/components/DayPickerSingleDateController.jsx  |  4 +---
 src/components/KeyboardShortcutRow.jsx            |  3 +--
 src/components/SingleDatePicker.jsx               |  6 ++----
 src/components/SingleDatePickerInput.jsx          |  3 +--
 src/utils/baseClass.js                            | 11 -----------
 20 files changed, 56 insertions(+), 80 deletions(-)
 delete mode 100644 src/utils/baseClass.js

diff --git a/.storybook/config.js b/.storybook/config.js
index 84d2cd28e9..3764b18a9f 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -1,9 +1,4 @@
 import React from 'react';
-if (process.env.NODE_ENV !== 'production') {
-  const { whyDidYouUpdate } = require('why-did-you-update');
-  whyDidYouUpdate(React);
-}
-
 import moment from 'moment';
 import aphroditeInterface from 'react-with-styles-interface-aphrodite';
 
diff --git a/README.md b/README.md
index 8d5be2583e..88efbca4f5 100644
--- a/README.md
+++ b/README.md
@@ -65,14 +65,6 @@ Create a CSS file with the contents of `require.resolve('react-dates/lib/css/_da
 
 To see this in action, you can check out https://github.com/majapw/react-dates-demo which adds `react-dates` on top of a simple `create-react-app` setup.
 
-#### Overriding Base Class
-By default `react-dates` will use `PureComponent` conditionally if it is available.  However, it is possible to override this setting and use `Component` and `shouldComponentUpdate` instead. It is also possible to override the logic in `build/util/baseClass` if you know that you are using a React version with `PureComponent`.
-  ```javascript
-    import React from 'react';
-    export default React.PureComponent;
-    export const pureComponentAvailable = true;
-  ```
-
 #### Overriding styles
 Right now, the easiest way to tweak `react-dates` to your heart's content is to create another stylesheet to override the default react-dates styles. For example, you could create a file named `react_dates_overrides.css` with the following contents (Make sure when you import said file to your `app.js`, you import it after the `react-dates` styles):
 
diff --git a/package.json b/package.json
index 4b752cc0fe..66c68dc02a 100644
--- a/package.json
+++ b/package.json
@@ -107,8 +107,7 @@
     "sinon": "^6.1.5",
     "sinon-sandbox": "^2.0.0",
     "style-loader": "^0.20.3",
-    "webpack": "^2.6.1",
-    "why-did-you-update": "^0.1.1"
+    "webpack": "^2.6.1"
   },
   "dependencies": {
     "airbnb-prop-types": "^2.10.0",
diff --git a/src/components/CalendarDay.jsx b/src/components/CalendarDay.jsx
index 2f8fc54c80..a98a15e558 100644
--- a/src/components/CalendarDay.jsx
+++ b/src/components/CalendarDay.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import shallowCompare from 'react-addons-shallow-compare';
 import momentPropTypes from 'react-moment-proptypes';
 import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
@@ -9,7 +10,6 @@ import { CalendarDayPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
 import getCalendarDaySettings from '../utils/getCalendarDaySettings';
 import ModifiersShape from '../shapes/ModifiersShape';
-import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import { DAY_SIZE } from '../constants';
 
@@ -48,14 +48,17 @@ const defaultProps = {
   phrases: CalendarDayPhrases,
 };
 
-/** @extends React.Component */
-class CalendarDay extends BaseClass {
+class CalendarDay extends React.Component {
   constructor(...args) {
     super(...args);
 
     this.setButtonRef = this.setButtonRef.bind(this);
   }
 
+  shouldComponentUpdate(nextProps, nextState) {
+    return shallowCompare(this, nextProps, nextState);
+  }
+
   componentDidUpdate(prevProps) {
     const { isFocused, tabIndex } = this.props;
     if (tabIndex === 0) {
@@ -340,4 +343,4 @@ export default withStyles(({ reactDates: { color, font } }) => ({
   CalendarDay__today: {},
   CalendarDay__firstDayOfWeek: {},
   CalendarDay__lastDayOfWeek: {},
-}), { pureComponent: pureComponentAvailable })(CalendarDay);
+}))(CalendarDay);
diff --git a/src/components/CalendarMonth.jsx b/src/components/CalendarMonth.jsx
index d41db7aaea..e9487fe7e9 100644
--- a/src/components/CalendarMonth.jsx
+++ b/src/components/CalendarMonth.jsx
@@ -2,6 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import shallowCompare from 'react-addons-shallow-compare';
 import momentPropTypes from 'react-moment-proptypes';
 import { forbidExtraProps, mutuallyExclusiveProps, nonNegativeInteger } from 'airbnb-prop-types';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
@@ -21,7 +22,6 @@ import toISODateString from '../utils/toISODateString';
 import ModifiersShape from '../shapes/ModifiersShape';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
-import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import {
   HORIZONTAL_ORIENTATION,
@@ -90,8 +90,7 @@ const defaultProps = {
   verticalBorderSpacing: undefined,
 };
 
-/** @extends React.Component */
-class CalendarMonth extends BaseClass {
+class CalendarMonth extends React.Component {
   constructor(props) {
     super(props);
 
@@ -133,6 +132,10 @@ class CalendarMonth extends BaseClass {
     }
   }
 
+  shouldComponentUpdate(nextProps, nextState) {
+    return shallowCompare(this, nextProps, nextState);
+  }
+
   componentWillUnmount() {
     if (this.setMonthTitleHeightTimeout) {
       clearTimeout(this.setMonthTitleHeightTimeout);
@@ -274,4 +277,4 @@ export default withStyles(({ reactDates: { color, font, spacing } }) => ({
     paddingTop: 12,
     paddingBottom: 7,
   },
-}), { pureComponent: pureComponentAvailable })(CalendarMonth);
+}))(CalendarMonth);
diff --git a/src/components/CalendarMonthGrid.jsx b/src/components/CalendarMonthGrid.jsx
index 363a99755f..40cad0ee45 100644
--- a/src/components/CalendarMonthGrid.jsx
+++ b/src/components/CalendarMonthGrid.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import shallowCompare from 'react-addons-shallow-compare';
 import momentPropTypes from 'react-moment-proptypes';
 import { forbidExtraProps, mutuallyExclusiveProps, nonNegativeInteger } from 'airbnb-prop-types';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
@@ -21,7 +22,6 @@ import isNextMonth from '../utils/isNextMonth';
 import ModifiersShape from '../shapes/ModifiersShape';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
-import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import {
   HORIZONTAL_ORIENTATION,
@@ -114,8 +114,7 @@ function getMonths(initialMonth, numberOfMonths, withoutTransitionMonths) {
   return months;
 }
 
-/** @extends React.Component */
-class CalendarMonthGrid extends BaseClass {
+class CalendarMonthGrid extends React.Component {
   constructor(props) {
     super(props);
     const withoutTransitionMonths = props.orientation === VERTICAL_SCROLLABLE;
@@ -181,6 +180,10 @@ class CalendarMonthGrid extends BaseClass {
     });
   }
 
+  shouldComponentUpdate(nextProps, nextState) {
+    return shallowCompare(this, nextProps, nextState);
+  }
+
   componentDidUpdate() {
     const {
       isAnimating,
@@ -422,4 +425,4 @@ export default withStyles(({
   CalendarMonthGrid_month__hidden: {
     visibility: 'hidden',
   },
-}), { pureComponent: pureComponentAvailable })(CalendarMonthGrid);
+}))(CalendarMonthGrid);
diff --git a/src/components/CustomizableCalendarDay.jsx b/src/components/CustomizableCalendarDay.jsx
index ee1a613d3a..a512d8156d 100644
--- a/src/components/CustomizableCalendarDay.jsx
+++ b/src/components/CustomizableCalendarDay.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import shallowCompare from 'react-addons-shallow-compare';
 import momentPropTypes from 'react-moment-proptypes';
 import { forbidExtraProps, nonNegativeInteger, or } from 'airbnb-prop-types';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
@@ -8,7 +9,6 @@ import moment from 'moment';
 import { CalendarDayPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
 import getCalendarDaySettings from '../utils/getCalendarDaySettings';
-import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import { DAY_SIZE } from '../constants';
 import DefaultTheme from '../theme/DefaultTheme';
@@ -216,8 +216,7 @@ const defaultProps = {
   phrases: CalendarDayPhrases,
 };
 
-/** @extends React.Component */
-class CustomizableCalendarDay extends BaseClass {
+class CustomizableCalendarDay extends React.Component {
   constructor(...args) {
     super(...args);
 
@@ -228,6 +227,10 @@ class CustomizableCalendarDay extends BaseClass {
     this.setButtonRef = this.setButtonRef.bind(this);
   }
 
+  shouldComponentUpdate(nextProps, nextState) {
+    return shallowCompare(this, nextProps, nextState);
+  }
+
   componentDidUpdate(prevProps) {
     const { isFocused, tabIndex } = this.props;
     if (tabIndex === 0) {
@@ -370,4 +373,4 @@ export default withStyles(({ reactDates: { font } }) => ({
   CalendarDay__defaultCursor: {
     cursor: 'default',
   },
-}), { pureComponent: pureComponentAvailable })(CustomizableCalendarDay);
+}))(CustomizableCalendarDay);
diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
index 8c14d8b58c..e0f54a95e9 100644
--- a/src/components/DateInput.jsx
+++ b/src/components/DateInput.jsx
@@ -7,7 +7,6 @@ import isTouchDevice from 'is-touch-device';
 
 import getInputHeight from '../utils/getInputHeight';
 import openDirectionShape from '../shapes/OpenDirectionShape';
-import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 import {
   OPEN_DOWN,
   OPEN_UP,
@@ -78,8 +77,7 @@ const defaultProps = {
   isFocused: false,
 };
 
-/** @extends React.Component */
-class DateInput extends BaseClass {
+class DateInput extends React.Component {
   constructor(props) {
     super(props);
 
@@ -381,4 +379,4 @@ export default withStyles(({
     stroke: color.core.border,
     fill: 'transparent',
   },
-}), { pureComponent: pureComponentAvailable })(DateInput);
+}))(DateInput);
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index c87e72c73d..0eca351ae4 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import shallowCompare from 'react-addons-shallow-compare';
 import moment from 'moment';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 import { Portal } from 'react-portal';
@@ -15,7 +16,6 @@ import getDetachedContainerStyles from '../utils/getDetachedContainerStyles';
 import getInputHeight from '../utils/getInputHeight';
 import isInclusivelyAfterDay from '../utils/isInclusivelyAfterDay';
 import disableScroll from '../utils/disableScroll';
-import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import DateRangePickerInputController from './DateRangePickerInputController';
 import DayPickerRangeController from './DayPickerRangeController';
@@ -118,8 +118,7 @@ const defaultProps = {
   dayAriaLabelFormat: undefined,
 };
 
-/** @extends React.Component */
-class DateRangePicker extends BaseClass {
+class DateRangePicker extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -164,6 +163,10 @@ class DateRangePicker extends BaseClass {
     this.isTouchDevice = isTouchDevice();
   }
 
+  shouldComponentUpdate(nextProps, nextState) {
+    return shallowCompare(this, nextProps, nextState);
+  }
+
   componentDidUpdate(prevProps) {
     const { focusedInput } = this.props;
     if (!prevProps.focusedInput && focusedInput && this.isOpened()) {
@@ -671,4 +674,4 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     width: 15,
     fill: color.core.grayLighter,
   },
-}), { pureComponent: pureComponentAvailable })(DateRangePicker);
+}))(DateRangePicker);
diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index a2c01268c1..46b039bb6f 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -10,7 +10,6 @@ import openDirectionShape from '../shapes/OpenDirectionShape';
 import DateInput from './DateInput';
 import IconPositionShape from '../shapes/IconPositionShape';
 import DisabledShape from '../shapes/DisabledShape';
-import { pureComponentAvailable } from '../utils/baseClass';
 
 import RightArrow from './RightArrow';
 import LeftArrow from './LeftArrow';
@@ -397,4 +396,4 @@ export default withStyles(({ reactDates: { border, color, sizing } }) => ({
     width: 14,
     verticalAlign: 'middle',
   },
-}), { pureComponent: pureComponentAvailable })(DateRangePickerInput);
+}))(DateRangePickerInput);
diff --git a/src/components/DateRangePickerInputController.jsx b/src/components/DateRangePickerInputController.jsx
index e248838459..138ef48d28 100644
--- a/src/components/DateRangePickerInputController.jsx
+++ b/src/components/DateRangePickerInputController.jsx
@@ -20,8 +20,6 @@ import toLocalizedDateString from '../utils/toLocalizedDateString';
 import isInclusivelyAfterDay from '../utils/isInclusivelyAfterDay';
 import isBeforeDay from '../utils/isBeforeDay';
 
-import BaseClass from '../utils/baseClass';
-
 import {
   START_DATE,
   END_DATE,
@@ -133,8 +131,7 @@ const defaultProps = {
   isRTL: false,
 };
 
-/** @extends React.Component */
-export default class DateRangePickerInputController extends BaseClass {
+export default class DateRangePickerInputController extends React.Component {
   constructor(props) {
     super(props);
 
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 04694b38d1..504b23154d 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import shallowCompare from 'react-addons-shallow-compare';
 import { forbidExtraProps, mutuallyExclusiveProps, nonNegativeInteger } from 'airbnb-prop-types';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 
@@ -29,7 +30,6 @@ import ModifiersShape from '../shapes/ModifiersShape';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
 import CalendarInfoPositionShape from '../shapes/CalendarInfoPositionShape';
-import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import {
   HORIZONTAL_ORIENTATION,
@@ -163,8 +163,7 @@ export const defaultProps = {
   dayAriaLabelFormat: undefined,
 };
 
-/** @extends React.Component */
-class DayPicker extends BaseClass {
+class DayPicker extends React.Component {
   constructor(props) {
     super(props);
 
@@ -300,6 +299,10 @@ class DayPicker extends BaseClass {
     }
   }
 
+  shouldComponentUpdate(nextProps, nextState) {
+    return shallowCompare(this, nextProps, nextState);
+  }
+
   componentWillUpdate() {
     const { transitionDuration } = this.props;
 
@@ -1239,4 +1242,4 @@ export default withStyles(({
       },
     }),
   },
-}), { pureComponent: pureComponentAvailable })(DayPicker);
+}))(DayPicker);
diff --git a/src/components/DayPickerKeyboardShortcuts.jsx b/src/components/DayPickerKeyboardShortcuts.jsx
index 2ddad15352..2d19a1262b 100644
--- a/src/components/DayPickerKeyboardShortcuts.jsx
+++ b/src/components/DayPickerKeyboardShortcuts.jsx
@@ -5,7 +5,6 @@ import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 
 import { DayPickerKeyboardShortcutsPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
-import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import KeyboardShortcutRow from './KeyboardShortcutRow';
 import CloseButton from './CloseButton';
@@ -73,8 +72,7 @@ function getKeyboardShortcuts(phrases) {
   ];
 }
 
-/** @extends React.Component */
-class DayPickerKeyboardShortcuts extends BaseClass {
+class DayPickerKeyboardShortcuts extends React.Component {
   constructor(...args) {
     super(...args);
 
@@ -396,4 +394,4 @@ export default withStyles(({ reactDates: { color, font, zIndex } }) => ({
       fill: color.core.grayLight,
     },
   },
-}), { pureComponent: pureComponentAvailable })(DayPickerKeyboardShortcuts);
+}))(DayPickerKeyboardShortcuts);
diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index 2bd2e5a38c..738e57dd5b 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -5,7 +5,6 @@ import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 
 import { DayPickerNavigationPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
-import { pureComponentAvailable } from '../utils/baseClass';
 
 import LeftArrow from './LeftArrow';
 import RightArrow from './RightArrow';
@@ -303,4 +302,4 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     width: 42,
     fill: color.text,
   },
-}), { pureComponent: pureComponentAvailable })(DayPickerNavigation);
+}))(DayPickerNavigation);
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 7bfe6d9582..d982a7cfa5 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -28,7 +28,6 @@ import FocusedInputShape from '../shapes/FocusedInputShape';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
 import CalendarInfoPositionShape from '../shapes/CalendarInfoPositionShape';
-import BaseClass from '../utils/baseClass';
 
 import {
   START_DATE,
@@ -174,8 +173,7 @@ const getChooseAvailableDatePhrase = (phrases, focusedInput) => {
   return phrases.chooseAvailableDate;
 };
 
-/** @extends React.Component */
-export default class DayPickerRangeController extends BaseClass {
+export default class DayPickerRangeController extends React.Component {
   constructor(props) {
     super(props);
 
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 120d5d229c..57d9e8d425 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -21,7 +21,6 @@ import toISOMonthString from '../utils/toISOMonthString';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
 import CalendarInfoPositionShape from '../shapes/CalendarInfoPositionShape';
-import BaseClass from '../utils/baseClass';
 
 import {
   HORIZONTAL_ORIENTATION,
@@ -143,8 +142,7 @@ const defaultProps = {
   isRTL: false,
 };
 
-/** @extends React.Component */
-export default class DayPickerSingleDateController extends BaseClass {
+export default class DayPickerSingleDateController extends React.Component {
   constructor(props) {
     super(props);
 
diff --git a/src/components/KeyboardShortcutRow.jsx b/src/components/KeyboardShortcutRow.jsx
index eb87b3320d..e5e0457de9 100644
--- a/src/components/KeyboardShortcutRow.jsx
+++ b/src/components/KeyboardShortcutRow.jsx
@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { forbidExtraProps } from 'airbnb-prop-types';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
-import { pureComponentAvailable } from '../utils/baseClass';
 
 const propTypes = forbidExtraProps({
   ...withStylesPropTypes,
@@ -90,4 +89,4 @@ export default withStyles(({ reactDates: { color } }) => ({
     wordBreak: 'break-word',
     marginLeft: 8,
   },
-}), { pureComponent: pureComponentAvailable })(KeyboardShortcutRow);
+}))(KeyboardShortcutRow);
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index b6f45f9f47..6c6206ca49 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -17,7 +17,6 @@ import getDetachedContainerStyles from '../utils/getDetachedContainerStyles';
 import getInputHeight from '../utils/getInputHeight';
 import isInclusivelyAfterDay from '../utils/isInclusivelyAfterDay';
 import disableScroll from '../utils/disableScroll';
-import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import SingleDatePickerInput from './SingleDatePickerInput';
 import DayPickerSingleDateController from './DayPickerSingleDateController';
@@ -117,8 +116,7 @@ const defaultProps = {
   dayAriaLabelFormat: undefined,
 };
 
-/** @extends React.Component */
-class SingleDatePicker extends BaseClass {
+class SingleDatePicker extends React.Component {
   constructor(props) {
     super(props);
 
@@ -692,4 +690,4 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     width: 15,
     fill: color.core.grayLighter,
   },
-}), { pureComponent: pureComponentAvailable })(SingleDatePicker);
+}))(SingleDatePicker);
diff --git a/src/components/SingleDatePickerInput.jsx b/src/components/SingleDatePickerInput.jsx
index d0afa206c0..e5ad5f3273 100644
--- a/src/components/SingleDatePickerInput.jsx
+++ b/src/components/SingleDatePickerInput.jsx
@@ -14,7 +14,6 @@ import CalendarIcon from './CalendarIcon';
 
 import openDirectionShape from '../shapes/OpenDirectionShape';
 import { ICON_BEFORE_POSITION, ICON_AFTER_POSITION, OPEN_DOWN } from '../constants';
-import { pureComponentAvailable } from '../utils/baseClass';
 
 const propTypes = forbidExtraProps({
   ...withStylesPropTypes,
@@ -311,4 +310,4 @@ export default withStyles(({ reactDates: { border, color } }) => ({
     width: 14,
     verticalAlign: 'middle',
   },
-}), { pureComponent: pureComponentAvailable })(SingleDatePickerInput);
+}))(SingleDatePickerInput);
diff --git a/src/utils/baseClass.js b/src/utils/baseClass.js
deleted file mode 100644
index 4075a02bd2..0000000000
--- a/src/utils/baseClass.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import shallowCompare from 'react-addons-shallow-compare';
-
-class BaseClass extends (React.PureComponent || React.Component) {
-  [!React.PureComponent && 'shouldComponentUpdate'](nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState);
-  }
-}
-
-export const pureComponentAvailable = typeof React.PureComponent !== 'undefined';
-export default BaseClass;

From 0db17032a72bc59bb8182636127540f9892990d0 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Wed, 12 Sep 2018 17:00:21 -0700
Subject: [PATCH 276/618] Version 18.0.3

---
 CHANGELOG.md | 3 +++
 package.json | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dc2a3a286b..691e29043c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,9 @@
 # Change Log
 
 <!-- - []  ([#](https://github.com/airbnb/react-dates/pull/)) -->
+## 18.0.3
+- [fix] revert 'Conditionally use `PureComponent` instead of `Component`' ([50c382f](https://github.com/airbnb/react-dates/commit/50c382f7cf3e3ba60f4fdaa00eae53cf06d3c97b))
+
 ## 18.0.2
 - [fix] Remove svgo from "inline-react-svg" babel plugin options ([#1350](https://github.com/airbnb/react-dates/pull/1350))
 
diff --git a/package.json b/package.json
index 66c68dc02a..f43092cfed 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "18.0.2",
+  "version": "18.0.3",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 4f8eb01168ef6c4ae7d74e95ad14acb28960e43e Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Wed, 12 Sep 2018 17:05:47 -0700
Subject: [PATCH 277/618] Revert "Revert "Merge pull request #1335 from
 getaroom/PureComponent-Upgrade""

This reverts commit 50c382f7cf3e3ba60f4fdaa00eae53cf06d3c97b.
---
 .storybook/config.js                              |  5 +++++
 README.md                                         |  8 ++++++++
 package.json                                      |  3 ++-
 src/components/CalendarDay.jsx                    | 11 ++++-------
 src/components/CalendarMonth.jsx                  | 11 ++++-------
 src/components/CalendarMonthGrid.jsx              | 11 ++++-------
 src/components/CustomizableCalendarDay.jsx        | 11 ++++-------
 src/components/DateInput.jsx                      |  6 ++++--
 src/components/DateRangePicker.jsx                | 11 ++++-------
 src/components/DateRangePickerInput.jsx           |  3 ++-
 src/components/DateRangePickerInputController.jsx |  5 ++++-
 src/components/DayPicker.jsx                      | 11 ++++-------
 src/components/DayPickerKeyboardShortcuts.jsx     |  6 ++++--
 src/components/DayPickerNavigation.jsx            |  3 ++-
 src/components/DayPickerRangeController.jsx       |  4 +++-
 src/components/DayPickerSingleDateController.jsx  |  4 +++-
 src/components/KeyboardShortcutRow.jsx            |  3 ++-
 src/components/SingleDatePicker.jsx               |  6 ++++--
 src/components/SingleDatePickerInput.jsx          |  3 ++-
 src/utils/baseClass.js                            | 11 +++++++++++
 20 files changed, 80 insertions(+), 56 deletions(-)
 create mode 100644 src/utils/baseClass.js

diff --git a/.storybook/config.js b/.storybook/config.js
index 3764b18a9f..84d2cd28e9 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -1,4 +1,9 @@
 import React from 'react';
+if (process.env.NODE_ENV !== 'production') {
+  const { whyDidYouUpdate } = require('why-did-you-update');
+  whyDidYouUpdate(React);
+}
+
 import moment from 'moment';
 import aphroditeInterface from 'react-with-styles-interface-aphrodite';
 
diff --git a/README.md b/README.md
index 88efbca4f5..8d5be2583e 100644
--- a/README.md
+++ b/README.md
@@ -65,6 +65,14 @@ Create a CSS file with the contents of `require.resolve('react-dates/lib/css/_da
 
 To see this in action, you can check out https://github.com/majapw/react-dates-demo which adds `react-dates` on top of a simple `create-react-app` setup.
 
+#### Overriding Base Class
+By default `react-dates` will use `PureComponent` conditionally if it is available.  However, it is possible to override this setting and use `Component` and `shouldComponentUpdate` instead. It is also possible to override the logic in `build/util/baseClass` if you know that you are using a React version with `PureComponent`.
+  ```javascript
+    import React from 'react';
+    export default React.PureComponent;
+    export const pureComponentAvailable = true;
+  ```
+
 #### Overriding styles
 Right now, the easiest way to tweak `react-dates` to your heart's content is to create another stylesheet to override the default react-dates styles. For example, you could create a file named `react_dates_overrides.css` with the following contents (Make sure when you import said file to your `app.js`, you import it after the `react-dates` styles):
 
diff --git a/package.json b/package.json
index f43092cfed..775dea3576 100644
--- a/package.json
+++ b/package.json
@@ -107,7 +107,8 @@
     "sinon": "^6.1.5",
     "sinon-sandbox": "^2.0.0",
     "style-loader": "^0.20.3",
-    "webpack": "^2.6.1"
+    "webpack": "^2.6.1",
+    "why-did-you-update": "^0.1.1"
   },
   "dependencies": {
     "airbnb-prop-types": "^2.10.0",
diff --git a/src/components/CalendarDay.jsx b/src/components/CalendarDay.jsx
index a98a15e558..2f8fc54c80 100644
--- a/src/components/CalendarDay.jsx
+++ b/src/components/CalendarDay.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import shallowCompare from 'react-addons-shallow-compare';
 import momentPropTypes from 'react-moment-proptypes';
 import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
@@ -10,6 +9,7 @@ import { CalendarDayPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
 import getCalendarDaySettings from '../utils/getCalendarDaySettings';
 import ModifiersShape from '../shapes/ModifiersShape';
+import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import { DAY_SIZE } from '../constants';
 
@@ -48,17 +48,14 @@ const defaultProps = {
   phrases: CalendarDayPhrases,
 };
 
-class CalendarDay extends React.Component {
+/** @extends React.Component */
+class CalendarDay extends BaseClass {
   constructor(...args) {
     super(...args);
 
     this.setButtonRef = this.setButtonRef.bind(this);
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState);
-  }
-
   componentDidUpdate(prevProps) {
     const { isFocused, tabIndex } = this.props;
     if (tabIndex === 0) {
@@ -343,4 +340,4 @@ export default withStyles(({ reactDates: { color, font } }) => ({
   CalendarDay__today: {},
   CalendarDay__firstDayOfWeek: {},
   CalendarDay__lastDayOfWeek: {},
-}))(CalendarDay);
+}), { pureComponent: pureComponentAvailable })(CalendarDay);
diff --git a/src/components/CalendarMonth.jsx b/src/components/CalendarMonth.jsx
index e9487fe7e9..d41db7aaea 100644
--- a/src/components/CalendarMonth.jsx
+++ b/src/components/CalendarMonth.jsx
@@ -2,7 +2,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import shallowCompare from 'react-addons-shallow-compare';
 import momentPropTypes from 'react-moment-proptypes';
 import { forbidExtraProps, mutuallyExclusiveProps, nonNegativeInteger } from 'airbnb-prop-types';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
@@ -22,6 +21,7 @@ import toISODateString from '../utils/toISODateString';
 import ModifiersShape from '../shapes/ModifiersShape';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
+import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import {
   HORIZONTAL_ORIENTATION,
@@ -90,7 +90,8 @@ const defaultProps = {
   verticalBorderSpacing: undefined,
 };
 
-class CalendarMonth extends React.Component {
+/** @extends React.Component */
+class CalendarMonth extends BaseClass {
   constructor(props) {
     super(props);
 
@@ -132,10 +133,6 @@ class CalendarMonth extends React.Component {
     }
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState);
-  }
-
   componentWillUnmount() {
     if (this.setMonthTitleHeightTimeout) {
       clearTimeout(this.setMonthTitleHeightTimeout);
@@ -277,4 +274,4 @@ export default withStyles(({ reactDates: { color, font, spacing } }) => ({
     paddingTop: 12,
     paddingBottom: 7,
   },
-}))(CalendarMonth);
+}), { pureComponent: pureComponentAvailable })(CalendarMonth);
diff --git a/src/components/CalendarMonthGrid.jsx b/src/components/CalendarMonthGrid.jsx
index 40cad0ee45..363a99755f 100644
--- a/src/components/CalendarMonthGrid.jsx
+++ b/src/components/CalendarMonthGrid.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import shallowCompare from 'react-addons-shallow-compare';
 import momentPropTypes from 'react-moment-proptypes';
 import { forbidExtraProps, mutuallyExclusiveProps, nonNegativeInteger } from 'airbnb-prop-types';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
@@ -22,6 +21,7 @@ import isNextMonth from '../utils/isNextMonth';
 import ModifiersShape from '../shapes/ModifiersShape';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
+import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import {
   HORIZONTAL_ORIENTATION,
@@ -114,7 +114,8 @@ function getMonths(initialMonth, numberOfMonths, withoutTransitionMonths) {
   return months;
 }
 
-class CalendarMonthGrid extends React.Component {
+/** @extends React.Component */
+class CalendarMonthGrid extends BaseClass {
   constructor(props) {
     super(props);
     const withoutTransitionMonths = props.orientation === VERTICAL_SCROLLABLE;
@@ -180,10 +181,6 @@ class CalendarMonthGrid extends React.Component {
     });
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState);
-  }
-
   componentDidUpdate() {
     const {
       isAnimating,
@@ -425,4 +422,4 @@ export default withStyles(({
   CalendarMonthGrid_month__hidden: {
     visibility: 'hidden',
   },
-}))(CalendarMonthGrid);
+}), { pureComponent: pureComponentAvailable })(CalendarMonthGrid);
diff --git a/src/components/CustomizableCalendarDay.jsx b/src/components/CustomizableCalendarDay.jsx
index a512d8156d..ee1a613d3a 100644
--- a/src/components/CustomizableCalendarDay.jsx
+++ b/src/components/CustomizableCalendarDay.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import shallowCompare from 'react-addons-shallow-compare';
 import momentPropTypes from 'react-moment-proptypes';
 import { forbidExtraProps, nonNegativeInteger, or } from 'airbnb-prop-types';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
@@ -9,6 +8,7 @@ import moment from 'moment';
 import { CalendarDayPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
 import getCalendarDaySettings from '../utils/getCalendarDaySettings';
+import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import { DAY_SIZE } from '../constants';
 import DefaultTheme from '../theme/DefaultTheme';
@@ -216,7 +216,8 @@ const defaultProps = {
   phrases: CalendarDayPhrases,
 };
 
-class CustomizableCalendarDay extends React.Component {
+/** @extends React.Component */
+class CustomizableCalendarDay extends BaseClass {
   constructor(...args) {
     super(...args);
 
@@ -227,10 +228,6 @@ class CustomizableCalendarDay extends React.Component {
     this.setButtonRef = this.setButtonRef.bind(this);
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState);
-  }
-
   componentDidUpdate(prevProps) {
     const { isFocused, tabIndex } = this.props;
     if (tabIndex === 0) {
@@ -373,4 +370,4 @@ export default withStyles(({ reactDates: { font } }) => ({
   CalendarDay__defaultCursor: {
     cursor: 'default',
   },
-}))(CustomizableCalendarDay);
+}), { pureComponent: pureComponentAvailable })(CustomizableCalendarDay);
diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
index e0f54a95e9..8c14d8b58c 100644
--- a/src/components/DateInput.jsx
+++ b/src/components/DateInput.jsx
@@ -7,6 +7,7 @@ import isTouchDevice from 'is-touch-device';
 
 import getInputHeight from '../utils/getInputHeight';
 import openDirectionShape from '../shapes/OpenDirectionShape';
+import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 import {
   OPEN_DOWN,
   OPEN_UP,
@@ -77,7 +78,8 @@ const defaultProps = {
   isFocused: false,
 };
 
-class DateInput extends React.Component {
+/** @extends React.Component */
+class DateInput extends BaseClass {
   constructor(props) {
     super(props);
 
@@ -379,4 +381,4 @@ export default withStyles(({
     stroke: color.core.border,
     fill: 'transparent',
   },
-}))(DateInput);
+}), { pureComponent: pureComponentAvailable })(DateInput);
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 0eca351ae4..c87e72c73d 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import shallowCompare from 'react-addons-shallow-compare';
 import moment from 'moment';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 import { Portal } from 'react-portal';
@@ -16,6 +15,7 @@ import getDetachedContainerStyles from '../utils/getDetachedContainerStyles';
 import getInputHeight from '../utils/getInputHeight';
 import isInclusivelyAfterDay from '../utils/isInclusivelyAfterDay';
 import disableScroll from '../utils/disableScroll';
+import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import DateRangePickerInputController from './DateRangePickerInputController';
 import DayPickerRangeController from './DayPickerRangeController';
@@ -118,7 +118,8 @@ const defaultProps = {
   dayAriaLabelFormat: undefined,
 };
 
-class DateRangePicker extends React.Component {
+/** @extends React.Component */
+class DateRangePicker extends BaseClass {
   constructor(props) {
     super(props);
     this.state = {
@@ -163,10 +164,6 @@ class DateRangePicker extends React.Component {
     this.isTouchDevice = isTouchDevice();
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState);
-  }
-
   componentDidUpdate(prevProps) {
     const { focusedInput } = this.props;
     if (!prevProps.focusedInput && focusedInput && this.isOpened()) {
@@ -674,4 +671,4 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     width: 15,
     fill: color.core.grayLighter,
   },
-}))(DateRangePicker);
+}), { pureComponent: pureComponentAvailable })(DateRangePicker);
diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index 46b039bb6f..a2c01268c1 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -10,6 +10,7 @@ import openDirectionShape from '../shapes/OpenDirectionShape';
 import DateInput from './DateInput';
 import IconPositionShape from '../shapes/IconPositionShape';
 import DisabledShape from '../shapes/DisabledShape';
+import { pureComponentAvailable } from '../utils/baseClass';
 
 import RightArrow from './RightArrow';
 import LeftArrow from './LeftArrow';
@@ -396,4 +397,4 @@ export default withStyles(({ reactDates: { border, color, sizing } }) => ({
     width: 14,
     verticalAlign: 'middle',
   },
-}))(DateRangePickerInput);
+}), { pureComponent: pureComponentAvailable })(DateRangePickerInput);
diff --git a/src/components/DateRangePickerInputController.jsx b/src/components/DateRangePickerInputController.jsx
index 138ef48d28..e248838459 100644
--- a/src/components/DateRangePickerInputController.jsx
+++ b/src/components/DateRangePickerInputController.jsx
@@ -20,6 +20,8 @@ import toLocalizedDateString from '../utils/toLocalizedDateString';
 import isInclusivelyAfterDay from '../utils/isInclusivelyAfterDay';
 import isBeforeDay from '../utils/isBeforeDay';
 
+import BaseClass from '../utils/baseClass';
+
 import {
   START_DATE,
   END_DATE,
@@ -131,7 +133,8 @@ const defaultProps = {
   isRTL: false,
 };
 
-export default class DateRangePickerInputController extends React.Component {
+/** @extends React.Component */
+export default class DateRangePickerInputController extends BaseClass {
   constructor(props) {
     super(props);
 
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 504b23154d..04694b38d1 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import shallowCompare from 'react-addons-shallow-compare';
 import { forbidExtraProps, mutuallyExclusiveProps, nonNegativeInteger } from 'airbnb-prop-types';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 
@@ -30,6 +29,7 @@ import ModifiersShape from '../shapes/ModifiersShape';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
 import CalendarInfoPositionShape from '../shapes/CalendarInfoPositionShape';
+import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import {
   HORIZONTAL_ORIENTATION,
@@ -163,7 +163,8 @@ export const defaultProps = {
   dayAriaLabelFormat: undefined,
 };
 
-class DayPicker extends React.Component {
+/** @extends React.Component */
+class DayPicker extends BaseClass {
   constructor(props) {
     super(props);
 
@@ -299,10 +300,6 @@ class DayPicker extends React.Component {
     }
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState);
-  }
-
   componentWillUpdate() {
     const { transitionDuration } = this.props;
 
@@ -1242,4 +1239,4 @@ export default withStyles(({
       },
     }),
   },
-}))(DayPicker);
+}), { pureComponent: pureComponentAvailable })(DayPicker);
diff --git a/src/components/DayPickerKeyboardShortcuts.jsx b/src/components/DayPickerKeyboardShortcuts.jsx
index 2d19a1262b..2ddad15352 100644
--- a/src/components/DayPickerKeyboardShortcuts.jsx
+++ b/src/components/DayPickerKeyboardShortcuts.jsx
@@ -5,6 +5,7 @@ import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 
 import { DayPickerKeyboardShortcutsPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
+import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import KeyboardShortcutRow from './KeyboardShortcutRow';
 import CloseButton from './CloseButton';
@@ -72,7 +73,8 @@ function getKeyboardShortcuts(phrases) {
   ];
 }
 
-class DayPickerKeyboardShortcuts extends React.Component {
+/** @extends React.Component */
+class DayPickerKeyboardShortcuts extends BaseClass {
   constructor(...args) {
     super(...args);
 
@@ -394,4 +396,4 @@ export default withStyles(({ reactDates: { color, font, zIndex } }) => ({
       fill: color.core.grayLight,
     },
   },
-}))(DayPickerKeyboardShortcuts);
+}), { pureComponent: pureComponentAvailable })(DayPickerKeyboardShortcuts);
diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index 738e57dd5b..2bd2e5a38c 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -5,6 +5,7 @@ import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 
 import { DayPickerNavigationPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
+import { pureComponentAvailable } from '../utils/baseClass';
 
 import LeftArrow from './LeftArrow';
 import RightArrow from './RightArrow';
@@ -302,4 +303,4 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     width: 42,
     fill: color.text,
   },
-}))(DayPickerNavigation);
+}), { pureComponent: pureComponentAvailable })(DayPickerNavigation);
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index d982a7cfa5..7bfe6d9582 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -28,6 +28,7 @@ import FocusedInputShape from '../shapes/FocusedInputShape';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
 import CalendarInfoPositionShape from '../shapes/CalendarInfoPositionShape';
+import BaseClass from '../utils/baseClass';
 
 import {
   START_DATE,
@@ -173,7 +174,8 @@ const getChooseAvailableDatePhrase = (phrases, focusedInput) => {
   return phrases.chooseAvailableDate;
 };
 
-export default class DayPickerRangeController extends React.Component {
+/** @extends React.Component */
+export default class DayPickerRangeController extends BaseClass {
   constructor(props) {
     super(props);
 
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 57d9e8d425..120d5d229c 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -21,6 +21,7 @@ import toISOMonthString from '../utils/toISOMonthString';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
 import CalendarInfoPositionShape from '../shapes/CalendarInfoPositionShape';
+import BaseClass from '../utils/baseClass';
 
 import {
   HORIZONTAL_ORIENTATION,
@@ -142,7 +143,8 @@ const defaultProps = {
   isRTL: false,
 };
 
-export default class DayPickerSingleDateController extends React.Component {
+/** @extends React.Component */
+export default class DayPickerSingleDateController extends BaseClass {
   constructor(props) {
     super(props);
 
diff --git a/src/components/KeyboardShortcutRow.jsx b/src/components/KeyboardShortcutRow.jsx
index e5e0457de9..eb87b3320d 100644
--- a/src/components/KeyboardShortcutRow.jsx
+++ b/src/components/KeyboardShortcutRow.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { forbidExtraProps } from 'airbnb-prop-types';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
+import { pureComponentAvailable } from '../utils/baseClass';
 
 const propTypes = forbidExtraProps({
   ...withStylesPropTypes,
@@ -89,4 +90,4 @@ export default withStyles(({ reactDates: { color } }) => ({
     wordBreak: 'break-word',
     marginLeft: 8,
   },
-}))(KeyboardShortcutRow);
+}), { pureComponent: pureComponentAvailable })(KeyboardShortcutRow);
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index 6c6206ca49..b6f45f9f47 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -17,6 +17,7 @@ import getDetachedContainerStyles from '../utils/getDetachedContainerStyles';
 import getInputHeight from '../utils/getInputHeight';
 import isInclusivelyAfterDay from '../utils/isInclusivelyAfterDay';
 import disableScroll from '../utils/disableScroll';
+import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import SingleDatePickerInput from './SingleDatePickerInput';
 import DayPickerSingleDateController from './DayPickerSingleDateController';
@@ -116,7 +117,8 @@ const defaultProps = {
   dayAriaLabelFormat: undefined,
 };
 
-class SingleDatePicker extends React.Component {
+/** @extends React.Component */
+class SingleDatePicker extends BaseClass {
   constructor(props) {
     super(props);
 
@@ -690,4 +692,4 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     width: 15,
     fill: color.core.grayLighter,
   },
-}))(SingleDatePicker);
+}), { pureComponent: pureComponentAvailable })(SingleDatePicker);
diff --git a/src/components/SingleDatePickerInput.jsx b/src/components/SingleDatePickerInput.jsx
index e5ad5f3273..d0afa206c0 100644
--- a/src/components/SingleDatePickerInput.jsx
+++ b/src/components/SingleDatePickerInput.jsx
@@ -14,6 +14,7 @@ import CalendarIcon from './CalendarIcon';
 
 import openDirectionShape from '../shapes/OpenDirectionShape';
 import { ICON_BEFORE_POSITION, ICON_AFTER_POSITION, OPEN_DOWN } from '../constants';
+import { pureComponentAvailable } from '../utils/baseClass';
 
 const propTypes = forbidExtraProps({
   ...withStylesPropTypes,
@@ -310,4 +311,4 @@ export default withStyles(({ reactDates: { border, color } }) => ({
     width: 14,
     verticalAlign: 'middle',
   },
-}))(SingleDatePickerInput);
+}), { pureComponent: pureComponentAvailable })(SingleDatePickerInput);
diff --git a/src/utils/baseClass.js b/src/utils/baseClass.js
new file mode 100644
index 0000000000..4075a02bd2
--- /dev/null
+++ b/src/utils/baseClass.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import shallowCompare from 'react-addons-shallow-compare';
+
+class BaseClass extends (React.PureComponent || React.Component) {
+  [!React.PureComponent && 'shouldComponentUpdate'](nextProps, nextState) {
+    return shallowCompare(this, nextProps, nextState);
+  }
+}
+
+export const pureComponentAvailable = typeof React.PureComponent !== 'undefined';
+export default BaseClass;

From f7fdc09ab0454ad047532aaf2dd30ecc5daed3ac Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Wed, 12 Sep 2018 17:35:52 -0700
Subject: [PATCH 278/618] Version 18.0.4

---
 CHANGELOG.md | 3 +++
 package.json | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 691e29043c..c2e1cb96f0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,9 @@
 # Change Log
 
 <!-- - []  ([#](https://github.com/airbnb/react-dates/pull/)) -->
+## 18.0.4
+- [fix] revert 'revert 'Conditionally use `PureComponent` instead of `Component`'' ([4f8eb01](https://github.com/airbnb/react-dates/commit/4f8eb01168ef6c4ae7d74e95ad14acb28960e43e))
+
 ## 18.0.3
 - [fix] revert 'Conditionally use `PureComponent` instead of `Component`' ([50c382f](https://github.com/airbnb/react-dates/commit/50c382f7cf3e3ba60f4fdaa00eae53cf06d3c97b))
 
diff --git a/package.json b/package.json
index 775dea3576..f25d94fcc3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "18.0.3",
+  "version": "18.0.4",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 8493c235195921c43eee3d2abd9180f7dfd9bf47 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Wed, 12 Sep 2018 17:40:36 -0700
Subject: [PATCH 279/618] Address missing daypicker width when
 calendarMonthPadding theme variable is undefined

---
 src/utils/getCalendarMonthWidth.js       | 2 +-
 test/utils/getCalendarMonthWidth_spec.js | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/utils/getCalendarMonthWidth.js b/src/utils/getCalendarMonthWidth.js
index c576a189ac..9b6d340445 100644
--- a/src/utils/getCalendarMonthWidth.js
+++ b/src/utils/getCalendarMonthWidth.js
@@ -1,3 +1,3 @@
-export default function getCalendarMonthWidth(daySize, calendarMonthPadding) {
+export default function getCalendarMonthWidth(daySize, calendarMonthPadding = 0) {
   return (7 * daySize) + (2 * calendarMonthPadding) + 1;
 }
diff --git a/test/utils/getCalendarMonthWidth_spec.js b/test/utils/getCalendarMonthWidth_spec.js
index 0b20cb9e18..4d734551ce 100644
--- a/test/utils/getCalendarMonthWidth_spec.js
+++ b/test/utils/getCalendarMonthWidth_spec.js
@@ -6,4 +6,12 @@ describe('#getCalendarMonthWidth', () => {
   it('correctly calculates width for default day size of 39', () => {
     expect(getCalendarMonthWidth(39, 13)).to.equal(300);
   });
+
+  it('returns a number when padding is undefined', () => {
+    expect(Number.isNaN(getCalendarMonthWidth(39, undefined))).to.equal(false);
+  });
+
+  it('returns a number when padding is null', () => {
+    expect(Number.isNaN(getCalendarMonthWidth(39, null))).to.equal(false);
+  });
 });

From e376d2fb9b27ee7dd8938881fd1a3dbc7d8fcdf8 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Fri, 14 Sep 2018 08:54:51 -0700
Subject: [PATCH 280/618] Add SingleDatePickerInputController component

---
 src/components/SingleDatePicker.jsx           | 137 +++----
 src/components/SingleDatePickerInput.jsx      |   4 -
 .../SingleDatePickerInputController.jsx       | 263 +++++++++++++
 .../SingleDatePickerInputController_spec.jsx  | 369 ++++++++++++++++++
 test/components/SingleDatePicker_spec.jsx     | 320 ++-------------
 5 files changed, 700 insertions(+), 393 deletions(-)
 create mode 100644 src/components/SingleDatePickerInputController.jsx
 create mode 100644 test/components/SingleDatePickerInputController_spec.jsx

diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index b6f45f9f47..009555bb26 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -10,8 +10,6 @@ import OutsideClickHandler from 'react-outside-click-handler';
 import SingleDatePickerShape from '../shapes/SingleDatePickerShape';
 import { SingleDatePickerPhrases } from '../defaultPhrases';
 
-import toMomentObject from '../utils/toMomentObject';
-import toLocalizedDateString from '../utils/toLocalizedDateString';
 import getResponsiveContainerStyles from '../utils/getResponsiveContainerStyles';
 import getDetachedContainerStyles from '../utils/getDetachedContainerStyles';
 import getInputHeight from '../utils/getInputHeight';
@@ -19,7 +17,7 @@ import isInclusivelyAfterDay from '../utils/isInclusivelyAfterDay';
 import disableScroll from '../utils/disableScroll';
 import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 
-import SingleDatePickerInput from './SingleDatePickerInput';
+import SingleDatePickerInputController from './SingleDatePickerInputController';
 import DayPickerSingleDateController from './DayPickerSingleDateController';
 import CloseButton from './CloseButton';
 
@@ -131,15 +129,12 @@ class SingleDatePicker extends BaseClass {
       showKeyboardShortcuts: false,
     };
 
+    this.onOutsideClick = this.onOutsideClick.bind(this);
+    this.onInputFocus = this.onInputFocus.bind(this);
     this.onDayPickerFocus = this.onDayPickerFocus.bind(this);
     this.onDayPickerBlur = this.onDayPickerBlur.bind(this);
     this.showKeyboardShortcutsPanel = this.showKeyboardShortcutsPanel.bind(this);
 
-    this.onChange = this.onChange.bind(this);
-    this.onFocus = this.onFocus.bind(this);
-    this.onClearFocus = this.onClearFocus.bind(this);
-    this.clearDate = this.clearDate.bind(this);
-
     this.responsivizePickerPosition = this.responsivizePickerPosition.bind(this);
     this.disableScroll = this.disableScroll.bind(this);
 
@@ -185,31 +180,30 @@ class SingleDatePicker extends BaseClass {
     if (this.enableScroll) this.enableScroll();
   }
 
-  onChange(dateString) {
+  onOutsideClick(event) {
     const {
-      isOutsideRange,
-      keepOpenOnDateSelect,
-      onDateChange,
+      focused,
       onFocusChange,
       onClose,
+      startDate,
+      endDate,
+      appendToBody,
     } = this.props;
-    const newDate = toMomentObject(dateString, this.getDisplayFormat());
-
-    const isValid = newDate && !isOutsideRange(newDate);
-    if (isValid) {
-      onDateChange(newDate);
-      if (!keepOpenOnDateSelect) {
-        onFocusChange({ focused: false });
-        onClose({ date: newDate });
-      }
-    } else {
-      onDateChange(null);
-    }
+    if (!focused) return;
+    if (appendToBody && this.dayPickerContainer.contains(event.target)) return;
+
+    this.setState({
+      isInputFocused: false,
+      isDayPickerFocused: false,
+      showKeyboardShortcuts: false,
+    });
+
+    onFocusChange({ focused: false });
+    onClose({ startDate, endDate });
   }
 
-  onFocus() {
+  onInputFocus({ focused }) {
     const {
-      disabled,
       onFocusChange,
       readOnly,
       withPortal,
@@ -217,40 +211,20 @@ class SingleDatePicker extends BaseClass {
       keepFocusOnInput,
     } = this.props;
 
-    const withAnyPortal = withPortal || withFullScreenPortal;
-    const moveFocusToDayPicker = withAnyPortal
-      || (readOnly && !keepFocusOnInput)
-      || (this.isTouchDevice && !keepFocusOnInput);
-
-    if (moveFocusToDayPicker) {
-      this.onDayPickerFocus();
-    } else {
-      this.onDayPickerBlur();
-    }
-
-    if (!disabled) {
-      onFocusChange({ focused: true });
+    if (focused) {
+      const withAnyPortal = withPortal || withFullScreenPortal;
+      const moveFocusToDayPicker = withAnyPortal
+        || (readOnly && !keepFocusOnInput)
+        || (this.isTouchDevice && !keepFocusOnInput);
+
+      if (moveFocusToDayPicker) {
+        this.onDayPickerFocus();
+      } else {
+        this.onDayPickerBlur();
+      }
     }
-  }
-
-  onClearFocus(event) {
-    const {
-      date,
-      focused,
-      onFocusChange,
-      onClose,
-      appendToBody,
-    } = this.props;
-    if (!focused) return;
-    if (appendToBody && this.dayPickerContainer.contains(event.target)) return;
-
-    this.setState({
-      isInputFocused: false,
-      isDayPickerFocused: false,
-    });
 
-    onFocusChange({ focused: false });
-    onClose({ date });
+    onFocusChange({ focused });
   }
 
   onDayPickerFocus() {
@@ -269,19 +243,6 @@ class SingleDatePicker extends BaseClass {
     });
   }
 
-  getDateString(date) {
-    const displayFormat = this.getDisplayFormat();
-    if (date && displayFormat) {
-      return date && date.format(displayFormat);
-    }
-    return toLocalizedDateString(date);
-  }
-
-  getDisplayFormat() {
-    const { displayFormat } = this.props;
-    return typeof displayFormat === 'string' ? displayFormat : displayFormat();
-  }
-
   setDayPickerContainerRef(ref) {
     this.dayPickerContainer = ref;
   }
@@ -290,14 +251,6 @@ class SingleDatePicker extends BaseClass {
     this.container = ref;
   }
 
-  clearDate() {
-    const { onDateChange, reopenPickerOnClearDate, onFocusChange } = this.props;
-    onDateChange(null);
-    if (reopenPickerOnClearDate) {
-      onFocusChange({ focused: true });
-    }
-  }
-
   disableScroll() {
     const { appendToBody, disableScroll: propDisableScroll, focused } = this.props;
     if (!appendToBody && !propDisableScroll) return;
@@ -436,7 +389,7 @@ class SingleDatePicker extends BaseClass {
     } = this.props;
     const { dayPickerContainerStyles, isDayPickerFocused, showKeyboardShortcuts } = this.state;
 
-    const onOutsideClick = (!withFullScreenPortal && withPortal) ? this.onClearFocus : undefined;
+    const onOutsideClick = (!withFullScreenPortal && withPortal) ? this.onOutsideClick : undefined;
     const closeIcon = customCloseIcon || (<CloseButton />);
 
     const inputHeight = getInputHeight(reactDates, small);
@@ -513,7 +466,7 @@ class SingleDatePicker extends BaseClass {
             {...css(styles.SingleDatePicker_closeButton)}
             aria-label={phrases.closeDatePicker}
             type="button"
-            onClick={this.onClearFocus}
+            onClick={this.onOutsideClick}
           >
             <div {...css(styles.SingleDatePicker_closeButton_svg)}>
               {closeIcon}
@@ -539,6 +492,8 @@ class SingleDatePicker extends BaseClass {
       customCloseIcon,
       customInputIcon,
       date,
+      onDateChange,
+      displayFormat,
       phrases,
       withPortal,
       withFullScreenPortal,
@@ -549,19 +504,19 @@ class SingleDatePicker extends BaseClass {
       small,
       regular,
       verticalSpacing,
+      reopenPickerOnClearDate,
+      keepOpenOnDateSelect,
       styles,
     } = this.props;
 
     const { isInputFocused } = this.state;
 
-    const displayValue = this.getDateString(date);
-
     const enableOutsideClick = (!withPortal && !withFullScreenPortal);
 
     const hideFang = verticalSpacing < FANG_HEIGHT_PX;
 
     const input = (
-      <SingleDatePickerInput
+      <SingleDatePickerInputController
         id={id}
         placeholder={placeholder}
         focused={focused}
@@ -571,17 +526,15 @@ class SingleDatePicker extends BaseClass {
         readOnly={readOnly}
         openDirection={openDirection}
         showCaret={!withPortal && !withFullScreenPortal && !hideFang}
-        onClearDate={this.clearDate}
         showClearDate={showClearDate}
         showDefaultInputIcon={showDefaultInputIcon}
         inputIconPosition={inputIconPosition}
         customCloseIcon={customCloseIcon}
         customInputIcon={customInputIcon}
-        displayValue={displayValue}
-        onChange={this.onChange}
-        onFocus={this.onFocus}
-        onKeyDownShiftTab={this.onClearFocus}
-        onKeyDownTab={this.onClearFocus}
+        date={date}
+        onDateChange={onDateChange}
+        displayFormat={displayFormat}
+        onFocusChange={this.onInputFocus}
         onKeyDownArrowDown={this.onDayPickerFocus}
         onKeyDownQuestionMark={this.showKeyboardShortcutsPanel}
         screenReaderMessage={screenReaderInputMessage}
@@ -592,6 +545,8 @@ class SingleDatePicker extends BaseClass {
         small={small}
         regular={regular}
         verticalSpacing={verticalSpacing}
+        reopenPickerOnClearDate={reopenPickerOnClearDate}
+        keepOpenOnDateSelect={keepOpenOnDateSelect}
       />
     );
 
@@ -604,7 +559,7 @@ class SingleDatePicker extends BaseClass {
         )}
       >
         {enableOutsideClick && (
-          <OutsideClickHandler onOutsideClick={this.onClearFocus}>
+          <OutsideClickHandler onOutsideClick={this.onOutsideClick}>
             {input}
             {this.maybeRenderDayPickerWithPortal()}
           </OutsideClickHandler>
diff --git a/src/components/SingleDatePickerInput.jsx b/src/components/SingleDatePickerInput.jsx
index d0afa206c0..368715120d 100644
--- a/src/components/SingleDatePickerInput.jsx
+++ b/src/components/SingleDatePickerInput.jsx
@@ -88,8 +88,6 @@ const defaultProps = {
   phrases: SingleDatePickerInputPhrases,
 };
 
-/* eslint react/no-this-in-sfc: 1 */
-
 function SingleDatePickerInput({
   id,
   placeholder,
@@ -196,8 +194,6 @@ function SingleDatePickerInput({
           type="button"
           aria-label={phrases.clearDate}
           disabled={disabled}
-          onMouseEnter={this && this.onClearDateMouseEnter}
-          onMouseLeave={this && this.onClearDateMouseLeave}
           onClick={onClearDate}
         >
           {closeIcon}
diff --git a/src/components/SingleDatePickerInputController.jsx b/src/components/SingleDatePickerInputController.jsx
new file mode 100644
index 0000000000..7436d33b34
--- /dev/null
+++ b/src/components/SingleDatePickerInputController.jsx
@@ -0,0 +1,263 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+
+import momentPropTypes from 'react-moment-proptypes';
+import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
+import openDirectionShape from '../shapes/OpenDirectionShape';
+
+import { SingleDatePickerInputPhrases } from '../defaultPhrases';
+import getPhrasePropTypes from '../utils/getPhrasePropTypes';
+
+import SingleDatePickerInput from './SingleDatePickerInput';
+
+import IconPositionShape from '../shapes/IconPositionShape';
+import DisabledShape from '../shapes/DisabledShape';
+
+import toMomentObject from '../utils/toMomentObject';
+import toLocalizedDateString from '../utils/toLocalizedDateString';
+
+import isInclusivelyAfterDay from '../utils/isInclusivelyAfterDay';
+
+import BaseClass from '../utils/baseClass';
+
+import {
+  ICON_BEFORE_POSITION,
+  OPEN_DOWN,
+} from '../constants';
+
+const propTypes = forbidExtraProps({
+  date: momentPropTypes.momentObj,
+  onDateChange: PropTypes.func.isRequired,
+
+  focused: PropTypes.bool,
+  onFocusChange: PropTypes.func.isRequired,
+
+  id: PropTypes.string.isRequired,
+  placeholder: PropTypes.string, // also used as label
+  screenReaderMessage: PropTypes.string,
+  showClearDate: PropTypes.bool,
+  showCaret: PropTypes.bool,
+  showDefaultInputIcon: PropTypes.bool,
+  inputIconPosition: IconPositionShape,
+  disabled: DisabledShape,
+  required: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  openDirection: openDirectionShape,
+  noBorder: PropTypes.bool,
+  block: PropTypes.bool,
+  small: PropTypes.bool,
+  regular: PropTypes.bool,
+  verticalSpacing: nonNegativeInteger,
+
+  keepOpenOnDateSelect: PropTypes.bool,
+  reopenPickerOnClearDate: PropTypes.bool,
+  isOutsideRange: PropTypes.func,
+  displayFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+
+  onClose: PropTypes.func,
+  onKeyDownArrowDown: PropTypes.func,
+  onKeyDownQuestionMark: PropTypes.func,
+
+  customInputIcon: PropTypes.node,
+  customCloseIcon: PropTypes.node,
+
+  // accessibility
+  isFocused: PropTypes.bool,
+
+  // i18n
+  phrases: PropTypes.shape(getPhrasePropTypes(SingleDatePickerInputPhrases)),
+
+  isRTL: PropTypes.bool,
+});
+
+const defaultProps = {
+  date: null,
+  focused: false,
+
+  placeholder: '',
+  screenReaderMessage: 'Date',
+  showClearDate: false,
+  showCaret: false,
+  showDefaultInputIcon: false,
+  inputIconPosition: ICON_BEFORE_POSITION,
+  disabled: false,
+  required: false,
+  readOnly: false,
+  openDirection: OPEN_DOWN,
+  noBorder: false,
+  block: false,
+  small: false,
+  regular: false,
+  verticalSpacing: undefined,
+
+  keepOpenOnDateSelect: false,
+  reopenPickerOnClearDate: false,
+  isOutsideRange: day => !isInclusivelyAfterDay(day, moment()),
+  displayFormat: () => moment.localeData().longDateFormat('L'),
+
+  onClose() {},
+  onKeyDownArrowDown() {},
+  onKeyDownQuestionMark() {},
+
+  customInputIcon: null,
+  customCloseIcon: null,
+
+  // accessibility
+  isFocused: false,
+
+  // i18n
+  phrases: SingleDatePickerInputPhrases,
+
+  isRTL: false,
+};
+
+/** @extends React.Component */
+export default class SingleDatePickerInputController extends BaseClass {
+  constructor(props) {
+    super(props);
+
+    this.onChange = this.onChange.bind(this);
+    this.onFocus = this.onFocus.bind(this);
+    this.onClearFocus = this.onClearFocus.bind(this);
+    this.clearDate = this.clearDate.bind(this);
+  }
+
+  onChange(dateString) {
+    const {
+      isOutsideRange,
+      keepOpenOnDateSelect,
+      onDateChange,
+      onFocusChange,
+      onClose,
+    } = this.props;
+    const newDate = toMomentObject(dateString, this.getDisplayFormat());
+
+    const isValid = newDate && !isOutsideRange(newDate);
+    if (isValid) {
+      onDateChange(newDate);
+      if (!keepOpenOnDateSelect) {
+        onFocusChange({ focused: false });
+        onClose({ date: newDate });
+      }
+    } else {
+      onDateChange(null);
+    }
+  }
+
+
+  onFocus() {
+    const {
+      onFocusChange,
+      disabled,
+    } = this.props;
+
+    if (!disabled) {
+      onFocusChange({ focused: true });
+    }
+  }
+
+  onClearFocus() {
+    const {
+      focused,
+      onFocusChange,
+      onClose,
+      date,
+    } = this.props;
+    if (!focused) return;
+
+    onFocusChange({ focused: false });
+    onClose({ date });
+  }
+
+  getDisplayFormat() {
+    const { displayFormat } = this.props;
+    return typeof displayFormat === 'string' ? displayFormat : displayFormat();
+  }
+
+  getDateString(date) {
+    const displayFormat = this.getDisplayFormat();
+    if (date && displayFormat) {
+      return date && date.format(displayFormat);
+    }
+    return toLocalizedDateString(date);
+  }
+
+  clearDate() {
+    const { onDateChange, reopenPickerOnClearDate, onFocusChange } = this.props;
+    onDateChange(null);
+    if (reopenPickerOnClearDate) {
+      onFocusChange({ focused: true });
+    }
+  }
+
+  render() {
+    const {
+      id,
+      placeholder,
+      disabled,
+      focused,
+      isFocused,
+      required,
+      readOnly,
+      openDirection,
+      showClearDate,
+      showCaret,
+      showDefaultInputIcon,
+      inputIconPosition,
+      customCloseIcon,
+      customInputIcon,
+      date,
+      phrases,
+      onKeyDownArrowDown,
+      onKeyDownQuestionMark,
+      screenReaderMessage,
+      isRTL,
+      noBorder,
+      block,
+      small,
+      regular,
+      verticalSpacing,
+    } = this.props;
+
+    const displayValue = this.getDateString(date);
+
+    return (
+      <SingleDatePickerInput
+        id={id}
+        placeholder={placeholder}
+        focused={focused}
+        isFocused={isFocused}
+        disabled={disabled}
+        required={required}
+        readOnly={readOnly}
+        openDirection={openDirection}
+        showCaret={showCaret}
+        onClearDate={this.clearDate}
+        showClearDate={showClearDate}
+        showDefaultInputIcon={showDefaultInputIcon}
+        inputIconPosition={inputIconPosition}
+        customCloseIcon={customCloseIcon}
+        customInputIcon={customInputIcon}
+        displayValue={displayValue}
+        onChange={this.onChange}
+        onFocus={this.onFocus}
+        onKeyDownShiftTab={this.onClearFocus}
+        onKeyDownTab={this.onClearFocus}
+        onKeyDownArrowDown={onKeyDownArrowDown}
+        onKeyDownQuestionMark={onKeyDownQuestionMark}
+        screenReaderMessage={screenReaderMessage}
+        phrases={phrases}
+        isRTL={isRTL}
+        noBorder={noBorder}
+        block={block}
+        small={small}
+        regular={regular}
+        verticalSpacing={verticalSpacing}
+      />
+    );
+  }
+}
+
+SingleDatePickerInputController.propTypes = propTypes;
+SingleDatePickerInputController.defaultProps = defaultProps;
diff --git a/test/components/SingleDatePickerInputController_spec.jsx b/test/components/SingleDatePickerInputController_spec.jsx
new file mode 100644
index 0000000000..995552d13c
--- /dev/null
+++ b/test/components/SingleDatePickerInputController_spec.jsx
@@ -0,0 +1,369 @@
+import React from 'react';
+import { expect } from 'chai';
+import { shallow } from 'enzyme';
+import sinon from 'sinon-sandbox';
+import moment from 'moment';
+
+import SingleDatePickerInput from '../../src/components/SingleDatePickerInput';
+import SingleDatePickerInputController from '../../src/components/SingleDatePickerInputController';
+
+import isSameDay from '../../src/utils/isSameDay';
+
+// Set to noon to mimic how days in the picker are configured internally
+const today = moment().startOf('day').hours(12);
+
+describe('SingleDatePickerInputController', () => {
+  afterEach(() => {
+    sinon.restore();
+  });
+
+  it('renders a SingleDatePickerInput', () => {
+    const wrapper = shallow((
+      <SingleDatePickerInputController
+        id="date"
+        onDateChange={() => {}}
+        onFocusChange={() => {}}
+      />
+    ));
+    expect(wrapper.find(SingleDatePickerInput)).to.have.lengthOf(1);
+  });
+
+  describe('#onChange', () => {
+    describe('valid future date string', () => {
+      const futureDateString = moment().add(10, 'days').format('YYYY-MM-DD');
+      it('calls props.onDateChange once', () => {
+        const onDateChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <SingleDatePickerInputController id="date" onDateChange={onDateChangeStub} onFocusChange={() => {}} />
+        ));
+        wrapper.instance().onChange(futureDateString);
+        expect(onDateChangeStub.callCount).to.equal(1);
+      });
+
+      it('calls props.onDateChange with date as arg', () => {
+        const onDateChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <SingleDatePickerInputController id="date" onDateChange={onDateChangeStub} onFocusChange={() => {}} />
+        ));
+        wrapper.instance().onChange(futureDateString);
+        const newDate = onDateChangeStub.getCall(0).args[0];
+        expect(isSameDay(newDate, moment(futureDateString))).to.equal(true);
+      });
+
+      it('calls props.onFocusChange once', () => {
+        const onFocusChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <SingleDatePickerInputController id="date" onDateChange={() => {}} onFocusChange={onFocusChangeStub} />
+        ));
+        wrapper.instance().onChange(futureDateString);
+        expect(onFocusChangeStub.callCount).to.equal(1);
+      });
+
+      it('calls props.onFocusChange with { focused: false } as arg', () => {
+        const onFocusChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <SingleDatePickerInputController id="date" onDateChange={() => {}} onFocusChange={onFocusChangeStub} />
+        ));
+        wrapper.instance().onChange(futureDateString);
+        expect(onFocusChangeStub.getCall(0).args[0].focused).to.equal(false);
+      });
+
+      it('calls props.onClose once', () => {
+        const onCloseStub = sinon.stub();
+        const wrapper = shallow((
+          <SingleDatePickerInputController
+            id="date"
+            onDateChange={() => {}}
+            onFocusChange={() => {}}
+            onClose={onCloseStub}
+          />
+        ));
+        wrapper.instance().onChange(futureDateString);
+        expect(onCloseStub.callCount).to.equal(1);
+      });
+
+      it('calls props.onClose with { date } as arg', () => {
+        const onCloseStub = sinon.stub();
+        const wrapper = shallow((
+          <SingleDatePickerInputController
+            id="date"
+            onDateChange={() => {}}
+            onFocusChange={() => {}}
+            onClose={onCloseStub}
+          />
+        ));
+        wrapper.instance().onChange(futureDateString);
+        const newDate = onCloseStub.getCall(0).args[0].date;
+        expect(isSameDay(newDate, moment(futureDateString))).to.equal(true);
+      });
+    });
+
+    describe('matches custom display format', () => {
+      const customFormat = 'YY|MM[foobar]DD';
+      const customFormatDateString = moment().add(5, 'days').format(customFormat);
+      it('calls props.onDateChange once', () => {
+        const onDateChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <SingleDatePickerInputController
+            id="date"
+            displayFormat={customFormat}
+            onDateChange={onDateChangeStub}
+            onFocusChange={() => {}}
+          />
+        ));
+        wrapper.instance().onChange(customFormatDateString);
+        expect(onDateChangeStub.callCount).to.equal(1);
+      });
+
+      it('calls props.onDateChange with date as arg', () => {
+        const onDateChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <SingleDatePickerInputController
+            id="date"
+            displayFormat={customFormat}
+            onDateChange={onDateChangeStub}
+            onFocusChange={() => {}}
+          />
+        ));
+        wrapper.instance().onChange(customFormatDateString);
+        const formattedFirstArg = onDateChangeStub.getCall(0).args[0].format(customFormat);
+        expect(formattedFirstArg).to.equal(customFormatDateString);
+      });
+
+      it('calls props.onFocusChange once', () => {
+        const onFocusChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <SingleDatePickerInputController
+            id="date"
+            displayFormat={customFormat}
+            onDateChange={() => {}}
+            onFocusChange={onFocusChangeStub}
+          />
+        ));
+        wrapper.instance().onChange(customFormatDateString);
+        expect(onFocusChangeStub.callCount).to.equal(1);
+      });
+
+      it('calls props.onFocusChange with { focused: false } as arg', () => {
+        const onFocusChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <SingleDatePickerInputController
+            id="date"
+            displayFormat={customFormat}
+            onDateChange={() => {}}
+            onFocusChange={onFocusChangeStub}
+          />
+        ));
+        wrapper.instance().onChange(customFormatDateString);
+        expect(onFocusChangeStub.getCall(0).args[0].focused).to.equal(false);
+      });
+    });
+
+    describe('invalid date string', () => {
+      const invalidDateString = 'foobar';
+      it('calls props.onDateChange once', () => {
+        const onDateChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <SingleDatePickerInputController id="date" onDateChange={onDateChangeStub} onFocusChange={() => {}} />
+        ));
+        wrapper.instance().onChange(invalidDateString);
+        expect(onDateChangeStub.callCount).to.equal(1);
+      });
+
+      it('calls props.onDateChange with null as arg', () => {
+        const onDateChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <SingleDatePickerInputController id="date" onDateChange={onDateChangeStub} onFocusChange={() => {}} />
+        ));
+        wrapper.instance().onChange(invalidDateString);
+        expect(onDateChangeStub.getCall(0).args[0]).to.equal(null);
+      });
+
+      it('does not call props.onFocusChange', () => {
+        const onFocusChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <SingleDatePickerInputController id="date" onDateChange={() => {}} onFocusChange={onFocusChangeStub} />
+        ));
+        wrapper.instance().onChange(invalidDateString);
+        expect(onFocusChangeStub.callCount).to.equal(0);
+      });
+    });
+
+    describe('date string outside range', () => {
+      const isOutsideRangeStub = sinon.stub().returns(true);
+      const todayDateString = today.toISOString();
+
+      it('calls props.onDateChange once', () => {
+        const onDateChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <SingleDatePickerInputController
+            id="date"
+            onDateChange={onDateChangeStub}
+            onFocusChange={() => {}}
+            isOutsideRange={isOutsideRangeStub}
+          />
+        ));
+        wrapper.instance().onChange(todayDateString);
+        expect(onDateChangeStub.callCount).to.equal(1);
+      });
+
+      it('calls props.onDateChange with null as arg', () => {
+        const onDateChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <SingleDatePickerInputController
+            id="date"
+            onDateChange={onDateChangeStub}
+            onFocusChange={() => {}}
+            isOutsideRange={isOutsideRangeStub}
+          />
+        ));
+        wrapper.instance().onChange(todayDateString);
+        expect(onDateChangeStub.getCall(0).args[0]).to.equal(null);
+      });
+
+      it('does not call props.onFocusChange', () => {
+        const onFocusChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <SingleDatePickerInputController
+            id="date"
+            onDateChange={() => {}}
+            onFocusChange={onFocusChangeStub}
+            isOutsideRange={isOutsideRangeStub}
+          />
+        ));
+        wrapper.instance().onChange(todayDateString);
+        expect(onFocusChangeStub.callCount).to.equal(0);
+      });
+    });
+  });
+
+  describe('#onFocus', () => {
+    it('calls props.onFocusChange once', () => {
+      const onFocusChangeStub = sinon.stub();
+      const wrapper = shallow((
+        <SingleDatePickerInputController id="date" onDateChange={() => {}} onFocusChange={onFocusChangeStub} />
+      ));
+      wrapper.instance().onFocus();
+      expect(onFocusChangeStub.callCount).to.equal(1);
+    });
+
+    it('calls props.onFocusChange with { focused: true } as arg', () => {
+      const onFocusChangeStub = sinon.stub();
+      const wrapper = shallow((
+        <SingleDatePickerInputController id="date" onDateChange={() => {}} onFocusChange={onFocusChangeStub} />
+      ));
+      wrapper.instance().onFocus();
+      expect(onFocusChangeStub.getCall(0).args[0].focused).to.equal(true);
+    });
+
+    describe('props.disabled = true', () => {
+      it('does not call props.onFocusChange', () => {
+        const onFocusChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <SingleDatePickerInputController
+            id="date"
+            disabled
+            onDateChange={() => {}}
+            onFocusChange={onFocusChangeStub}
+          />
+        ));
+        wrapper.instance().onFocus();
+        expect(onFocusChangeStub).to.have.property('callCount', 0);
+      });
+    });
+  });
+
+  describe('#onClearFocus', () => {
+    describe('props.focused = false', () => {
+      it('does not call props.onFocusChange', () => {
+        const onFocusChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <SingleDatePickerInputController
+            id="date"
+            onDateChange={() => {}}
+            onFocusChange={onFocusChangeStub}
+            focused={false}
+          />
+        ));
+        wrapper.instance().onClearFocus();
+        expect(onFocusChangeStub.callCount).to.equal(0);
+      });
+    });
+
+    describe('props.focused = true', () => {
+      it('calls props.onFocusChange once', () => {
+        const onFocusChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <SingleDatePickerInputController
+            id="date"
+            onDateChange={() => {}}
+            onFocusChange={onFocusChangeStub}
+            focused
+          />
+        ));
+        wrapper.instance().onClearFocus();
+        expect(onFocusChangeStub.callCount).to.equal(1);
+      });
+
+      it('calls props.onFocusChange with { focused: false } as arg', () => {
+        const onFocusChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <SingleDatePickerInputController
+            id="date"
+            onDateChange={() => {}}
+            onFocusChange={onFocusChangeStub}
+            focused
+          />
+        ));
+        wrapper.instance().onClearFocus();
+        expect(onFocusChangeStub.getCall(0).args[0].focused).to.equal(false);
+      });
+    });
+  });
+
+  describe('#clearDate', () => {
+    describe('props.reopenPickerOnClearDate is truthy', () => {
+      describe('props.onFocusChange', () => {
+        it('is called once', () => {
+          const onFocusChangeStub = sinon.stub();
+          const wrapper = shallow((
+            <SingleDatePickerInputController
+              id="date"
+              onDateChange={() => {}}
+              onFocusChange={onFocusChangeStub}
+              reopenPickerOnClearDate
+            />
+          ));
+          wrapper.instance().clearDate();
+          expect(onFocusChangeStub.callCount).to.equal(1);
+        });
+      });
+    });
+
+    describe('props.reopenPickerOnClearDate is falsy', () => {
+      describe('props.onFocusChange', () => {
+        it('is not called', () => {
+          const onFocusChangeStub = sinon.stub();
+          const wrapper = shallow((
+            <SingleDatePickerInputController
+              id="date"
+              onDateChange={() => {}}
+              onFocusChange={onFocusChangeStub}
+            />
+          ));
+          wrapper.instance().clearDate();
+          expect(onFocusChangeStub.callCount).to.equal(0);
+        });
+      });
+    });
+
+    it('calls props.onDateChange with null date', () => {
+      const onDateChangeStub = sinon.stub();
+      const wrapper = shallow((
+        <SingleDatePickerInputController id="date" onDateChange={onDateChangeStub} onFocusChange={() => {}} />
+      ));
+      wrapper.instance().clearDate();
+      expect(onDateChangeStub.callCount).to.equal(1);
+    });
+  });
+});
diff --git a/test/components/SingleDatePicker_spec.jsx b/test/components/SingleDatePicker_spec.jsx
index 1285bc3f0a..6024cbcc88 100644
--- a/test/components/SingleDatePicker_spec.jsx
+++ b/test/components/SingleDatePicker_spec.jsx
@@ -2,28 +2,22 @@ import React from 'react';
 import { expect } from 'chai';
 import { shallow, mount } from 'enzyme';
 import sinon from 'sinon-sandbox';
-import moment from 'moment';
 import { Portal } from 'react-portal';
 
 import CloseButton from '../../src/components/CloseButton';
 import DayPickerSingleDateController from '../../src/components/DayPickerSingleDateController';
-import SingleDatePickerInput from '../../src/components/SingleDatePickerInput';
+import SingleDatePickerInputController from '../../src/components/SingleDatePickerInputController';
 import SingleDatePicker, { PureSingleDatePicker } from '../../src/components/SingleDatePicker';
 
-import isSameDay from '../../src/utils/isSameDay';
-
 const describeIfWindow = typeof document === 'undefined' ? describe.skip : describe;
 
-// Set to noon to mimic how days in the picker are configured internally
-const today = moment().startOf('day').hours(12);
-
 describe('SingleDatePicker', () => {
   afterEach(() => {
     sinon.restore();
   });
 
   describe('#render', () => {
-    it('renders a SingleDatePickerInput', () => {
+    it('renders a SingleDatePickerInputController', () => {
       const wrapper = shallow((
         <SingleDatePicker
           id="date"
@@ -31,7 +25,7 @@ describe('SingleDatePicker', () => {
           onFocusChange={() => {}}
         />
       )).dive();
-      expect(wrapper.find(SingleDatePickerInput)).to.have.lengthOf(1);
+      expect(wrapper.find(SingleDatePickerInputController)).to.have.lengthOf(1);
     });
 
     describe('DayPickerSingleDateController', () => {
@@ -204,7 +198,7 @@ describe('SingleDatePicker', () => {
 
         it('ignores click events from inside picker', () => {
           const event = { target: instance.dayPickerContainer };
-          instance.onClearFocus(event);
+          instance.onOutsideClick(event);
           expect(onCloseStub.callCount).to.equal(0);
         });
 
@@ -223,216 +217,7 @@ describe('SingleDatePicker', () => {
     });
   });
 
-  describe('#onChange', () => {
-    describe('valid future date string', () => {
-      const futureDateString = moment().add(10, 'days').format('YYYY-MM-DD');
-      it('calls props.onDateChange once', () => {
-        const onDateChangeStub = sinon.stub();
-        const wrapper = shallow((
-          <SingleDatePicker id="date" onDateChange={onDateChangeStub} onFocusChange={() => {}} />
-        )).dive();
-        wrapper.instance().onChange(futureDateString);
-        expect(onDateChangeStub.callCount).to.equal(1);
-      });
-
-      it('calls props.onDateChange with date as arg', () => {
-        const onDateChangeStub = sinon.stub();
-        const wrapper = shallow((
-          <SingleDatePicker id="date" onDateChange={onDateChangeStub} onFocusChange={() => {}} />
-        )).dive();
-        wrapper.instance().onChange(futureDateString);
-        const newDate = onDateChangeStub.getCall(0).args[0];
-        expect(isSameDay(newDate, moment(futureDateString))).to.equal(true);
-      });
-
-      it('calls props.onFocusChange once', () => {
-        const onFocusChangeStub = sinon.stub();
-        const wrapper = shallow((
-          <SingleDatePicker id="date" onDateChange={() => {}} onFocusChange={onFocusChangeStub} />
-        )).dive();
-        wrapper.instance().onChange(futureDateString);
-        expect(onFocusChangeStub.callCount).to.equal(1);
-      });
-
-      it('calls props.onFocusChange with { focused: false } as arg', () => {
-        const onFocusChangeStub = sinon.stub();
-        const wrapper = shallow((
-          <SingleDatePicker id="date" onDateChange={() => {}} onFocusChange={onFocusChangeStub} />
-        )).dive();
-        wrapper.instance().onChange(futureDateString);
-        expect(onFocusChangeStub.getCall(0).args[0].focused).to.equal(false);
-      });
-
-      it('calls props.onClose once', () => {
-        const onCloseStub = sinon.stub();
-        const wrapper = shallow((
-          <SingleDatePicker
-            id="date"
-            onDateChange={() => {}}
-            onFocusChange={() => {}}
-            onClose={onCloseStub}
-          />
-        )).dive();
-        wrapper.instance().onChange(futureDateString);
-        expect(onCloseStub.callCount).to.equal(1);
-      });
-
-      it('calls props.onClose with { date } as arg', () => {
-        const onCloseStub = sinon.stub();
-        const wrapper = shallow((
-          <SingleDatePicker
-            id="date"
-            onDateChange={() => {}}
-            onFocusChange={() => {}}
-            onClose={onCloseStub}
-          />
-        )).dive();
-        wrapper.instance().onChange(futureDateString);
-        const newDate = onCloseStub.getCall(0).args[0].date;
-        expect(isSameDay(newDate, moment(futureDateString))).to.equal(true);
-      });
-    });
-
-    describe('matches custom display format', () => {
-      const customFormat = 'YY|MM[foobar]DD';
-      const customFormatDateString = moment().add(5, 'days').format(customFormat);
-      it('calls props.onDateChange once', () => {
-        const onDateChangeStub = sinon.stub();
-        const wrapper = shallow((
-          <SingleDatePicker
-            id="date"
-            displayFormat={customFormat}
-            onDateChange={onDateChangeStub}
-            onFocusChange={() => {}}
-          />
-        )).dive();
-        wrapper.instance().onChange(customFormatDateString);
-        expect(onDateChangeStub.callCount).to.equal(1);
-      });
-
-      it('calls props.onDateChange with date as arg', () => {
-        const onDateChangeStub = sinon.stub();
-        const wrapper = shallow((
-          <SingleDatePicker
-            id="date"
-            displayFormat={customFormat}
-            onDateChange={onDateChangeStub}
-            onFocusChange={() => {}}
-          />
-        )).dive();
-        wrapper.instance().onChange(customFormatDateString);
-        const formattedFirstArg = onDateChangeStub.getCall(0).args[0].format(customFormat);
-        expect(formattedFirstArg).to.equal(customFormatDateString);
-      });
-
-      it('calls props.onFocusChange once', () => {
-        const onFocusChangeStub = sinon.stub();
-        const wrapper = shallow((
-          <SingleDatePicker
-            id="date"
-            displayFormat={customFormat}
-            onDateChange={() => {}}
-            onFocusChange={onFocusChangeStub}
-          />
-        )).dive();
-        wrapper.instance().onChange(customFormatDateString);
-        expect(onFocusChangeStub.callCount).to.equal(1);
-      });
-
-      it('calls props.onFocusChange with { focused: false } as arg', () => {
-        const onFocusChangeStub = sinon.stub();
-        const wrapper = shallow((
-          <SingleDatePicker
-            id="date"
-            displayFormat={customFormat}
-            onDateChange={() => {}}
-            onFocusChange={onFocusChangeStub}
-          />
-        )).dive();
-        wrapper.instance().onChange(customFormatDateString);
-        expect(onFocusChangeStub.getCall(0).args[0].focused).to.equal(false);
-      });
-    });
-
-    describe('invalid date string', () => {
-      const invalidDateString = 'foobar';
-      it('calls props.onDateChange once', () => {
-        const onDateChangeStub = sinon.stub();
-        const wrapper = shallow((
-          <SingleDatePicker id="date" onDateChange={onDateChangeStub} onFocusChange={() => {}} />
-        )).dive();
-        wrapper.instance().onChange(invalidDateString);
-        expect(onDateChangeStub.callCount).to.equal(1);
-      });
-
-      it('calls props.onDateChange with null as arg', () => {
-        const onDateChangeStub = sinon.stub();
-        const wrapper = shallow((
-          <SingleDatePicker id="date" onDateChange={onDateChangeStub} onFocusChange={() => {}} />
-        )).dive();
-        wrapper.instance().onChange(invalidDateString);
-        expect(onDateChangeStub.getCall(0).args[0]).to.equal(null);
-      });
-
-      it('does not call props.onFocusChange', () => {
-        const onFocusChangeStub = sinon.stub();
-        const wrapper = shallow((
-          <SingleDatePicker id="date" onDateChange={() => {}} onFocusChange={onFocusChangeStub} />
-        )).dive();
-        wrapper.instance().onChange(invalidDateString);
-        expect(onFocusChangeStub.callCount).to.equal(0);
-      });
-    });
-
-    describe('date string outside range', () => {
-      const isOutsideRangeStub = sinon.stub().returns(true);
-      const todayDateString = today.toISOString();
-
-      it('calls props.onDateChange once', () => {
-        const onDateChangeStub = sinon.stub();
-        const wrapper = shallow((
-          <SingleDatePicker
-            id="date"
-            onDateChange={onDateChangeStub}
-            onFocusChange={() => {}}
-            isOutsideRange={isOutsideRangeStub}
-          />
-        )).dive();
-        wrapper.instance().onChange(todayDateString);
-        expect(onDateChangeStub.callCount).to.equal(1);
-      });
-
-      it('calls props.onDateChange with null as arg', () => {
-        const onDateChangeStub = sinon.stub();
-        const wrapper = shallow((
-          <SingleDatePicker
-            id="date"
-            onDateChange={onDateChangeStub}
-            onFocusChange={() => {}}
-            isOutsideRange={isOutsideRangeStub}
-          />
-        )).dive();
-        wrapper.instance().onChange(todayDateString);
-        expect(onDateChangeStub.getCall(0).args[0]).to.equal(null);
-      });
-
-      it('does not call props.onFocusChange', () => {
-        const onFocusChangeStub = sinon.stub();
-        const wrapper = shallow((
-          <SingleDatePicker
-            id="date"
-            onDateChange={() => {}}
-            onFocusChange={onFocusChangeStub}
-            isOutsideRange={isOutsideRangeStub}
-          />
-        )).dive();
-        wrapper.instance().onChange(todayDateString);
-        expect(onFocusChangeStub.callCount).to.equal(0);
-      });
-    });
-  });
-
-  describe('#onFocus', () => {
+  describe('#onInputFocus', () => {
     let onDayPickerFocusSpy;
     let onDayPickerBlurSpy;
     beforeEach(() => {
@@ -445,7 +230,7 @@ describe('SingleDatePicker', () => {
       const wrapper = shallow((
         <SingleDatePicker id="date" onDateChange={() => {}} onFocusChange={onFocusChangeStub} />
       )).dive();
-      wrapper.instance().onFocus();
+      wrapper.instance().onInputFocus({ focused: true });
       expect(onFocusChangeStub.callCount).to.equal(1);
     });
 
@@ -454,7 +239,7 @@ describe('SingleDatePicker', () => {
       const wrapper = shallow((
         <SingleDatePicker id="date" onDateChange={() => {}} onFocusChange={onFocusChangeStub} />
       )).dive();
-      wrapper.instance().onFocus();
+      wrapper.instance().onInputFocus({ focused: true });
       expect(onFocusChangeStub.getCall(0).args[0].focused).to.equal(true);
     });
 
@@ -466,7 +251,7 @@ describe('SingleDatePicker', () => {
           withPortal
         />
       )).dive();
-      wrapper.instance().onFocus();
+      wrapper.instance().onInputFocus({ focused: true });
       expect(onDayPickerFocusSpy.callCount).to.equal(1);
     });
 
@@ -478,7 +263,7 @@ describe('SingleDatePicker', () => {
           withFullScreenPortal
         />
       )).dive();
-      wrapper.instance().onFocus();
+      wrapper.instance().onInputFocus({ focused: true });
       expect(onDayPickerFocusSpy.callCount).to.equal(1);
     });
 
@@ -490,7 +275,7 @@ describe('SingleDatePicker', () => {
           readOnly
         />
       )).dive();
-      wrapper.instance().onFocus();
+      wrapper.instance().onInputFocus({ focused: true });
       expect(onDayPickerFocusSpy.callCount).to.equal(1);
     });
 
@@ -502,7 +287,7 @@ describe('SingleDatePicker', () => {
         />
       )).dive();
       wrapper.instance().isTouchDevice = true;
-      wrapper.instance().onFocus();
+      wrapper.instance().onInputFocus({ focused: true });
       expect(onDayPickerFocusSpy.callCount).to.equal(1);
     });
 
@@ -515,7 +300,7 @@ describe('SingleDatePicker', () => {
         />
       )).dive();
       wrapper.instance().isTouchDevice = true;
-      wrapper.instance().onFocus();
+      wrapper.instance().onInputFocus({ focused: true });
       expect(onDayPickerBlurSpy.callCount).to.equal(1);
     });
 
@@ -528,7 +313,7 @@ describe('SingleDatePicker', () => {
         />
       )).dive();
       wrapper.instance().isTouchDevice = true;
-      wrapper.instance().onFocus();
+      wrapper.instance().onInputFocus({ focused: true });
       expect(onDayPickerBlurSpy.callCount).to.equal(1);
     });
 
@@ -541,7 +326,7 @@ describe('SingleDatePicker', () => {
           withFullScreenPortal
         />
       )).dive();
-      wrapper.instance().onFocus();
+      wrapper.instance().onInputFocus({ focused: true });
       expect(onDayPickerFocusSpy.callCount).to.equal(1);
     });
 
@@ -555,7 +340,7 @@ describe('SingleDatePicker', () => {
           withFullScreenPortal
         />
       )).dive();
-      wrapper.instance().onFocus();
+      wrapper.instance().onInputFocus({ focused: true });
       expect(onDayPickerFocusSpy.callCount).to.equal(1);
     });
 
@@ -566,28 +351,12 @@ describe('SingleDatePicker', () => {
           onFocusChange={sinon.stub()}
         />
       )).dive();
-      wrapper.instance().onFocus();
+      wrapper.instance().onInputFocus({ focused: true });
       expect(onDayPickerBlurSpy.callCount).to.equal(1);
     });
-
-    describe('props.disabled = true', () => {
-      it('does not call props.onFocusChange', () => {
-        const onFocusChangeStub = sinon.stub();
-        const wrapper = shallow((
-          <SingleDatePicker
-            id="date"
-            disabled
-            onDateChange={() => {}}
-            onFocusChange={onFocusChangeStub}
-          />
-        )).dive();
-        wrapper.instance().onFocus();
-        expect(onFocusChangeStub).to.have.property('callCount', 0);
-      });
-    });
   });
 
-  describe('#onClearFocus', () => {
+  describe('#onOutsideClick', () => {
     describe('props.focused = false', () => {
       it('does not call props.onFocusChange', () => {
         const onFocusChangeStub = sinon.stub();
@@ -599,7 +368,7 @@ describe('SingleDatePicker', () => {
             focused={false}
           />
         )).dive();
-        wrapper.instance().onClearFocus();
+        wrapper.instance().onOutsideClick();
         expect(onFocusChangeStub.callCount).to.equal(0);
       });
     });
@@ -616,7 +385,7 @@ describe('SingleDatePicker', () => {
         wrapper.setState({
           isDayPickerFocused: true,
         });
-        wrapper.instance().onClearFocus();
+        wrapper.instance().onOutsideClick();
         expect(wrapper.state().isDayPickerFocused).to.equal(false);
       });
 
@@ -631,7 +400,7 @@ describe('SingleDatePicker', () => {
         wrapper.setState({
           isInputFocused: true,
         });
-        wrapper.instance().onClearFocus();
+        wrapper.instance().onOutsideClick();
         expect(wrapper.state().isInputFocused).to.equal(false);
       });
 
@@ -645,7 +414,7 @@ describe('SingleDatePicker', () => {
             focused
           />
         )).dive();
-        wrapper.instance().onClearFocus();
+        wrapper.instance().onOutsideClick();
         expect(onFocusChangeStub.callCount).to.equal(1);
       });
 
@@ -659,7 +428,7 @@ describe('SingleDatePicker', () => {
             focused
           />
         )).dive();
-        wrapper.instance().onClearFocus();
+        wrapper.instance().onOutsideClick();
         expect(onFocusChangeStub.getCall(0).args[0].focused).to.equal(false);
       });
     });
@@ -796,49 +565,4 @@ describe('SingleDatePicker', () => {
       expect(wrapper.state().showKeyboardShortcuts).to.equal(true);
     });
   });
-
-  describe('#clearDate', () => {
-    describe('props.reopenPickerOnClearDate is truthy', () => {
-      describe('props.onFocusChange', () => {
-        it('is called once', () => {
-          const onFocusChangeStub = sinon.stub();
-          const wrapper = shallow((
-            <SingleDatePicker
-              onDateChange={() => {}}
-              onFocusChange={onFocusChangeStub}
-              reopenPickerOnClearDate
-            />
-          )).dive();
-          wrapper.instance().clearDate();
-          expect(onFocusChangeStub.callCount).to.equal(1);
-        });
-      });
-    });
-
-    describe('props.reopenPickerOnClearDate is falsy', () => {
-      describe('props.onFocusChange', () => {
-        it('is not called', () => {
-          const onFocusChangeStub = sinon.stub();
-          const wrapper = shallow((
-            <SingleDatePicker
-              id="date"
-              onDateChange={() => {}}
-              onFocusChange={onFocusChangeStub}
-            />
-          )).dive();
-          wrapper.instance().clearDate();
-          expect(onFocusChangeStub.callCount).to.equal(0);
-        });
-      });
-    });
-
-    it('calls props.onDateChange with null date', () => {
-      const onDateChangeStub = sinon.stub();
-      const wrapper = shallow((
-        <SingleDatePicker id="date" onDateChange={onDateChangeStub} onFocusChange={() => {}} />
-      )).dive();
-      wrapper.instance().clearDate();
-      expect(onDateChangeStub.callCount).to.equal(1);
-    });
-  });
 });

From 425614c99ab405f0b501a98ca555ca4d4858fb1d Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Tue, 18 Sep 2018 12:43:02 -0400
Subject: [PATCH 281/618] Add `horizontalMonthPadding` to the DRP

---
 src/components/DateRangePicker.jsx | 3 +++
 src/shapes/DateRangePickerShape.js | 1 +
 2 files changed, 4 insertions(+)

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index c87e72c73d..7b903a06c1 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -90,6 +90,7 @@ const defaultProps = {
   verticalHeight: null,
   transitionDuration: undefined,
   verticalSpacing: DEFAULT_VERTICAL_SPACING,
+  horizontalMonthPadding: undefined,
 
   // navigation related props
   navPrev: null,
@@ -385,6 +386,7 @@ class DateRangePicker extends BaseClass {
       verticalHeight,
       transitionDuration,
       verticalSpacing,
+      horizontalMonthPadding,
       small,
       disabled,
       theme: { reactDates },
@@ -469,6 +471,7 @@ class DateRangePicker extends BaseClass {
           verticalHeight={verticalHeight}
           transitionDuration={transitionDuration}
           disabled={disabled}
+          horizontalMonthPadding={horizontalMonthPadding}
         />
 
         {withFullScreenPortal && (
diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js
index a4da75ff7e..5c73cfa4d9 100644
--- a/src/shapes/DateRangePickerShape.js
+++ b/src/shapes/DateRangePickerShape.js
@@ -70,6 +70,7 @@ export default {
   verticalHeight: nonNegativeInteger,
   transitionDuration: nonNegativeInteger,
   verticalSpacing: nonNegativeInteger,
+  horizontalMonthPadding: nonNegativeInteger,
 
   // navigation related props
   navPrev: PropTypes.node,

From bffe7048c81b0c9f36011f4f69e3cf10d43933a9 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Tue, 18 Sep 2018 11:51:06 -0400
Subject: [PATCH 282/618] Address DayPickerNavigation rerender

---
 src/components/DayPicker.jsx       | 36 ++++++++++--------
 test/components/DayPicker_spec.jsx | 60 +++++++++++++++++++-----------
 2 files changed, 60 insertions(+), 36 deletions(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 04694b38d1..5317560bc6 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -207,7 +207,9 @@ class DayPicker extends BaseClass {
     this.onKeyDown = this.onKeyDown.bind(this);
     this.throttledKeyDown = throttle(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);
 
@@ -446,11 +448,15 @@ class DayPicker extends BaseClass {
     }
   }
 
-  onPrevMonthClick(nextFocusedDate, e) {
-    const { daySize, isRTL, numberOfMonths } = this.props;
-    const { calendarMonthWidth, monthTitleHeight } = this.state;
 
+  onPrevMonthClick(e) {
     if (e) e.preventDefault();
+    this.onPrevMonthTransition();
+  }
+
+  onPrevMonthTransition(nextFocusedDate) {
+    const { daySize, isRTL, numberOfMonths } = this.props;
+    const { calendarMonthWidth, monthTitleHeight } = this.state;
 
     let translationValue;
     if (this.isVertical()) {
@@ -506,12 +512,15 @@ class DayPicker extends BaseClass {
     });
   }
 
-  onNextMonthClick(nextFocusedDate, e) {
+  onNextMonthClick(e) {
+    if (e) e.preventDefault();
+    this.onNextMonthTransition();
+  }
+
+  onNextMonthTransition(nextFocusedDate) {
     const { isRTL, numberOfMonths, daySize } = this.props;
     const { calendarMonthWidth, monthTitleHeight } = this.state;
 
-    if (e) e.preventDefault();
-
     let translationValue;
 
     if (this.isVertical()) {
@@ -621,7 +630,7 @@ class DayPicker extends BaseClass {
     const focusedDateMonth = focusedDate.month();
     const isNewFocusedDateVisible = isDayVisible(newFocusedDate, currentMonth, numberOfMonths);
     if (newFocusedDateMonth !== focusedDateMonth && !isNewFocusedDateVisible) {
-      this.onNextMonthClick(newFocusedDate);
+      this.onNextMonthTransition(newFocusedDate);
       return true;
     }
 
@@ -636,7 +645,7 @@ class DayPicker extends BaseClass {
     const focusedDateMonth = focusedDate.month();
     const isNewFocusedDateVisible = isDayVisible(newFocusedDate, currentMonth, numberOfMonths);
     if (newFocusedDateMonth !== focusedDateMonth && !isNewFocusedDateVisible) {
-      this.onPrevMonthClick(newFocusedDate);
+      this.onPrevMonthTransition(newFocusedDate);
       return true;
     }
 
@@ -795,16 +804,13 @@ class DayPicker extends BaseClass {
       return null;
     }
 
-    let onNextMonthClick;
-    if (orientation === VERTICAL_SCROLLABLE) {
-      onNextMonthClick = this.multiplyScrollableMonths;
-    } else {
-      onNextMonthClick = (e) => { this.onNextMonthClick(null, e); };
-    }
+    const onNextMonthClick = orientation === VERTICAL_SCROLLABLE
+      ? this.multiplyScrollableMonths
+      : this.onNextMonthClick;
 
     return (
       <DayPickerNavigation
-        onPrevMonthClick={(e) => { this.onPrevMonthClick(null, e); }}
+        onPrevMonthClick={this.onPrevMonthClick}
         onNextMonthClick={onNextMonthClick}
         navPrev={navPrev}
         navNext={navNext}
diff --git a/test/components/DayPicker_spec.jsx b/test/components/DayPicker_spec.jsx
index 04a6bd53cf..e35dea27b9 100644
--- a/test/components/DayPicker_spec.jsx
+++ b/test/components/DayPicker_spec.jsx
@@ -469,31 +469,49 @@ describe('DayPicker', () => {
   });
 
   describe('#onPrevMonthClick', () => {
-    it('sets state.monthTransition to "prev"', () => {
+    it('calls onPrevMonthTransition', () => {
+      const onPrevMonthTransitionSpy = sinon.spy(PureDayPicker.prototype, 'onPrevMonthTransition');
       const wrapper = shallow(<DayPicker />).dive();
       wrapper.instance().onPrevMonthClick();
+      expect(onPrevMonthTransitionSpy.callCount).to.equal(1);
+    });
+  });
+
+  describe('#onPrevMonthTransition', () => {
+    it('sets state.monthTransition to "prev"', () => {
+      const wrapper = shallow(<DayPicker />).dive();
+      wrapper.instance().onPrevMonthTransition();
       expect(wrapper.state().monthTransition).to.equal('prev');
     });
 
     it('sets state.nextFocusedDate to first arg', () => {
       const test = 'FOOBARBAZ';
       const wrapper = shallow(<DayPicker />).dive();
-      wrapper.instance().onPrevMonthClick(test);
+      wrapper.instance().onPrevMonthTransition(test);
       expect(wrapper.state().nextFocusedDate).to.equal(test);
     });
   });
 
   describe('#onNextMonthClick', () => {
-    it('sets state.monthTransition to "next"', () => {
+    it('calls onNextMonthTransition', () => {
+      const onNextMonthTransitionSpy = sinon.spy(PureDayPicker.prototype, 'onNextMonthTransition');
       const wrapper = shallow(<DayPicker />).dive();
       wrapper.instance().onNextMonthClick();
+      expect(onNextMonthTransitionSpy.callCount).to.equal(1);
+    });
+  });
+
+  describe('#onNextMonthTransition', () => {
+    it('sets state.monthTransition to "next"', () => {
+      const wrapper = shallow(<DayPicker />).dive();
+      wrapper.instance().onNextMonthTransition();
       expect(wrapper.state().monthTransition).to.equal('next');
     });
 
     it('sets state.nextFocusedDate to first arg', () => {
       const test = 'FOOBARBAZ';
       const wrapper = shallow(<DayPicker />).dive();
-      wrapper.instance().onNextMonthClick(test);
+      wrapper.instance().onNextMonthTransition(test);
       expect(wrapper.state().nextFocusedDate).to.equal(test);
     });
   });
@@ -559,13 +577,13 @@ describe('DayPicker', () => {
 
   describe('#maybeTransitionNextMonth', () => {
     describe('arg has same month as state.focusedDate', () => {
-      it('does not call `onNextMonthClick`', () => {
-        const onNextMonthClickSpy = sinon.spy(PureDayPicker.prototype, 'onNextMonthClick');
+      it('does not call `onNextMonthTransition`', () => {
+        const onNextMonthTransitionSpy = sinon.spy(PureDayPicker.prototype, 'onNextMonthTransition');
         const firstOfTodaysMonth = moment().startOf('month');
         const wrapper = shallow(<DayPicker />).dive();
         wrapper.state().focusedDate = firstOfTodaysMonth;
         wrapper.instance().maybeTransitionNextMonth(today);
-        expect(onNextMonthClickSpy.callCount).to.equal(0);
+        expect(onNextMonthTransitionSpy.callCount).to.equal(0);
       });
 
       it('returns false', () => {
@@ -579,13 +597,13 @@ describe('DayPicker', () => {
     describe('arg has different month as state.focusedDate', () => {
       describe('arg is visible', () => {
         it('does not call `onNextMonthClick`', () => {
-          const onNextMonthClickSpy = sinon.spy(PureDayPicker.prototype, 'onNextMonthClick');
+          const onNextMonthTransitionSpy = sinon.spy(PureDayPicker.prototype, 'onNextMonthTransition');
           sinon.stub(isDayVisible, 'default').returns(true);
           const nextMonth = moment().add(1, 'month');
           const wrapper = shallow(<DayPicker />).dive();
           wrapper.state().focusedDate = nextMonth;
           wrapper.instance().maybeTransitionNextMonth(today);
-          expect(onNextMonthClickSpy.callCount).to.equal(0);
+          expect(onNextMonthTransitionSpy.callCount).to.equal(0);
         });
 
         it('returns false', () => {
@@ -598,14 +616,14 @@ describe('DayPicker', () => {
       });
 
       describe('arg is not visible', () => {
-        it('calls `onNextMonthClick`', () => {
-          const onNextMonthClickSpy = sinon.spy(PureDayPicker.prototype, 'onNextMonthClick');
+        it('calls `onNextMonthTransition`', () => {
+          const onNextMonthTransitionSpy = sinon.spy(PureDayPicker.prototype, 'onNextMonthTransition');
           sinon.stub(isDayVisible, 'default').returns(false);
           const nextMonth = moment().add(1, 'month');
           const wrapper = shallow(<DayPicker />).dive();
           wrapper.state().focusedDate = nextMonth;
           wrapper.instance().maybeTransitionNextMonth(today);
-          expect(onNextMonthClickSpy.callCount).to.equal(1);
+          expect(onNextMonthTransitionSpy.callCount).to.equal(1);
         });
 
         it('returns true', () => {
@@ -621,13 +639,13 @@ describe('DayPicker', () => {
 
   describe('#maybeTransitionPrevMonth', () => {
     describe('arg has same month as state.focusedDate', () => {
-      it('does not call `onPrevMonthClick`', () => {
-        const onPrevMonthClickSpy = sinon.spy(PureDayPicker.prototype, 'onPrevMonthClick');
+      it('does not call `onPrevMonthTransition`', () => {
+        const onPrevMonthTransitionSpy = sinon.spy(PureDayPicker.prototype, 'onPrevMonthTransition');
         const firstOfTodaysMonth = moment().startOf('month');
         const wrapper = shallow(<DayPicker />).dive();
         wrapper.state().focusedDate = firstOfTodaysMonth;
         wrapper.instance().maybeTransitionPrevMonth(today);
-        expect(onPrevMonthClickSpy.callCount).to.equal(0);
+        expect(onPrevMonthTransitionSpy.callCount).to.equal(0);
       });
 
       it('returns false', () => {
@@ -640,14 +658,14 @@ describe('DayPicker', () => {
 
     describe('arg has different month as state.focusedDate', () => {
       describe('arg is visible', () => {
-        it('does not call `onPrevMonthClick`', () => {
-          const onPrevMonthClickSpy = sinon.spy(PureDayPicker.prototype, 'onPrevMonthClick');
+        it('does not call `onPrevMonthTransition`', () => {
+          const onPrevMonthTransitionSpy = sinon.spy(PureDayPicker.prototype, 'onPrevMonthTransition');
           sinon.stub(isDayVisible, 'default').returns(true);
           const nextMonth = moment().add(1, 'month');
           const wrapper = shallow(<DayPicker />).dive();
           wrapper.state().focusedDate = nextMonth;
           wrapper.instance().maybeTransitionPrevMonth(today);
-          expect(onPrevMonthClickSpy.callCount).to.equal(0);
+          expect(onPrevMonthTransitionSpy.callCount).to.equal(0);
         });
 
         it('returns false', () => {
@@ -660,14 +678,14 @@ describe('DayPicker', () => {
       });
 
       describe('arg is not visible', () => {
-        it('calls `onPrevMonthClick`', () => {
-          const onPrevMonthClickSpy = sinon.spy(PureDayPicker.prototype, 'onPrevMonthClick');
+        it('calls `onPrevMonthTransition`', () => {
+          const onPrevMonthTransitionSpy = sinon.spy(PureDayPicker.prototype, 'onPrevMonthTransition');
           sinon.stub(isDayVisible, 'default').returns(false);
           const nextMonth = moment().add(1, 'month');
           const wrapper = shallow(<DayPicker />).dive();
           wrapper.state().focusedDate = nextMonth;
           wrapper.instance().maybeTransitionPrevMonth(today);
-          expect(onPrevMonthClickSpy.callCount).to.equal(1);
+          expect(onPrevMonthTransitionSpy.callCount).to.equal(1);
         });
 
         it('returns true', () => {

From 5c5d35631a6692adf7dedc14a140c8f2805392bb Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Wed, 19 Sep 2018 13:28:58 -0700
Subject: [PATCH 283/618] Version 18.1.0

---
 CHANGELOG.md | 10 +++++++++-
 package.json |  2 +-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c2e1cb96f0..177dd68a9a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,14 @@
 # Change Log
 
-<!-- - []  ([#](https://github.com/airbnb/react-dates/pull/)) -->
+<!--
+- []  ([#](https://github.com/airbnb/react-dates/pull/))
+-->
+## 18.1.0
+- [fix] Default the `calendarMonthPadding` theme variable to 0 when undefined ([#1355](https://github.com/airbnb/react-dates/pull/1355))
+- [new] Add `SingleDatePickerInputController` component ([#1360](https://github.com/airbnb/react-dates/pull/1360))
+- [new] Add `horizontalMonthPadding` as a prop to the DRP ([#1364](https://github.com/airbnb/react-dates/pull/1364))
+- [fix] Fix unnecessary rerender in `DayPickerNavigation` ([#1363](https://github.com/airbnb/react-dates/pull/1363))
+
 ## 18.0.4
 - [fix] revert 'revert 'Conditionally use `PureComponent` instead of `Component`'' ([4f8eb01](https://github.com/airbnb/react-dates/commit/4f8eb01168ef6c4ae7d74e95ad14acb28960e43e))
 
diff --git a/package.json b/package.json
index f25d94fcc3..3a6dff4384 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "18.0.4",
+  "version": "18.1.0",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 74028a48c5d108662f29e563ae3486705e9aefdc Mon Sep 17 00:00:00 2001
From: Kristoffer Hedstrom <kris.hedstrom@gmail.com>
Date: Fri, 21 Sep 2018 14:35:29 -0400
Subject: [PATCH 284/618] Pass `isOutsideRange` prop to input controller

---
 src/components/SingleDatePicker.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index 009555bb26..c4a75014a5 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -507,6 +507,7 @@ class SingleDatePicker extends BaseClass {
       reopenPickerOnClearDate,
       keepOpenOnDateSelect,
       styles,
+      isOutsideRange,
     } = this.props;
 
     const { isInputFocused } = this.state;
@@ -529,6 +530,7 @@ class SingleDatePicker extends BaseClass {
         showClearDate={showClearDate}
         showDefaultInputIcon={showDefaultInputIcon}
         inputIconPosition={inputIconPosition}
+        isOutsideRange={isOutsideRange}
         customCloseIcon={customCloseIcon}
         customInputIcon={customInputIcon}
         date={date}

From 341142ce9061539a14a4fbaf9689c2b57e48d49a Mon Sep 17 00:00:00 2001
From: Kristoffer Hedstrom <kris.hedstrom@gmail.com>
Date: Fri, 21 Sep 2018 15:24:01 -0400
Subject: [PATCH 285/618] Add test for `isOutsideRange` prop being passed

---
 test/components/SingleDatePicker_spec.jsx | 35 +++++++++++++++++------
 1 file changed, 26 insertions(+), 9 deletions(-)

diff --git a/test/components/SingleDatePicker_spec.jsx b/test/components/SingleDatePicker_spec.jsx
index 6024cbcc88..026e91fea1 100644
--- a/test/components/SingleDatePicker_spec.jsx
+++ b/test/components/SingleDatePicker_spec.jsx
@@ -17,15 +17,32 @@ describe('SingleDatePicker', () => {
   });
 
   describe('#render', () => {
-    it('renders a SingleDatePickerInputController', () => {
-      const wrapper = shallow((
-        <SingleDatePicker
-          id="date"
-          onDateChange={() => {}}
-          onFocusChange={() => {}}
-        />
-      )).dive();
-      expect(wrapper.find(SingleDatePickerInputController)).to.have.lengthOf(1);
+    describe('SingleDatePickerInputController', () => {
+      it('renders a SingleDatePickerInputController', () => {
+        const wrapper = shallow((
+          <SingleDatePicker
+            id="date"
+            onDateChange={() => {}}
+            onFocusChange={() => {}}
+          />
+        )).dive();
+        expect(wrapper.find(SingleDatePickerInputController)).to.have.lengthOf(1);
+      });
+
+      describe('props.isOutsideRange is defined', () => {
+        it('should pass props.isOutsideRange to <SingleDatePickerInputController>', () => {
+          const isOutsideRange = sinon.stub();
+          const wrapper = shallow((
+            <SingleDatePicker
+              id="date"
+              onDateChange={() => {}}
+              onFocusChange={() => {}}
+              isOutsideRange={isOutsideRange}
+            />
+          )).dive();
+          expect(wrapper.find(SingleDatePickerInputController).prop('isOutsideRange')).to.equal(isOutsideRange);
+        });
+      });
     });
 
     describe('DayPickerSingleDateController', () => {

From 36884d8203c02ad92b89fae29cd6e9d27ad2736f Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Tue, 9 Oct 2018 17:00:31 -0700
Subject: [PATCH 286/618] [Dev Deps] update `airbnb-js-shims`, `aphrodite`,
 `chai`, `enzyme`, `enzyme-adapter-react-helper`, `eslint`,
 `eslint-plugin-jsx-a11y`, `node-sass`, `sinon`, `@storybook/*`

---
 package.json | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index 06cbb6b373..1583c22980 100644
--- a/package.json
+++ b/package.json
@@ -51,13 +51,13 @@
   },
   "homepage": "https://github.com/airbnb/react-dates#readme",
   "devDependencies": {
-    "@storybook/addon-actions": "^3.4.10",
-    "@storybook/addon-info": "^3.4.10",
-    "@storybook/addon-links": "^3.4.10",
-    "@storybook/addon-options": "^3.4.10",
-    "@storybook/react": "^3.4.10",
-    "airbnb-js-shims": "^2.1.0",
-    "aphrodite": "^2.2.2",
+    "@storybook/addon-actions": "^3.4.11",
+    "@storybook/addon-info": "^3.4.11",
+    "@storybook/addon-links": "^3.4.11",
+    "@storybook/addon-options": "^3.4.11",
+    "@storybook/react": "^3.4.11",
+    "airbnb-js-shims": "^2.1.1",
+    "aphrodite": "^2.2.3",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.5",
@@ -68,16 +68,16 @@
     "babel-plugin-transform-replace-object-assign": "^1.0.0",
     "babel-preset-airbnb": "^2.6.0",
     "babel-register": "^6.26.0",
-    "chai": "^4.1.2",
+    "chai": "^4.2.0",
     "clean-css": "^4.2.1",
     "coveralls": "^3.0.2",
     "cross-env": "^5.2.0",
-    "enzyme": "^3.4.1",
-    "enzyme-adapter-react-helper": "^1.3.0",
-    "eslint": "^5.3.0",
+    "enzyme": "^3.7.0",
+    "enzyme-adapter-react-helper": "^1.3.1",
+    "eslint": "^5.7.0",
     "eslint-config-airbnb": "^17.1.0",
     "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "^6.1.1",
+    "eslint-plugin-jsx-a11y": "^6.1.2",
     "eslint-plugin-react": "^7.11.1",
     "eslint-plugin-react-with-styles": "^2.1.0",
     "git-directory-deploy": "^1.5.1",
@@ -94,7 +94,7 @@
     "mocha-wrap": "^2.1.2",
     "moment": "^2.22.2",
     "moment-jalaali": "^0.7.4",
-    "node-sass": "^4.9.2",
+    "node-sass": "^4.9.3",
     "nyc": "^12.0.2",
     "raw-loader": "^0.5.1",
     "react": "^0.14 || ^15.5.4 || ^16.1.1",
@@ -104,7 +104,7 @@
     "rimraf": "^2.6.2",
     "safe-publish-latest": "^1.1.2",
     "sass-loader": "^7.1.0",
-    "sinon": "^6.1.5",
+    "sinon": "^6.3.5",
     "sinon-sandbox": "^2.0.0",
     "style-loader": "^0.20.3",
     "webpack": "^2.6.1",

From b1dd928a4be1976246a2d867cdaa616017aa19b6 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Fri, 12 Oct 2018 10:55:51 -0700
Subject: [PATCH 287/618] Version 18.1.1

---
 CHANGELOG.md | 4 ++++
 package.json | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 177dd68a9a..e9930c428a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,10 @@
 <!--
 - []  ([#](https://github.com/airbnb/react-dates/pull/))
 -->
+
+## 18.1.1
+- [fix] Prevent outside range dates from being selected by typing ([#1370](https://github.com/airbnb/react-dates/pull/1370))
+
 ## 18.1.0
 - [fix] Default the `calendarMonthPadding` theme variable to 0 when undefined ([#1355](https://github.com/airbnb/react-dates/pull/1355))
 - [new] Add `SingleDatePickerInputController` component ([#1360](https://github.com/airbnb/react-dates/pull/1360))
diff --git a/package.json b/package.json
index 3a6dff4384..06cbb6b373 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "18.1.0",
+  "version": "18.1.1",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 4ec3ddacad9cd7662c11b2e5a45f1e07b0d80bce Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Sat, 13 Oct 2018 22:46:28 -0700
Subject: [PATCH 288/618] Update to babel 7

 - spreading a non-iterable into a function call no longer works in babel 7
---
 .nycrc                                 |  4 +--
 .travis.yml                            |  7 +----
 package.json                           | 21 +++++++-------
 src/components/DayPickerNavigation.jsx | 40 +++++++++++++-------------
 test/mocha.opts                        |  4 +--
 5 files changed, 35 insertions(+), 41 deletions(-)

diff --git a/.nycrc b/.nycrc
index d1bfa85672..8dd8d08bee 100644
--- a/.nycrc
+++ b/.nycrc
@@ -7,7 +7,7 @@
     "src"
   ],
   "require": [
-    "babel-register"
+    "@babel/register"
   ],
   "reporter": [
     "text",
@@ -18,7 +18,7 @@
   "statements": 83,
   "branches": 73,
   "lines": 83,
-  "functions": 70,
+  "functions": 68.68,
   "sourceMap": false,
   "instrument": false
 }
diff --git a/.travis.yml b/.travis.yml
index f515349352..e2e94a758e 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,11 +1,8 @@
 language: node_js
 node_js:
-  - "9"
+  - "10"
   - "8"
-  - "7"
   - "6"
-  - "4"
-  - "iojs"
 before_install:
   - 'nvm install-latest-npm'
 before_script:
@@ -39,5 +36,3 @@ matrix:
       env: KARMA=true TEST=false
   allow_failures:
     - node_js: "9"
-    - node_js: "7"
-    - node_js: "iojs"
diff --git a/package.json b/package.json
index 1583c22980..7ef28c53f8 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "build:css": "node scripts/buildCSS.js",
     "clean": "rimraf lib esm",
     "precover": "rimraf coverage && npm run react",
-    "cover": "cross-env NODE_ENV=test node --max-old-space-size=2048 $(which nyc) npm run mocha test",
+    "cover": "cross-env NODE_ENV=test node --max-old-space-size=4096 $(which nyc) npm run mocha test",
     "lint": "eslint --ext .js,.jsx src test",
     "mocha": "mocha ./test/_helpers",
     "storybook:uninstall": "npm uninstall --no-save @storybook/react && rimraf node_modules/@storybook node_modules/react-modal node_modules/react-dom-factories",
@@ -51,6 +51,9 @@
   },
   "homepage": "https://github.com/airbnb/react-dates#readme",
   "devDependencies": {
+    "@babel/cli": "^7.1.2",
+    "@babel/core": "^7.1.2",
+    "@babel/register": "^7.0.0",
     "@storybook/addon-actions": "^3.4.11",
     "@storybook/addon-info": "^3.4.11",
     "@storybook/addon-links": "^3.4.11",
@@ -58,16 +61,12 @@
     "@storybook/react": "^3.4.11",
     "airbnb-js-shims": "^2.1.1",
     "aphrodite": "^2.2.3",
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.3",
-    "babel-loader": "^7.1.5",
-    "babel-plugin-inline-react-svg": "^0.5.4",
+    "babel-loader": "^8.0.4",
+    "babel-plugin-inline-react-svg": "^1.0.0",
     "babel-plugin-inline-svg": "^1.0.0",
-    "babel-plugin-istanbul": "^4.1.6",
-    "babel-plugin-syntax-jsx": "^6.18.0",
-    "babel-plugin-transform-replace-object-assign": "^1.0.0",
-    "babel-preset-airbnb": "^2.6.0",
-    "babel-register": "^6.26.0",
+    "babel-plugin-istanbul": "^5.0.1",
+    "babel-plugin-transform-replace-object-assign": "^2.0.0",
+    "babel-preset-airbnb": "^3.0.1",
     "chai": "^4.2.0",
     "clean-css": "^4.2.1",
     "coveralls": "^3.0.2",
@@ -100,7 +99,7 @@
     "react": "^0.14 || ^15.5.4 || ^16.1.1",
     "react-dom": "^0.14 || ^15.5.4 || ^16.1.1",
     "react-with-styles-interface-aphrodite": "^5.0.1",
-    "react-with-styles-interface-css-compiler": "^1.1.2",
+    "react-with-styles-interface-css-compiler": "^2.0.0",
     "rimraf": "^2.6.2",
     "safe-publish-latest": "^1.1.2",
     "sass-loader": "^7.1.0",
diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index 2bd2e5a38c..164478e31e 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -105,14 +105,14 @@ function DayPickerNavigation({
       {...css(
         styles.DayPickerNavigation,
         isHorizontal && styles.DayPickerNavigation__horizontal,
-        ...isVertical && [
+        ...(isVertical ? [
           styles.DayPickerNavigation__vertical,
           isDefaultNav && styles.DayPickerNavigation__verticalDefault,
-        ],
-        ...isVerticalScrollable && [
+        ] : []),
+        ...(isVerticalScrollable ? [
           styles.DayPickerNavigation__verticalScrollable,
           isDefaultNav && styles.DayPickerNavigation__verticalScrollableDefault,
-        ],
+        ] : []),
       )}
     >
       {!isVerticalScrollable && (
@@ -122,21 +122,21 @@ function DayPickerNavigation({
           {...css(
             styles.DayPickerNavigation_button,
             isDefaultNavPrev && styles.DayPickerNavigation_button__default,
-            ...(isHorizontal && [
+            ...(isHorizontal ? [
               styles.DayPickerNavigation_button__horizontal,
-              ...isDefaultNavPrev && [
+              ...(isDefaultNavPrev ? [
                 styles.DayPickerNavigation_button__horizontalDefault,
                 !isRTL && styles.DayPickerNavigation_leftButton__horizontalDefault,
                 isRTL && styles.DayPickerNavigation_rightButton__horizontalDefault,
-              ],
-            ]),
-            ...(isVertical && [
+              ] : []),
+            ] : []),
+            ...(isVertical ? [
               styles.DayPickerNavigation_button__vertical,
-              ...isDefaultNavPrev && [
+              ...(isDefaultNavPrev ? [
                 styles.DayPickerNavigation_button__verticalDefault,
                 styles.DayPickerNavigation_prevButton__verticalDefault,
-              ],
-            ]),
+              ] : []),
+            ] : []),
           )}
           aria-label={phrases.jumpToPrevMonth}
           onClick={onPrevMonthClick}
@@ -158,24 +158,24 @@ function DayPickerNavigation({
         {...css(
           styles.DayPickerNavigation_button,
           isDefaultNavNext && styles.DayPickerNavigation_button__default,
-          ...(isHorizontal && [
+          ...(isHorizontal ? [
             styles.DayPickerNavigation_button__horizontal,
-            ...isDefaultNavNext && [
+            ...(isDefaultNavNext ? [
               styles.DayPickerNavigation_button__horizontalDefault,
               isRTL && styles.DayPickerNavigation_leftButton__horizontalDefault,
               !isRTL && styles.DayPickerNavigation_rightButton__horizontalDefault,
-            ],
-          ]),
-          ...(isVertical && [
+            ] : []),
+          ] : []),
+          ...(isVertical ? [
             styles.DayPickerNavigation_button__vertical,
             styles.DayPickerNavigation_nextButton__vertical,
-            ...isDefaultNavNext && [
+            ...(isDefaultNavNext ? [
               styles.DayPickerNavigation_button__verticalDefault,
               styles.DayPickerNavigation_nextButton__verticalDefault,
               isVerticalScrollable
                 && styles.DayPickerNavigation_nextButton__verticalScrollableDefault,
-            ],
-          ]),
+            ] : []),
+          ] : []),
         )}
         aria-label={phrases.jumpToNextMonth}
         onClick={onNextMonthClick}
diff --git a/test/mocha.opts b/test/mocha.opts
index 96fe9d50be..670077bcd8 100644
--- a/test/mocha.opts
+++ b/test/mocha.opts
@@ -1,4 +1,4 @@
---require babel-register
---compilers js:babel-register,jsx:babel-register
+--require @babel/register
+--compilers js:@babel/register,jsx:@babel/register
 --require airbnb-js-shims
 --recursive

From 449b4e4216557cd7766448ed62be3067b19acaa3 Mon Sep 17 00:00:00 2001
From: Sumeet Jain <sumeet.jain@airbnb.com>
Date: Mon, 22 Oct 2018 14:53:29 -0700
Subject: [PATCH 289/618] [a11y] expose a callback for when the user hits tab
 or shift tab inside the day picker

For an upcoming refactor, we need to be able to listen for when the user
hits tab inside the day picker. This is to support an a11y change in
which the daypicker will become an immediate sibling of the date input
so the user can just naturally tab into it. The problem is that when the
user hits tab to exit the day picker, we need to close the calendar,
which is currently done inside the DateRangePickerInputController.
---
 src/components/DayPicker.jsx                | 19 ++++++++++++++++++-
 src/components/DayPickerRangeController.jsx | 10 +++++++++-
 test/components/DayPicker_spec.jsx          | 20 ++++++++++++++++++++
 3 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 5317560bc6..84156d68c3 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -99,6 +99,8 @@ const propTypes = forbidExtraProps({
   getFirstFocusableDay: PropTypes.func,
   onBlur: PropTypes.func,
   showKeyboardShortcuts: PropTypes.bool,
+  onTab: PropTypes.func,
+  onShiftTab: PropTypes.func,
 
   // internationalization
   monthFormat: PropTypes.string,
@@ -155,6 +157,8 @@ export const defaultProps = {
   getFirstFocusableDay: null,
   onBlur() {},
   showKeyboardShortcuts: false,
+  onTab() {},
+  onShiftTab() {},
 
   // internationalization
   monthFormat: 'MMMM YYYY',
@@ -356,7 +360,12 @@ class DayPicker extends BaseClass {
   onFinalKeyDown(e) {
     this.setState({ withMouseInteractions: false });
 
-    const { onBlur, isRTL } = this.props;
+    const {
+      onBlur,
+      onTab,
+      onShiftTab,
+      isRTL,
+    } = this.props;
     const { focusedDate, showKeyboardShortcuts } = this.state;
     if (!focusedDate) return;
 
@@ -434,6 +443,14 @@ class DayPicker extends BaseClass {
         }
         break;
 
+      case 'Tab':
+        if (e.shiftKey) {
+          onShiftTab();
+        } else {
+          onTab();
+        }
+        break;
+
       default:
         break;
     }
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 7bfe6d9582..6a962b80e6 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -92,6 +92,8 @@ const propTypes = forbidExtraProps({
   onBlur: PropTypes.func,
   isFocused: PropTypes.bool,
   showKeyboardShortcuts: PropTypes.bool,
+  onTab: PropTypes.func,
+  onShiftTab: PropTypes.func,
 
   // i18n
   monthFormat: PropTypes.string,
@@ -154,6 +156,8 @@ const defaultProps = {
   onBlur() {},
   isFocused: false,
   showKeyboardShortcuts: false,
+  onTab() {},
+  onShiftTab() {},
 
   // i18n
   monthFormat: 'MMMM YYYY',
@@ -626,7 +630,7 @@ export default class DayPickerRangeController extends BaseClass {
     modifiers = this.deleteModifier(modifiers, hoverDate, 'hovered');
 
     if (dateOffset) {
-      modifiers = this.deleteModifierFromRange(modifiers, this.state.dateOffset.start, this.state.dateOffset.end, 'hovered-offset');
+      modifiers = this.deleteModifierFromRange(modifiers, dateOffset.start, dateOffset.end, 'hovered-offset');
     }
 
     if (startDate && !endDate && isAfterDay(hoverDate, startDate)) {
@@ -1065,6 +1069,8 @@ export default class DayPickerRangeController extends BaseClass {
       renderMonthElement,
       calendarInfoPosition,
       onBlur,
+      onShiftTab,
+      onTab,
       isFocused,
       showKeyboardShortcuts,
       isRTL,
@@ -1091,6 +1097,8 @@ export default class DayPickerRangeController extends BaseClass {
         onPrevMonthClick={this.onPrevMonthClick}
         onNextMonthClick={this.onNextMonthClick}
         onMonthChange={this.onMonthChange}
+        onTab={onTab}
+        onShiftTab={onShiftTab}
         onYearChange={this.onYearChange}
         onMultiplyScrollableMonths={this.onMultiplyScrollableMonths}
         monthFormat={monthFormat}
diff --git a/test/components/DayPicker_spec.jsx b/test/components/DayPicker_spec.jsx
index e35dea27b9..aa1e032b67 100644
--- a/test/components/DayPicker_spec.jsx
+++ b/test/components/DayPicker_spec.jsx
@@ -399,6 +399,26 @@ describe('DayPicker', () => {
       });
     });
 
+    describe('Tab', () => {
+      describe('triggers onShiftTab when shift tab is pressed', () => {
+        const onTabStub = sinon.stub();
+        const onShiftTabStub = sinon.stub();
+        const wrapper = shallow(<DayPicker onTab={onTabStub} onShiftTab={onShiftTabStub} />).dive();
+        wrapper.instance().onKeyDown({ ...event, key: 'Tab', shiftKey: true });
+        expect(onTabStub.callCount).to.equal(0);
+        expect(onShiftTabStub.callCount).to.equal(1);
+      });
+
+      describe('triggers onTab', () => {
+        const onTabStub = sinon.stub();
+        const onShiftTabStub = sinon.stub();
+        const wrapper = shallow(<DayPicker onTab={onTabStub} onShiftTab={onShiftTabStub} />).dive();
+        wrapper.instance().onKeyDown({ ...event, key: 'Tab' });
+        expect(onTabStub.callCount).to.equal(1);
+        expect(onShiftTabStub.callCount).to.equal(0);
+      });
+    });
+
     describe('focusedDate is falsy', () => {
       it('does not call maybeTransitionPrevMonth', () => {
         const maybeTransitionPrevMonthSpy = sinon.spy(PureDayPicker.prototype, 'maybeTransitionPrevMonth');

From be3b523bd5843b2643f053d10619a015023bc3fe Mon Sep 17 00:00:00 2001
From: Sumeet Jain <sumeet.jain@airbnb.com>
Date: Tue, 23 Oct 2018 15:30:35 -0700
Subject: [PATCH 290/618] [a11y] add ontab and onshifttab to single day picker

---
 .../DayPickerSingleDateController.jsx         |  8 ++++
 test/components/DayPicker_spec.jsx            | 41 +++++++++++--------
 2 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 120d5d229c..20391923bf 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -77,6 +77,8 @@ const propTypes = forbidExtraProps({
   onBlur: PropTypes.func,
   isFocused: PropTypes.bool,
   showKeyboardShortcuts: PropTypes.bool,
+  onTab: PropTypes.func,
+  onShiftTab: PropTypes.func,
 
   // i18n
   monthFormat: PropTypes.string,
@@ -133,6 +135,8 @@ const defaultProps = {
   onBlur() {},
   isFocused: false,
   showKeyboardShortcuts: false,
+  onTab() {},
+  onShiftTab() {},
 
   // i18n
   monthFormat: 'MMMM YYYY',
@@ -652,6 +656,8 @@ export default class DayPickerSingleDateController extends BaseClass {
       navPrev,
       navNext,
       onOutsideClick,
+      onShiftTab,
+      onTab,
       withPortal,
       focused,
       enableOutsideDays,
@@ -710,6 +716,8 @@ export default class DayPickerSingleDateController extends BaseClass {
         isFocused={isFocused}
         getFirstFocusableDay={this.getFirstFocusableDay}
         onBlur={onBlur}
+        onTab={onTab}
+        onShiftTab={onShiftTab}
         phrases={phrases}
         daySize={daySize}
         isRTL={isRTL}
diff --git a/test/components/DayPicker_spec.jsx b/test/components/DayPicker_spec.jsx
index aa1e032b67..8bb60a48dc 100644
--- a/test/components/DayPicker_spec.jsx
+++ b/test/components/DayPicker_spec.jsx
@@ -397,28 +397,35 @@ describe('DayPicker', () => {
           expect(onBlurStub.callCount).to.equal(1);
         });
       });
-    });
 
-    describe('Tab', () => {
-      describe('triggers onShiftTab when shift tab is pressed', () => {
-        const onTabStub = sinon.stub();
-        const onShiftTabStub = sinon.stub();
-        const wrapper = shallow(<DayPicker onTab={onTabStub} onShiftTab={onShiftTabStub} />).dive();
-        wrapper.instance().onKeyDown({ ...event, key: 'Tab', shiftKey: true });
-        expect(onTabStub.callCount).to.equal(0);
-        expect(onShiftTabStub.callCount).to.equal(1);
-      });
+      describe('Tab', () => {
+        it('triggers onShiftTab when shift tab is pressed', () => {
+          const onTabStub = sinon.stub();
+          const onShiftTabStub = sinon.stub();
+          const wrapper = shallow(
+            <DayPicker onTab={onTabStub} onShiftTab={onShiftTabStub} />,
+          ).dive();
+          wrapper.setState({ focusedDate: today });
+          wrapper.instance().onKeyDown({ ...event, key: 'Tab', shiftKey: true });
+          expect(onTabStub.callCount).to.equal(0);
+          expect(onShiftTabStub.callCount).to.equal(1);
+        });
 
-      describe('triggers onTab', () => {
-        const onTabStub = sinon.stub();
-        const onShiftTabStub = sinon.stub();
-        const wrapper = shallow(<DayPicker onTab={onTabStub} onShiftTab={onShiftTabStub} />).dive();
-        wrapper.instance().onKeyDown({ ...event, key: 'Tab' });
-        expect(onTabStub.callCount).to.equal(1);
-        expect(onShiftTabStub.callCount).to.equal(0);
+        it('triggers onTab', () => {
+          const onTabStub = sinon.stub();
+          const onShiftTabStub = sinon.stub();
+          const wrapper = shallow(
+            <DayPicker onTab={onTabStub} onShiftTab={onShiftTabStub} />,
+          ).dive();
+          wrapper.setState({ focusedDate: today });
+          wrapper.instance().onKeyDown({ ...event, key: 'Tab' });
+          expect(onTabStub.callCount).to.equal(1);
+          expect(onShiftTabStub.callCount).to.equal(0);
+        });
       });
     });
 
+
     describe('focusedDate is falsy', () => {
       it('does not call maybeTransitionPrevMonth', () => {
         const maybeTransitionPrevMonthSpy = sinon.spy(PureDayPicker.prototype, 'maybeTransitionPrevMonth');

From 68620b39269309ace71248019c979a8850162756 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Fri, 26 Oct 2018 00:35:42 -0700
Subject: [PATCH 291/618] [Tests] run the build script, not the lint script, in
 the build job

---
 .travis.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.travis.yml b/.travis.yml
index e2e94a758e..73a9783bd0 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -11,7 +11,7 @@ before_script:
   - 'if [ -n "${KARMA-}" ]; then sleep 3; fi'
 script:
   - 'if [ -n "${LINT-}" ]; then npm run lint ; fi'
-  - 'if [ -n "${BUILD-}" ]; then npm run lint ; fi'
+  - 'if [ -n "${BUILD-}" ]; then npm run build ; fi'
   - 'if [ "${TEST-}" = true ]; then npm run tests-only ; fi'
   - 'if [ -n "${KARMA-}" ]; then npm run tests-karma ; fi'
   - 'if [ -n "${COVERAGE-}" ] && [ "${TRAVIS_BRANCH-}" = "master" ]; then npm run cover; cat ./coverage/lcov.info | ./node_modules/.bin/coveralls ; fi'

From 9b1ec4f65842b84eea2d2ec76b440da48ed972ad Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Fri, 26 Oct 2018 00:08:23 -0700
Subject: [PATCH 292/618] Fix storybook for babel 7 by upgrading to v4

Fixes #1429.
---
 package.json                             |  21 ++--
 stories/DateRangePicker.js               |  25 ++---
 stories/DateRangePicker_calendar.js      | 124 +++++++++++------------
 stories/DateRangePicker_day.js           |  41 ++++----
 stories/DateRangePicker_input.js         |  73 ++++++-------
 stories/DayPicker.js                     |  61 +++++------
 stories/DayPickerRangeController.js      | 117 ++++++++++-----------
 stories/DayPickerSingleDateController.js |  82 +++++++--------
 stories/PresetDateRangePicker.js         |   5 +-
 stories/SingleDatePicker.js              |  21 ++--
 stories/SingleDatePicker_calendar.js     | 112 ++++++++++----------
 stories/SingleDatePicker_day.js          |  29 +++---
 stories/SingleDatePicker_input.js        |  57 ++++++-----
 stories/withStyles.js                    |  37 +++----
 14 files changed, 408 insertions(+), 397 deletions(-)

diff --git a/package.json b/package.json
index 7ef28c53f8..a5289f460d 100644
--- a/package.json
+++ b/package.json
@@ -54,17 +54,18 @@
     "@babel/cli": "^7.1.2",
     "@babel/core": "^7.1.2",
     "@babel/register": "^7.0.0",
-    "@storybook/addon-actions": "^3.4.11",
-    "@storybook/addon-info": "^3.4.11",
-    "@storybook/addon-links": "^3.4.11",
-    "@storybook/addon-options": "^3.4.11",
-    "@storybook/react": "^3.4.11",
+    "@storybook/addon-actions": "^4.0.0",
+    "@storybook/addon-info": "^4.0.0",
+    "@storybook/addon-links": "^4.0.0",
+    "@storybook/addon-options": "^4.0.0",
+    "@storybook/react": "^4.0.0",
+    "acorn": "^6.0.2",
     "airbnb-js-shims": "^2.1.1",
     "aphrodite": "^2.2.3",
     "babel-loader": "^8.0.4",
-    "babel-plugin-inline-react-svg": "^1.0.0",
+    "babel-plugin-inline-react-svg": "^1.0.1",
     "babel-plugin-inline-svg": "^1.0.0",
-    "babel-plugin-istanbul": "^5.0.1",
+    "babel-plugin-istanbul": "^5.1.0",
     "babel-plugin-transform-replace-object-assign": "^2.0.0",
     "babel-preset-airbnb": "^3.0.1",
     "chai": "^4.2.0",
@@ -83,12 +84,12 @@
     "imports-loader": "^0.8.0",
     "in-publish": "^2.0.0",
     "json-loader": "^0.5.7",
-    "karma": "^1.7.1",
+    "karma": "^3.1.1",
     "karma-chai": "^0.1.0",
     "karma-firefox-launcher": "^1.1.0",
     "karma-mocha": "^1.3.0",
     "karma-sinon": "^1.0.5",
-    "karma-webpack": "^2.0.9",
+    "karma-webpack": "^4.0.0-rc.2",
     "mocha": "^3.5.3",
     "mocha-wrap": "^2.1.2",
     "moment": "^2.22.2",
@@ -106,7 +107,7 @@
     "sinon": "^6.3.5",
     "sinon-sandbox": "^2.0.0",
     "style-loader": "^0.20.3",
-    "webpack": "^2.6.1",
+    "webpack": "^4.23.1",
     "why-did-you-update": "^0.1.1"
   },
   "dependencies": {
diff --git a/stories/DateRangePicker.js b/stories/DateRangePicker.js
index 5e9b0561a1..3b15743fa5 100644
--- a/stories/DateRangePicker.js
+++ b/stories/DateRangePicker.js
@@ -2,6 +2,7 @@ import React from 'react';
 import moment from 'moment';
 import momentJalaali from 'moment-jalaali';
 import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
 import {
   VERTICAL_ORIENTATION,
 } from '../src/constants';
@@ -53,21 +54,21 @@ class TestWrapper extends React.Component {
 }
 
 storiesOf('DateRangePicker (DRP)', module)
-  .addWithInfo('default', () => (
+  .add('default', withInfo()(() => (
     <DateRangePickerWrapper />
-  ))
-  .addWithInfo('hidden with display: none', () => (
+  )))
+  .add('hidden with display: none', withInfo()(() => (
     <TestWrapper />
-  ))
-  .addWithInfo('as part of a form', () => (
+  )))
+  .add('as part of a form', withInfo()(() => (
     <div>
       <DateRangePickerWrapper />
       <TestInput placeholder="Input 1" />
       <TestInput placeholder="Input 2" />
       <TestInput placeholder="Input 3" />
     </div>
-  ))
-  .addWithInfo('non-english locale', () => {
+  )))
+  .add('non-english locale', withInfo()(() => {
     moment.locale('zh-cn');
     return (
       <DateRangePickerWrapper
@@ -81,8 +82,8 @@ storiesOf('DateRangePicker (DRP)', module)
         }}
       />
     );
-  })
-  .addWithInfo('non-english locale (Persian)', () => {
+  }))
+  .add('non-english locale (Persian)', withInfo()(() => {
     moment.locale('fa');
     momentJalaali.loadPersian({ dialect: 'persian-modern', usePersianDigits: true });
     return (
@@ -95,10 +96,10 @@ storiesOf('DateRangePicker (DRP)', module)
         renderDayContents={day => momentJalaali(day).format('jD')}
       />
     );
-  })
-  .addWithInfo('vertical with custom height', () => (
+  }))
+  .add('vertical with custom height', withInfo()(() => (
     <DateRangePickerWrapper
       orientation={VERTICAL_ORIENTATION}
       verticalHeight={568}
     />
-  ));
+  )));
diff --git a/stories/DateRangePicker_calendar.js b/stories/DateRangePicker_calendar.js
index 81e93a5d55..599d3bb571 100644
--- a/stories/DateRangePicker_calendar.js
+++ b/stories/DateRangePicker_calendar.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import moment from 'moment';
 import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
 
 import { VERTICAL_ORIENTATION, ANCHOR_RIGHT, OPEN_UP } from '../src/constants';
 
@@ -40,41 +41,41 @@ const TestCustomInfoPanel = () => (
 );
 
 storiesOf('DRP - Calendar Props', module)
-  .addWithInfo('default', () => (
+  .add('default', withInfo()(() => (
     <DateRangePickerWrapper autoFocus />
-  ))
-  .addWithInfo('open up', () => (
+  )))
+  .add('open up', withInfo()(() => (
     <div style={{ marginTop: '450px' }}>
       <DateRangePickerWrapper
         openDirection={OPEN_UP}
         autoFocus
       />
     </div>
-  ))
-  .addWithInfo('single month', () => (
+  )))
+  .add('single month', withInfo()(() => (
     <DateRangePickerWrapper numberOfMonths={1} autoFocus />
-  ))
-  .addWithInfo('3 months', () => (
+  )))
+  .add('3 months', withInfo()(() => (
     <DateRangePickerWrapper numberOfMonths={3} autoFocus />
-  ))
-  .addWithInfo('with custom day size', () => (
+  )))
+  .add('with custom day size', withInfo()(() => (
     <DateRangePickerWrapper daySize={50} autoFocus />
-  ))
-  .addWithInfo('anchored right', () => (
+  )))
+  .add('anchored right', withInfo()(() => (
     <div style={{ float: 'right' }}>
       <DateRangePickerWrapper
         anchorDirection={ANCHOR_RIGHT}
         autoFocus
       />
     </div>
-  ))
-  .addWithInfo('vertical', () => (
+  )))
+  .add('vertical', withInfo()(() => (
     <DateRangePickerWrapper
       orientation={VERTICAL_ORIENTATION}
       autoFocus
     />
-  ))
-  .addWithInfo('vertical anchored right', () => (
+  )))
+  .add('vertical anchored right', withInfo()(() => (
     <div style={{ float: 'right' }}>
       <DateRangePickerWrapper
         orientation={VERTICAL_ORIENTATION}
@@ -82,82 +83,82 @@ storiesOf('DRP - Calendar Props', module)
         autoFocus
       />
     </div>
-  ))
-  .addWithInfo('horizontal with portal', () => (
+  )))
+  .add('horizontal with portal', withInfo()(() => (
     <DateRangePickerWrapper
       withPortal
       autoFocus
     />
-  ))
-  .addWithInfo('horizontal with fullscreen portal', () => (
+  )))
+  .add('horizontal with fullscreen portal', withInfo()(() => (
     <DateRangePickerWrapper withFullScreenPortal autoFocus />
-  ))
-  .addWithInfo('vertical with full screen portal', () => (
+  )))
+  .add('vertical with full screen portal', withInfo()(() => (
     <DateRangePickerWrapper
       orientation={VERTICAL_ORIENTATION}
       withFullScreenPortal
       autoFocus
     />
-  ))
-  .addWithInfo('disable scroll', () => (
+  )))
+  .add('disable scroll', withInfo()(() => (
     <div style={{ height: '100vh' }}>
       <div>This content scrolls.</div>
       <DateRangePickerWrapper preventScroll autoFocus />
     </div>
-  ))
-  .addWithInfo('appended to body', () => <DateRangePickerWrapper appendToBody autoFocus />)
-  .addWithInfo('appended to body (in scrollable container)', () => (
+  )))
+  .add('appended to body', withInfo()(() => <DateRangePickerWrapper appendToBody autoFocus />))
+  .add('appended to body (in scrollable container)', withInfo()(() => (
     <div style={{ height: 200, overflow: 'auto', background: 'whitesmoke' }}>
       <div>This content scrolls.</div>
       <div style={{ marginBottom: 300 }}>
         <DateRangePickerWrapper appendToBody autoFocus />
       </div>
     </div>
-  ))
-  .addWithInfo('does not autoclose the DayPicker on date selection', () => (
+  )))
+  .add('does not autoclose the DayPicker on date selection', withInfo()(() => (
     <DateRangePickerWrapper
       keepOpenOnDateSelect
       autoFocus
     />
-  ))
-  .addWithInfo('with custom month navigation', () => (
+  )))
+  .add('with custom month navigation', withInfo()(() => (
     <DateRangePickerWrapper
       navPrev={<CustomMonthNav>&#8249;</CustomMonthNav>}
       navNext={<CustomMonthNav style={{ left: 48 }}>&#8250;</CustomMonthNav>}
       numberOfMonths={1}
       autoFocus
     />
-  ))
-  .addWithInfo('vertical with custom month navigation', () => (
+  )))
+  .add('vertical with custom month navigation', withInfo()(() => (
     <DateRangePickerWrapper
       orientation={VERTICAL_ORIENTATION}
       navPrev={<CustomMonthNav>&#8249;</CustomMonthNav>}
       navNext={<CustomMonthNav style={{ left: 48 }}>&#8250;</CustomMonthNav>}
       autoFocus
     />
-  ))
-  .addWithInfo('with outside days enabled', () => (
+  )))
+  .add('with outside days enabled', withInfo()(() => (
     <DateRangePickerWrapper
       numberOfMonths={1}
       enableOutsideDays
       autoFocus
     />
-  ))
-  .addWithInfo('with month specified on open', () => (
+  )))
+  .add('with month specified on open', withInfo()(() => (
     <DateRangePickerWrapper
       initialVisibleMonth={() => moment().add(10, 'months')}
       autoFocus
     />
-  ))
-  .addWithInfo('with info panel default', () => (
+  )))
+  .add('with info panel default', withInfo()(() => (
     <DateRangePickerWrapper
       renderCalendarInfo={() => (
         <TestCustomInfoPanel />
       )}
       autoFocus
     />
-  ))
-  .addWithInfo('with info panel before', () => (
+  )))
+  .add('with info panel before', withInfo()(() => (
     <DateRangePickerWrapper
       calendarInfoPosition="before"
       renderCalendarInfo={() => (
@@ -165,8 +166,8 @@ storiesOf('DRP - Calendar Props', module)
       )}
       autoFocus
     />
-  ))
-  .addWithInfo('with info panel after', () => (
+  )))
+  .add('with info panel after', withInfo()(() => (
     <DateRangePickerWrapper
       calendarInfoPosition="after"
       renderCalendarInfo={() => (
@@ -174,8 +175,8 @@ storiesOf('DRP - Calendar Props', module)
       )}
       autoFocus
     />
-  ))
-  .addWithInfo('with info panel bottom', () => (
+  )))
+  .add('with info panel bottom', withInfo()(() => (
     <DateRangePickerWrapper
       calendarInfoPosition="bottom"
       renderCalendarInfo={() => (
@@ -183,8 +184,8 @@ storiesOf('DRP - Calendar Props', module)
       )}
       autoFocus
     />
-  ))
-  .addWithInfo('with info panel top', () => (
+  )))
+  .add('with info panel top', withInfo()(() => (
     <DateRangePickerWrapper
       calendarInfoPosition="top"
       renderCalendarInfo={() => (
@@ -192,14 +193,14 @@ storiesOf('DRP - Calendar Props', module)
       )}
       autoFocus
     />
-  ))
-  .addWithInfo('with keyboard shortcuts panel hidden', () => (
+  )))
+  .add('with keyboard shortcuts panel hidden', withInfo()(() => (
     <DateRangePickerWrapper
       hideKeyboardShortcutsPanel
       autoFocus
     />
-  ))
-  .addWithInfo('with RTL support (and anchor right)', () => (
+  )))
+  .add('with RTL support (and anchor right)', withInfo()(() => (
     <div style={{ float: 'right' }}>
       <DateRangePickerWrapper
         anchorDirection={ANCHOR_RIGHT}
@@ -207,36 +208,35 @@ storiesOf('DRP - Calendar Props', module)
         autoFocus
       />
     </div>
-  ))
-  .addWithInfo('vertical with RTL support', () => (
+  )))
+  .add('vertical with RTL support', withInfo()(() => (
     <DateRangePickerWrapper
       orientation={VERTICAL_ORIENTATION}
       isRTL
       autoFocus
     />
-  ))
-  .addWithInfo('with custom first day of week', () => (
+  )))
+  .add('with custom first day of week', withInfo()(() => (
     <DateRangePickerWrapper
       firstDayOfWeek={3}
       autoFocus
     />
-  ))
-  .addWithInfo('with onClose handler', () => (
+  )))
+  .add('with onClose handler', withInfo()(() => (
     <DateRangePickerWrapper
       onClose={({ startDate, endDate }) => alert(`onClose: startDate = ${startDate}, endDate = ${endDate}`)}
       autoFocus
     />
-  ))
-  .addWithInfo('with no animation', () => (
+  )))
+  .add('with no animation', withInfo()(() => (
     <DateRangePickerWrapper
       transitionDuration={0}
       autoFocus
     />
-  ))
-  .addWithInfo('with custom vertical spacing', () => (
+  )))
+  .add('with custom vertical spacing', withInfo()(() => (
     <DateRangePickerWrapper
       verticalSpacing={0}
       autoFocus
     />
-  ));
-
+  )));
diff --git a/stories/DateRangePicker_day.js b/stories/DateRangePicker_day.js
index 218b10fe6c..7c75a2614a 100644
--- a/stories/DateRangePicker_day.js
+++ b/stories/DateRangePicker_day.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import moment from 'moment';
 import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
 
 import isSameDay from '../src/utils/isSameDay';
 import isInclusivelyAfterDay from '../src/utils/isInclusivelyAfterDay';
@@ -73,30 +74,30 @@ const customDayStyles = {
 };
 
 storiesOf('DRP - Day Props', module)
-  .addWithInfo('default', () => (
+  .add('default', withInfo()(() => (
     <DateRangePickerWrapper autoFocus />
-  ))
-  .addWithInfo('with minimum nights set', () => (
+  )))
+  .add('with minimum nights set', withInfo()(() => (
     <DateRangePickerWrapper
       minimumNights={3}
       initialStartDate={moment().add(3, 'days')}
       autoFocusEndDate
     />
-  ))
-  .addWithInfo('allows single day range', () => (
+  )))
+  .add('allows single day range', withInfo()(() => (
     <DateRangePickerWrapper
       minimumNights={0}
       initialStartDate={moment().add(3, 'days')}
       autoFocusEndDate
     />
-  ))
-  .addWithInfo('allows all days, including past days', () => (
+  )))
+  .add('allows all days, including past days', withInfo()(() => (
     <DateRangePickerWrapper
       isOutsideRange={() => false}
       autoFocus
     />
-  ))
-  .addWithInfo('allows next two weeks only', () => (
+  )))
+  .add('allows next two weeks only', withInfo()(() => (
     <DateRangePickerWrapper
       isOutsideRange={day =>
         !isInclusivelyAfterDay(day, moment()) ||
@@ -104,35 +105,35 @@ storiesOf('DRP - Day Props', module)
       }
       autoFocus
     />
-  ))
-  .addWithInfo('with some blocked dates', () => (
+  )))
+  .add('with some blocked dates', withInfo()(() => (
     <DateRangePickerWrapper
       isDayBlocked={day1 => datesList.some(day2 => isSameDay(day1, day2))}
       autoFocus
     />
-  ))
-  .addWithInfo('with some highlighted dates', () => (
+  )))
+  .add('with some highlighted dates', withInfo()(() => (
     <DateRangePickerWrapper
       isDayHighlighted={day1 => datesList.some(day2 => isSameDay(day1, day2))}
       autoFocus
     />
-  ))
-  .addWithInfo('blocks fridays', () => (
+  )))
+  .add('blocks fridays', withInfo()(() => (
     <DateRangePickerWrapper
       isDayBlocked={day => moment.weekdays(day.weekday()) === 'Friday'}
       autoFocus
     />
-  ))
-  .addWithInfo('with custom daily details', () => (
+  )))
+  .add('with custom daily details', withInfo()(() => (
     <DateRangePickerWrapper
       renderDayContents={day => <td className="foo-bar">{day.format('ddd')}</td>}
       autoFocus
     />
-  ))
-  .addWithInfo('one-off custom styling', () => (
+  )))
+  .add('one-off custom styling', withInfo()(() => (
     <DateRangePickerWrapper
       minimumNights={3}
       renderCalendarDay={props => <CustomizableCalendarDay {...props} {...customDayStyles} />}
       autoFocus
     />
-  ));
+  )));
diff --git a/stories/DateRangePicker_input.js b/stories/DateRangePicker_input.js
index 548208cce9..da2ad90c75 100644
--- a/stories/DateRangePicker_input.js
+++ b/stories/DateRangePicker_input.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import moment from 'moment';
 import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
 
 import isInclusivelyBeforeDay from '../src/utils/isInclusivelyBeforeDay';
 import isInclusivelyAfterDay from '../src/utils/isInclusivelyAfterDay';
@@ -45,28 +46,28 @@ const TestCustomCloseIcon = () => (
 );
 
 storiesOf('DRP - Input Props', module)
-  .addWithInfo('default', () => (
+  .add('default', withInfo()(() => (
     <DateRangePickerWrapper
       initialStartDate={moment().add(3, 'months')}
       initialEndDate={moment().add(3, 'months').add(10, 'days')}
     />
-  ))
-  .addWithInfo('disabled', () => (
+  )))
+  .add('disabled', withInfo()(() => (
     <DateRangePickerWrapper
       initialStartDate={moment().add(3, 'months')}
       initialEndDate={moment().add(3, 'months').add(10, 'days')}
       disabled
     />
-  ))
-  .addWithInfo('disabled start date', () => (
+  )))
+  .add('disabled start date', withInfo()(() => (
     <DateRangePickerWrapper
       initialStartDate={moment().add(3, 'months')}
       initialEndDate={moment().add(3, 'months').add(10, 'days')}
       disabled="startDate"
       isOutsideRange={day => !isInclusivelyAfterDay(day, moment().add(3, 'months'))}
     />
-  ))
-  .addWithInfo('disabled end date', () => (
+  )))
+  .add('disabled end date', withInfo()(() => (
     <DateRangePickerWrapper
       initialStartDate={moment().add(3, 'months')}
       initialEndDate={moment().add(3, 'months').add(10, 'days')}
@@ -74,108 +75,108 @@ storiesOf('DRP - Input Props', module)
       isOutsideRange={day => !isInclusivelyAfterDay(day, moment()) ||
         !isInclusivelyBeforeDay(day, moment().add(3, 'months').add(10, 'days'))}
     />
-  ))
-  .addWithInfo('readOnly', () => (
+  )))
+  .add('readOnly', withInfo()(() => (
     <DateRangePickerWrapper
       initialStartDate={moment().add(3, 'months')}
       initialEndDate={moment().add(3, 'months').add(10, 'days')}
       readOnly
     />
-  ))
-  .addWithInfo('with clear dates button', () => (
+  )))
+  .add('with clear dates button', withInfo()(() => (
     <DateRangePickerWrapper
       initialStartDate={moment().add(3, 'days')}
       initialEndDate={moment().add(10, 'days')}
       showClearDates
     />
-  ))
-  .addWithInfo('reopens DayPicker on clear dates', () => (
+  )))
+  .add('reopens DayPicker on clear dates', withInfo()(() => (
     <DateRangePickerWrapper
       initialStartDate={moment().add(3, 'days')}
       initialEndDate={moment().add(10, 'days')}
       showClearDates
       reopenPickerOnClearDates
     />
-  ))
-  .addWithInfo('with custom display format', () => (
+  )))
+  .add('with custom display format', withInfo()(() => (
     <DateRangePickerWrapper
       initialStartDate={moment().add(3, 'days')}
       initialEndDate={moment().add(10, 'days')}
       displayFormat="MMM D"
     />
-  ))
-  .addWithInfo('with show calendar icon', () => (
+  )))
+  .add('with show calendar icon', withInfo()(() => (
     <DateRangePickerWrapper
       initialStartDate={moment().add(3, 'days')}
       initialEndDate={moment().add(10, 'days')}
       showDefaultInputIcon
     />
-  ))
-  .addWithInfo('with custom show calendar icon', () => (
+  )))
+  .add('with custom show calendar icon', withInfo()(() => (
     <DateRangePickerWrapper
       initialStartDate={moment().add(3, 'days')}
       initialEndDate={moment().add(10, 'days')}
       customInputIcon={<TestCustomInputIcon />}
     />
-  ))
-  .addWithInfo('with custom arrow icon', () => (
+  )))
+  .add('with custom arrow icon', withInfo()(() => (
     <DateRangePickerWrapper
       initialStartDate={moment().add(3, 'days')}
       initialEndDate={moment().add(10, 'days')}
       customArrowIcon={<TestCustomArrowIcon />}
     />
-  ))
-  .addWithInfo('with custom close icon', () => (
+  )))
+  .add('with custom close icon', withInfo()(() => (
     <DateRangePickerWrapper
       initialStartDate={moment().add(3, 'days')}
       initialEndDate={moment().add(10, 'days')}
       showClearDates
       customCloseIcon={<TestCustomCloseIcon />}
     />
-  ))
-  .addWithInfo('with show calendar icon after input', () => (
+  )))
+  .add('with show calendar icon after input', withInfo()(() => (
     <DateRangePickerWrapper
       initialStartDate={moment().add(3, 'days')}
       initialEndDate={moment().add(10, 'days')}
       showDefaultInputIcon
       inputIconPosition="after"
     />
-  ))
-  .addWithInfo('with screen reader message', () => (
+  )))
+  .add('with screen reader message', withInfo()(() => (
     <DateRangePickerWrapper
       initialStartDate={moment().add(3, 'days')}
       initialEndDate={moment().add(10, 'days')}
       screenReaderInputMessage="Here you could inform screen reader users of the date format, minimum nights, blocked out dates, etc"
     />
-  ))
-  .addWithInfo('noBorder', () => (
+  )))
+  .add('noBorder', withInfo()(() => (
     <DateRangePickerWrapper
       initialStartDate={moment().add(3, 'days')}
       initialEndDate={moment().add(10, 'days')}
       noBorder
     />
-  ))
-  .addWithInfo('block styling', () => (
+  )))
+  .add('block styling', withInfo()(() => (
     <DateRangePickerWrapper
       initialStartDate={moment().add(3, 'days')}
       initialEndDate={moment().add(10, 'days')}
       showClearDates
       block
     />
-  ))
-  .addWithInfo('small styling', () => (
+  )))
+  .add('small styling', withInfo()(() => (
     <DateRangePickerWrapper
       initialStartDate={moment().add(3, 'days')}
       initialEndDate={moment().add(10, 'days')}
       showClearDates
       small
     />
-  ))
-  .addWithInfo('regular styling', () => (
+  )))
+  .add('regular styling', withInfo()(() => (
     <DateRangePickerWrapper
       initialStartDate={moment().add(3, 'days')}
       initialEndDate={moment().add(10, 'days')}
       showClearDates
       regular
     />
-  ));
+  )));
diff --git a/stories/DayPicker.js b/stories/DayPicker.js
index 043c3952db..c12bf8c6da 100644
--- a/stories/DayPicker.js
+++ b/stories/DayPicker.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
 import DayPicker from '../src/components/DayPicker';
 
 import {
@@ -46,25 +47,25 @@ const TestCustomInfoPanel = () => (
 );
 
 storiesOf('DayPicker', module)
-  .addWithInfo('default', () => (
+  .add('default', withInfo()(() => (
     <DayPicker />
-  ))
-  .addWithInfo('with custom day size', () => (
+  )))
+  .add('with custom day size', withInfo()(() => (
     <DayPicker daySize={50} />
-  ))
-  .addWithInfo('single month', () => (
+  )))
+  .add('single month', withInfo()(() => (
     <DayPicker numberOfMonths={1} />
-  ))
-  .addWithInfo('3 months', () => (
+  )))
+  .add('3 months', withInfo()(() => (
     <DayPicker numberOfMonths={3} />
-  ))
-  .addWithInfo('vertical', () => (
+  )))
+  .add('vertical', withInfo()(() => (
     <DayPicker
       numberOfMonths={2}
       orientation={VERTICAL_ORIENTATION}
     />
-  ))
-  .addWithInfo('vertically scrollable with 12 months', () => (
+  )))
+  .add('vertically scrollable with 12 months', withInfo()(() => (
     <div
       style={{
         height: 568,
@@ -76,57 +77,57 @@ storiesOf('DayPicker', module)
         orientation={VERTICAL_SCROLLABLE}
       />
     </div>
-  ))
-  .addWithInfo('vertical with custom day size', () => (
+  )))
+  .add('vertical with custom day size', withInfo()(() => (
     <DayPicker
       numberOfMonths={2}
       orientation={VERTICAL_ORIENTATION}
       daySize={50}
     />
-  ))
-  .addWithInfo('vertical with custom height', () => (
+  )))
+  .add('vertical with custom height', withInfo()(() => (
     <DayPicker
       numberOfMonths={2}
       orientation={VERTICAL_ORIENTATION}
       verticalHeight={568}
     />
-  ))
-  .addWithInfo('with custom arrows', () => (
+  )))
+  .add('with custom arrows', withInfo()(() => (
     <DayPicker
       navPrev={<TestPrevIcon />}
       navNext={<TestNextIcon />}
     />
-  ))
-  .addWithInfo('with custom details', () => (
+  )))
+  .add('with custom details', withInfo()(() => (
     <DayPicker
       renderDayContents={day => (day.day() % 6 === 5 ? '😻' : day.format('D'))}
     />
-  ))
-  .addWithInfo('vertical with fixed-width container', () => (
+  )))
+  .add('vertical with fixed-width container', withInfo()(() => (
     <div style={{ width: '400px' }}>
       <DayPicker
         numberOfMonths={2}
         orientation={VERTICAL_ORIENTATION}
       />
     </div>
-  ))
-  .addWithInfo('with info panel', () => (
+  )))
+  .add('with info panel', withInfo()(() => (
     <DayPicker
       renderCalendarInfo={() => (
         <TestCustomInfoPanel />
       )}
     />
-  ))
-  .addWithInfo('with custom week day format', () => (
+  )))
+  .add('with custom week day format', withInfo()(() => (
     <DayPicker
       weekDayFormat="ddd"
     />
-  ))
-  .addWithInfo('with no animation', () => (
+  )))
+  .add('with no animation', withInfo()(() => (
     <DayPicker
       transitionDuration={0}
     />
-  ))
-  .addWithInfo('noBorder', () => (
+  )))
+  .add('noBorder', withInfo()(() => (
     <DayPicker noBorder />
-  ));
+  )));
diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
index 3c3e5dbb24..6576ab8fdc 100644
--- a/stories/DayPickerRangeController.js
+++ b/stories/DayPickerRangeController.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import moment from 'moment';
 import { storiesOf, action } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
 
 import InfoPanelDecorator, { monospace } from './InfoPanelDecorator';
 
@@ -79,14 +80,14 @@ const datesList = [
 
 storiesOf('DayPickerRangeController', module)
   .addDecorator(InfoPanelDecorator(dayPickerRangeControllerInfo))
-  .addWithInfo('default', () => (
+  .add('default', withInfo()(() => (
     <DayPickerRangeControllerWrapper
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
     />
-  ))
-  .addWithInfo('with 7 days range selection', () => (
+  )))
+  .add('with 7 days range selection', withInfo()(() => (
     <DayPickerRangeControllerWrapper
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
@@ -94,8 +95,8 @@ storiesOf('DayPickerRangeController', module)
       startDateOffset={day => day.subtract(3, 'days')}
       endDateOffset={day => day.add(3, 'days')}
     />
-  ))
-  .addWithInfo('with 45 days range selection', () => (
+  )))
+  .add('with 45 days range selection', withInfo()(() => (
     <DayPickerRangeControllerWrapper
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
@@ -103,16 +104,16 @@ storiesOf('DayPickerRangeController', module)
       startDateOffset={day => day.subtract(22, 'days')}
       endDateOffset={day => day.add(22, 'days')}
     />
-  ))
-  .addWithInfo('with 4 days after today range selection', () => (
+  )))
+  .add('with 4 days after today range selection', withInfo()(() => (
     <DayPickerRangeControllerWrapper
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
       endDateOffset={day => day.add(4, 'days')}
     />
-  ))
-  .addWithInfo('with current week range selection', () => (
+  )))
+  .add('with current week range selection', withInfo()(() => (
     <DayPickerRangeControllerWrapper
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
@@ -120,16 +121,16 @@ storiesOf('DayPickerRangeController', module)
       startDateOffset={day => day.startOf('week')}
       endDateOffset={day => day.endOf('week')}
     />
-  ))
-  .addWithInfo('with custom inputs', () => (
+  )))
+  .add('with custom inputs', withInfo()(() => (
     <DayPickerRangeControllerWrapper
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
       showInputs
     />
-  ))
-  .addWithInfo('non-english locale', () => {
+  )))
+  .add('non-english locale', withInfo()(() => {
     moment.locale('zh-cn');
     return (
       <DayPickerRangeControllerWrapper
@@ -139,16 +140,16 @@ storiesOf('DayPickerRangeController', module)
         monthFormat="YYYY[年]MMMM"
       />
     );
-  })
-  .addWithInfo('single month', () => (
+  }))
+  .add('single month', withInfo()(() => (
     <DayPickerRangeControllerWrapper
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
       numberOfMonths={1}
     />
-  ))
-  .addWithInfo('single month, custom caption', () => (
+  )))
+  .add('single month, custom caption', withInfo()(() => (
     <DayPickerRangeControllerWrapper
       onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
@@ -179,24 +180,24 @@ storiesOf('DayPickerRangeController', module)
         </div>
       )}
     />
-  ))
-  .addWithInfo('3 months', () => (
+  )))
+  .add('3 months', withInfo()(() => (
     <DayPickerRangeControllerWrapper
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
       numberOfMonths={3}
     />
-  ))
-  .addWithInfo('vertical', () => (
+  )))
+  .add('vertical', withInfo()(() => (
     <DayPickerRangeControllerWrapper
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
       orientation={VERTICAL_ORIENTATION}
     />
-  ))
-  .addWithInfo('vertical scrollable', () => (
+  )))
+  .add('vertical scrollable', withInfo()(() => (
     <div style={{ height: 500 }}>
       <DayPickerRangeControllerWrapper
         onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
@@ -207,8 +208,8 @@ storiesOf('DayPickerRangeController', module)
         verticalHeight={800}
       />
     </div>
-  ))
-  .addWithInfo('vertical scrollable with custom month nav', () => (
+  )))
+  .add('vertical scrollable with custom month nav', withInfo()(() => (
     <div style={{ height: 500 }}>
       <DayPickerRangeControllerWrapper
         onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
@@ -236,8 +237,8 @@ storiesOf('DayPickerRangeController', module)
         }
       />
     </div>
-  ))
-  .addWithInfo('with custom month navigation', () => (
+  )))
+  .add('with custom month navigation', withInfo()(() => (
     <DayPickerRangeControllerWrapper
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
@@ -245,8 +246,8 @@ storiesOf('DayPickerRangeController', module)
       navPrev={<TestPrevIcon />}
       navNext={<TestNextIcon />}
     />
-  ))
-  .addWithInfo('with outside days enabled', () => (
+  )))
+  .add('with outside days enabled', withInfo()(() => (
     <DayPickerRangeControllerWrapper
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
@@ -254,16 +255,16 @@ storiesOf('DayPickerRangeController', module)
       numberOfMonths={1}
       enableOutsideDays
     />
-  ))
-  .addWithInfo('with month specified on open', () => (
+  )))
+  .add('with month specified on open', withInfo()(() => (
     <DayPickerRangeControllerWrapper
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
       initialVisibleMonth={() => moment().add(10, 'months')}
     />
-  ))
-  .addWithInfo('with minimum nights set', () => (
+  )))
+  .add('with minimum nights set', withInfo()(() => (
     <DayPickerRangeControllerWrapper
       minimumNights={3}
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
@@ -272,8 +273,8 @@ storiesOf('DayPickerRangeController', module)
       initialStartDate={moment().add(3, 'days')}
       autoFocusEndDate
     />
-  ))
-  .addWithInfo('allows single day range', () => (
+  )))
+  .add('allows single day range', withInfo()(() => (
     <DayPickerRangeControllerWrapper
       minimumNights={0}
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
@@ -282,16 +283,16 @@ storiesOf('DayPickerRangeController', module)
       initialStartDate={moment().add(3, 'days')}
       autoFocusEndDate
     />
-  ))
-  .addWithInfo('allows all days, including past days', () => (
+  )))
+  .add('allows all days, including past days', withInfo()(() => (
     <DayPickerRangeControllerWrapper
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
       isOutsideRange={() => false}
     />
-  ))
-  .addWithInfo('allows next two weeks only', () => (
+  )))
+  .add('allows next two weeks only', withInfo()(() => (
     <DayPickerRangeControllerWrapper
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
@@ -301,40 +302,40 @@ storiesOf('DayPickerRangeController', module)
         isInclusivelyAfterDay(day, moment().add(2, 'weeks'))
       }
     />
-  ))
-  .addWithInfo('with some blocked dates', () => (
+  )))
+  .add('with some blocked dates', withInfo()(() => (
     <DayPickerRangeControllerWrapper
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
       isDayBlocked={day1 => datesList.some(day2 => isSameDay(day1, day2))}
     />
-  ))
-  .addWithInfo('with some highlighted dates', () => (
+  )))
+  .add('with some highlighted dates', withInfo()(() => (
     <DayPickerRangeControllerWrapper
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
       isDayHighlighted={day1 => datesList.some(day2 => isSameDay(day1, day2))}
     />
-  ))
-  .addWithInfo('blocks fridays', () => (
+  )))
+  .add('blocks fridays', withInfo()(() => (
     <DayPickerRangeControllerWrapper
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
       isDayBlocked={day => moment.weekdays(day.weekday()) === 'Friday'}
     />
-  ))
-  .addWithInfo('with custom daily details', () => (
+  )))
+  .add('with custom daily details', withInfo()(() => (
     <DayPickerRangeControllerWrapper
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
       renderDayContents={day => day.format('ddd')}
     />
-  ))
-  .addWithInfo('with info panel', () => (
+  )))
+  .add('with info panel', withInfo()(() => (
     <DayPickerRangeControllerWrapper
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
@@ -343,24 +344,24 @@ storiesOf('DayPickerRangeController', module)
         <TestCustomInfoPanel />
       )}
     />
-  ))
-  .addWithInfo('with no animation', () => (
+  )))
+  .add('with no animation', withInfo()(() => (
     <DayPickerRangeControllerWrapper
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
       transitionDuration={0}
     />
-  ))
-  .addWithInfo('with vertical spacing applied', () => (
+  )))
+  .add('with vertical spacing applied', withInfo()(() => (
     <DayPickerRangeControllerWrapper
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
       verticalBorderSpacing={16}
     />
-  ))
-  .addWithInfo('with custom horizontal month spacing applied', () => (
+  )))
+  .add('with custom horizontal month spacing applied', withInfo()(() => (
     <div style={{ height: 500 }}>
       <DayPickerRangeControllerWrapper
         onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
@@ -372,10 +373,10 @@ storiesOf('DayPickerRangeController', module)
         horizontalMonthPadding={0}
       />
     </div>
-  ))
-  .addWithInfo('with no nav buttons', () => (
+  )))
+  .add('with no nav buttons', withInfo()(() => (
     <DayPickerRangeControllerWrapper
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       noNavButtons
     />
-  ));
+  )));
diff --git a/stories/DayPickerSingleDateController.js b/stories/DayPickerSingleDateController.js
index bbaaacca9b..b66395578f 100644
--- a/stories/DayPickerSingleDateController.js
+++ b/stories/DayPickerSingleDateController.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import moment from 'moment';
 import { storiesOf, action } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
 
 import InfoPanelDecorator, { monospace } from './InfoPanelDecorator';
 
@@ -80,22 +81,22 @@ const datesList = [
 
 storiesOf('DayPickerSingleDateController', module)
   .addDecorator(InfoPanelDecorator(dayPickerSingleDateControllerInfo))
-  .addWithInfo('default', () => (
+  .add('default', withInfo()(() => (
     <DayPickerSingleDateControllerWrapper
       onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
     />
-  ))
-  .addWithInfo('with custom input', () => (
+  )))
+  .add('with custom input', withInfo()(() => (
     <DayPickerSingleDateControllerWrapper
       onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
       showInput
     />
-  ))
-  .addWithInfo('non-english locale', () => {
+  )))
+  .add('non-english locale', withInfo()(() => {
     moment.locale('zh-cn');
     return (
       <DayPickerSingleDateControllerWrapper
@@ -105,16 +106,16 @@ storiesOf('DayPickerSingleDateController', module)
         monthFormat="YYYY[年]MMMM"
       />
     );
-  })
-  .addWithInfo('single month', () => (
+  }))
+  .add('single month', withInfo()(() => (
     <DayPickerSingleDateControllerWrapper
       onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
       numberOfMonths={1}
     />
-  ))
-  .addWithInfo('single month, custom caption', () => (
+  )))
+  .add('single month, custom caption', withInfo()(() => (
     <DayPickerSingleDateControllerWrapper
       onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
@@ -145,24 +146,24 @@ storiesOf('DayPickerSingleDateController', module)
         </div>
       )}
     />
-  ))
-  .addWithInfo('3 months', () => (
+  )))
+  .add('3 months', withInfo()(() => (
     <DayPickerSingleDateControllerWrapper
       onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
       numberOfMonths={3}
     />
-  ))
-  .addWithInfo('vertical', () => (
+  )))
+  .add('vertical', withInfo()(() => (
     <DayPickerSingleDateControllerWrapper
       onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
       orientation={VERTICAL_ORIENTATION}
     />
-  ))
-  .addWithInfo('with custom month navigation', () => (
+  )))
+  .add('with custom month navigation', withInfo()(() => (
     <DayPickerSingleDateControllerWrapper
       onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
@@ -170,8 +171,8 @@ storiesOf('DayPickerSingleDateController', module)
       navPrev={<TestPrevIcon />}
       navNext={<TestNextIcon />}
     />
-  ))
-  .addWithInfo('with outside days enabled', () => (
+  )))
+  .add('with outside days enabled', withInfo()(() => (
     <DayPickerSingleDateControllerWrapper
       onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
@@ -179,24 +180,24 @@ storiesOf('DayPickerSingleDateController', module)
       numberOfMonths={1}
       enableOutsideDays
     />
-  ))
-  .addWithInfo('with month specified on open', () => (
+  )))
+  .add('with month specified on open', withInfo()(() => (
     <DayPickerSingleDateControllerWrapper
       onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
       initialVisibleMonth={() => moment().add(10, 'months')}
     />
-  ))
-  .addWithInfo('allows all days, including past days', () => (
+  )))
+  .add('allows all days, including past days', withInfo()(() => (
     <DayPickerSingleDateControllerWrapper
       onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
       isOutsideRange={() => false}
     />
-  ))
-  .addWithInfo('allows next two weeks only', () => (
+  )))
+  .add('allows next two weeks only', withInfo()(() => (
     <DayPickerSingleDateControllerWrapper
       onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
@@ -206,40 +207,40 @@ storiesOf('DayPickerSingleDateController', module)
         isInclusivelyAfterDay(day, moment().add(2, 'weeks'))
       }
     />
-  ))
-  .addWithInfo('with some blocked dates', () => (
+  )))
+  .add('with some blocked dates', withInfo()(() => (
     <DayPickerSingleDateControllerWrapper
       onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
       isDayBlocked={day1 => datesList.some(day2 => isSameDay(day1, day2))}
     />
-  ))
-  .addWithInfo('with some highlighted dates', () => (
+  )))
+  .add('with some highlighted dates', withInfo()(() => (
     <DayPickerSingleDateControllerWrapper
       onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
       isDayHighlighted={day1 => datesList.some(day2 => isSameDay(day1, day2))}
     />
-  ))
-  .addWithInfo('blocks fridays', () => (
+  )))
+  .add('blocks fridays', withInfo()(() => (
     <DayPickerSingleDateControllerWrapper
       onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
       isDayBlocked={day => moment.weekdays(day.weekday()) === 'Friday'}
     />
-  ))
-  .addWithInfo('with custom daily details', () => (
+  )))
+  .add('with custom daily details', withInfo()(() => (
     <DayPickerSingleDateControllerWrapper
       onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
       renderDayContents={day => day.format('ddd')}
     />
-  ))
-  .addWithInfo('with custom day styles', () => {
+  )))
+  .add('with custom day styles', withInfo()(() => {
     const customDayStyles = {
       // extend and update styles with es6 spread operators
       defaultStyles: {
@@ -264,8 +265,8 @@ storiesOf('DayPickerSingleDateController', module)
         )}
       />
     );
-  })
-  .addWithInfo('with info panel', () => (
+  }))
+  .add('with info panel', withInfo()(() => (
     <DayPickerSingleDateControllerWrapper
       onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
@@ -274,21 +275,20 @@ storiesOf('DayPickerSingleDateController', module)
         <TestCustomInfoPanel />
       )}
     />
-  ))
-  .addWithInfo('with no animation', () => (
+  )))
+  .add('with no animation', withInfo()(() => (
     <DayPickerSingleDateControllerWrapper
       onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
       transitionDuration={0}
     />
-  ))
-  .addWithInfo('with vertical spacing applied', () => (
+  )))
+  .add('with vertical spacing applied', withInfo()(() => (
     <DayPickerSingleDateControllerWrapper
       onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
       verticalBorderSpacing={16}
     />
-  ));
-
+  )));
diff --git a/stories/PresetDateRangePicker.js b/stories/PresetDateRangePicker.js
index aa00a3adc0..0063a3a257 100644
--- a/stories/PresetDateRangePicker.js
+++ b/stories/PresetDateRangePicker.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
 import moment from 'moment';
 
 import PresetDateRangePicker from '../examples/PresetDateRangePicker';
@@ -40,9 +41,9 @@ const presets = [{
 
 storiesOf('PresetDateRangePicker', module)
   .addDecorator(InfoPanelDecorator(presetDateRangePickerControllerInfo))
-  .addWithInfo('default', () => (
+  .add('default', withInfo()(() => (
     <PresetDateRangePicker
       presets={presets}
       autoFocus
     />
-  ));
+  )));
diff --git a/stories/SingleDatePicker.js b/stories/SingleDatePicker.js
index bab15200da..2faa61af0e 100644
--- a/stories/SingleDatePicker.js
+++ b/stories/SingleDatePicker.js
@@ -2,6 +2,7 @@ import React from 'react';
 import moment from 'moment';
 import momentJalaali from 'moment-jalaali';
 import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
 import {
   VERTICAL_ORIENTATION,
 } from '../src/constants';
@@ -25,18 +26,18 @@ const TestInput = props => (
 );
 
 storiesOf('SingleDatePicker (SDP)', module)
-  .addWithInfo('default', () => (
+  .add('default', withInfo()(() => (
     <SingleDatePickerWrapper />
-  ))
-  .addWithInfo('as part of a form', () => (
+  )))
+  .add('as part of a form', withInfo()(() => (
     <div>
       <SingleDatePickerWrapper />
       <TestInput placeholder="Input 1" />
       <TestInput placeholder="Input 2" />
       <TestInput placeholder="Input 3" />
     </div>
-   ))
-  .addWithInfo('non-english locale (Chinese)', () => {
+   )))
+  .add('non-english locale (Chinese)', withInfo()(() => {
     moment.locale('zh-cn');
     return (
       <SingleDatePickerWrapper
@@ -48,8 +49,8 @@ storiesOf('SingleDatePicker (SDP)', module)
         }}
       />
     );
-  })
-  .addWithInfo('non-english locale (Persian)', () => {
+  }))
+  .add('non-english locale (Persian)', withInfo()(() => {
     moment.locale('fa');
     return (
       <SingleDatePickerWrapper
@@ -58,10 +59,10 @@ storiesOf('SingleDatePicker (SDP)', module)
         renderDayContents={day => momentJalaali(day).format('jD')}
       />
     );
-  })
-  .addWithInfo('vertical with custom height', () => (
+  }))
+  .add('vertical with custom height', withInfo()(() => (
     <SingleDatePickerWrapper
       orientation={VERTICAL_ORIENTATION}
       verticalHeight={568}
     />
-  ));
+  )));
diff --git a/stories/SingleDatePicker_calendar.js b/stories/SingleDatePicker_calendar.js
index 342233e3af..9e6d6aac47 100644
--- a/stories/SingleDatePicker_calendar.js
+++ b/stories/SingleDatePicker_calendar.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import moment from 'moment';
 import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
 
 import SingleDatePickerWrapper from '../examples/SingleDatePickerWrapper';
 
@@ -44,47 +45,47 @@ const TestCustomInfoPanel = () => (
 );
 
 storiesOf('SDP - Calendar Props', module)
-  .addWithInfo('default', () => (
+  .add('default', withInfo()(() => (
     <SingleDatePickerWrapper autoFocus />
-  ))
-  .addWithInfo('open up', () => (
+  )))
+  .add('open up', withInfo()(() => (
     <div style={{ marginTop: '450px' }}>
       <SingleDatePickerWrapper
         openDirection={OPEN_UP}
         autoFocus
       />
     </div>
-  ))
-  .addWithInfo('single month', () => (
+  )))
+  .add('single month', withInfo()(() => (
     <SingleDatePickerWrapper
       numberOfMonths={1}
       autoFocus
     />
-  ))
-  .addWithInfo('with custom day size', () => (
+  )))
+  .add('with custom day size', withInfo()(() => (
     <SingleDatePickerWrapper daySize={50} autoFocus />
-  ))
-  .addWithInfo('anchored right', () => (
+  )))
+  .add('anchored right', withInfo()(() => (
     <div style={{ float: 'right' }}>
       <SingleDatePickerWrapper
         anchorDirection={ANCHOR_RIGHT}
         autoFocus
       />
     </div>
-  ))
-  .addWithInfo('vertical', () => (
+  )))
+  .add('vertical', withInfo()(() => (
     <SingleDatePickerWrapper
       orientation={VERTICAL_ORIENTATION}
       autoFocus
     />
-  ))
-  .addWithInfo('horizontal with portal', () => (
+  )))
+  .add('horizontal with portal', withInfo()(() => (
     <SingleDatePickerWrapper
       withPortal
       autoFocus
     />
-  ))
-  .addWithInfo('horizontal with portal and info panel', () => (
+  )))
+  .add('horizontal with portal and info panel', withInfo()(() => (
     <SingleDatePickerWrapper
       withPortal
       autoFocus
@@ -93,67 +94,67 @@ storiesOf('SDP - Calendar Props', module)
         <TestCustomInfoPanel />
       )}
     />
-  ))
-  .addWithInfo('horizontal with fullscreen portal', () => (
+  )))
+  .add('horizontal with fullscreen portal', withInfo()(() => (
     <SingleDatePickerWrapper withFullScreenPortal autoFocus />
-  ))
-  .addWithInfo('vertical with full screen portal', () => (
+  )))
+  .add('vertical with full screen portal', withInfo()(() => (
     <SingleDatePickerWrapper
       orientation={VERTICAL_ORIENTATION}
       withFullScreenPortal
       autoFocus
     />
-  ))
-  .addWithInfo('disable scroll', () => (
+  )))
+  .add('disable scroll', withInfo()(() => (
     <div style={{ height: '100vh' }}>
       <div>This content scrolls.</div>
       <SingleDatePickerWrapper disableScroll autoFocus />
     </div>
-  ))
-  .addWithInfo('appended to body', () => <SingleDatePickerWrapper appendToBody autoFocus />)
-  .addWithInfo('appended to body (in scrollable container)', () => (
+  )))
+  .add('appended to body', withInfo()(() => <SingleDatePickerWrapper appendToBody autoFocus />))
+  .add('appended to body (in scrollable container)', withInfo()(() => (
     <div style={{ height: 200, overflow: 'auto', background: 'whitesmoke' }}>
       <div>This content scrolls.</div>
       <div style={{ marginBottom: 300 }}>
         <SingleDatePickerWrapper appendToBody autoFocus />
       </div>
     </div>
-  ))
-  .addWithInfo('does not autoclose the DayPicker on date selection', () => (
+  )))
+  .add('does not autoclose the DayPicker on date selection', withInfo()(() => (
     <SingleDatePickerWrapper
       keepOpenOnDateSelect
       autoFocus
     />
-  ))
-  .addWithInfo('with month specified on open', () => (
+  )))
+  .add('with month specified on open', withInfo()(() => (
     <SingleDatePickerWrapper
       initialVisibleMonth={() => moment().add(10, 'months')}
       autoFocus
     />
-  ))
-  .addWithInfo('with custom arrows', () => (
+  )))
+  .add('with custom arrows', withInfo()(() => (
     <SingleDatePickerWrapper
       navPrev={<TestPrevIcon />}
       navNext={<TestNextIcon />}
       autoFocus
     />
-  ))
-  .addWithInfo('with outside days enabled', () => (
+  )))
+  .add('with outside days enabled', withInfo()(() => (
     <SingleDatePickerWrapper
       numberOfMonths={1}
       enableOutsideDays
       autoFocus
     />
-  ))
-  .addWithInfo('with info panel default', () => (
+  )))
+  .add('with info panel default', withInfo()(() => (
     <SingleDatePickerWrapper
       renderCalendarInfo={() => (
         <TestCustomInfoPanel borderPosition='borderBottom'/>
       )}
       autoFocus
     />
-  ))
-  .addWithInfo('with info panel before', () => (
+  )))
+  .add('with info panel before', withInfo()(() => (
     <SingleDatePickerWrapper
       calendarInfoPosition="before"
       renderCalendarInfo={() => (
@@ -161,8 +162,8 @@ storiesOf('SDP - Calendar Props', module)
       )}
       autoFocus
     />
-  ))
-  .addWithInfo('with info panel after', () => (
+  )))
+  .add('with info panel after', withInfo()(() => (
     <SingleDatePickerWrapper
       calendarInfoPosition="after"
       renderCalendarInfo={() => (
@@ -170,8 +171,8 @@ storiesOf('SDP - Calendar Props', module)
       )}
       autoFocus
     />
-  ))
-  .addWithInfo('with info panel bottom', () => (
+  )))
+  .add('with info panel bottom', withInfo()(() => (
     <SingleDatePickerWrapper
       calendarInfoPosition="bottom"
       renderCalendarInfo={() => (
@@ -179,8 +180,8 @@ storiesOf('SDP - Calendar Props', module)
       )}
       autoFocus
     />
-  ))
-  .addWithInfo('with info panel top', () => (
+  )))
+  .add('with info panel top', withInfo()(() => (
     <SingleDatePickerWrapper
       calendarInfoPosition="top"
       renderCalendarInfo={() => (
@@ -188,41 +189,40 @@ storiesOf('SDP - Calendar Props', module)
       )}
       autoFocus
     />
-  ))
-  .addWithInfo('with keyboard shorcuts panel hidden', () => (
+  )))
+  .add('with keyboard shorcuts panel hidden', withInfo()(() => (
     <SingleDatePickerWrapper
       hideKeyboardShortcutsPanel
       autoFocus
     />
-  ))
-  .addWithInfo('with RTL support', () => (
+  )))
+  .add('with RTL support', withInfo()(() => (
     <SingleDatePickerWrapper
       isRTL
       autoFocus
     />
-  ))
-  .addWithInfo('with custom first day of week', () => (
+  )))
+  .add('with custom first day of week', withInfo()(() => (
     <SingleDatePickerWrapper
       firstDayOfWeek={3}
       autoFocus
     />
-  ))
-  .addWithInfo('with onClose handler', () => (
+  )))
+  .add('with onClose handler', withInfo()(() => (
     <SingleDatePickerWrapper
       onClose={({ date }) => alert(`onClose: date = ${date}`)}
       autoFocus
     />
-  ))
-  .addWithInfo('with no animation', () => (
+  )))
+  .add('with no animation', withInfo()(() => (
     <SingleDatePickerWrapper
       transitionDuration={0}
       autoFocus
     />
-  ))
-  .addWithInfo('with custom vertical spacing', () => (
+  )))
+  .add('with custom vertical spacing', withInfo()(() => (
     <SingleDatePickerWrapper
       verticalSpacing={0}
       autoFocus
     />
-  ));
-
+  )));
diff --git a/stories/SingleDatePicker_day.js b/stories/SingleDatePicker_day.js
index 36689140de..c958ce3070 100644
--- a/stories/SingleDatePicker_day.js
+++ b/stories/SingleDatePicker_day.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import moment from 'moment';
 import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
 
 import isInclusivelyAfterDay from '../src/utils/isInclusivelyAfterDay';
 import isSameDay from '../src/utils/isSameDay';
@@ -19,16 +20,16 @@ const datesList = [
 ];
 
 storiesOf('SDP - Day Props', module)
-  .addWithInfo('default', () => (
+  .add('default', withInfo()(() => (
     <SingleDatePickerWrapper autoFocus />
-  ))
-  .addWithInfo('allows all days, including past days', () => (
+  )))
+  .add('allows all days, including past days', withInfo()(() => (
     <SingleDatePickerWrapper
       isOutsideRange={() => false}
       autoFocus
     />
-  ))
-  .addWithInfo('allows next two weeks only', () => (
+  )))
+  .add('allows next two weeks only', withInfo()(() => (
     <SingleDatePickerWrapper
       isOutsideRange={day =>
         !isInclusivelyAfterDay(day, moment()) ||
@@ -36,29 +37,29 @@ storiesOf('SDP - Day Props', module)
       }
       autoFocus
     />
-  ))
-  .addWithInfo('with some blocked dates', () => (
+  )))
+  .add('with some blocked dates', withInfo()(() => (
     <SingleDatePickerWrapper
       isDayBlocked={day1 => datesList.some(day2 => isSameDay(day1, day2))}
       autoFocus
     />
-  ))
-  .addWithInfo('with some highlighted dates', () => (
+  )))
+  .add('with some highlighted dates', withInfo()(() => (
     <SingleDatePickerWrapper
       isDayHighlighted={day1 => datesList.some(day2 => isSameDay(day1, day2))}
       autoFocus
     />
-  ))
-  .addWithInfo('blocks fridays', () => (
+  )))
+  .add('blocks fridays', withInfo()(() => (
     <SingleDatePickerWrapper
       isDayBlocked={day => moment.weekdays(day.weekday()) === 'Friday'}
       autoFocus
     />
-  ))
-  .addWithInfo('with custom daily details', () => (
+  )))
+  .add('with custom daily details', withInfo()(() => (
     <SingleDatePickerWrapper
       numberOfMonths={1}
       renderDayContents={day => day.format('ddd')}
       autoFocus
     />
-  ));
+  )));
diff --git a/stories/SingleDatePicker_input.js b/stories/SingleDatePicker_input.js
index 929093eb41..ba433df568 100644
--- a/stories/SingleDatePicker_input.js
+++ b/stories/SingleDatePicker_input.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import moment from 'moment';
 import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
 
 import SingleDatePickerWrapper from '../examples/SingleDatePickerWrapper';
 
@@ -18,91 +19,91 @@ const TestCustomInputIcon = () => (
 );
 
 storiesOf('SDP - Input Props', module)
-  .addWithInfo('default', () => (
+  .add('default', withInfo()(() => (
     <SingleDatePickerWrapper
       initialDate={moment().add(3, 'days')}
     />
-  ))
-  .addWithInfo('disabled', () => (
+  )))
+  .add('disabled', withInfo()(() => (
     <SingleDatePickerWrapper
       initialDate={moment().add(3, 'days')}
       disabled
     />
-  ))
-  .addWithInfo('readOnly', () => (
+  )))
+  .add('readOnly', withInfo()(() => (
     <SingleDatePickerWrapper
       initialDate={moment().add(3, 'days')}
       readOnly
     />
-  ))
-  .addWithInfo('with clear dates button', () => (
+  )))
+  .add('with clear dates button', withInfo()(() => (
     <SingleDatePickerWrapper
       initialDate={moment().add(3, 'days')}
       showClearDate
     />
-  ))
-  .addWithInfo('reopens DayPicker on clear dates', () => (
+  )))
+  .add('reopens DayPicker on clear dates', withInfo()(() => (
     <SingleDatePickerWrapper
       initialDate={moment().add(3, 'days')}
       showClearDate
       reopenPickerOnClearDate
     />
-  ))
-  .addWithInfo('with custom display format', () => (
+  )))
+  .add('with custom display format', withInfo()(() => (
     <SingleDatePickerWrapper
       initialDate={moment().add(3, 'days')}
       displayFormat="MMM D"
     />
-  ))
-  .addWithInfo('with show calendar icon', () => (
+  )))
+  .add('with show calendar icon', withInfo()(() => (
     <SingleDatePickerWrapper
       initialDate={moment().add(3, 'days')}
       showDefaultInputIcon
     />
-  ))
-  .addWithInfo('with custom show calendar icon', () => (
+  )))
+  .add('with custom show calendar icon', withInfo()(() => (
     <SingleDatePickerWrapper
       initialDate={moment().add(3, 'days')}
       customInputIcon={<TestCustomInputIcon />}
     />
-  ))
-  .addWithInfo('with show calendar icon after input', () => (
+  )))
+  .add('with show calendar icon after input', withInfo()(() => (
     <SingleDatePickerWrapper
       initialDate={moment().add(3, 'days')}
       showDefaultInputIcon
       inputIconPosition="after"
     />
-  ))
-  .addWithInfo('with screen reader message', () => (
+  )))
+  .add('with screen reader message', withInfo()(() => (
     <SingleDatePickerWrapper
       initialDate={moment().add(3, 'days')}
       screenReaderInputMessage="Here you could inform screen reader users of the date format, minimum nights, blocked out dates, etc"
     />
-  ))
-  .addWithInfo('noBorder', () => (
+  )))
+  .add('noBorder', withInfo()(() => (
     <SingleDatePickerWrapper
       initialDate={moment().add(3, 'days')}
       noBorder
     />
-  ))
-  .addWithInfo('block styling', () => (
+  )))
+  .add('block styling', withInfo()(() => (
     <SingleDatePickerWrapper
       initialDate={moment().add(3, 'days')}
       showClearDate
       block
     />
-  ))
-  .addWithInfo('small styling', () => (
+  )))
+  .add('small styling', withInfo()(() => (
     <SingleDatePickerWrapper
       initialDate={moment().add(3, 'days')}
       showClearDate
       small
     />
-  ))
-  .addWithInfo('regular styling', () => (
+  )))
+  .add('regular styling', withInfo()(() => (
     <SingleDatePickerWrapper
       initialDate={moment().add(3, 'days')}
       showClearDate
       regular
     />
-  ));
+  )));
diff --git a/stories/withStyles.js b/stories/withStyles.js
index 067cb27015..cc410fd41d 100644
--- a/stories/withStyles.js
+++ b/stories/withStyles.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { action, storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
 
 import CalendarDay from '../src/components/CalendarDay';
 import CustomizableCalendarDay from '../src/components/CustomizableCalendarDay';
@@ -28,7 +29,7 @@ const customStyles = {
 };
 
 storiesOf('withStyles', module)
-  .addWithInfo('CalendarDay', () => (
+  .add('CalendarDay', withInfo()(() => (
     <table>
       <tbody>
         <tr>
@@ -62,16 +63,16 @@ storiesOf('withStyles', module)
         </tr>
       </tbody>
     </table>
-  ))
-  .addWithInfo('CalendarMonth', () => (
+  )))
+  .add('CalendarMonth', withInfo()(() => (
     <CalendarMonth
       isVisible
     />
-  ))
-  .addWithInfo('CalendarMonthGrid', () => (
+  )))
+  .add('CalendarMonthGrid', withInfo()(() => (
     <CalendarMonthGrid />
-  ))
-  .addWithInfo('DayPickerNavigation', () => (
+  )))
+  .add('DayPickerNavigation', withInfo()(() => (
     <div>
       <div
         style={{
@@ -112,15 +113,15 @@ storiesOf('withStyles', module)
         <DayPickerNavigation orientation={VERTICAL_SCROLLABLE} />
       </div>
     </div>
-  ))
-  .addWithInfo('KeyboardShortcutRow', () => (
+  )))
+  .add('KeyboardShortcutRow', withInfo()(() => (
     <KeyboardShortcutRow
       unicode="↵"
       label="Enter key"
       action="https://github.com/Select%20the%20currently%20focused%20date"
     />
-  ))
-  .addWithInfo('DayPickerKeyboardShortcuts', () => (
+  )))
+  .add('DayPickerKeyboardShortcuts', withInfo()(() => (
     <div>
       <div
         style={{
@@ -134,8 +135,8 @@ storiesOf('withStyles', module)
         <DayPickerKeyboardShortcuts showKeyboardShortcutsPanel />
       </div>
     </div>
-  ))
-  .addWithInfo('DateInput', () => (
+  )))
+  .add('DateInput', withInfo()(() => (
     <div>
       <div>
         <DateInput />
@@ -153,8 +154,8 @@ storiesOf('withStyles', module)
         <DateInput focused showCaret />
       </div>
     </div>
-  ))
-  .addWithInfo('SingleDatePickerInput', () => (
+  )))
+  .add('SingleDatePickerInput', withInfo()(() => (
     <div>
       <div>
         <SingleDatePickerInput />
@@ -172,9 +173,9 @@ storiesOf('withStyles', module)
         <SingleDatePickerInput showDefaultInputIcon />
       </div>
     </div>
-  ))
+  )))
 
-  .addWithInfo('DateRangePickerInput', () => (
+  .add('DateRangePickerInput', withInfo()(() => (
     <div>
       <div>
         <DateRangePickerInput />
@@ -200,4 +201,4 @@ storiesOf('withStyles', module)
         <DateRangePickerInput showDefaultInputIcon />
       </div>
     </div>
-  ));
+  )));

From 11514ada17871e18151c9357c81606035062ffae Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Tue, 30 Oct 2018 11:51:23 -0700
Subject: [PATCH 293/618] [Tests] temporarily disable karma

---
 .travis.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.travis.yml b/.travis.yml
index 73a9783bd0..cd38096a9d 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -36,3 +36,4 @@ matrix:
       env: KARMA=true TEST=false
   allow_failures:
     - node_js: "9"
+    - env: KARMA=true TEST=false # temporary

From 6b2a62a010a0d37e1e96df853e58c7103f26d934 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Tue, 30 Oct 2018 13:29:09 -0700
Subject: [PATCH 294/618] [Tests] drop coverage threshold

---
 .nycrc | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.nycrc b/.nycrc
index 8dd8d08bee..fb85ce72b1 100644
--- a/.nycrc
+++ b/.nycrc
@@ -18,7 +18,7 @@
   "statements": 83,
   "branches": 73,
   "lines": 83,
-  "functions": 68.68,
+  "functions": 67.8,
   "sourceMap": false,
   "instrument": false
 }

From de18afa8019c40464d93944385d73e5175192c14 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Tue, 30 Oct 2018 16:48:48 -0400
Subject: [PATCH 295/618] Version 18.2.0

---
 CHANGELOG.md | 3 +++
 package.json | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e9930c428a..054d8d202a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,9 @@
 - []  ([#](https://github.com/airbnb/react-dates/pull/))
 -->
 
+## 18.2.0
+- [new] Add `onTab`/`onShiftTab` callbacks to the DayPicker (and its controllers) ([#1427](https://github.com/airbnb/react-dates/pull/1427))
+
 ## 18.1.1
 - [fix] Prevent outside range dates from being selected by typing ([#1370](https://github.com/airbnb/react-dates/pull/1370))
 
diff --git a/package.json b/package.json
index a5289f460d..67ccb0820d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "18.1.1",
+  "version": "18.2.0",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From cd24d38938e87310c60076717963bc3032c97fcb Mon Sep 17 00:00:00 2001
From: Phil Keys <phil@phillipkeys.com>
Date: Tue, 6 Nov 2018 11:44:14 -0500
Subject: [PATCH 296/618] Update DayPickerRangeController.js action import

---
 stories/DayPickerRangeController.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
index 6576ab8fdc..5cff95df86 100644
--- a/stories/DayPickerRangeController.js
+++ b/stories/DayPickerRangeController.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import moment from 'moment';
-import { storiesOf, action } from '@storybook/react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
 import { withInfo } from '@storybook/addon-info';
 
 import InfoPanelDecorator, { monospace } from './InfoPanelDecorator';

From fac17213832e78292bd8a1ce37fac1e9e880f115 Mon Sep 17 00:00:00 2001
From: Phil Keys <phil@phillipkeys.com>
Date: Tue, 6 Nov 2018 11:47:50 -0500
Subject: [PATCH 297/618] Update DayPickerSingleDateController.js

---
 stories/DayPickerSingleDateController.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/stories/DayPickerSingleDateController.js b/stories/DayPickerSingleDateController.js
index b66395578f..2c7e948e2e 100644
--- a/stories/DayPickerSingleDateController.js
+++ b/stories/DayPickerSingleDateController.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import moment from 'moment';
-import { storiesOf, action } from '@storybook/react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
 import { withInfo } from '@storybook/addon-info';
 
 import InfoPanelDecorator, { monospace } from './InfoPanelDecorator';

From 443c600ed66d308a046265325cea8a0225bd6c0a Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Mon, 5 Nov 2018 16:38:02 -0800
Subject: [PATCH 298/618] Add PureComponent fallback babel transform

---
 .babelrc                                      |  7 +-
 package.json                                  |  2 +-
 scripts/pure-component-fallback.js            | 65 +++++++++++++++++++
 src/components/CalendarDay.jsx                |  6 +-
 src/components/CalendarMonth.jsx              |  7 +-
 src/components/CalendarMonthGrid.jsx          |  7 +-
 src/components/CustomizableCalendarDay.jsx    |  6 +-
 src/components/DateInput.jsx                  |  7 +-
 src/components/DateRangePicker.jsx            |  6 +-
 src/components/DateRangePickerInput.jsx       |  3 +-
 .../DateRangePickerInputController.jsx        |  5 +-
 src/components/DayPicker.jsx                  |  6 +-
 src/components/DayPickerKeyboardShortcuts.jsx |  6 +-
 src/components/DayPickerNavigation.jsx        |  3 +-
 src/components/DayPickerRangeController.jsx   |  4 +-
 .../DayPickerSingleDateController.jsx         |  4 +-
 src/components/KeyboardShortcutRow.jsx        |  3 +-
 src/components/SingleDatePicker.jsx           |  6 +-
 src/components/SingleDatePickerInput.jsx      |  3 +-
 .../SingleDatePickerInputController.jsx       |  5 +-
 src/utils/baseClass.js                        | 11 ----
 21 files changed, 101 insertions(+), 71 deletions(-)
 create mode 100644 scripts/pure-component-fallback.js
 delete mode 100644 src/utils/baseClass.js

diff --git a/.babelrc b/.babelrc
index 58ca44aa31..1b0f8475f1 100644
--- a/.babelrc
+++ b/.babelrc
@@ -7,7 +7,8 @@
           "svgo": false
         }],
         ["transform-replace-object-assign", { "moduleSpecifier": "object.assign" }],
-        "istanbul"
+        "./scripts/pure-component-fallback.js",
+        "istanbul",
       ]
     },
 
@@ -18,6 +19,7 @@
           "svgo": false
         }],
         ["transform-replace-object-assign", { "moduleSpecifier": "object.assign" }],
+        "./scripts/pure-component-fallback.js",
       ],
     },
 
@@ -28,6 +30,7 @@
           "svgo": false
         }],
         ["transform-replace-object-assign", { "moduleSpecifier": "object.assign" }],
+        "./scripts/pure-component-fallback.js",
       ],
     },
 
@@ -38,6 +41,7 @@
           "svgo": false
         }],
         ["transform-replace-object-assign", { "moduleSpecifier": "object.assign" }],
+        "./scripts/pure-component-fallback.js",
       ],
     },
 
@@ -48,6 +52,7 @@
           "svgo": false
         }],
         ["transform-replace-object-assign", { "moduleSpecifier": "object.assign" }],
+        "./scripts/pure-component-fallback.js",
       ],
     },
   },
diff --git a/package.json b/package.json
index 67ccb0820d..dea7877db2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "18.2.0",
+  "version": "18.2.1-rc.2",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {
diff --git a/scripts/pure-component-fallback.js b/scripts/pure-component-fallback.js
new file mode 100644
index 0000000000..8aef8e72a1
--- /dev/null
+++ b/scripts/pure-component-fallback.js
@@ -0,0 +1,65 @@
+module.exports = function pureComponentFallback({ types: t, template }) {
+  const buildPureOrNormalSuperclass = () => t.LogicalExpression('||',
+    t.memberExpression(t.identifier('React'), t.identifier('PureComponent')),
+    t.memberExpression(t.identifier('React'), t.identifier('Component')));
+
+  const buildShouldComponentUpdate = () => {
+    const method = t.classMethod(
+      'method',
+      t.identifier('shouldComponentUpdate'),
+      [t.identifier('nextProps'), t.identifier('nextState')],
+      t.blockStatement([template('return shallowCompare(this, nextProps, nextState);')()])
+    );
+    return method;
+  };
+
+  function superclassIsPureComponent(path) {
+    const superclass = path.get('superClass');
+    // check for PureComponent
+    if (t.isIdentifier(superclass)) {
+      return superclass.node.name === 'PureComponent';
+    }
+
+    if (t.isMemberExpression(superclass)) {
+      // Check for React.PureComponent
+      return superclass.get('object').node.name === 'React'
+        && superclass.get('property').node.name === 'PureComponent';
+    }
+
+    return false;
+  }
+
+  return {
+    visitor: {
+      Program: {
+        exit({ node }, { file }) {
+          if (file.get('addShallowCompareImport')) {
+            const shallowCompareImportDeclaration = t.importDeclaration([
+              t.importDefaultSpecifier(t.identifier('shallowCompare')),
+            ], t.stringLiteral('react-addons-shallow-compare'));
+            node.body.unshift(shallowCompareImportDeclaration);
+          }
+        },
+      },
+
+      ClassDeclaration(path, { file }) {
+        if (superclassIsPureComponent(path)) {
+          const superclassPath = path.get('superClass');
+
+          // Replace the superclass
+          superclassPath.replaceWith(buildPureOrNormalSuperclass());
+
+          // Only add an SCU if one doesn't already exist
+          const existingSCU = path.get('body').get('body').find((
+            p => p.isClassMethod() && p.get('key').node.name === 'shouldComponentUpdate'
+          ));
+
+          if (!existingSCU) {
+            file.set('addShallowCompareImport', true);
+            path.get('body').unshiftContainer('body', buildShouldComponentUpdate());
+          }
+        }
+      },
+    },
+  };
+};
diff --git a/src/components/CalendarDay.jsx b/src/components/CalendarDay.jsx
index 2f8fc54c80..4832e7c07a 100644
--- a/src/components/CalendarDay.jsx
+++ b/src/components/CalendarDay.jsx
@@ -9,7 +9,6 @@ import { CalendarDayPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
 import getCalendarDaySettings from '../utils/getCalendarDaySettings';
 import ModifiersShape from '../shapes/ModifiersShape';
-import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import { DAY_SIZE } from '../constants';
 
@@ -48,8 +47,7 @@ const defaultProps = {
   phrases: CalendarDayPhrases,
 };
 
-/** @extends React.Component */
-class CalendarDay extends BaseClass {
+class CalendarDay extends React.PureComponent {
   constructor(...args) {
     super(...args);
 
@@ -340,4 +338,4 @@ export default withStyles(({ reactDates: { color, font } }) => ({
   CalendarDay__today: {},
   CalendarDay__firstDayOfWeek: {},
   CalendarDay__lastDayOfWeek: {},
-}), { pureComponent: pureComponentAvailable })(CalendarDay);
+}), { pureComponent: typeof React.PureComponent !== 'undefined' })(CalendarDay);
diff --git a/src/components/CalendarMonth.jsx b/src/components/CalendarMonth.jsx
index d41db7aaea..a894432ff5 100644
--- a/src/components/CalendarMonth.jsx
+++ b/src/components/CalendarMonth.jsx
@@ -21,7 +21,7 @@ import toISODateString from '../utils/toISODateString';
 import ModifiersShape from '../shapes/ModifiersShape';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
-import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
+
 
 import {
   HORIZONTAL_ORIENTATION,
@@ -90,8 +90,7 @@ const defaultProps = {
   verticalBorderSpacing: undefined,
 };
 
-/** @extends React.Component */
-class CalendarMonth extends BaseClass {
+class CalendarMonth extends React.PureComponent {
   constructor(props) {
     super(props);
 
@@ -274,4 +273,4 @@ export default withStyles(({ reactDates: { color, font, spacing } }) => ({
     paddingTop: 12,
     paddingBottom: 7,
   },
-}), { pureComponent: pureComponentAvailable })(CalendarMonth);
+}), { pureComponent: typeof React.PureComponent !== 'undefined' })(CalendarMonth);
diff --git a/src/components/CalendarMonthGrid.jsx b/src/components/CalendarMonthGrid.jsx
index 363a99755f..ab3748e02d 100644
--- a/src/components/CalendarMonthGrid.jsx
+++ b/src/components/CalendarMonthGrid.jsx
@@ -21,7 +21,7 @@ import isNextMonth from '../utils/isNextMonth';
 import ModifiersShape from '../shapes/ModifiersShape';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
-import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
+
 
 import {
   HORIZONTAL_ORIENTATION,
@@ -114,8 +114,7 @@ function getMonths(initialMonth, numberOfMonths, withoutTransitionMonths) {
   return months;
 }
 
-/** @extends React.Component */
-class CalendarMonthGrid extends BaseClass {
+class CalendarMonthGrid extends React.PureComponent {
   constructor(props) {
     super(props);
     const withoutTransitionMonths = props.orientation === VERTICAL_SCROLLABLE;
@@ -422,4 +421,4 @@ export default withStyles(({
   CalendarMonthGrid_month__hidden: {
     visibility: 'hidden',
   },
-}), { pureComponent: pureComponentAvailable })(CalendarMonthGrid);
+}), { pureComponent: typeof React.PureComponent !== 'undefined' })(CalendarMonthGrid);
diff --git a/src/components/CustomizableCalendarDay.jsx b/src/components/CustomizableCalendarDay.jsx
index ee1a613d3a..4d23e9a69a 100644
--- a/src/components/CustomizableCalendarDay.jsx
+++ b/src/components/CustomizableCalendarDay.jsx
@@ -8,7 +8,6 @@ import moment from 'moment';
 import { CalendarDayPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
 import getCalendarDaySettings from '../utils/getCalendarDaySettings';
-import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import { DAY_SIZE } from '../constants';
 import DefaultTheme from '../theme/DefaultTheme';
@@ -216,8 +215,7 @@ const defaultProps = {
   phrases: CalendarDayPhrases,
 };
 
-/** @extends React.Component */
-class CustomizableCalendarDay extends BaseClass {
+class CustomizableCalendarDay extends React.PureComponent {
   constructor(...args) {
     super(...args);
 
@@ -370,4 +368,4 @@ export default withStyles(({ reactDates: { font } }) => ({
   CalendarDay__defaultCursor: {
     cursor: 'default',
   },
-}), { pureComponent: pureComponentAvailable })(CustomizableCalendarDay);
+}), { pureComponent: typeof React.PureComponent !== 'undefined' })(CustomizableCalendarDay);
diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
index 8c14d8b58c..af8d096f40 100644
--- a/src/components/DateInput.jsx
+++ b/src/components/DateInput.jsx
@@ -7,7 +7,7 @@ import isTouchDevice from 'is-touch-device';
 
 import getInputHeight from '../utils/getInputHeight';
 import openDirectionShape from '../shapes/OpenDirectionShape';
-import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
+
 import {
   OPEN_DOWN,
   OPEN_UP,
@@ -78,8 +78,7 @@ const defaultProps = {
   isFocused: false,
 };
 
-/** @extends React.Component */
-class DateInput extends BaseClass {
+class DateInput extends React.PureComponent {
   constructor(props) {
     super(props);
 
@@ -381,4 +380,4 @@ export default withStyles(({
     stroke: color.core.border,
     fill: 'transparent',
   },
-}), { pureComponent: pureComponentAvailable })(DateInput);
+}), { pureComponent: typeof React.PureComponent !== 'undefined' })(DateInput);
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 7b903a06c1..b8406abbec 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -15,7 +15,6 @@ import getDetachedContainerStyles from '../utils/getDetachedContainerStyles';
 import getInputHeight from '../utils/getInputHeight';
 import isInclusivelyAfterDay from '../utils/isInclusivelyAfterDay';
 import disableScroll from '../utils/disableScroll';
-import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import DateRangePickerInputController from './DateRangePickerInputController';
 import DayPickerRangeController from './DayPickerRangeController';
@@ -119,8 +118,7 @@ const defaultProps = {
   dayAriaLabelFormat: undefined,
 };
 
-/** @extends React.Component */
-class DateRangePicker extends BaseClass {
+class DateRangePicker extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = {
@@ -674,4 +672,4 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     width: 15,
     fill: color.core.grayLighter,
   },
-}), { pureComponent: pureComponentAvailable })(DateRangePicker);
+}), { pureComponent: typeof React.PureComponent !== 'undefined' })(DateRangePicker);
diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index a2c01268c1..ebccd984b7 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -10,7 +10,6 @@ import openDirectionShape from '../shapes/OpenDirectionShape';
 import DateInput from './DateInput';
 import IconPositionShape from '../shapes/IconPositionShape';
 import DisabledShape from '../shapes/DisabledShape';
-import { pureComponentAvailable } from '../utils/baseClass';
 
 import RightArrow from './RightArrow';
 import LeftArrow from './LeftArrow';
@@ -397,4 +396,4 @@ export default withStyles(({ reactDates: { border, color, sizing } }) => ({
     width: 14,
     verticalAlign: 'middle',
   },
-}), { pureComponent: pureComponentAvailable })(DateRangePickerInput);
+}), { pureComponent: typeof React.PureComponent !== 'undefined' })(DateRangePickerInput);
diff --git a/src/components/DateRangePickerInputController.jsx b/src/components/DateRangePickerInputController.jsx
index e248838459..18b8de7f97 100644
--- a/src/components/DateRangePickerInputController.jsx
+++ b/src/components/DateRangePickerInputController.jsx
@@ -20,8 +20,6 @@ import toLocalizedDateString from '../utils/toLocalizedDateString';
 import isInclusivelyAfterDay from '../utils/isInclusivelyAfterDay';
 import isBeforeDay from '../utils/isBeforeDay';
 
-import BaseClass from '../utils/baseClass';
-
 import {
   START_DATE,
   END_DATE,
@@ -133,8 +131,7 @@ const defaultProps = {
   isRTL: false,
 };
 
-/** @extends React.Component */
-export default class DateRangePickerInputController extends BaseClass {
+export default class DateRangePickerInputController extends React.PureComponent {
   constructor(props) {
     super(props);
 
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 84156d68c3..4bc521566b 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -29,7 +29,6 @@ import ModifiersShape from '../shapes/ModifiersShape';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
 import CalendarInfoPositionShape from '../shapes/CalendarInfoPositionShape';
-import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import {
   HORIZONTAL_ORIENTATION,
@@ -167,8 +166,7 @@ export const defaultProps = {
   dayAriaLabelFormat: undefined,
 };
 
-/** @extends React.Component */
-class DayPicker extends BaseClass {
+class DayPicker extends React.PureComponent {
   constructor(props) {
     super(props);
 
@@ -1262,4 +1260,4 @@ export default withStyles(({
       },
     }),
   },
-}), { pureComponent: pureComponentAvailable })(DayPicker);
+}), { pureComponent: typeof React.PureComponent !== 'undefined' })(DayPicker);
diff --git a/src/components/DayPickerKeyboardShortcuts.jsx b/src/components/DayPickerKeyboardShortcuts.jsx
index 2ddad15352..0d3fa8e207 100644
--- a/src/components/DayPickerKeyboardShortcuts.jsx
+++ b/src/components/DayPickerKeyboardShortcuts.jsx
@@ -5,7 +5,6 @@ import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 
 import { DayPickerKeyboardShortcutsPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
-import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import KeyboardShortcutRow from './KeyboardShortcutRow';
 import CloseButton from './CloseButton';
@@ -73,8 +72,7 @@ function getKeyboardShortcuts(phrases) {
   ];
 }
 
-/** @extends React.Component */
-class DayPickerKeyboardShortcuts extends BaseClass {
+class DayPickerKeyboardShortcuts extends React.PureComponent {
   constructor(...args) {
     super(...args);
 
@@ -396,4 +394,4 @@ export default withStyles(({ reactDates: { color, font, zIndex } }) => ({
       fill: color.core.grayLight,
     },
   },
-}), { pureComponent: pureComponentAvailable })(DayPickerKeyboardShortcuts);
+}), { pureComponent: typeof React.PureComponent !== 'undefined' })(DayPickerKeyboardShortcuts);
diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index 164478e31e..3c479a16a4 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -5,7 +5,6 @@ import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 
 import { DayPickerNavigationPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
-import { pureComponentAvailable } from '../utils/baseClass';
 
 import LeftArrow from './LeftArrow';
 import RightArrow from './RightArrow';
@@ -303,4 +302,4 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     width: 42,
     fill: color.text,
   },
-}), { pureComponent: pureComponentAvailable })(DayPickerNavigation);
+}), { pureComponent: typeof React.PureComponent !== 'undefined' })(DayPickerNavigation);
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 6a962b80e6..e0cdbc1498 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -28,7 +28,6 @@ import FocusedInputShape from '../shapes/FocusedInputShape';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
 import CalendarInfoPositionShape from '../shapes/CalendarInfoPositionShape';
-import BaseClass from '../utils/baseClass';
 
 import {
   START_DATE,
@@ -178,8 +177,7 @@ const getChooseAvailableDatePhrase = (phrases, focusedInput) => {
   return phrases.chooseAvailableDate;
 };
 
-/** @extends React.Component */
-export default class DayPickerRangeController extends BaseClass {
+export default class DayPickerRangeController extends React.PureComponent {
   constructor(props) {
     super(props);
 
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 20391923bf..2650a47842 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -21,7 +21,6 @@ import toISOMonthString from '../utils/toISOMonthString';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
 import CalendarInfoPositionShape from '../shapes/CalendarInfoPositionShape';
-import BaseClass from '../utils/baseClass';
 
 import {
   HORIZONTAL_ORIENTATION,
@@ -147,8 +146,7 @@ const defaultProps = {
   isRTL: false,
 };
 
-/** @extends React.Component */
-export default class DayPickerSingleDateController extends BaseClass {
+export default class DayPickerSingleDateController extends React.PureComponent {
   constructor(props) {
     super(props);
 
diff --git a/src/components/KeyboardShortcutRow.jsx b/src/components/KeyboardShortcutRow.jsx
index eb87b3320d..4cc8a2ac76 100644
--- a/src/components/KeyboardShortcutRow.jsx
+++ b/src/components/KeyboardShortcutRow.jsx
@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { forbidExtraProps } from 'airbnb-prop-types';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
-import { pureComponentAvailable } from '../utils/baseClass';
 
 const propTypes = forbidExtraProps({
   ...withStylesPropTypes,
@@ -90,4 +89,4 @@ export default withStyles(({ reactDates: { color } }) => ({
     wordBreak: 'break-word',
     marginLeft: 8,
   },
-}), { pureComponent: pureComponentAvailable })(KeyboardShortcutRow);
+}), { pureComponent: typeof React.PureComponent !== 'undefined' })(KeyboardShortcutRow);
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index c4a75014a5..1121c57ccf 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -15,7 +15,6 @@ import getDetachedContainerStyles from '../utils/getDetachedContainerStyles';
 import getInputHeight from '../utils/getInputHeight';
 import isInclusivelyAfterDay from '../utils/isInclusivelyAfterDay';
 import disableScroll from '../utils/disableScroll';
-import BaseClass, { pureComponentAvailable } from '../utils/baseClass';
 
 import SingleDatePickerInputController from './SingleDatePickerInputController';
 import DayPickerSingleDateController from './DayPickerSingleDateController';
@@ -115,8 +114,7 @@ const defaultProps = {
   dayAriaLabelFormat: undefined,
 };
 
-/** @extends React.Component */
-class SingleDatePicker extends BaseClass {
+class SingleDatePicker extends React.PureComponent {
   constructor(props) {
     super(props);
 
@@ -649,4 +647,4 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     width: 15,
     fill: color.core.grayLighter,
   },
-}), { pureComponent: pureComponentAvailable })(SingleDatePicker);
+}), { pureComponent: typeof React.PureComponent !== 'undefined' })(SingleDatePicker);
diff --git a/src/components/SingleDatePickerInput.jsx b/src/components/SingleDatePickerInput.jsx
index 368715120d..8811574720 100644
--- a/src/components/SingleDatePickerInput.jsx
+++ b/src/components/SingleDatePickerInput.jsx
@@ -14,7 +14,6 @@ import CalendarIcon from './CalendarIcon';
 
 import openDirectionShape from '../shapes/OpenDirectionShape';
 import { ICON_BEFORE_POSITION, ICON_AFTER_POSITION, OPEN_DOWN } from '../constants';
-import { pureComponentAvailable } from '../utils/baseClass';
 
 const propTypes = forbidExtraProps({
   ...withStylesPropTypes,
@@ -307,4 +306,4 @@ export default withStyles(({ reactDates: { border, color } }) => ({
     width: 14,
     verticalAlign: 'middle',
   },
-}), { pureComponent: pureComponentAvailable })(SingleDatePickerInput);
+}), { pureComponent: typeof React.PureComponent !== 'undefined' })(SingleDatePickerInput);
diff --git a/src/components/SingleDatePickerInputController.jsx b/src/components/SingleDatePickerInputController.jsx
index 7436d33b34..32f0626816 100644
--- a/src/components/SingleDatePickerInputController.jsx
+++ b/src/components/SingleDatePickerInputController.jsx
@@ -19,8 +19,6 @@ import toLocalizedDateString from '../utils/toLocalizedDateString';
 
 import isInclusivelyAfterDay from '../utils/isInclusivelyAfterDay';
 
-import BaseClass from '../utils/baseClass';
-
 import {
   ICON_BEFORE_POSITION,
   OPEN_DOWN,
@@ -112,8 +110,7 @@ const defaultProps = {
   isRTL: false,
 };
 
-/** @extends React.Component */
-export default class SingleDatePickerInputController extends BaseClass {
+export default class SingleDatePickerInputController extends React.PureComponent {
   constructor(props) {
     super(props);
 
diff --git a/src/utils/baseClass.js b/src/utils/baseClass.js
deleted file mode 100644
index 4075a02bd2..0000000000
--- a/src/utils/baseClass.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import shallowCompare from 'react-addons-shallow-compare';
-
-class BaseClass extends (React.PureComponent || React.Component) {
-  [!React.PureComponent && 'shouldComponentUpdate'](nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState);
-  }
-}
-
-export const pureComponentAvailable = typeof React.PureComponent !== 'undefined';
-export default BaseClass;

From 5bf3fa97a204bb7ee024121135d38ece2ab35391 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Tue, 6 Nov 2018 14:28:31 -0800
Subject: [PATCH 299/618] Version 18.2.1

---
 CHANGELOG.md | 3 +++
 package.json | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 054d8d202a..7ac227c46c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,9 @@
 - []  ([#](https://github.com/airbnb/react-dates/pull/))
 -->
 
+## 18.2.1
+- [fix] Add babel transform to handle PureComponent fallbacks ([#1452](https://github.com/airbnb/react-dates/pull/1452))
+
 ## 18.2.0
 - [new] Add `onTab`/`onShiftTab` callbacks to the DayPicker (and its controllers) ([#1427](https://github.com/airbnb/react-dates/pull/1427))
 
diff --git a/package.json b/package.json
index dea7877db2..898d360242 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "18.2.1-rc.2",
+  "version": "18.2.1",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From baad480de1cbcd75c13acb134ce43ef5c65b41f3 Mon Sep 17 00:00:00 2001
From: Nicole Kinser <nicole.kinser@airbnb.com>
Date: Mon, 5 Nov 2018 12:10:57 -0800
Subject: [PATCH 300/618] Fix incorrect VO for selected check-in date

---
 src/utils/getCalendarDaySettings.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/utils/getCalendarDaySettings.js b/src/utils/getCalendarDaySettings.js
index ca5e78f05b..04e0c46bd4 100644
--- a/src/utils/getCalendarDaySettings.js
+++ b/src/utils/getCalendarDaySettings.js
@@ -35,7 +35,9 @@ export default function getCalendarDaySettings(day, ariaLabelFormat, daySize, mo
   const formattedDate = { date: day.format(ariaLabelFormat) };
 
   let ariaLabel = getPhrase(chooseAvailableDate, formattedDate);
-  if (modifiers.has(BLOCKED_MODIFIER)) {
+  if (modifiers.has(BLOCKED_MODIFIER) && selected) {
+    ariaLabel = getPhrase(dateIsSelected, formattedDate);
+  } else if (modifiers.has(BLOCKED_MODIFIER)) {
     ariaLabel = getPhrase(dateIsUnavailable, formattedDate);
   } else if (selected) {
     ariaLabel = getPhrase(dateIsSelected, formattedDate);

From b0e86b78750770e4dd4077249837b05e127a0bd2 Mon Sep 17 00:00:00 2001
From: Nicole Kinser <nicole.kinser@airbnb.com>
Date: Mon, 5 Nov 2018 13:29:06 -0800
Subject: [PATCH 301/618] tests for VO fix

---
 src/utils/getCalendarDaySettings.js       |  4 +---
 test/utils/getCalendarDaySettings_spec.js | 15 +++++++++++++++
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/utils/getCalendarDaySettings.js b/src/utils/getCalendarDaySettings.js
index 04e0c46bd4..043bb42b8e 100644
--- a/src/utils/getCalendarDaySettings.js
+++ b/src/utils/getCalendarDaySettings.js
@@ -35,12 +35,10 @@ export default function getCalendarDaySettings(day, ariaLabelFormat, daySize, mo
   const formattedDate = { date: day.format(ariaLabelFormat) };
 
   let ariaLabel = getPhrase(chooseAvailableDate, formattedDate);
-  if (modifiers.has(BLOCKED_MODIFIER) && selected) {
+  if (selected) {
     ariaLabel = getPhrase(dateIsSelected, formattedDate);
   } else if (modifiers.has(BLOCKED_MODIFIER)) {
     ariaLabel = getPhrase(dateIsUnavailable, formattedDate);
-  } else if (selected) {
-    ariaLabel = getPhrase(dateIsSelected, formattedDate);
   }
 
   return {
diff --git a/test/utils/getCalendarDaySettings_spec.js b/test/utils/getCalendarDaySettings_spec.js
index 98ceacd061..a1b0a0556b 100644
--- a/test/utils/getCalendarDaySettings_spec.js
+++ b/test/utils/getCalendarDaySettings_spec.js
@@ -236,5 +236,20 @@ describe('getCalendarDaySettings', () => {
       expect(phrases.dateIsUnavailable.calledWith(expectedFormattedDay)).to.equal(true);
       expect(ariaLabel).to.equal('dateIsUnavailable text');
     });
+
+    it('is formatted with the dateIsSelected phrase function when day is selected for check in', () => {
+      const modifiers = new Set().add(BLOCKED_MODIFIER).add('selected-start');
+
+      const { ariaLabel } = getCalendarDaySettings(
+        testDay,
+        testAriaLabelFormat,
+        testDaySize,
+        modifiers,
+        phrases,
+      );
+
+      expect(phrases.dateIsSelected.calledWith(expectedFormattedDay)).to.equal(true);
+      expect(ariaLabel).to.equal('dateIsSelected text');
+    });
   });
 });

From 3413dcbb2f4e362eb584b5279b73dd386b78d1ff Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Wed, 7 Nov 2018 14:52:10 -0800
Subject: [PATCH 302/618] Conditionally apply the shouldComponentUpdate method
 if React.PureComponent does not exist

---
 scripts/pure-component-fallback.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/scripts/pure-component-fallback.js b/scripts/pure-component-fallback.js
index 8aef8e72a1..21de3715a6 100644
--- a/scripts/pure-component-fallback.js
+++ b/scripts/pure-component-fallback.js
@@ -6,9 +6,14 @@ module.exports = function pureComponentFallback({ types: t, template }) {
   const buildShouldComponentUpdate = () => {
     const method = t.classMethod(
       'method',
-      t.identifier('shouldComponentUpdate'),
+      t.logicalExpression(
+        '&&',
+        t.unaryExpression('!', t.memberExpression(t.identifier('React'), t.identifier('PureComponent'))),
+        t.stringLiteral('shouldComponentUpdate')
+      ),
       [t.identifier('nextProps'), t.identifier('nextState')],
-      t.blockStatement([template('return shallowCompare(this, nextProps, nextState);')()])
+      t.blockStatement([template('return shallowCompare(this, nextProps, nextState);')()]),
+      true
     );
     return method;
   };

From 579da444df68e2aeb79add627c97fda41b1a6680 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Wed, 7 Nov 2018 16:57:10 -0800
Subject: [PATCH 303/618] Add outline: inherit to the custom month nav story

---
 stories/DateRangePicker_calendar.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/stories/DateRangePicker_calendar.js b/stories/DateRangePicker_calendar.js
index 599d3bb571..e5de2142fe 100644
--- a/stories/DateRangePicker_calendar.js
+++ b/stories/DateRangePicker_calendar.js
@@ -21,6 +21,7 @@ function CustomMonthNav({ children, style }) {
         marginTop: -2,
         top: 30,
         left: 26,
+        outline: 'inherit',
         ...style,
       }}
     >

From 5a132cb2aacf469a898be4d097eea21d04726621 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Wed, 7 Nov 2018 17:41:01 -0800
Subject: [PATCH 304/618] Version 18.2.2

---
 CHANGELOG.md | 4 ++++
 package.json | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7ac227c46c..cf6d39f271 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,10 @@
 - []  ([#](https://github.com/airbnb/react-dates/pull/))
 -->
 
+## 18.2.2
+- [fix] Conditionally apply the `shouldComponentUpdate` method in the babel transform ([#1457](https://github.com/airbnb/react-dates/pull/1457))
+- [fix] Fix incorrect VO for selected check-in date  ([#1451](https://github.com/airbnb/react-dates/pull/1451))
+
 ## 18.2.1
 - [fix] Add babel transform to handle PureComponent fallbacks ([#1452](https://github.com/airbnb/react-dates/pull/1452))
 
diff --git a/package.json b/package.json
index 898d360242..c434c482e0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "18.2.1",
+  "version": "18.2.2",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From f3112e60a22851b9744a2b6968269ba6eb3602e1 Mon Sep 17 00:00:00 2001
From: Cristina Shaver <cristina.shaver@airbnb.com>
Date: Mon, 12 Nov 2018 12:49:35 -0800
Subject: [PATCH 305/618] [a11y] Move triangular border styles to :before
 pseudo element, fixing lack of visible focus in Firefox and IE

---
 src/components/DayPickerKeyboardShortcuts.jsx | 48 ++++++++++++++-----
 1 file changed, 35 insertions(+), 13 deletions(-)

diff --git a/src/components/DayPickerKeyboardShortcuts.jsx b/src/components/DayPickerKeyboardShortcuts.jsx
index 0d3fa8e207..432cf8248c 100644
--- a/src/components/DayPickerKeyboardShortcuts.jsx
+++ b/src/components/DayPickerKeyboardShortcuts.jsx
@@ -285,40 +285,62 @@ export default withStyles(({ reactDates: { color, font, zIndex } }) => ({
   },
 
   DayPickerKeyboardShortcuts_show: {
-    width: 22,
+    width: 33,
+    height: 26,
     position: 'absolute',
     zIndex: zIndex + 2,
+
+    '::before': {
+      content: '""',
+      display: 'block',
+      position: 'absolute',
+    },
   },
 
   DayPickerKeyboardShortcuts_show__bottomRight: {
-    borderTop: '26px solid transparent',
-    borderRight: `33px solid ${color.core.primary}`,
     bottom: 0,
     right: 0,
 
-    ':hover': {
+    '::before': {
+      borderTop: '26px solid transparent',
+      borderRight: `33px solid ${color.core.primary}`,
+      bottom: 0,
+      right: 0,
+    },
+
+    ':hover::before': {
       borderRight: `33px solid ${color.core.primary_dark}`,
     },
   },
 
   DayPickerKeyboardShortcuts_show__topRight: {
-    borderBottom: '26px solid transparent',
-    borderRight: `33px solid ${color.core.primary}`,
     top: 0,
     right: 0,
 
-    ':hover': {
+    '::before': {
+      borderBottom: '26px solid transparent',
+      borderRight: `33px solid ${color.core.primary}`,
+      top: 0,
+      right: 0,
+    },
+
+    ':hover::before': {
       borderRight: `33px solid ${color.core.primary_dark}`,
     },
   },
 
   DayPickerKeyboardShortcuts_show__topLeft: {
-    borderBottom: '26px solid transparent',
-    borderLeft: `33px solid ${color.core.primary}`,
     top: 0,
     left: 0,
 
-    ':hover': {
+    '::before': {
+      borderBottom: '26px solid transparent',
+      borderLeft: `33px solid ${color.core.primary}`,
+      top: 0,
+      left: 0,
+    },
+
+    ':hover::before': {
       borderLeft: `33px solid ${color.core.primary_dark}`,
     },
   },
@@ -330,17 +352,17 @@ export default withStyles(({ reactDates: { color, font, zIndex } }) => ({
 
   DayPickerKeyboardShortcuts_showSpan__bottomRight: {
     bottom: 0,
-    right: -28,
+    right: 5,
   },
 
   DayPickerKeyboardShortcuts_showSpan__topRight: {
     top: 1,
-    right: -28,
+    right: 5,
   },
 
   DayPickerKeyboardShortcuts_showSpan__topLeft: {
     top: 1,
-    left: -28,
+    left: 5,
   },
 
   DayPickerKeyboardShortcuts_panel: {

From e42a33dd240793e0eb6568227af1df276606ad62 Mon Sep 17 00:00:00 2001
From: Cristina Shaver <cristina.shaver@airbnb.com>
Date: Fri, 9 Nov 2018 16:47:37 -0800
Subject: [PATCH 306/618] [a11y] Remove space/enter onKeyDown handling for
 open/close keyboard shortcuts panel

---
 src/components/DayPickerKeyboardShortcuts.jsx | 10 ----------
 .../DayPickerKeyboardShortcuts_spec.jsx       | 19 ++++---------------
 2 files changed, 4 insertions(+), 25 deletions(-)

diff --git a/src/components/DayPickerKeyboardShortcuts.jsx b/src/components/DayPickerKeyboardShortcuts.jsx
index 0d3fa8e207..fabb37b6d6 100644
--- a/src/components/DayPickerKeyboardShortcuts.jsx
+++ b/src/components/DayPickerKeyboardShortcuts.jsx
@@ -105,9 +105,6 @@ class DayPickerKeyboardShortcuts extends React.PureComponent {
     // amounts to a very basic focus trap. The user can exit the panel by "pressing" the
     // close button or hitting escape
     switch (e.key) {
-      case 'Enter':
-      case ' ':
-      case 'Spacebar': // for older browsers
       case 'Escape':
         closeKeyboardShortcutsPanel();
         break;
@@ -190,13 +187,6 @@ class DayPickerKeyboardShortcuts extends React.PureComponent {
           type="button"
           aria-label={toggleButtonText}
           onClick={this.onShowKeyboardShortcutsButtonClick}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') {
-              e.preventDefault();
-            } else if (e.key === 'Space') {
-              this.onShowKeyboardShortcutsButtonClick(e);
-            }
-          }}
           onMouseUp={(e) => {
             e.currentTarget.blur();
           }}
diff --git a/test/components/DayPickerKeyboardShortcuts_spec.jsx b/test/components/DayPickerKeyboardShortcuts_spec.jsx
index f93ca74924..728b8fcdc2 100644
--- a/test/components/DayPickerKeyboardShortcuts_spec.jsx
+++ b/test/components/DayPickerKeyboardShortcuts_spec.jsx
@@ -124,17 +124,6 @@ describe('DayPickerKeyboardShortcuts', () => {
           buttonWrapper.simulate('click');
           expect(openKeyboardShortcutsPanelStub.callCount).to.equal(1);
         });
-
-        it('onKeyDown Space calls onShowKeyboardShortcutsButtonClick', () => {
-          buttonWrapper.prop('onKeyDown')({ ...event, key: 'Space' });
-          expect(openKeyboardShortcutsPanelStub.callCount).to.equal(1);
-        });
-
-        it('onKeyDown Enter calls e.preventDefault and NOT onShowKeyboardShortcutsButtonClick', () => {
-          buttonWrapper.prop('onKeyDown')({ ...event, key: 'Enter' });
-          expect(event.preventDefault.callCount).to.equal(1);
-          expect(openKeyboardShortcutsPanelStub.notCalled).to.equal(true);
-        });
       });
 
       describe('when Mouse Up', () => {
@@ -215,10 +204,10 @@ describe('DayPickerKeyboardShortcuts', () => {
           expect(closeKeyboardShortcutsPanelStub.callCount).to.equal(1);
         });
 
-        it('onKeyDown Space calls e.stopPropagation and onShowKeyboardShortcutsButtonClick', () => {
+        it('onKeyDown calls e.stopPropagation and NOT onShowKeyboardShortcutsButtonClick', () => {
           closeButton.prop('onKeyDown')({ ...event, key: ' ' });
           expect(event.stopPropagation.callCount).to.equal(1);
-          expect(closeKeyboardShortcutsPanelStub.callCount).to.equal(1);
+          expect(closeKeyboardShortcutsPanelStub.callCount).to.equal(0);
         });
 
         it('onKeyDown Escape calls e.stopPropagation and onShowKeyboardShortcutsButtonClick', () => {
@@ -227,10 +216,10 @@ describe('DayPickerKeyboardShortcuts', () => {
           expect(closeKeyboardShortcutsPanelStub.callCount).to.equal(1);
         });
 
-        it('onKeyDown Enter calls e.stopPropagation and onShowKeyboardShortcutsButtonClick', () => {
+        it('onKeyDown calls e.stopPropagation and NOT onShowKeyboardShortcutsButtonClick', () => {
           closeButton.prop('onKeyDown')({ ...event, key: 'Enter' });
           expect(event.stopPropagation.callCount).to.equal(1);
-          expect(closeKeyboardShortcutsPanelStub.callCount).to.equal(1);
+          expect(closeKeyboardShortcutsPanelStub.callCount).to.equal(0);
         });
 
         it('onKeyDown Tab calls e.stopPropagation and e.preventDefault and NOT onShowKeyboardShortcutsButtonClick', () => {

From e1a038ec74e48c68bda1bc49a0207815bd5c2f23 Mon Sep 17 00:00:00 2001
From: James Sheldon <jsheldon@criticalmass.com>
Date: Fri, 16 Nov 2018 14:40:30 -0700
Subject: [PATCH 307/618] Added clearTimeout for the setCalenderMonthGridHeight
 timeout.

---
 src/components/DayPicker.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 4bc521566b..db55303354 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -205,6 +205,7 @@ class DayPicker extends React.PureComponent {
 
     this.calendarMonthGridHeight = 0;
     this.setCalendarInfoWidthTimeout = null;
+    this.setCalendarMonthGridHeightTimeout = null;
 
     this.onKeyDown = this.onKeyDown.bind(this);
     this.throttledKeyDown = throttle(this.onFinalKeyDown, 200, { trailing: false });
@@ -346,6 +347,7 @@ class DayPicker extends React.PureComponent {
 
   componentWillUnmount() {
     clearTimeout(this.setCalendarInfoWidthTimeout);
+    clearTimeout(this.setCalendarMonthGridHeightTimeout);
   }
 
   onKeyDown(e) {
@@ -764,7 +766,7 @@ class DayPicker extends React.PureComponent {
     if (monthHeight !== this.calendarMonthGridHeight) {
       this.transitionContainer.style.height = `${monthHeight}px`;
       if (!this.calendarMonthGridHeight) {
-        setTimeout(() => {
+        this.setCalendarMonthGridHeightTimeout = setTimeout(() => {
           this.setState({ hasSetHeight: true });
         }, 0);
       }

From debfe42e631561bf5d20467a479ddd01669288fe Mon Sep 17 00:00:00 2001
From: Pedro Abreu <pmig.abreu@gmail.com>
Date: Tue, 14 Aug 2018 21:43:05 +0100
Subject: [PATCH 308/618] Disable navigation controllers based on min and max
 date

---
 src/components/DayPicker.jsx                |  8 +++++
 src/components/DayPickerNavigation.jsx      | 27 ++++++++++++++--
 src/components/DayPickerRangeController.jsx | 34 +++++++++++++++++++--
 3 files changed, 65 insertions(+), 4 deletions(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 4bc521566b..71896b0fe3 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -72,6 +72,8 @@ const propTypes = forbidExtraProps({
   horizontalMonthPadding: nonNegativeInteger,
 
   // navigation props
+  hasPrev: PropTypes.bool,
+  hasNext: PropTypes.bool,
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
   noNavButtons: PropTypes.bool,
@@ -130,6 +132,8 @@ export const defaultProps = {
   horizontalMonthPadding: 13,
 
   // navigation props
+  hasPrev: true,
+  hasNext: true,
   navPrev: null,
   navNext: null,
   noNavButtons: false,
@@ -807,6 +811,8 @@ class DayPicker extends React.PureComponent {
 
   renderNavigation() {
     const {
+      hasPrev,
+      hasNext,
       navPrev,
       navNext,
       noNavButtons,
@@ -825,6 +831,8 @@ class DayPicker extends React.PureComponent {
 
     return (
       <DayPickerNavigation
+        hasPrev={hasPrev}
+        hasNext={hasNext}
         onPrevMonthClick={this.onPrevMonthClick}
         onNextMonthClick={onNextMonthClick}
         navPrev={navPrev}
diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index 3c479a16a4..f8ee28b59e 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -19,6 +19,8 @@ import {
 
 const propTypes = forbidExtraProps({
   ...withStylesPropTypes,
+  hasPrev: PropTypes.bool,
+  hasNext: PropTypes.bool,
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
   orientation: ScrollableOrientationShape,
@@ -33,6 +35,8 @@ const propTypes = forbidExtraProps({
 });
 
 const defaultProps = {
+  hasPrev: true,
+  hasNext: true,
   navPrev: null,
   navNext: null,
   orientation: HORIZONTAL_ORIENTATION,
@@ -46,6 +50,8 @@ const defaultProps = {
 };
 
 function DayPickerNavigation({
+  hasPrev,
+  hasNext,
   navPrev,
   navNext,
   onPrevMonthClick,
@@ -121,6 +127,7 @@ function DayPickerNavigation({
           {...css(
             styles.DayPickerNavigation_button,
             isDefaultNavPrev && styles.DayPickerNavigation_button__default,
+            !hasPrev && styles.DayPickerNavigation_button__disabled,
             ...(isHorizontal ? [
               styles.DayPickerNavigation_button__horizontal,
               ...(isDefaultNavPrev ? [
@@ -138,8 +145,9 @@ function DayPickerNavigation({
             ] : []),
           )}
           aria-label={phrases.jumpToPrevMonth}
-          onClick={onPrevMonthClick}
+          onClick={hasPrev ? onPrevMonthClick : () => {}}
           onKeyUp={(e) => {
+            if (!hasPrev) return;
             const { key } = e;
             if (key === 'Enter' || key === ' ') onPrevMonthClick(e);
           }}
@@ -157,6 +165,7 @@ function DayPickerNavigation({
         {...css(
           styles.DayPickerNavigation_button,
           isDefaultNavNext && styles.DayPickerNavigation_button__default,
+          !hasNext && styles.DayPickerNavigation_button__disabled,
           ...(isHorizontal ? [
             styles.DayPickerNavigation_button__horizontal,
             ...(isDefaultNavNext ? [
@@ -177,8 +186,9 @@ function DayPickerNavigation({
           ] : []),
         )}
         aria-label={phrases.jumpToNextMonth}
-        onClick={onNextMonthClick}
+        onClick={hasNext ? onNextMonthClick : () => {}}
         onKeyUp={(e) => {
+          if (!hasNext) return;
           const { key } = e;
           if (key === 'Enter' || key === ' ') onNextMonthClick(e);
         }}
@@ -246,6 +256,19 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     },
   },
 
+  DayPickerNavigation_button__disabled: {
+    cursor: 'default',
+    opacity: '0.4',
+
+    ':focus': {
+      border: `1px solid ${color.core.borderLight}`,
+    },
+
+    ':hover': {
+      border: `1px solid ${color.core.borderLight}`,
+    },
+  },
+
   DayPickerNavigation_button__horizontal: {
   },
 
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index e0cdbc1498..697af20351 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -46,6 +46,8 @@ const propTypes = forbidExtraProps({
   onDatesChange: PropTypes.func,
   startDateOffset: PropTypes.func,
   endDateOffset: PropTypes.func,
+  minDate: momentPropTypes.momentObj,
+  maxDate: momentPropTypes.momentObj,
 
   focusedInput: FocusedInputShape,
   onFocusChange: PropTypes.func,
@@ -106,6 +108,8 @@ const propTypes = forbidExtraProps({
 const defaultProps = {
   startDate: undefined, // TODO: use null
   endDate: undefined, // TODO: use null
+  minDate: null,
+  maxDate: null,
   onDatesChange() {},
   startDateOffset: undefined,
   endDateOffset: undefined,
@@ -670,6 +674,7 @@ export default class DayPickerRangeController extends React.PureComponent {
     const newCurrentMonth = currentMonth.clone().subtract(1, 'month');
     this.setState({
       currentMonth: newCurrentMonth,
+      ...this.getNavigationStatus(newCurrentMonth),
       visibleDays: {
         ...newVisibleDays,
         ...this.getModifiers(prevMonthVisibleDays),
@@ -690,10 +695,10 @@ export default class DayPickerRangeController extends React.PureComponent {
 
     const nextMonth = currentMonth.clone().add(numberOfMonths + 1, 'month');
     const nextMonthVisibleDays = getVisibleDays(nextMonth, 1, enableOutsideDays, true);
-
     const newCurrentMonth = currentMonth.clone().add(1, 'month');
     this.setState({
       currentMonth: newCurrentMonth,
+      ...this.getNavigationStatus(newCurrentMonth),
       visibleDays: {
         ...newVisibleDays,
         ...this.getModifiers(nextMonthVisibleDays),
@@ -751,6 +756,23 @@ export default class DayPickerRangeController extends React.PureComponent {
     });
   }
 
+  getNavigationStatus(visibleMonth) {
+    const {
+      minDate,
+      maxDate,
+      numberOfMonths,
+      enableOutsideDays,
+    } = this.props;
+
+    const isMinDateVisible = isDayVisible(minDate, visibleMonth, numberOfMonths, enableOutsideDays);
+    const isMaxDateVisible = isDayVisible(maxDate, visibleMonth, numberOfMonths, enableOutsideDays);
+
+    return {
+      hasPrev: !isMinDateVisible,
+      hasNext: !isMaxDateVisible,
+    };
+  }
+
   getFirstFocusableDay(newMonth) {
     const {
       startDate,
@@ -1081,7 +1103,13 @@ export default class DayPickerRangeController extends React.PureComponent {
       horizontalMonthPadding,
     } = this.props;
 
-    const { currentMonth, phrases, visibleDays } = this.state;
+    const {
+      currentMonth,
+      phrases,
+      visibleDays,
+      hasPrev,
+      hasNext,
+    } = this.state;
 
     return (
       <DayPicker
@@ -1106,6 +1134,8 @@ export default class DayPickerRangeController extends React.PureComponent {
         initialVisibleMonth={() => currentMonth}
         daySize={daySize}
         onOutsideClick={onOutsideClick}
+        hasPrev={hasPrev}
+        hasNext={hasNext}
         navPrev={navPrev}
         navNext={navNext}
         noNavButtons={noNavButtons}

From aae470f4d528642d767656a5a9cb9017c42fd83f Mon Sep 17 00:00:00 2001
From: Pedro Abreu <pmig.abreu@gmail.com>
Date: Tue, 14 Aug 2018 21:43:18 +0100
Subject: [PATCH 309/618] Add stories

---
 examples/DayPickerRangeControllerWrapper.jsx |  4 ++++
 stories/DayPickerRangeController.js          | 20 ++++++++++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/examples/DayPickerRangeControllerWrapper.jsx b/examples/DayPickerRangeControllerWrapper.jsx
index 5e6d786bae..0cf1e7d115 100644
--- a/examples/DayPickerRangeControllerWrapper.jsx
+++ b/examples/DayPickerRangeControllerWrapper.jsx
@@ -21,6 +21,8 @@ const propTypes = forbidExtraProps({
   startDateOffset: PropTypes.func,
   endDateOffset: PropTypes.func,
   showInputs: PropTypes.bool,
+  minDate: momentPropTypes.momentObj,
+  maxDate: momentPropTypes.momentObj,
 
   keepOpenOnDateSelect: PropTypes.bool,
   minimumNights: PropTypes.number,
@@ -62,6 +64,8 @@ const defaultProps = {
   startDateOffset: undefined,
   endDateOffset: undefined,
   showInputs: false,
+  minDate: null,
+  maxDate: null,
 
   // day presentation and interaction related props
   renderCalendarDay: undefined,
diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
index 5cff95df86..41ff0ffe6f 100644
--- a/stories/DayPickerRangeController.js
+++ b/stories/DayPickerRangeController.js
@@ -248,6 +248,17 @@ storiesOf('DayPickerRangeController', module)
       navNext={<TestNextIcon />}
     />
   )))
+  .add('with custom month navigation and blocked navigation (minDate and maxDate)', withInfo()(() => (
+    <DayPickerRangeControllerWrapper
+      minDate={moment('2018-07-01')}
+      maxDate={moment('2018-10-20')}
+      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
+      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
+      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
+      navPrev={<TestPrevIcon />}
+      navNext={<TestNextIcon />}
+    />
+  )))
   .add('with outside days enabled', withInfo()(() => (
     <DayPickerRangeControllerWrapper
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
@@ -328,6 +339,15 @@ storiesOf('DayPickerRangeController', module)
       isDayBlocked={day => moment.weekdays(day.weekday()) === 'Friday'}
     />
   )))
+  .add('with navigation blocked (minDate and maxDate)', withInfo()(() => (
+    <DayPickerRangeControllerWrapper
+      minDate={moment('2018-07-01')}
+      maxDate={moment('2018-10-20')}
+      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
+      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
+      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
+    />
+  )))
   .add('with custom daily details', withInfo()(() => (
     <DayPickerRangeControllerWrapper
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}

From 1e0a2f0f92f435738cb2a56b613ccb5ae001ad26 Mon Sep 17 00:00:00 2001
From: Pedro Abreu <pmig.abreu@gmail.com>
Date: Tue, 14 Aug 2018 22:56:54 +0100
Subject: [PATCH 310/618] Early return if not a moment object

---
 src/utils/isDayVisible.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/utils/isDayVisible.js b/src/utils/isDayVisible.js
index 08bbf7d48f..b04f2f6355 100644
--- a/src/utils/isDayVisible.js
+++ b/src/utils/isDayVisible.js
@@ -1,7 +1,10 @@
+import moment from 'moment';
+
 import isBeforeDay from './isBeforeDay';
 import isAfterDay from './isAfterDay';
 
 export default function isDayVisible(day, month, numberOfMonths, enableOutsideDays) {
+  if (!moment.isMoment(day)) return false;
   let firstDayOfFirstMonth = month.clone().startOf('month');
   if (enableOutsideDays) firstDayOfFirstMonth = firstDayOfFirstMonth.startOf('week');
   if (isBeforeDay(day, firstDayOfFirstMonth)) return false;

From ea7137a14c4a6d339e441856fd46191ab0a7b47b Mon Sep 17 00:00:00 2001
From: Pedro Abreu <pmig.abreu@gmail.com>
Date: Tue, 14 Aug 2018 22:57:24 +0100
Subject: [PATCH 311/618] Tests for block navigation

---
 test/components/DayPickerNavigation_spec.jsx  | 20 ++++++
 .../DayPickerRangeController_spec.jsx         | 66 +++++++++++++++++++
 2 files changed, 86 insertions(+)

diff --git a/test/components/DayPickerNavigation_spec.jsx b/test/components/DayPickerNavigation_spec.jsx
index d99924de0a..3d3d33174a 100644
--- a/test/components/DayPickerNavigation_spec.jsx
+++ b/test/components/DayPickerNavigation_spec.jsx
@@ -37,5 +37,25 @@ describe('DayPickerNavigation', () => {
       nextMonthButton.simulate('click');
       expect(onNextMonthStub).to.have.property('callCount', 1);
     });
+
+    it('props.onPrevMonthClick is not triggered by prev month disabled click', () => {
+      const onPrevMonthStub = sinon.stub();
+      const prevMonthButton = shallow(<DayPickerNavigation
+        onPrevMonthClick={onPrevMonthStub}
+        hasPrev={false}
+      />).dive().find('[role="button"]').at(0);
+      prevMonthButton.simulate('click');
+      expect(onPrevMonthStub).to.have.property('callCount', 0);
+    });
+
+    it('props.onNextMonthClick is not triggered by prev month disabled click', () => {
+      const onNextMonthStub = sinon.stub();
+      const nextMonthButton = shallow(<DayPickerNavigation
+        onNextMonthClick={onNextMonthStub}
+        hasNext={false}
+      />).dive().find('[role="button"]').at(1);
+      nextMonthButton.simulate('click');
+      expect(onNextMonthStub).to.have.property('callCount', 0);
+    });
   });
 });
diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index c62180465f..79041d7aeb 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -2049,6 +2049,72 @@ describe('DayPickerRangeController', () => {
       expect(onPrevMonthClickStub.firstCall.args[0].year()).to.equal(newMonth.year());
       expect(onPrevMonthClickStub.firstCall.args[0].month()).to.equal(newMonth.month());
     });
+
+    it('calls this.getNavigationStatus', () => {
+      const getNavigationStatusSpy = sinon.spy(DayPickerRangeController.prototype, 'getNavigationStatus');
+      const wrapper = shallow((
+        <DayPickerRangeController
+          onDatesChange={sinon.stub()}
+          onFocusChange={sinon.stub()}
+        />
+      ));
+      getNavigationStatusSpy.resetHistory();
+      wrapper.instance().onPrevMonthClick();
+      expect(getNavigationStatusSpy.callCount).to.equal(1);
+    });
+
+    it('sets hasNext and hasPrev on onPrevMonthClick call withouth maxDate and minDate set', () => {
+      const numberOfMonths = 2;
+      const wrapper = shallow((
+        <DayPickerRangeController
+          onDatesChange={sinon.stub()}
+          onFocusChange={sinon.stub()}
+          numberOfMonths={numberOfMonths}
+        />
+      ));
+      wrapper.setState({
+        currentMonth: today,
+      });
+      wrapper.instance().onPrevMonthClick();
+      expect(wrapper.state().hasNext).to.equal(true);
+      expect(wrapper.state().hasPrev).to.equal(true);
+    });
+
+    it('sets hasNext as false when maxDate is in visible month', () => {
+      const numberOfMonths = 2;
+      const wrapper = shallow((
+        <DayPickerRangeController
+          onDatesChange={sinon.stub()}
+          onFocusChange={sinon.stub()}
+          numberOfMonths={numberOfMonths}
+          maxDate={today}
+        />
+      ));
+      wrapper.setState({
+        currentMonth: today,
+      });
+      wrapper.instance().onPrevMonthClick();
+      expect(wrapper.state().hasNext).to.equal(false);
+      expect(wrapper.state().hasPrev).to.equal(true);
+    });
+
+    it('sets hasPrev as false when minDate is in visible month', () => {
+      const numberOfMonths = 2;
+      const wrapper = shallow((
+        <DayPickerRangeController
+          onDatesChange={sinon.stub()}
+          onFocusChange={sinon.stub()}
+          numberOfMonths={numberOfMonths}
+          minDate={today.clone().subtract(1, 'month')}
+        />
+      ));
+      wrapper.setState({
+        currentMonth: today,
+      });
+      wrapper.instance().onPrevMonthClick();
+      expect(wrapper.state().hasNext).to.equal(true);
+      expect(wrapper.state().hasPrev).to.equal(false);
+    });
   });
 
   describe('#onNextMonthClick', () => {

From 5380db9d776dec4ef7ded54478efb81dbc55f582 Mon Sep 17 00:00:00 2001
From: Pedro Abreu <pmig.abreu@gmail.com>
Date: Tue, 14 Aug 2018 23:18:52 +0100
Subject: [PATCH 312/618] Use disabled colors in navigation

---
 src/components/DayPickerNavigation.jsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index f8ee28b59e..de6030b6a0 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -80,6 +80,7 @@ function DayPickerNavigation({
         {...css(
           isHorizontal && styles.DayPickerNavigation_svg__horizontal,
           isVertical && styles.DayPickerNavigation_svg__vertical,
+          !hasPrev && styles.DayPickerNavigation_svg__disabled,
         )}
       />
     );
@@ -96,6 +97,7 @@ function DayPickerNavigation({
         {...css(
           isHorizontal && styles.DayPickerNavigation_svg__horizontal,
           isVertical && styles.DayPickerNavigation_svg__vertical,
+          !hasNext && styles.DayPickerNavigation_svg__disabled,
         )}
       />
     );
@@ -258,14 +260,18 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
 
   DayPickerNavigation_button__disabled: {
     cursor: 'default',
-    opacity: '0.4',
+    border: `1px solid ${color.disabled}`,
 
     ':focus': {
-      border: `1px solid ${color.core.borderLight}`,
+      border: `1px solid ${color.disabled}`,
     },
 
     ':hover': {
-      border: `1px solid ${color.core.borderLight}`,
+      border: `1px solid ${color.disabled}`,
+    },
+
+    ':active': {
+      background: 'none',
     },
   },
 
@@ -325,4 +331,7 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     width: 42,
     fill: color.text,
   },
+  DayPickerNavigation_svg__disabled: {
+     fill: color.disabled,
+  },
 }), { pureComponent: typeof React.PureComponent !== 'undefined' })(DayPickerNavigation);

From 9bb571acdf2b5cdf866511383c4e6b3fa71a51c6 Mon Sep 17 00:00:00 2001
From: Pedro Abreu <pmig.abreu@gmail.com>
Date: Wed, 15 Aug 2018 20:34:22 +0100
Subject: [PATCH 313/618] Rename to disablePrev/Next so the default is falsy

---
 src/components/DayPicker.jsx                  | 16 ++++++------
 src/components/DayPickerNavigation.jsx        | 26 +++++++++----------
 src/components/DayPickerRangeController.jsx   | 12 ++++-----
 test/components/DayPickerNavigation_spec.jsx  |  4 +--
 .../DayPickerRangeController_spec.jsx         | 18 ++++++-------
 5 files changed, 37 insertions(+), 39 deletions(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 71896b0fe3..75403b6fe8 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -72,8 +72,8 @@ const propTypes = forbidExtraProps({
   horizontalMonthPadding: nonNegativeInteger,
 
   // navigation props
-  hasPrev: PropTypes.bool,
-  hasNext: PropTypes.bool,
+  disablePrev: PropTypes.bool,
+  disableNext: PropTypes.bool,
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
   noNavButtons: PropTypes.bool,
@@ -132,8 +132,8 @@ export const defaultProps = {
   horizontalMonthPadding: 13,
 
   // navigation props
-  hasPrev: true,
-  hasNext: true,
+  disablePrev: false,
+  disableNext: false,
   navPrev: null,
   navNext: null,
   noNavButtons: false,
@@ -811,8 +811,8 @@ class DayPicker extends React.PureComponent {
 
   renderNavigation() {
     const {
-      hasPrev,
-      hasNext,
+      disablePrev,
+      disableNext,
       navPrev,
       navNext,
       noNavButtons,
@@ -831,8 +831,8 @@ class DayPicker extends React.PureComponent {
 
     return (
       <DayPickerNavigation
-        hasPrev={hasPrev}
-        hasNext={hasNext}
+        disablePrev={disablePrev}
+        disableNext={disableNext}
         onPrevMonthClick={this.onPrevMonthClick}
         onNextMonthClick={onNextMonthClick}
         navPrev={navPrev}
diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index de6030b6a0..ee4f8a2432 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -19,8 +19,8 @@ import {
 
 const propTypes = forbidExtraProps({
   ...withStylesPropTypes,
-  hasPrev: PropTypes.bool,
-  hasNext: PropTypes.bool,
+  disablePrev: PropTypes.bool,
+  disableNext: PropTypes.bool,
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
   orientation: ScrollableOrientationShape,
@@ -35,8 +35,8 @@ const propTypes = forbidExtraProps({
 });
 
 const defaultProps = {
-  hasPrev: true,
-  hasNext: true,
+  disablePrev: false,
+  disableNext: false,
   navPrev: null,
   navNext: null,
   orientation: HORIZONTAL_ORIENTATION,
@@ -50,8 +50,8 @@ const defaultProps = {
 };
 
 function DayPickerNavigation({
-  hasPrev,
-  hasNext,
+  disablePrev,
+  disableNext,
   navPrev,
   navNext,
   onPrevMonthClick,
@@ -80,7 +80,7 @@ function DayPickerNavigation({
         {...css(
           isHorizontal && styles.DayPickerNavigation_svg__horizontal,
           isVertical && styles.DayPickerNavigation_svg__vertical,
-          !hasPrev && styles.DayPickerNavigation_svg__disabled,
+          disablePrev && styles.DayPickerNavigation_svg__disabled,
         )}
       />
     );
@@ -97,7 +97,7 @@ function DayPickerNavigation({
         {...css(
           isHorizontal && styles.DayPickerNavigation_svg__horizontal,
           isVertical && styles.DayPickerNavigation_svg__vertical,
-          !hasNext && styles.DayPickerNavigation_svg__disabled,
+          disableNext && styles.DayPickerNavigation_svg__disabled,
         )}
       />
     );
@@ -129,7 +129,7 @@ function DayPickerNavigation({
           {...css(
             styles.DayPickerNavigation_button,
             isDefaultNavPrev && styles.DayPickerNavigation_button__default,
-            !hasPrev && styles.DayPickerNavigation_button__disabled,
+            disablePrev && styles.DayPickerNavigation_button__disabled,
             ...(isHorizontal ? [
               styles.DayPickerNavigation_button__horizontal,
               ...(isDefaultNavPrev ? [
@@ -147,9 +147,8 @@ function DayPickerNavigation({
             ] : []),
           )}
           aria-label={phrases.jumpToPrevMonth}
-          onClick={hasPrev ? onPrevMonthClick : () => {}}
+          onClick={disablePrev ? undefined : onPrevMonthClick}
           onKeyUp={(e) => {
-            if (!hasPrev) return;
             const { key } = e;
             if (key === 'Enter' || key === ' ') onPrevMonthClick(e);
           }}
@@ -167,7 +166,7 @@ function DayPickerNavigation({
         {...css(
           styles.DayPickerNavigation_button,
           isDefaultNavNext && styles.DayPickerNavigation_button__default,
-          !hasNext && styles.DayPickerNavigation_button__disabled,
+          disableNext && styles.DayPickerNavigation_button__disabled,
           ...(isHorizontal ? [
             styles.DayPickerNavigation_button__horizontal,
             ...(isDefaultNavNext ? [
@@ -188,9 +187,8 @@ function DayPickerNavigation({
           ] : []),
         )}
         aria-label={phrases.jumpToNextMonth}
-        onClick={hasNext ? onNextMonthClick : () => {}}
+        onClick={disableNext ? undefined : onNextMonthClick}
         onKeyUp={(e) => {
-          if (!hasNext) return;
           const { key } = e;
           if (key === 'Enter' || key === ' ') onNextMonthClick(e);
         }}
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 697af20351..9530567460 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -768,8 +768,8 @@ export default class DayPickerRangeController extends React.PureComponent {
     const isMaxDateVisible = isDayVisible(maxDate, visibleMonth, numberOfMonths, enableOutsideDays);
 
     return {
-      hasPrev: !isMinDateVisible,
-      hasNext: !isMaxDateVisible,
+      disablePrev: isMinDateVisible,
+      disableNext: isMaxDateVisible,
     };
   }
 
@@ -1107,8 +1107,8 @@ export default class DayPickerRangeController extends React.PureComponent {
       currentMonth,
       phrases,
       visibleDays,
-      hasPrev,
-      hasNext,
+      disablePrev,
+      disableNext,
     } = this.state;
 
     return (
@@ -1134,8 +1134,8 @@ export default class DayPickerRangeController extends React.PureComponent {
         initialVisibleMonth={() => currentMonth}
         daySize={daySize}
         onOutsideClick={onOutsideClick}
-        hasPrev={hasPrev}
-        hasNext={hasNext}
+        disablePrev={disablePrev}
+        disableNext={disableNext}
         navPrev={navPrev}
         navNext={navNext}
         noNavButtons={noNavButtons}
diff --git a/test/components/DayPickerNavigation_spec.jsx b/test/components/DayPickerNavigation_spec.jsx
index 3d3d33174a..e7184627e6 100644
--- a/test/components/DayPickerNavigation_spec.jsx
+++ b/test/components/DayPickerNavigation_spec.jsx
@@ -42,7 +42,7 @@ describe('DayPickerNavigation', () => {
       const onPrevMonthStub = sinon.stub();
       const prevMonthButton = shallow(<DayPickerNavigation
         onPrevMonthClick={onPrevMonthStub}
-        hasPrev={false}
+        disablePrev
       />).dive().find('[role="button"]').at(0);
       prevMonthButton.simulate('click');
       expect(onPrevMonthStub).to.have.property('callCount', 0);
@@ -52,7 +52,7 @@ describe('DayPickerNavigation', () => {
       const onNextMonthStub = sinon.stub();
       const nextMonthButton = shallow(<DayPickerNavigation
         onNextMonthClick={onNextMonthStub}
-        hasNext={false}
+        disableNext
       />).dive().find('[role="button"]').at(1);
       nextMonthButton.simulate('click');
       expect(onNextMonthStub).to.have.property('callCount', 0);
diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index 79041d7aeb..c212e96071 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -2063,7 +2063,7 @@ describe('DayPickerRangeController', () => {
       expect(getNavigationStatusSpy.callCount).to.equal(1);
     });
 
-    it('sets hasNext and hasPrev on onPrevMonthClick call withouth maxDate and minDate set', () => {
+    it('sets disablePrev and disablePrev as false on onPrevMonthClick call withouth maxDate and minDate set', () => {
       const numberOfMonths = 2;
       const wrapper = shallow((
         <DayPickerRangeController
@@ -2076,11 +2076,11 @@ describe('DayPickerRangeController', () => {
         currentMonth: today,
       });
       wrapper.instance().onPrevMonthClick();
-      expect(wrapper.state().hasNext).to.equal(true);
-      expect(wrapper.state().hasPrev).to.equal(true);
+      expect(wrapper.state().disablePrev).to.equal(false);
+      expect(wrapper.state().disableNext).to.equal(false);
     });
 
-    it('sets hasNext as false when maxDate is in visible month', () => {
+    it('sets disableNext as true when maxDate is in visible month', () => {
       const numberOfMonths = 2;
       const wrapper = shallow((
         <DayPickerRangeController
@@ -2094,11 +2094,11 @@ describe('DayPickerRangeController', () => {
         currentMonth: today,
       });
       wrapper.instance().onPrevMonthClick();
-      expect(wrapper.state().hasNext).to.equal(false);
-      expect(wrapper.state().hasPrev).to.equal(true);
+      expect(wrapper.state().disableNext).to.equal(true);
+      expect(wrapper.state().disablePrev).to.equal(false);
     });
 
-    it('sets hasPrev as false when minDate is in visible month', () => {
+    it('sets disablePrev as true when minDate is in visible month', () => {
       const numberOfMonths = 2;
       const wrapper = shallow((
         <DayPickerRangeController
@@ -2112,8 +2112,8 @@ describe('DayPickerRangeController', () => {
         currentMonth: today,
       });
       wrapper.instance().onPrevMonthClick();
-      expect(wrapper.state().hasNext).to.equal(true);
-      expect(wrapper.state().hasPrev).to.equal(false);
+      expect(wrapper.state().disableNext).to.equal(false);
+      expect(wrapper.state().disablePrev).to.equal(true);
     });
   });
 

From a422d40dd81be9ce5aa52ecbf10faf01c370b782 Mon Sep 17 00:00:00 2001
From: Pedro Abreu <pmig.abreu@gmail.com>
Date: Wed, 15 Aug 2018 20:38:51 +0100
Subject: [PATCH 314/618] disable navigation onKeyUp

---
 src/components/DayPickerNavigation.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index ee4f8a2432..80d4ce3644 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -148,7 +148,7 @@ function DayPickerNavigation({
           )}
           aria-label={phrases.jumpToPrevMonth}
           onClick={disablePrev ? undefined : onPrevMonthClick}
-          onKeyUp={(e) => {
+          onKeyUp={disablePrev ? undefined : (e) => {
             const { key } = e;
             if (key === 'Enter' || key === ' ') onPrevMonthClick(e);
           }}
@@ -188,7 +188,7 @@ function DayPickerNavigation({
         )}
         aria-label={phrases.jumpToNextMonth}
         onClick={disableNext ? undefined : onNextMonthClick}
-        onKeyUp={(e) => {
+        onKeyUp={disableNext ? undefined : (e) => {
           const { key } = e;
           if (key === 'Enter' || key === ' ') onNextMonthClick(e);
         }}

From c209a9a16273f2282f5193030367120139393a8e Mon Sep 17 00:00:00 2001
From: Pedro Abreu <pmig.abreu@gmail.com>
Date: Wed, 15 Aug 2018 20:40:58 +0100
Subject: [PATCH 315/618] aria-disabled in navigation button

---
 src/components/DayPickerNavigation.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index 80d4ce3644..1d906dfb10 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -146,6 +146,7 @@ function DayPickerNavigation({
               ] : []),
             ] : []),
           )}
+          aria-disabled={disablePrev}
           aria-label={phrases.jumpToPrevMonth}
           onClick={disablePrev ? undefined : onPrevMonthClick}
           onKeyUp={disablePrev ? undefined : (e) => {
@@ -186,6 +187,7 @@ function DayPickerNavigation({
             ] : []),
           ] : []),
         )}
+        aria-disabled={disableNext}
         aria-label={phrases.jumpToNextMonth}
         onClick={disableNext ? undefined : onNextMonthClick}
         onKeyUp={disableNext ? undefined : (e) => {

From 46937947466ec309c230951520bc5dfa091ea759 Mon Sep 17 00:00:00 2001
From: Pedro Abreu <pmig.abreu@gmail.com>
Date: Wed, 15 Aug 2018 21:14:34 +0100
Subject: [PATCH 316/618] Rename to shouldDisableMonthNavigation

---
 src/components/DayPickerRangeController.jsx   | 50 +++++++++++--------
 .../DayPickerRangeController_spec.jsx         |  8 +--
 2 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 9530567460..e12c3f9b7c 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -660,7 +660,13 @@ export default class DayPickerRangeController extends React.PureComponent {
   }
 
   onPrevMonthClick() {
-    const { onPrevMonthClick, numberOfMonths, enableOutsideDays } = this.props;
+    const {
+      enableOutsideDays,
+      maxDate,
+      minDate,
+      numberOfMonths,
+      onPrevMonthClick,
+    } = this.props;
     const { currentMonth, visibleDays } = this.state;
 
     const newVisibleDays = {};
@@ -674,7 +680,8 @@ export default class DayPickerRangeController extends React.PureComponent {
     const newCurrentMonth = currentMonth.clone().subtract(1, 'month');
     this.setState({
       currentMonth: newCurrentMonth,
-      ...this.getNavigationStatus(newCurrentMonth),
+      disablePrev: this.shouldDisableMonthNavigation(minDate, newCurrentMonth),
+      disableNext: this.shouldDisableMonthNavigation(maxDate, newCurrentMonth),
       visibleDays: {
         ...newVisibleDays,
         ...this.getModifiers(prevMonthVisibleDays),
@@ -685,7 +692,13 @@ export default class DayPickerRangeController extends React.PureComponent {
   }
 
   onNextMonthClick() {
-    const { onNextMonthClick, numberOfMonths, enableOutsideDays } = this.props;
+    const {
+      enableOutsideDays,
+      maxDate,
+      minDate,
+      numberOfMonths,
+      onNextMonthClick,
+    } = this.props;
     const { currentMonth, visibleDays } = this.state;
 
     const newVisibleDays = {};
@@ -698,7 +711,8 @@ export default class DayPickerRangeController extends React.PureComponent {
     const newCurrentMonth = currentMonth.clone().add(1, 'month');
     this.setState({
       currentMonth: newCurrentMonth,
-      ...this.getNavigationStatus(newCurrentMonth),
+      disablePrev: this.shouldDisableMonthNavigation(minDate, newCurrentMonth),
+      disableNext: this.shouldDisableMonthNavigation(maxDate, newCurrentMonth),
       visibleDays: {
         ...newVisibleDays,
         ...this.getModifiers(nextMonthVisibleDays),
@@ -756,23 +770,6 @@ export default class DayPickerRangeController extends React.PureComponent {
     });
   }
 
-  getNavigationStatus(visibleMonth) {
-    const {
-      minDate,
-      maxDate,
-      numberOfMonths,
-      enableOutsideDays,
-    } = this.props;
-
-    const isMinDateVisible = isDayVisible(minDate, visibleMonth, numberOfMonths, enableOutsideDays);
-    const isMaxDateVisible = isDayVisible(maxDate, visibleMonth, numberOfMonths, enableOutsideDays);
-
-    return {
-      disablePrev: isMinDateVisible,
-      disableNext: isMaxDateVisible,
-    };
-  }
-
   getFirstFocusableDay(newMonth) {
     const {
       startDate,
@@ -848,6 +845,17 @@ export default class DayPickerRangeController extends React.PureComponent {
     return { currentMonth, visibleDays };
   }
 
+  shouldDisableMonthNavigation(date, visibleMonth) {
+    if (!date) return false;
+
+    const {
+      numberOfMonths,
+      enableOutsideDays,
+    } = this.props;
+
+    return isDayVisible(date, visibleMonth, numberOfMonths, enableOutsideDays);
+  }
+
   addModifier(updatedDays, day, modifier) {
     const { numberOfMonths: numberOfVisibleMonths, enableOutsideDays, orientation } = this.props;
     const { currentMonth: firstVisibleMonth, visibleDays } = this.state;
diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index c212e96071..b57f1c9354 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -2050,17 +2050,17 @@ describe('DayPickerRangeController', () => {
       expect(onPrevMonthClickStub.firstCall.args[0].month()).to.equal(newMonth.month());
     });
 
-    it('calls this.getNavigationStatus', () => {
-      const getNavigationStatusSpy = sinon.spy(DayPickerRangeController.prototype, 'getNavigationStatus');
+    it('calls this.shouldDisableMonthNavigation twice', () => {
+      const shouldDisableMonthNavigationSpy = sinon.spy(DayPickerRangeController.prototype, 'shouldDisableMonthNavigation');
       const wrapper = shallow((
         <DayPickerRangeController
           onDatesChange={sinon.stub()}
           onFocusChange={sinon.stub()}
         />
       ));
-      getNavigationStatusSpy.resetHistory();
+      shouldDisableMonthNavigationSpy.resetHistory();
       wrapper.instance().onPrevMonthClick();
-      expect(getNavigationStatusSpy.callCount).to.equal(1);
+      expect(shouldDisableMonthNavigationSpy.callCount).to.equal(2);
     });
 
     it('sets disablePrev and disablePrev as false on onPrevMonthClick call withouth maxDate and minDate set', () => {

From 246419c79092b38cbe15fc5fdf4599df8ba823e3 Mon Sep 17 00:00:00 2001
From: Pedro Abreu <pmig.abreu@gmail.com>
Date: Tue, 25 Sep 2018 15:16:04 +0100
Subject: [PATCH 317/618] Init disablePrev and disableNext in component state

---
 src/components/DayPickerRangeController.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index e12c3f9b7c..5e4f0cb210 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -221,6 +221,8 @@ export default class DayPickerRangeController extends React.PureComponent {
         chooseAvailableDate,
       },
       visibleDays,
+      disablePrev: false,
+      disableNext: false,
     };
 
     this.onDayClick = this.onDayClick.bind(this);

From 9c6ad6c64d0e03cdc0205adb8d7bc6313233cac4 Mon Sep 17 00:00:00 2001
From: Pedro Abreu <pmig.abreu@gmail.com>
Date: Sat, 17 Nov 2018 01:28:06 +0000
Subject: [PATCH 318/618] Fix indentation

---
 src/components/DayPickerNavigation.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index 1d906dfb10..cc15dd6700 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -331,7 +331,8 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     width: 42,
     fill: color.text,
   },
+
   DayPickerNavigation_svg__disabled: {
-     fill: color.disabled,
+    fill: color.disabled,
   },
 }), { pureComponent: typeof React.PureComponent !== 'undefined' })(DayPickerNavigation);

From df2fd38e32bc62660ada258a4663e527f3d7b80f Mon Sep 17 00:00:00 2001
From: Diane Ko <backwardok@users.noreply.github.com>
Date: Sat, 17 Nov 2018 14:19:09 +0000
Subject: [PATCH 319/618] Fallback to undefined in aria-disabled when not
 disabled

Co-Authored-By: pedroabreu <pmig.abreu@gmail.com>
---
 src/components/DayPickerNavigation.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index cc15dd6700..7ac8387e73 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -146,7 +146,7 @@ function DayPickerNavigation({
               ] : []),
             ] : []),
           )}
-          aria-disabled={disablePrev}
+          aria-disabled={disablePrev ? true : undefined}
           aria-label={phrases.jumpToPrevMonth}
           onClick={disablePrev ? undefined : onPrevMonthClick}
           onKeyUp={disablePrev ? undefined : (e) => {
@@ -187,7 +187,7 @@ function DayPickerNavigation({
             ] : []),
           ] : []),
         )}
-        aria-disabled={disableNext}
+        aria-disabled={disableNext ? true : undefined}
         aria-label={phrases.jumpToNextMonth}
         onClick={disableNext ? undefined : onNextMonthClick}
         onKeyUp={disableNext ? undefined : (e) => {

From 49a7a0f6825d9156a056056662e1873362d406b2 Mon Sep 17 00:00:00 2001
From: Pedro Abreu <pmig.abreu@gmail.com>
Date: Sat, 17 Nov 2018 14:30:27 +0000
Subject: [PATCH 320/618] pre-populate state depending on initial props

---
 src/components/DayPickerRangeController.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 5e4f0cb210..e4708d27d6 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -221,8 +221,8 @@ export default class DayPickerRangeController extends React.PureComponent {
         chooseAvailableDate,
       },
       visibleDays,
-      disablePrev: false,
-      disableNext: false,
+      disablePrev: this.shouldDisableMonthNavigation(props.minDate, currentMonth),
+      disableNext: this.shouldDisableMonthNavigation(props.maxDate, currentMonth),
     };
 
     this.onDayClick = this.onDayClick.bind(this);

From 9767c36a3604049fcf1e327257772d6cd9ac5f7c Mon Sep 17 00:00:00 2001
From: Pedro Abreu <pmig.abreu@gmail.com>
Date: Sat, 17 Nov 2018 14:32:16 +0000
Subject: [PATCH 321/618] disable onMouseUp event by disable prop

---
 src/components/DayPickerNavigation.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index 7ac8387e73..aad24fed92 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -153,7 +153,7 @@ function DayPickerNavigation({
             const { key } = e;
             if (key === 'Enter' || key === ' ') onPrevMonthClick(e);
           }}
-          onMouseUp={(e) => {
+          onMouseUp={disablePrev ? undefined : (e) => {
             e.currentTarget.blur();
           }}
         >
@@ -194,7 +194,7 @@ function DayPickerNavigation({
           const { key } = e;
           if (key === 'Enter' || key === ' ') onNextMonthClick(e);
         }}
-        onMouseUp={(e) => {
+        onMouseUp={disableNext ? undefined : (e) => {
           e.currentTarget.blur();
         }}
       >

From f4535de8fb994af2257fe5a296020dd86b3fbcc9 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Wed, 5 Dec 2018 17:04:49 -0800
Subject: [PATCH 322/618] Update the SDP and DRP to be compatible with
 react-with-direction

This change prevents automatic flipping on styles that are manually handled via the isRTL prop.

Co-Authored-By: majapw <majapw@gmail.com>
---
 src/components/CalendarMonthGrid.jsx          |  5 ++--
 src/components/DateInput.jsx                  | 19 +++++++-------
 src/components/DateRangePicker.jsx            | 11 ++++----
 src/components/DateRangePickerInput.jsx       | 11 ++++----
 src/components/DayPicker.jsx                  | 25 ++++++++++---------
 src/components/DayPickerKeyboardShortcuts.jsx |  2 ++
 src/components/DayPickerNavigation.jsx        | 11 ++++----
 src/components/KeyboardShortcutRow.jsx        |  8 +++---
 src/components/SingleDatePicker.jsx           | 11 ++++----
 src/components/SingleDatePickerInput.jsx      | 11 ++++----
 src/utils/noflip.js                           | 11 ++++++++
 stories/DateRangePicker.js                    | 15 +++++++++++
 stories/DayPicker.js                          | 25 +++++++++++++++++++
 stories/SingleDatePicker.js                   | 14 +++++++++++
 14 files changed, 127 insertions(+), 52 deletions(-)
 create mode 100644 src/utils/noflip.js

diff --git a/src/components/CalendarMonthGrid.jsx b/src/components/CalendarMonthGrid.jsx
index ab3748e02d..0954594bd9 100644
--- a/src/components/CalendarMonthGrid.jsx
+++ b/src/components/CalendarMonthGrid.jsx
@@ -8,6 +8,7 @@ import { addEventListener } from 'consolidated-events';
 
 import { CalendarDayPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
+import noflip from '../utils/noflip';
 
 import CalendarMonth from './CalendarMonth';
 
@@ -376,7 +377,7 @@ export default withStyles(({
 }) => ({
   CalendarMonthGrid: {
     background: color.background,
-    textAlign: 'left',
+    textAlign: noflip('left'),
     zIndex,
   },
 
@@ -386,7 +387,7 @@ export default withStyles(({
 
   CalendarMonthGrid__horizontal: {
     position: 'absolute',
-    left: spacing.dayPickerHorizontalPadding,
+    left: noflip(spacing.dayPickerHorizontalPadding),
   },
 
   CalendarMonthGrid__vertical: {
diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
index af8d096f40..e5f3cee4c0 100644
--- a/src/components/DateInput.jsx
+++ b/src/components/DateInput.jsx
@@ -5,6 +5,7 @@ import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 import throttle from 'lodash/throttle';
 import isTouchDevice from 'is-touch-device';
 
+import noflip from '../utils/noflip';
 import getInputHeight from '../utils/getInputHeight';
 import openDirectionShape from '../shapes/OpenDirectionShape';
 
@@ -309,13 +310,13 @@ export default withStyles(({
     padding: `${spacing.displayTextPaddingVertical}px ${spacing.displayTextPaddingHorizontal}px`,
     paddingTop: spacing.displayTextPaddingTop,
     paddingBottom: spacing.displayTextPaddingBottom,
-    paddingLeft: spacing.displayTextPaddingLeft,
-    paddingRight: spacing.displayTextPaddingRight,
+    paddingLeft: noflip(spacing.displayTextPaddingLeft),
+    paddingRight: noflip(spacing.displayTextPaddingRight),
     border: border.input.border,
     borderTop: border.input.borderTop,
-    borderRight: border.input.borderRight,
+    borderRight: noflip(border.input.borderRight),
     borderBottom: border.input.borderBottom,
-    borderLeft: border.input.borderLeft,
+    borderLeft: noflip(border.input.borderLeft),
     borderRadius: border.input.borderRadius,
   },
 
@@ -326,8 +327,8 @@ export default withStyles(({
     padding: `${spacing.displayTextPaddingVertical_small}px ${spacing.displayTextPaddingHorizontal_small}px`,
     paddingTop: spacing.displayTextPaddingTop_small,
     paddingBottom: spacing.displayTextPaddingBottom_small,
-    paddingLeft: spacing.displayTextPaddingLeft_small,
-    paddingRight: spacing.displayTextPaddingRight_small,
+    paddingLeft: noflip(spacing.displayTextPaddingLeft_small),
+    paddingRight: noflip(spacing.displayTextPaddingRight_small),
   },
 
   DateInput_input__regular: {
@@ -343,9 +344,9 @@ export default withStyles(({
     background: color.backgroundFocused,
     border: border.input.borderFocused,
     borderTop: border.input.borderTopFocused,
-    borderRight: border.input.borderRightFocused,
+    borderRight: noflip(border.input.borderRightFocused),
     borderBottom: border.input.borderBottomFocused,
-    borderLeft: border.input.borderLeftFocused,
+    borderLeft: noflip(border.input.borderLeftFocused),
   },
 
   DateInput_input__disabled: {
@@ -368,7 +369,7 @@ export default withStyles(({
     position: 'absolute',
     width: FANG_WIDTH_PX,
     height: FANG_HEIGHT_PX,
-    left: 22,
+    left: 22, // TODO: should be noflip wrapped and handled by an isRTL prop
     zIndex: zIndex + 2,
   },
 
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index b8406abbec..d7fbc63f0d 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -15,6 +15,7 @@ import getDetachedContainerStyles from '../utils/getDetachedContainerStyles';
 import getInputHeight from '../utils/getInputHeight';
 import isInclusivelyAfterDay from '../utils/isInclusivelyAfterDay';
 import disableScroll from '../utils/disableScroll';
+import noflip from '../utils/noflip';
 
 import DateRangePickerInputController from './DateRangePickerInputController';
 import DayPickerRangeController from './DayPickerRangeController';
@@ -617,22 +618,22 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
   },
 
   DateRangePicker_picker__rtl: {
-    direction: 'rtl',
+    direction: noflip('rtl'),
   },
 
   DateRangePicker_picker__directionLeft: {
-    left: 0,
+    left: noflip(0),
   },
 
   DateRangePicker_picker__directionRight: {
-    right: 0,
+    right: noflip(0),
   },
 
   DateRangePicker_picker__portal: {
     backgroundColor: 'rgba(0, 0, 0, 0.3)',
     position: 'fixed',
     top: 0,
-    left: 0,
+    left: noflip(0),
     height: '100%',
     width: '100%',
   },
@@ -652,7 +653,7 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
 
     position: 'absolute',
     top: 0,
-    right: 0,
+    right: noflip(0),
     padding: 15,
     zIndex: zIndex + 2,
 
diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index ebccd984b7..4d5e29def4 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -5,6 +5,7 @@ import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 
 import { DateRangePickerInputPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
+import noflip from '../utils/noflip';
 import openDirectionShape from '../shapes/OpenDirectionShape';
 
 import DateInput from './DateInput';
@@ -303,7 +304,7 @@ export default withStyles(({ reactDates: { border, color, sizing } }) => ({
   },
 
   DateRangePickerInput__rtl: {
-    direction: 'rtl',
+    direction: noflip('rtl'),
   },
 
   DateRangePickerInput__block: {
@@ -311,7 +312,7 @@ export default withStyles(({ reactDates: { border, color, sizing } }) => ({
   },
 
   DateRangePickerInput__showClearDates: {
-    paddingRight: 30,
+    paddingRight: 30, // TODO: should be noflip wrapped and handled by an isRTL prop
   },
 
   DateRangePickerInput_arrow: {
@@ -337,9 +338,9 @@ export default withStyles(({ reactDates: { border, color, sizing } }) => ({
 
     cursor: 'pointer',
     padding: 10,
-    margin: '0 10px 0 5px',
+    margin: '0 10px 0 5px', // TODO: should be noflip wrapped and handled by an isRTL prop
     position: 'absolute',
-    right: 0,
+    right: 0, // TODO: should be noflip wrapped and handled by an isRTL prop
     top: '50%',
     transform: 'translateY(-50%)',
   },
@@ -387,7 +388,7 @@ export default withStyles(({ reactDates: { border, color, sizing } }) => ({
     display: 'inline-block',
     verticalAlign: 'middle',
     padding: 10,
-    margin: '0 5px 0 10px',
+    margin: '0 5px 0 10px', // TODO: should be noflip wrapped and handled by an isRTL prop
   },
 
   DateRangePickerInput_calendarIcon_svg: {
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 75403b6fe8..5a007b3120 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -10,6 +10,7 @@ import OutsideClickHandler from 'react-outside-click-handler';
 
 import { DayPickerPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
+import noflip from '../utils/noflip';
 
 import CalendarMonthGrid from './CalendarMonthGrid';
 import DayPickerNavigation from './DayPickerNavigation';
@@ -1148,7 +1149,7 @@ export default withStyles(({
   DayPicker: {
     background: color.background,
     position: 'relative',
-    textAlign: 'left',
+    textAlign: noflip('left'),
   },
 
   DayPicker__horizontal: {
@@ -1164,14 +1165,14 @@ export default withStyles(({
   },
 
   DayPicker__withBorder: {
-    boxShadow: '0 2px 6px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.07)',
+    boxShadow: noflip('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: '50%',
+    left: noflip('50%'),
     top: '50%',
   },
 
@@ -1198,7 +1199,7 @@ export default withStyles(({
   },
 
   DayPicker_weekHeaders__horizontal: {
-    marginLeft: spacing.dayPickerHorizontalPadding,
+    marginLeft: noflip(spacing.dayPickerHorizontalPadding),
   },
 
   DayPicker_weekHeader: {
@@ -1206,11 +1207,11 @@ export default withStyles(({
     position: 'absolute',
     top: 62,
     zIndex: zIndex + 2,
-    textAlign: 'left',
+    textAlign: noflip('left'),
   },
 
   DayPicker_weekHeader__vertical: {
-    left: '50%',
+    left: noflip('50%'),
   },
 
   DayPicker_weekHeader__verticalScrollable: {
@@ -1218,8 +1219,8 @@ export default withStyles(({
     display: 'table-row',
     borderBottom: `1px solid ${color.core.border}`,
     background: color.background,
-    marginLeft: 0,
-    left: 0,
+    marginLeft: noflip(0),
+    left: noflip(0),
     width: '100%',
     textAlign: 'center',
   },
@@ -1227,8 +1228,8 @@ export default withStyles(({
   DayPicker_weekHeader_ul: {
     listStyle: 'none',
     margin: '1px 0',
-    paddingLeft: 0,
-    paddingRight: 0,
+    paddingLeft: noflip(0),
+    paddingRight: noflip(0),
     fontSize: font.size,
   },
 
@@ -1257,8 +1258,8 @@ export default withStyles(({
     position: 'absolute',
     top: 0,
     bottom: 0,
-    right: 0,
-    left: 0,
+    right: noflip(0),
+    left: noflip(0),
     overflowY: 'scroll',
     ...(noScrollBarOnVerticalScrollable && {
       '-webkitOverflowScrolling': 'touch',
diff --git a/src/components/DayPickerKeyboardShortcuts.jsx b/src/components/DayPickerKeyboardShortcuts.jsx
index 3fdfa3d7c5..8f8775db6f 100644
--- a/src/components/DayPickerKeyboardShortcuts.jsx
+++ b/src/components/DayPickerKeyboardShortcuts.jsx
@@ -16,6 +16,7 @@ export const BOTTOM_RIGHT = 'bottom-right';
 const propTypes = forbidExtraProps({
   ...withStylesPropTypes,
   block: PropTypes.bool,
+  // TODO: rename button location to be direction-agnostic
   buttonLocation: PropTypes.oneOf([TOP_LEFT, TOP_RIGHT, BOTTOM_RIGHT]),
   showKeyboardShortcutsPanel: PropTypes.bool,
   openKeyboardShortcutsPanel: PropTypes.func,
@@ -368,6 +369,7 @@ export default withStyles(({ reactDates: { color, font, zIndex } }) => ({
     zIndex: zIndex + 2,
     padding: 22,
     margin: 33,
+    textAlign: 'left', // TODO: investigate use of text-align throughout the library
   },
 
   DayPickerKeyboardShortcuts_title: {
diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index aad24fed92..6c4ea1f8c4 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -5,6 +5,7 @@ import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 
 import { DayPickerNavigationPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
+import noflip from '../utils/noflip';
 
 import LeftArrow from './LeftArrow';
 import RightArrow from './RightArrow';
@@ -225,7 +226,7 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     width: '100%',
     height: 52,
     bottom: 0,
-    left: 0,
+    left: noflip(0),
   },
 
   DayPickerNavigation__verticalScrollableDefault: {
@@ -287,11 +288,11 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
   },
 
   DayPickerNavigation_leftButton__horizontalDefault: {
-    left: 22,
+    left: noflip(22),
   },
 
   DayPickerNavigation_rightButton__horizontalDefault: {
-    right: 22,
+    right: noflip(22),
   },
 
   DayPickerNavigation_button__vertical: {
@@ -300,7 +301,7 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
   DayPickerNavigation_button__verticalDefault: {
     padding: 5,
     background: color.background,
-    boxShadow: '0 0 5px 2px rgba(0, 0, 0, 0.1)',
+    boxShadow: noflip('0 0 5px 2px rgba(0, 0, 0, 0.1)'),
     position: 'relative',
     display: 'inline-block',
     textAlign: 'center',
@@ -312,7 +313,7 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
   },
 
   DayPickerNavigation_nextButton__verticalDefault: {
-    borderLeft: 0,
+    borderLeft: noflip(0),
   },
 
   DayPickerNavigation_nextButton__verticalScrollableDefault: {
diff --git a/src/components/KeyboardShortcutRow.jsx b/src/components/KeyboardShortcutRow.jsx
index 4cc8a2ac76..7e3d2401c4 100644
--- a/src/components/KeyboardShortcutRow.jsx
+++ b/src/components/KeyboardShortcutRow.jsx
@@ -67,12 +67,12 @@ export default withStyles(({ reactDates: { color } }) => ({
   KeyboardShortcutRow_keyContainer: {
     display: 'inline-block',
     whiteSpace: 'nowrap',
-    textAlign: 'right',
-    marginRight: 6,
+    textAlign: 'right', // is not handled by isRTL
+    marginRight: 6, // is not handled by isRTL
   },
 
   KeyboardShortcutRow_keyContainer__block: {
-    textAlign: 'left',
+    textAlign: 'left', // is not handled by isRTL
     display: 'inline',
   },
 
@@ -87,6 +87,6 @@ export default withStyles(({ reactDates: { color } }) => ({
   KeyboardShortcutRow_action: {
     display: 'inline',
     wordBreak: 'break-word',
-    marginLeft: 8,
+    marginLeft: 8, // is not handled by isRTL
   },
 }), { pureComponent: typeof React.PureComponent !== 'undefined' })(KeyboardShortcutRow);
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index 1121c57ccf..79dd576a43 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -15,6 +15,7 @@ import getDetachedContainerStyles from '../utils/getDetachedContainerStyles';
 import getInputHeight from '../utils/getInputHeight';
 import isInclusivelyAfterDay from '../utils/isInclusivelyAfterDay';
 import disableScroll from '../utils/disableScroll';
+import noflip from '../utils/noflip';
 
 import SingleDatePickerInputController from './SingleDatePickerInputController';
 import DayPickerSingleDateController from './DayPickerSingleDateController';
@@ -592,22 +593,22 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
   },
 
   SingleDatePicker_picker__rtl: {
-    direction: 'rtl',
+    direction: noflip('rtl'),
   },
 
   SingleDatePicker_picker__directionLeft: {
-    left: 0,
+    left: noflip(0),
   },
 
   SingleDatePicker_picker__directionRight: {
-    right: 0,
+    right: noflip(0),
   },
 
   SingleDatePicker_picker__portal: {
     backgroundColor: 'rgba(0, 0, 0, 0.3)',
     position: 'fixed',
     top: 0,
-    left: 0,
+    left: noflip(0),
     height: '100%',
     width: '100%',
   },
@@ -627,7 +628,7 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
 
     position: 'absolute',
     top: 0,
-    right: 0,
+    right: noflip(0),
     padding: 15,
     zIndex: zIndex + 2,
 
diff --git a/src/components/SingleDatePickerInput.jsx b/src/components/SingleDatePickerInput.jsx
index 8811574720..4c48654b95 100644
--- a/src/components/SingleDatePickerInput.jsx
+++ b/src/components/SingleDatePickerInput.jsx
@@ -5,6 +5,7 @@ import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 
 import { SingleDatePickerInputPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
+import noflip from '../utils/noflip';
 
 import DateInput from './DateInput';
 import IconPositionShape from '../shapes/IconPositionShape';
@@ -222,7 +223,7 @@ export default withStyles(({ reactDates: { border, color } }) => ({
   },
 
   SingleDatePickerInput__rtl: {
-    direction: 'rtl',
+    direction: noflip('rtl'),
   },
 
   SingleDatePickerInput__disabled: {
@@ -234,7 +235,7 @@ export default withStyles(({ reactDates: { border, color } }) => ({
   },
 
   SingleDatePickerInput__showClearDate: {
-    paddingRight: 30,
+    paddingRight: 30, // TODO: should be noflip wrapped and handled by an isRTL prop
   },
 
   SingleDatePickerInput_clearDate: {
@@ -247,9 +248,9 @@ export default withStyles(({ reactDates: { border, color } }) => ({
 
     cursor: 'pointer',
     padding: 10,
-    margin: '0 10px 0 5px',
+    margin: '0 10px 0 5px', // TODO: should be noflip wrapped and handled by an isRTL prop
     position: 'absolute',
-    right: 0,
+    right: 0, // TODO: should be noflip wrapped and handled by an isRTL prop
     top: '50%',
     transform: 'translateY(-50%)',
   },
@@ -297,7 +298,7 @@ export default withStyles(({ reactDates: { border, color } }) => ({
     display: 'inline-block',
     verticalAlign: 'middle',
     padding: 10,
-    margin: '0 5px 0 10px',
+    margin: '0 5px 0 10px', // TODO: should be noflip wrapped and handled by an isRTL prop
   },
 
   SingleDatePickerInput_calendarIcon_svg: {
diff --git a/src/utils/noflip.js b/src/utils/noflip.js
new file mode 100644
index 0000000000..ab0eff9b4e
--- /dev/null
+++ b/src/utils/noflip.js
@@ -0,0 +1,11 @@
+const NOFLIP = '/* @noflip */';
+
+// Appends a noflip comment to a style rule in order to prevent it from being automatically
+// flipped in RTL contexts. This should be used only in situations where the style must remain
+// unflipped regardless of direction context. See: https://github.com/kentcdodds/rtl-css-js#usage
+export default function noflip(value) {
+  if (typeof value === 'number') return `${value}px`;
+  if (typeof value === 'string') return `${value} ${NOFLIP}`;
+
+  throw new TypeError('noflip expects a string or a number');
+}
diff --git a/stories/DateRangePicker.js b/stories/DateRangePicker.js
index 3b15743fa5..732320f66a 100644
--- a/stories/DateRangePicker.js
+++ b/stories/DateRangePicker.js
@@ -3,8 +3,11 @@ import moment from 'moment';
 import momentJalaali from 'moment-jalaali';
 import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
+import DirectionProvider, { DIRECTIONS } from 'react-with-direction/dist/DirectionProvider';
+
 import {
   VERTICAL_ORIENTATION,
+  ANCHOR_RIGHT,
 } from '../src/constants';
 
 import DateRangePickerWrapper from '../examples/DateRangePickerWrapper';
@@ -97,6 +100,18 @@ storiesOf('DateRangePicker (DRP)', module)
       />
     );
   }))
+  .add('with DirectionProvider', withInfo()(() => (
+    <DirectionProvider direction={DIRECTIONS.RTL}>
+      <DateRangePickerWrapper
+        startDatePlaceholderText="تاریخ شروع"
+        endDatePlaceholderText="تاریخ پایان"
+        anchorDirection={ANCHOR_RIGHT}
+        showDefaultInputIcon
+        showClearDates
+        isRTL
+      />
+    </DirectionProvider>
+  )))
   .add('vertical with custom height', withInfo()(() => (
     <DateRangePickerWrapper
       orientation={VERTICAL_ORIENTATION}
diff --git a/stories/DayPicker.js b/stories/DayPicker.js
index c12bf8c6da..4a0c2acfae 100644
--- a/stories/DayPicker.js
+++ b/stories/DayPicker.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
+import DirectionProvider, { DIRECTIONS } from 'react-with-direction/dist/DirectionProvider';
 import DayPicker from '../src/components/DayPicker';
 
 import {
@@ -92,6 +93,30 @@ storiesOf('DayPicker', module)
       verticalHeight={568}
     />
   )))
+  .add('vertical with DirectionProvider', withInfo()(() => (
+    <DirectionProvider direction={DIRECTIONS.RTL}>
+      <DayPicker
+        numberOfMonths={2}
+        orientation={VERTICAL_ORIENTATION}
+        isRTL
+      />
+    </DirectionProvider>
+  )))
+  .add('vertically scrollable with DirectionProvider', withInfo()(() => (
+    <DirectionProvider direction={DIRECTIONS.RTL}>
+      <div
+        style={{
+          height: 568,
+          width: 320,
+        }}
+      >
+        <DayPicker
+          numberOfMonths={12}
+          orientation={VERTICAL_SCROLLABLE}
+        />
+      </div>
+    </DirectionProvider>
+  )))
   .add('with custom arrows', withInfo()(() => (
     <DayPicker
       navPrev={<TestPrevIcon />}
diff --git a/stories/SingleDatePicker.js b/stories/SingleDatePicker.js
index 2faa61af0e..4b417ce0bc 100644
--- a/stories/SingleDatePicker.js
+++ b/stories/SingleDatePicker.js
@@ -3,8 +3,11 @@ import moment from 'moment';
 import momentJalaali from 'moment-jalaali';
 import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
+import DirectionProvider, { DIRECTIONS } from 'react-with-direction/dist/DirectionProvider';
+
 import {
   VERTICAL_ORIENTATION,
+  ANCHOR_RIGHT,
 } from '../src/constants';
 
 import SingleDatePickerWrapper from '../examples/SingleDatePickerWrapper';
@@ -60,6 +63,17 @@ storiesOf('SingleDatePicker (SDP)', module)
       />
     );
   }))
+  .add('with DirectionProvider', withInfo()(() => (
+    <DirectionProvider direction={DIRECTIONS.RTL}>
+      <SingleDatePickerWrapper
+        placeholder="تاریخ شروع"
+        anchorDirection={ANCHOR_RIGHT}
+        showDefaultInputIcon
+        showClearDate
+        isRTL
+      />
+    </DirectionProvider>
+  )))
   .add('vertical with custom height', withInfo()(() => (
     <SingleDatePickerWrapper
       orientation={VERTICAL_ORIENTATION}

From c0ae8ae218c5a86816b54953697d301217407caf Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Sun, 9 Dec 2018 20:03:33 -0800
Subject: [PATCH 323/618] Version 18.3.0

---
 CHANGELOG.md | 6 ++++++
 package.json | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cf6d39f271..2a7a7c01ac 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,12 @@
 - []  ([#](https://github.com/airbnb/react-dates/pull/))
 -->
 
+## 18.3.0
+- [fix] Update the SDP and DRP to be compatible with `react-with-direction` ([#1482](https://github.com/airbnb/react-dates/pull/1482))
+- [new] Add `minDate` and `maxDate` props to block month navigation ([#1311](https://github.com/airbnb/react-dates/pull/1311))
+- [fix][a11y] Remove space/enter onKeyDown handling for open/close keyboard shortcuts panel ([#1464](https://github.com/airbnb/react-dates/pull/1464))
+- [fix][a11y] Fix lack of visible focus in Firefox and IE on "?" keyboard shortcuts button ([#1463](https://github.com/airbnb/react-dates/pull/1463))
+
 ## 18.2.2
 - [fix] Conditionally apply the `shouldComponentUpdate` method in the babel transform ([#1457](https://github.com/airbnb/react-dates/pull/1457))
 - [fix] Fix incorrect VO for selected check-in date  ([#1451](https://github.com/airbnb/react-dates/pull/1451))
diff --git a/package.json b/package.json
index c434c482e0..3347c017e4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "18.2.2",
+  "version": "18.3.0",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 5578649bf8e957d9a935d1dd0576e0e8d1a5ae31 Mon Sep 17 00:00:00 2001
From: Yaniv Zimet <yaniv.zimet@airbnb.com>
Date: Wed, 12 Dec 2018 15:17:10 -0800
Subject: [PATCH 324/618] [RTL] Fix the SDP and DRP noflip util function

In #1482 we added compatibility with react-with-direction. In the process we
created a helper utility `noflip` to make it so that react-with-direction
wouldn't interfere with the preexisting `isRTL` flag. This PR fixes the noflip
behavior for Numbers, and adds unit tests.
---
 src/utils/noflip.js       |  2 +-
 test/utils/noflip_spec.js | 19 +++++++++++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 test/utils/noflip_spec.js

diff --git a/src/utils/noflip.js b/src/utils/noflip.js
index ab0eff9b4e..3a8aeb299e 100644
--- a/src/utils/noflip.js
+++ b/src/utils/noflip.js
@@ -4,7 +4,7 @@ const NOFLIP = '/* @noflip */';
 // flipped in RTL contexts. This should be used only in situations where the style must remain
 // unflipped regardless of direction context. See: https://github.com/kentcdodds/rtl-css-js#usage
 export default function noflip(value) {
-  if (typeof value === 'number') return `${value}px`;
+  if (typeof value === 'number') return `${value}px ${NOFLIP}`;
   if (typeof value === 'string') return `${value} ${NOFLIP}`;
 
   throw new TypeError('noflip expects a string or a number');
diff --git a/test/utils/noflip_spec.js b/test/utils/noflip_spec.js
new file mode 100644
index 0000000000..7b1fe8b0cf
--- /dev/null
+++ b/test/utils/noflip_spec.js
@@ -0,0 +1,19 @@
+import { expect } from 'chai';
+
+import noflip from '../../src/utils/noflip';
+
+describe('noflip', () => {
+  it('appends a noflip comment to a number', () => {
+    expect(noflip(42)).to.equal('42px /* @noflip */');
+  });
+
+  it('appends a noflip comment to a string', () => {
+    expect(noflip('foo')).to.equal('foo /* @noflip */');
+  });
+
+  it('throws when value is unexpected type', () => {
+    expect(() => {
+      noflip([]);
+    }).to.throw(TypeError);
+  });
+});

From b002152c6229b2e9b0c5c2d80a15469015ada680 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Wed, 12 Dec 2018 15:49:57 -0800
Subject: [PATCH 325/618] Version 18.3.1

---
 CHANGELOG.md | 3 +++
 package.json | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2a7a7c01ac..837729fd74 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,9 @@
 - []  ([#](https://github.com/airbnb/react-dates/pull/))
 -->
 
+## 18.3.1
+- [fix][RTL] Fix the SDP and DRP noflip util function ([#1492](https://github.com/airbnb/react-dates/pull/1492))
+
 ## 18.3.0
 - [fix] Update the SDP and DRP to be compatible with `react-with-direction` ([#1482](https://github.com/airbnb/react-dates/pull/1482))
 - [new] Add `minDate` and `maxDate` props to block month navigation ([#1311](https://github.com/airbnb/react-dates/pull/1311))
diff --git a/package.json b/package.json
index 3347c017e4..314767ae09 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "18.3.0",
+  "version": "18.3.1",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From c28696799f5a35bd595d33d9d02a272a4d44e1ac Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Mon, 17 Dec 2018 21:01:27 -0800
Subject: [PATCH 326/618] Add bug report issue template

---
 .github/ISSUE_TEMPLATE/bug_report.md | 49 ++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 .github/ISSUE_TEMPLATE/bug_report.md

diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
new file mode 100644
index 0000000000..e3d5b963d0
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -0,0 +1,49 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**react-dates version**
+e.g. react-dates@18.3.1
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**Source code (including props configuration)**
+Steps to reproduce the behavior:
+```
+<DateRangePicker
+  startDate={this.state.startDate}
+  startDateId="your_unique_start_date_id"
+  endDate={this.state.endDate}
+  endDateId="your_unique_end_date_id"
+  onDatesChange={({ startDate, endDate }) => this.setState({ startDate, endDate })}
+  focusedInput={this.state.focusedInput}
+  onFocusChange={focusedInput => this.setState({ focusedInput })}
+/>
+```
+If you have custom methods that you are passing into a `react-dates` component, e.g. `onDatesChange`, `onFocusChange`, `renderMonth`, `isDayBlocked`, etc., please include the source for those as well.
+
+**Screenshots/Gifs**
+If applicable, add screenshots or gifs to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Is the issue reproducible in Storybook?**
+Please link to the relevant storybook example
+
+**Additional context**
+Add any other context about the problem here.

From bc0f29ad59367af6ae81d85be2e56ffd0e3a0bb7 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Mon, 17 Dec 2018 22:24:22 -0800
Subject: [PATCH 327/618] Add `openDirection` prop to README

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index 8d5be2583e..3b40fb2deb 100644
--- a/README.md
+++ b/README.md
@@ -157,6 +157,7 @@ regular: PropTypes.bool,
 renderMonthText: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'), // (month) => PropTypes.string,
 orientation: PropTypes.oneOf([HORIZONTAL_ORIENTATION, VERTICAL_ORIENTATION]),
 anchorDirection: PropTypes.oneOf([ANCHOR_LEFT, ANCHOR_RIGHT]),
+openDirection: PropTypes.oneOf([OPEN_DOWN, OPEN_UP]),
 horizontalMargin: PropTypes.number,
 withPortal: PropTypes.bool,
 withFullScreenPortal: PropTypes.bool,
@@ -238,6 +239,7 @@ regular: PropTypes.bool,
 renderMonthText: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'), // (month) => PropTypes.string,
 orientation: PropTypes.oneOf([HORIZONTAL_ORIENTATION, VERTICAL_ORIENTATION]),
 anchorDirection: PropTypes.oneOf([ANCHOR_LEFT, ANCHOR_RIGHT]),
+openDirection: PropTypes.oneOf([OPEN_DOWN, OPEN_UP]),
 horizontalMargin: PropTypes.number,
 withPortal: PropTypes.bool,
 withFullScreenPortal: PropTypes.bool,

From 79f21b691bee219475c50a5ac8a1f8eb7bddee48 Mon Sep 17 00:00:00 2001
From: Nicole Kinser <nicole.kinser@airbnb.com>
Date: Mon, 7 Jan 2019 13:44:10 -0800
Subject: [PATCH 328/618] Clarify VoiceOver text for dates selected as check-in
 and check-out

---
 src/defaultPhrases.js               | 12 ++++++++++++
 src/utils/getCalendarDaySettings.js | 10 +++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/defaultPhrases.js b/src/defaultPhrases.js
index f42dc9ffd5..0e6b93ce9b 100644
--- a/src/defaultPhrases.js
+++ b/src/defaultPhrases.js
@@ -30,6 +30,8 @@ const chooseAvailableEndDate = ({ date }) => `Choose ${date} as your check-out d
 const chooseAvailableDate = ({ date }) => date;
 const dateIsUnavailable = ({ date }) => `Not available. ${date}`;
 const dateIsSelected = ({ date }) => `Selected. ${date}`;
+const dateIsSelectedAsCheckin = ({ date }) => `Selected for check-in. ${date}`;
+const dateIsSelectedAsCheckout = ({ date }) => `Selected for check-out. ${date}`;
 
 export default {
   calendarLabel,
@@ -62,6 +64,8 @@ export default {
   chooseAvailableEndDate,
   dateIsUnavailable,
   dateIsSelected,
+  dateIsSelectedAsCheckin,
+  dateIsSelectedAsCheckout,
 };
 
 export const DateRangePickerPhrases = {
@@ -93,6 +97,8 @@ export const DateRangePickerPhrases = {
   chooseAvailableEndDate,
   dateIsUnavailable,
   dateIsSelected,
+  dateIsSelectedAsCheckin,
+  dateIsSelectedAsCheckout,
 };
 
 export const DateRangePickerInputPhrases = {
@@ -128,6 +134,8 @@ export const SingleDatePickerPhrases = {
   chooseAvailableDate,
   dateIsUnavailable,
   dateIsSelected,
+  dateIsSelectedAsCheckin,
+  dateIsSelectedAsCheckout,
 };
 
 export const SingleDatePickerInputPhrases = {
@@ -161,6 +169,8 @@ export const DayPickerPhrases = {
   chooseAvailableDate,
   dateIsUnavailable,
   dateIsSelected,
+  dateIsSelectedAsCheckin,
+  dateIsSelectedAsCheckout,
 };
 
 export const DayPickerKeyboardShortcutsPhrases = {
@@ -192,4 +202,6 @@ export const CalendarDayPhrases = {
   chooseAvailableDate,
   dateIsUnavailable,
   dateIsSelected,
+  dateIsSelectedAsCheckin,
+  dateIsSelectedAsCheckout,
 };
diff --git a/src/utils/getCalendarDaySettings.js b/src/utils/getCalendarDaySettings.js
index 043bb42b8e..23f40e7d51 100644
--- a/src/utils/getCalendarDaySettings.js
+++ b/src/utils/getCalendarDaySettings.js
@@ -6,6 +6,8 @@ export default function getCalendarDaySettings(day, ariaLabelFormat, daySize, mo
     chooseAvailableDate,
     dateIsUnavailable,
     dateIsSelected,
+    dateIsSelectedAsCheckin,
+    dateIsSelectedAsCheckout,
   } = phrases;
 
   const daySizeStyles = {
@@ -36,7 +38,13 @@ export default function getCalendarDaySettings(day, ariaLabelFormat, daySize, mo
 
   let ariaLabel = getPhrase(chooseAvailableDate, formattedDate);
   if (selected) {
-    ariaLabel = getPhrase(dateIsSelected, formattedDate);
+    if (modifiers.has('selected-start')) {
+      ariaLabel = getPhrase(dateIsSelectedAsCheckin, formattedDate);
+    } else if (modifiers.has('selected-end')) {
+      ariaLabel = getPhrase(dateIsSelectedAsCheckout, formattedDate);
+    } else {
+      ariaLabel = getPhrase(dateIsSelected, formattedDate);
+    }
   } else if (modifiers.has(BLOCKED_MODIFIER)) {
     ariaLabel = getPhrase(dateIsUnavailable, formattedDate);
   }

From 06c97a18e4fdf55f69e3a5fcea5b96087941bf9d Mon Sep 17 00:00:00 2001
From: Nicole Kinser <nicole.kinser@airbnb.com>
Date: Mon, 7 Jan 2019 15:34:08 -0800
Subject: [PATCH 329/618] fixed tests

---
 test/components/CalendarDay_spec.jsx          | 50 ++++++++++++----
 .../CustomizableCalendarDay_spec.jsx          | 50 ++++++++++++----
 test/utils/getCalendarDaySettings_spec.js     | 57 ++++++++++++-------
 3 files changed, 112 insertions(+), 45 deletions(-)

diff --git a/test/components/CalendarDay_spec.jsx b/test/components/CalendarDay_spec.jsx
index f1cac8268f..65896aa7a6 100644
--- a/test/components/CalendarDay_spec.jsx
+++ b/test/components/CalendarDay_spec.jsx
@@ -61,6 +61,8 @@ describe('CalendarDay', () => {
         phrases.chooseAvailableDate = sinon.stub().returns('chooseAvailableDate text');
         phrases.dateIsSelected = sinon.stub().returns('dateIsSelected text');
         phrases.dateIsUnavailable = sinon.stub().returns('dateIsUnavailable text');
+        phrases.dateIsSelectedAsCheckin = sinon.stub().returns('dateIsSelectedAsCheckin text');
+        phrases.dateIsSelectedAsCheckout = sinon.stub().returns('dateIsSelectedAsCheckout text');
       });
 
       it('is formatted with the chooseAvailableDate phrase function when day is available', () => {
@@ -78,21 +80,45 @@ describe('CalendarDay', () => {
       });
 
       it('is formatted with the dateIsSelected phrase function when day is selected', () => {
-        const selectedModifiers = new Set(['selected', 'selected-start', 'selected-end']);
+        const modifiers = new Set(['selected']);
 
-        selectedModifiers.forEach((selectedModifier) => {
-          const modifiers = new Set([selectedModifier]);
+        const wrapper = shallow((
+          <CalendarDay
+            modifiers={modifiers}
+            phrases={phrases}
+            day={day}
+          />
+        )).dive();
+
+        expect(wrapper.prop('aria-label')).to.equal('dateIsSelected text');
+      });
+
+      it('is formatted with the dateIsSelectedAsCheckin phrase function when day is selected for check in', () => {
+        const modifiers = new Set().add(BLOCKED_MODIFIER).add('selected-start');
+
+        const wrapper = shallow((
+          <CalendarDay
+            modifiers={modifiers}
+            phrases={phrases}
+            day={day}
+          />
+        )).dive();
+
+        expect(wrapper.prop('aria-label')).to.equal('dateIsSelectedAsCheckin text');
+      });
+
+      it('is formatted with the dateIsSelectedAsCheckout phrase function when day is selected for check out', () => {
+        const modifiers = new Set().add(BLOCKED_MODIFIER).add('selected-end');
 
-          const wrapper = shallow((
-            <CalendarDay
-              modifiers={modifiers}
-              phrases={phrases}
-              day={day}
-            />
-          )).dive();
+        const wrapper = shallow((
+          <CalendarDay
+            modifiers={modifiers}
+            phrases={phrases}
+            day={day}
+          />
+        )).dive();
 
-          expect(wrapper.prop('aria-label')).to.equal('dateIsSelected text');
-        });
+        expect(wrapper.prop('aria-label')).to.equal('dateIsSelectedAsCheckout text');
       });
 
       it('is formatted with the dateIsUnavailable phrase function when day is not available', () => {
diff --git a/test/components/CustomizableCalendarDay_spec.jsx b/test/components/CustomizableCalendarDay_spec.jsx
index 9534defead..410993ef3c 100644
--- a/test/components/CustomizableCalendarDay_spec.jsx
+++ b/test/components/CustomizableCalendarDay_spec.jsx
@@ -62,6 +62,8 @@ describe('CustomizableCalendarDay', () => {
         phrases.chooseAvailableDate = sinon.stub().returns('chooseAvailableDate text');
         phrases.dateIsSelected = sinon.stub().returns('dateIsSelected text');
         phrases.dateIsUnavailable = sinon.stub().returns('dateIsUnavailable text');
+        phrases.dateIsSelectedAsCheckin = sinon.stub().returns('dateIsSelectedAsCheckin text');
+        phrases.dateIsSelectedAsCheckout = sinon.stub().returns('dateIsSelectedAsCheckout text');
       });
 
       it('is formatted with the chooseAvailableDate phrase function when day is available', () => {
@@ -79,21 +81,45 @@ describe('CustomizableCalendarDay', () => {
       });
 
       it('is formatted with the dateIsSelected phrase function when day is selected', () => {
-        const selectedModifiers = new Set(['selected', 'selected-start', 'selected-end']);
+        const modifiers = new Set(['selected']);
 
-        selectedModifiers.forEach((selectedModifier) => {
-          const modifiers = new Set([selectedModifier]);
+        const wrapper = shallow((
+          <CustomizableCalendarDay
+            modifiers={modifiers}
+            phrases={phrases}
+            day={day}
+          />
+        )).dive();
+
+        expect(wrapper.prop('aria-label')).to.equal('dateIsSelected text');
+      });
+
+      it('is formatted with the dateIsSelectedAsCheckin phrase function when day is selected for check in', () => {
+        const modifiers = new Set().add(BLOCKED_MODIFIER).add('selected-start');
+
+        const wrapper = shallow((
+          <CustomizableCalendarDay
+            modifiers={modifiers}
+            phrases={phrases}
+            day={day}
+          />
+        )).dive();
+
+        expect(wrapper.prop('aria-label')).to.equal('dateIsSelectedAsCheckin text');
+      });
+
+      it('is formatted with the dateIsSelectedAsCheckout phrase function when day is selected for check out', () => {
+        const modifiers = new Set().add(BLOCKED_MODIFIER).add('selected-end');
 
-          const wrapper = shallow((
-            <CustomizableCalendarDay
-              modifiers={modifiers}
-              phrases={phrases}
-              day={day}
-            />
-          )).dive();
+        const wrapper = shallow((
+          <CustomizableCalendarDay
+            modifiers={modifiers}
+            phrases={phrases}
+            day={day}
+          />
+        )).dive();
 
-          expect(wrapper.prop('aria-label')).to.equal('dateIsSelected text');
-        });
+        expect(wrapper.prop('aria-label')).to.equal('dateIsSelectedAsCheckout text');
       });
 
       it('is formatted with the dateIsUnavailable phrase function when day is not available', () => {
diff --git a/test/utils/getCalendarDaySettings_spec.js b/test/utils/getCalendarDaySettings_spec.js
index a1b0a0556b..b527f2f4da 100644
--- a/test/utils/getCalendarDaySettings_spec.js
+++ b/test/utils/getCalendarDaySettings_spec.js
@@ -14,6 +14,8 @@ const testPhrases = {
   chooseAvailableDate: sinon.stub(),
   dateIsSelected: sinon.stub(),
   dateIsUnavailable: sinon.stub(),
+  dateIsSelectedAsCheckin: sinon.stub(),
+  dateIsSelectedAsCheckout: sinon.stub(),
 };
 
 describe('getCalendarDaySettings', () => {
@@ -182,6 +184,8 @@ describe('getCalendarDaySettings', () => {
       phrases.chooseAvailableDate = sinon.stub().returns('chooseAvailableDate text');
       phrases.dateIsSelected = sinon.stub().returns('dateIsSelected text');
       phrases.dateIsUnavailable = sinon.stub().returns('dateIsUnavailable text');
+      phrases.dateIsSelectedAsCheckin = sinon.stub().returns('dateIsSelectedAsCheckin text');
+      phrases.dateIsSelectedAsCheckout = sinon.stub().returns('dateIsSelectedAsCheckout text');
     });
 
     afterEach(() => {
@@ -204,26 +208,37 @@ describe('getCalendarDaySettings', () => {
     });
 
     it('is formatted with the dateIsSelected phrase function when day is selected', () => {
-      const selectedModifiers = new Set(['selected', 'selected-start', 'selected-end']);
+      const modifiers = new Set(['selected']);
 
-      selectedModifiers.forEach((selectedModifier) => {
-        const modifiers = new Set().add(selectedModifier);
+      const { ariaLabel } = getCalendarDaySettings(
+        testDay,
+        testAriaLabelFormat,
+        testDaySize,
+        modifiers,
+        phrases,
+      );
 
-        const { ariaLabel } = getCalendarDaySettings(
-          testDay,
-          testAriaLabelFormat,
-          testDaySize,
-          modifiers,
-          phrases,
-        );
+      expect(phrases.dateIsSelected.calledWith(expectedFormattedDay)).to.equal(true);
+      expect(ariaLabel).to.equal('dateIsSelected text');
+    });
 
-        expect(phrases.dateIsSelected.calledWith(expectedFormattedDay)).to.equal(true);
-        expect(ariaLabel).to.equal('dateIsSelected text');
-      });
+    it('is formatted with the dateIsSelectedAsCheckin phrase function when day is selected as checkin', () => {
+      const modifiers = new Set().add(BLOCKED_MODIFIER).add('selected-start');
+
+      const { ariaLabel } = getCalendarDaySettings(
+        testDay,
+        testAriaLabelFormat,
+        testDaySize,
+        modifiers,
+        phrases,
+      );
+
+      expect(phrases.dateIsSelectedAsCheckin.calledWith(expectedFormattedDay)).to.equal(true);
+      expect(ariaLabel).to.equal('dateIsSelectedAsCheckin text');
     });
 
-    it('is formatted with the dateIsUnavailable phrase function when day is not available', () => {
-      const modifiers = new Set().add(BLOCKED_MODIFIER);
+    it('is formatted with the dateIsSelectedAsCheckout phrase function when day is selected as checkout', () => {
+      const modifiers = new Set().add(BLOCKED_MODIFIER).add('selected-end');
 
       const { ariaLabel } = getCalendarDaySettings(
         testDay,
@@ -233,12 +248,12 @@ describe('getCalendarDaySettings', () => {
         phrases,
       );
 
-      expect(phrases.dateIsUnavailable.calledWith(expectedFormattedDay)).to.equal(true);
-      expect(ariaLabel).to.equal('dateIsUnavailable text');
+      expect(phrases.dateIsSelectedAsCheckout.calledWith(expectedFormattedDay)).to.equal(true);
+      expect(ariaLabel).to.equal('dateIsSelectedAsCheckout text');
     });
 
-    it('is formatted with the dateIsSelected phrase function when day is selected for check in', () => {
-      const modifiers = new Set().add(BLOCKED_MODIFIER).add('selected-start');
+    it('is formatted with the dateIsUnavailable phrase function when day is not available', () => {
+      const modifiers = new Set().add(BLOCKED_MODIFIER);
 
       const { ariaLabel } = getCalendarDaySettings(
         testDay,
@@ -248,8 +263,8 @@ describe('getCalendarDaySettings', () => {
         phrases,
       );
 
-      expect(phrases.dateIsSelected.calledWith(expectedFormattedDay)).to.equal(true);
-      expect(ariaLabel).to.equal('dateIsSelected text');
+      expect(phrases.dateIsUnavailable.calledWith(expectedFormattedDay)).to.equal(true);
+      expect(ariaLabel).to.equal('dateIsUnavailable text');
     });
   });
 });

From e9197f06fd583b3b7c9f96a3d25c263cddbac1e5 Mon Sep 17 00:00:00 2001
From: Nicole Kinser <nicole.kinser@airbnb.com>
Date: Thu, 10 Jan 2019 14:37:55 -0800
Subject: [PATCH 330/618] addressed comments

---
 src/defaultPhrases.js                         | 22 +++++-----
 src/utils/getCalendarDaySettings.js           | 12 +++---
 test/components/CalendarDay_spec.jsx          | 12 +++---
 .../CustomizableCalendarDay_spec.jsx          | 12 +++---
 test/utils/getCalendarDaySettings_spec.js     | 40 ++++++++++++++-----
 5 files changed, 58 insertions(+), 40 deletions(-)

diff --git a/src/defaultPhrases.js b/src/defaultPhrases.js
index 0e6b93ce9b..d431ed7014 100644
--- a/src/defaultPhrases.js
+++ b/src/defaultPhrases.js
@@ -30,8 +30,8 @@ const chooseAvailableEndDate = ({ date }) => `Choose ${date} as your check-out d
 const chooseAvailableDate = ({ date }) => date;
 const dateIsUnavailable = ({ date }) => `Not available. ${date}`;
 const dateIsSelected = ({ date }) => `Selected. ${date}`;
-const dateIsSelectedAsCheckin = ({ date }) => `Selected for check-in. ${date}`;
-const dateIsSelectedAsCheckout = ({ date }) => `Selected for check-out. ${date}`;
+const dateIsSelectedAsStartDate = ({ date }) => `Selected as start date. ${date}`;
+const dateIsSelectedAsEndDate = ({ date }) => `Selected as end date. ${date}`;
 
 export default {
   calendarLabel,
@@ -64,8 +64,8 @@ export default {
   chooseAvailableEndDate,
   dateIsUnavailable,
   dateIsSelected,
-  dateIsSelectedAsCheckin,
-  dateIsSelectedAsCheckout,
+  dateIsSelectedAsStartDate,
+  dateIsSelectedAsEndDate,
 };
 
 export const DateRangePickerPhrases = {
@@ -97,8 +97,8 @@ export const DateRangePickerPhrases = {
   chooseAvailableEndDate,
   dateIsUnavailable,
   dateIsSelected,
-  dateIsSelectedAsCheckin,
-  dateIsSelectedAsCheckout,
+  dateIsSelectedAsStartDate,
+  dateIsSelectedAsEndDate,
 };
 
 export const DateRangePickerInputPhrases = {
@@ -134,8 +134,6 @@ export const SingleDatePickerPhrases = {
   chooseAvailableDate,
   dateIsUnavailable,
   dateIsSelected,
-  dateIsSelectedAsCheckin,
-  dateIsSelectedAsCheckout,
 };
 
 export const SingleDatePickerInputPhrases = {
@@ -169,8 +167,8 @@ export const DayPickerPhrases = {
   chooseAvailableDate,
   dateIsUnavailable,
   dateIsSelected,
-  dateIsSelectedAsCheckin,
-  dateIsSelectedAsCheckout,
+  dateIsSelectedAsStartDate,
+  dateIsSelectedAsEndDate,
 };
 
 export const DayPickerKeyboardShortcutsPhrases = {
@@ -202,6 +200,6 @@ export const CalendarDayPhrases = {
   chooseAvailableDate,
   dateIsUnavailable,
   dateIsSelected,
-  dateIsSelectedAsCheckin,
-  dateIsSelectedAsCheckout,
+  dateIsSelectedAsStartDate,
+  dateIsSelectedAsEndDate,
 };
diff --git a/src/utils/getCalendarDaySettings.js b/src/utils/getCalendarDaySettings.js
index 23f40e7d51..71458fd88b 100644
--- a/src/utils/getCalendarDaySettings.js
+++ b/src/utils/getCalendarDaySettings.js
@@ -6,8 +6,8 @@ export default function getCalendarDaySettings(day, ariaLabelFormat, daySize, mo
     chooseAvailableDate,
     dateIsUnavailable,
     dateIsSelected,
-    dateIsSelectedAsCheckin,
-    dateIsSelectedAsCheckout,
+    dateIsSelectedAsStartDate,
+    dateIsSelectedAsEndDate,
   } = phrases;
 
   const daySizeStyles = {
@@ -38,10 +38,10 @@ export default function getCalendarDaySettings(day, ariaLabelFormat, daySize, mo
 
   let ariaLabel = getPhrase(chooseAvailableDate, formattedDate);
   if (selected) {
-    if (modifiers.has('selected-start')) {
-      ariaLabel = getPhrase(dateIsSelectedAsCheckin, formattedDate);
-    } else if (modifiers.has('selected-end')) {
-      ariaLabel = getPhrase(dateIsSelectedAsCheckout, formattedDate);
+    if (modifiers.has('selected-start') && dateIsSelectedAsStartDate) {
+      ariaLabel = getPhrase(dateIsSelectedAsStartDate, formattedDate);
+    } else if (modifiers.has('selected-end') && dateIsSelectedAsEndDate) {
+      ariaLabel = getPhrase(dateIsSelectedAsEndDate, formattedDate);
     } else {
       ariaLabel = getPhrase(dateIsSelected, formattedDate);
     }
diff --git a/test/components/CalendarDay_spec.jsx b/test/components/CalendarDay_spec.jsx
index 65896aa7a6..0965bc542c 100644
--- a/test/components/CalendarDay_spec.jsx
+++ b/test/components/CalendarDay_spec.jsx
@@ -61,8 +61,8 @@ describe('CalendarDay', () => {
         phrases.chooseAvailableDate = sinon.stub().returns('chooseAvailableDate text');
         phrases.dateIsSelected = sinon.stub().returns('dateIsSelected text');
         phrases.dateIsUnavailable = sinon.stub().returns('dateIsUnavailable text');
-        phrases.dateIsSelectedAsCheckin = sinon.stub().returns('dateIsSelectedAsCheckin text');
-        phrases.dateIsSelectedAsCheckout = sinon.stub().returns('dateIsSelectedAsCheckout text');
+        phrases.dateIsSelectedAsStartDate = sinon.stub().returns('dateIsSelectedAsStartDate text');
+        phrases.dateIsSelectedAsEndDate = sinon.stub().returns('dateIsSelectedAsEndDate text');
       });
 
       it('is formatted with the chooseAvailableDate phrase function when day is available', () => {
@@ -93,7 +93,7 @@ describe('CalendarDay', () => {
         expect(wrapper.prop('aria-label')).to.equal('dateIsSelected text');
       });
 
-      it('is formatted with the dateIsSelectedAsCheckin phrase function when day is selected for check in', () => {
+      it('is formatted with the dateIsSelectedAsStartDate phrase function when day is selected as the start date', () => {
         const modifiers = new Set().add(BLOCKED_MODIFIER).add('selected-start');
 
         const wrapper = shallow((
@@ -104,10 +104,10 @@ describe('CalendarDay', () => {
           />
         )).dive();
 
-        expect(wrapper.prop('aria-label')).to.equal('dateIsSelectedAsCheckin text');
+        expect(wrapper.prop('aria-label')).to.equal('dateIsSelectedAsStartDate text');
       });
 
-      it('is formatted with the dateIsSelectedAsCheckout phrase function when day is selected for check out', () => {
+      it('is formatted with the dateIsSelectedAsEndDate phrase function when day is selected as the end date', () => {
         const modifiers = new Set().add(BLOCKED_MODIFIER).add('selected-end');
 
         const wrapper = shallow((
@@ -118,7 +118,7 @@ describe('CalendarDay', () => {
           />
         )).dive();
 
-        expect(wrapper.prop('aria-label')).to.equal('dateIsSelectedAsCheckout text');
+        expect(wrapper.prop('aria-label')).to.equal('dateIsSelectedAsEndDate text');
       });
 
       it('is formatted with the dateIsUnavailable phrase function when day is not available', () => {
diff --git a/test/components/CustomizableCalendarDay_spec.jsx b/test/components/CustomizableCalendarDay_spec.jsx
index 410993ef3c..b75c4c759b 100644
--- a/test/components/CustomizableCalendarDay_spec.jsx
+++ b/test/components/CustomizableCalendarDay_spec.jsx
@@ -62,8 +62,8 @@ describe('CustomizableCalendarDay', () => {
         phrases.chooseAvailableDate = sinon.stub().returns('chooseAvailableDate text');
         phrases.dateIsSelected = sinon.stub().returns('dateIsSelected text');
         phrases.dateIsUnavailable = sinon.stub().returns('dateIsUnavailable text');
-        phrases.dateIsSelectedAsCheckin = sinon.stub().returns('dateIsSelectedAsCheckin text');
-        phrases.dateIsSelectedAsCheckout = sinon.stub().returns('dateIsSelectedAsCheckout text');
+        phrases.dateIsSelectedAsStartDate = sinon.stub().returns('dateIsSelectedAsStartDate text');
+        phrases.dateIsSelectedAsEndDate = sinon.stub().returns('dateIsSelectedAsEndDate text');
       });
 
       it('is formatted with the chooseAvailableDate phrase function when day is available', () => {
@@ -94,7 +94,7 @@ describe('CustomizableCalendarDay', () => {
         expect(wrapper.prop('aria-label')).to.equal('dateIsSelected text');
       });
 
-      it('is formatted with the dateIsSelectedAsCheckin phrase function when day is selected for check in', () => {
+      it('is formatted with the dateIsSelectedAsStartDate phrase function when day is selected as the start date', () => {
         const modifiers = new Set().add(BLOCKED_MODIFIER).add('selected-start');
 
         const wrapper = shallow((
@@ -105,10 +105,10 @@ describe('CustomizableCalendarDay', () => {
           />
         )).dive();
 
-        expect(wrapper.prop('aria-label')).to.equal('dateIsSelectedAsCheckin text');
+        expect(wrapper.prop('aria-label')).to.equal('dateIsSelectedAsStartDate text');
       });
 
-      it('is formatted with the dateIsSelectedAsCheckout phrase function when day is selected for check out', () => {
+      it('is formatted with the dateIsSelectedAsEndDate phrase function when day is selected as the end date', () => {
         const modifiers = new Set().add(BLOCKED_MODIFIER).add('selected-end');
 
         const wrapper = shallow((
@@ -119,7 +119,7 @@ describe('CustomizableCalendarDay', () => {
           />
         )).dive();
 
-        expect(wrapper.prop('aria-label')).to.equal('dateIsSelectedAsCheckout text');
+        expect(wrapper.prop('aria-label')).to.equal('dateIsSelectedAsEndDate text');
       });
 
       it('is formatted with the dateIsUnavailable phrase function when day is not available', () => {
diff --git a/test/utils/getCalendarDaySettings_spec.js b/test/utils/getCalendarDaySettings_spec.js
index b527f2f4da..63d6f752bb 100644
--- a/test/utils/getCalendarDaySettings_spec.js
+++ b/test/utils/getCalendarDaySettings_spec.js
@@ -14,8 +14,8 @@ const testPhrases = {
   chooseAvailableDate: sinon.stub(),
   dateIsSelected: sinon.stub(),
   dateIsUnavailable: sinon.stub(),
-  dateIsSelectedAsCheckin: sinon.stub(),
-  dateIsSelectedAsCheckout: sinon.stub(),
+  dateIsSelectedAsStartDate: sinon.stub(),
+  dateIsSelectedAsEndDate: sinon.stub(),
 };
 
 describe('getCalendarDaySettings', () => {
@@ -184,8 +184,8 @@ describe('getCalendarDaySettings', () => {
       phrases.chooseAvailableDate = sinon.stub().returns('chooseAvailableDate text');
       phrases.dateIsSelected = sinon.stub().returns('dateIsSelected text');
       phrases.dateIsUnavailable = sinon.stub().returns('dateIsUnavailable text');
-      phrases.dateIsSelectedAsCheckin = sinon.stub().returns('dateIsSelectedAsCheckin text');
-      phrases.dateIsSelectedAsCheckout = sinon.stub().returns('dateIsSelectedAsCheckout text');
+      phrases.dateIsSelectedAsStartDate = sinon.stub().returns('dateIsSelectedAsStartDate text');
+      phrases.dateIsSelectedAsEndDate = sinon.stub().returns('dateIsSelectedAsEndDate text');
     });
 
     afterEach(() => {
@@ -222,7 +222,7 @@ describe('getCalendarDaySettings', () => {
       expect(ariaLabel).to.equal('dateIsSelected text');
     });
 
-    it('is formatted with the dateIsSelectedAsCheckin phrase function when day is selected as checkin', () => {
+    it('is formatted with the dateIsSelectedAsStartDate phrase function when day is selected as the start date', () => {
       const modifiers = new Set().add(BLOCKED_MODIFIER).add('selected-start');
 
       const { ariaLabel } = getCalendarDaySettings(
@@ -233,11 +233,11 @@ describe('getCalendarDaySettings', () => {
         phrases,
       );
 
-      expect(phrases.dateIsSelectedAsCheckin.calledWith(expectedFormattedDay)).to.equal(true);
-      expect(ariaLabel).to.equal('dateIsSelectedAsCheckin text');
+      expect(phrases.dateIsSelectedAsStartDate.calledWith(expectedFormattedDay)).to.equal(true);
+      expect(ariaLabel).to.equal('dateIsSelectedAsStartDate text');
     });
 
-    it('is formatted with the dateIsSelectedAsCheckout phrase function when day is selected as checkout', () => {
+    it('is formatted with the dateIsSelectedAsEndDate phrase function when day is selected as the end date', () => {
       const modifiers = new Set().add(BLOCKED_MODIFIER).add('selected-end');
 
       const { ariaLabel } = getCalendarDaySettings(
@@ -248,8 +248,28 @@ describe('getCalendarDaySettings', () => {
         phrases,
       );
 
-      expect(phrases.dateIsSelectedAsCheckout.calledWith(expectedFormattedDay)).to.equal(true);
-      expect(ariaLabel).to.equal('dateIsSelectedAsCheckout text');
+      expect(phrases.dateIsSelectedAsEndDate.calledWith(expectedFormattedDay)).to.equal(true);
+      expect(ariaLabel).to.equal('dateIsSelectedAsEndDate text');
+    });
+
+    it('is formatted with the dateIsSelected phrase function when day is selected as the start or end date and no selected start or end date phrase function is specified', () => {
+      phrases.dateIsSelectedAsStartDate = null;
+      phrases.dateIsSelectedAsEndDate = null;
+      const selectedModifiers = new Set(['selected-end', 'selected-start']);
+
+      selectedModifiers.forEach((selectedModifier) => {
+        const modifiers = new Set([selectedModifier]);
+        const { ariaLabel } = getCalendarDaySettings(
+          testDay,
+          testAriaLabelFormat,
+          testDaySize,
+          modifiers,
+          phrases,
+        );
+
+        expect(phrases.dateIsSelected.calledWith(expectedFormattedDay)).to.equal(true);
+        expect(ariaLabel).to.equal('dateIsSelected text');
+      });
     });
 
     it('is formatted with the dateIsUnavailable phrase function when day is not available', () => {

From d572bea9029739089bd200026be3aad7684a8b02 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Tue, 15 Jan 2019 08:55:35 -0800
Subject: [PATCH 331/618] Version 18.4.0

---
 CHANGELOG.md | 3 +++
 package.json | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 837729fd74..10adc22d12 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,9 @@
 - []  ([#](https://github.com/airbnb/react-dates/pull/))
 -->
 
+## 18.4.0
+- [new] Clarify VoiceOver text for dates selected as start-date and end-date ([#1501](https://github.com/airbnb/react-dates/pull/1501))
+
 ## 18.3.1
 - [fix][RTL] Fix the SDP and DRP noflip util function ([#1492](https://github.com/airbnb/react-dates/pull/1492))
 
diff --git a/package.json b/package.json
index 314767ae09..c45640d683 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "18.3.1",
+  "version": "18.4.0",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From bd5a9de923cc53bba47141d2b6700ca4fdaf8b51 Mon Sep 17 00:00:00 2001
From: Tae Kim <taekimjr@gmail.com>
Date: Wed, 21 Nov 2018 15:39:48 -0800
Subject: [PATCH 332/618] Add children to DateRangePicker

---
 .gitignore                                    |  1 +
 src/components/DateRangePicker.jsx            | 21 +++++++++++--------
 src/components/DateRangePickerInput.jsx       |  7 +++++++
 .../DateRangePickerInputController.jsx        |  6 ++++++
 .../DateRangePickerInputController_spec.jsx   | 12 +++++++++++
 test/components/DateRangePickerInput_spec.jsx |  9 ++++++++
 6 files changed, 47 insertions(+), 9 deletions(-)

diff --git a/.gitignore b/.gitignore
index 6a6c6fb3b6..645dfa1028 100644
--- a/.gitignore
+++ b/.gitignore
@@ -48,3 +48,4 @@ package-lock.json
 
 css/styles.css
 
+.cache
\ No newline at end of file
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index d7fbc63f0d..b578155248 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -573,7 +573,9 @@ class DateRangePicker extends React.PureComponent {
         small={small}
         regular={regular}
         verticalSpacing={verticalSpacing}
-      />
+      >
+        {this.maybeRenderDayPickerWithPortal()}
+      </DateRangePickerInputController>
     );
 
     return (
@@ -584,14 +586,15 @@ class DateRangePicker extends React.PureComponent {
           block && styles.DateRangePicker__block,
         )}
       >
-        {enableOutsideClick && (
-          <OutsideClickHandler onOutsideClick={this.onOutsideClick}>
-            {input}
-            {this.maybeRenderDayPickerWithPortal()}
-          </OutsideClickHandler>
-        )}
-        {!enableOutsideClick && input}
-        {!enableOutsideClick && this.maybeRenderDayPickerWithPortal()}
+        {
+          enableOutsideClick
+            ? (
+              <OutsideClickHandler onOutsideClick={this.onOutsideClick}>
+                {input}
+              </OutsideClickHandler>
+            )
+            : input
+        }
       </div>
     );
   }
diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index 4d5e29def4..6a627a612f 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -27,6 +27,9 @@ import {
 
 const propTypes = forbidExtraProps({
   ...withStylesPropTypes,
+
+  children: PropTypes.node,
+
   startDateId: PropTypes.string,
   startDatePlaceholderText: PropTypes.string,
   screenReaderMessage: PropTypes.string,
@@ -76,6 +79,7 @@ const propTypes = forbidExtraProps({
 });
 
 const defaultProps = {
+  children: null,
   startDateId: START_DATE,
   endDateId: END_DATE,
   startDatePlaceholderText: 'Start Date',
@@ -123,6 +127,7 @@ const defaultProps = {
 };
 
 function DateRangePickerInput({
+  children,
   startDate,
   startDateId,
   startDatePlaceholderText,
@@ -238,6 +243,8 @@ function DateRangePickerInput({
         </div>
       }
 
+      {children}
+
       <DateInput
         id={endDateId}
         placeholder={endDatePlaceholderText}
diff --git a/src/components/DateRangePickerInputController.jsx b/src/components/DateRangePickerInputController.jsx
index 18b8de7f97..c627752f4b 100644
--- a/src/components/DateRangePickerInputController.jsx
+++ b/src/components/DateRangePickerInputController.jsx
@@ -28,6 +28,8 @@ import {
 } from '../constants';
 
 const propTypes = forbidExtraProps({
+  children: PropTypes.node,
+
   startDate: momentPropTypes.momentObj,
   startDateId: PropTypes.string,
   startDatePlaceholderText: PropTypes.string,
@@ -80,6 +82,8 @@ const propTypes = forbidExtraProps({
 });
 
 const defaultProps = {
+  children: null,
+
   startDate: null,
   startDateId: START_DATE,
   startDatePlaceholderText: 'Start Date',
@@ -260,6 +264,7 @@ export default class DateRangePickerInputController extends React.PureComponent
 
   render() {
     const {
+      children,
       startDate,
       startDateId,
       startDatePlaceholderText,
@@ -297,6 +302,7 @@ export default class DateRangePickerInputController extends React.PureComponent
 
     return (
       <DateRangePickerInput
+        children={children}
         startDate={startDateString}
         startDateId={startDateId}
         startDatePlaceholderText={startDatePlaceholderText}
diff --git a/test/components/DateRangePickerInputController_spec.jsx b/test/components/DateRangePickerInputController_spec.jsx
index 0364b0f6d8..09bb1f84c1 100644
--- a/test/components/DateRangePickerInputController_spec.jsx
+++ b/test/components/DateRangePickerInputController_spec.jsx
@@ -25,6 +25,18 @@ describe('DateRangePickerInputController', () => {
       const wrapper = shallow(<DateRangePickerInputController />);
       expect(wrapper.find(DateRangePickerInput)).to.have.lengthOf(1);
     });
+
+    it('should pass children to DateRangePickerInput when provided', () => {
+      const Child = () => <div>CHILD</div>;
+
+      const wrapper = shallow((
+        <DateRangePickerInputController>
+          <Child />
+        </DateRangePickerInputController>
+      ));
+      expect(wrapper.find(DateRangePickerInput)).to.have.property('children');
+      expect(wrapper.find(Child)).to.have.lengthOf(1);
+    });
   });
 
   describe('#clearDates', () => {
diff --git a/test/components/DateRangePickerInput_spec.jsx b/test/components/DateRangePickerInput_spec.jsx
index 1e8ca505b6..63d71aba48 100644
--- a/test/components/DateRangePickerInput_spec.jsx
+++ b/test/components/DateRangePickerInput_spec.jsx
@@ -49,6 +49,15 @@ describe('DateRangePickerInput', () => {
         });
       });
     });
+
+    describe('props.children', () => {
+      it('should render children when provided', () => {
+        const Child = () => <div>CHILD</div>;
+
+        const wrapper = shallow(<DateRangePickerInput><Child /></DateRangePickerInput>).dive();
+        expect(wrapper.find('Child')).to.have.lengthOf(1);
+      });
+    });
   });
 
   describe('props.customArrowIcon', () => {

From c2eca3ae4ab6a46b280f39b1472f66521edee60e Mon Sep 17 00:00:00 2001
From: Tae Kim <taekimjr@gmail.com>
Date: Mon, 26 Nov 2018 12:06:58 -0800
Subject: [PATCH 333/618] Fix lint error

---
 src/components/DateRangePickerInputController.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/DateRangePickerInputController.jsx b/src/components/DateRangePickerInputController.jsx
index c627752f4b..3e0a216a8b 100644
--- a/src/components/DateRangePickerInputController.jsx
+++ b/src/components/DateRangePickerInputController.jsx
@@ -302,7 +302,6 @@ export default class DateRangePickerInputController extends React.PureComponent
 
     return (
       <DateRangePickerInput
-        children={children}
         startDate={startDateString}
         startDateId={startDateId}
         startDatePlaceholderText={startDatePlaceholderText}
@@ -340,7 +339,9 @@ export default class DateRangePickerInputController extends React.PureComponent
         small={small}
         regular={regular}
         verticalSpacing={verticalSpacing}
-      />
+      >
+        {children}
+      </DateRangePickerInput>
     );
   }
 }

From 54e063082da8a659aefd030515a28d3947c7e094 Mon Sep 17 00:00:00 2001
From: Tae Kim <taekimjr@gmail.com>
Date: Mon, 26 Nov 2018 13:17:55 -0800
Subject: [PATCH 334/618] Single Date Picker focus fix

---
 src/components/SingleDatePicker.jsx           | 36 ++++++++++++++-----
 src/components/SingleDatePickerInput.jsx      |  5 +++
 .../SingleDatePickerInputController.jsx       | 10 ++++--
 .../SingleDatePickerInputController_spec.jsx  | 12 +++++++
 .../components/SingleDatePickerInput_spec.jsx | 13 +++++++
 test/components/SingleDatePicker_spec.jsx     | 32 +++++++++++++++++
 6 files changed, 97 insertions(+), 11 deletions(-)

diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index 79dd576a43..f1d477da24 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -128,6 +128,7 @@ class SingleDatePicker extends React.PureComponent {
       showKeyboardShortcuts: false,
     };
 
+    this.onFocusOut = this.onFocusOut.bind(this);
     this.onOutsideClick = this.onOutsideClick.bind(this);
     this.onInputFocus = this.onInputFocus.bind(this);
     this.onDayPickerFocus = this.onDayPickerFocus.bind(this);
@@ -161,6 +162,11 @@ class SingleDatePicker extends React.PureComponent {
     }
 
     this.isTouchDevice = isTouchDevice();
+
+    // We manually set event because React has not implemented onFocusIn/onFocusOut.
+    // Keep an eye on https://github.com/facebook/react/issues/6410 for updates
+    // We use "blur w/ useCapture param" vs "onfocusout" for FF browser support
+    this.container.addEventListener('blur', this.onFocusOut, true);
   }
 
   componentDidUpdate(prevProps) {
@@ -177,6 +183,8 @@ class SingleDatePicker extends React.PureComponent {
   componentWillUnmount() {
     if (this.removeEventListener) this.removeEventListener();
     if (this.enableScroll) this.enableScroll();
+
+    this.container.removeEventListener('blur', this.onFocusOut, true);
   }
 
   onOutsideClick(event) {
@@ -242,6 +250,13 @@ class SingleDatePicker extends React.PureComponent {
     });
   }
 
+  onFocusOut(e) {
+    if (!this.container.contains(e.relatedTarget)) {
+      const { onFocusChange } = this.props;
+      onFocusChange({ focused: false });
+    }
+  }
+
   setDayPickerContainerRef(ref) {
     this.dayPickerContainer = ref;
   }
@@ -548,7 +563,9 @@ class SingleDatePicker extends React.PureComponent {
         verticalSpacing={verticalSpacing}
         reopenPickerOnClearDate={reopenPickerOnClearDate}
         keepOpenOnDateSelect={keepOpenOnDateSelect}
-      />
+      >
+        {this.maybeRenderDayPickerWithPortal()}
+      </SingleDatePickerInputController>
     );
 
     return (
@@ -559,14 +576,15 @@ class SingleDatePicker extends React.PureComponent {
           block && styles.SingleDatePicker__block,
         )}
       >
-        {enableOutsideClick && (
-          <OutsideClickHandler onOutsideClick={this.onOutsideClick}>
-            {input}
-            {this.maybeRenderDayPickerWithPortal()}
-          </OutsideClickHandler>
-        )}
-        {!enableOutsideClick && input}
-        {!enableOutsideClick && this.maybeRenderDayPickerWithPortal()}
+        {
+          enableOutsideClick
+            ? (
+              <OutsideClickHandler onOutsideClick={this.onOutsideClick}>
+                {input}
+              </OutsideClickHandler>
+            )
+            : input
+        }
       </div>
     );
   }
diff --git a/src/components/SingleDatePickerInput.jsx b/src/components/SingleDatePickerInput.jsx
index 4c48654b95..a877f52c7b 100644
--- a/src/components/SingleDatePickerInput.jsx
+++ b/src/components/SingleDatePickerInput.jsx
@@ -19,6 +19,7 @@ import { ICON_BEFORE_POSITION, ICON_AFTER_POSITION, OPEN_DOWN } from '../constan
 const propTypes = forbidExtraProps({
   ...withStylesPropTypes,
   id: PropTypes.string.isRequired,
+  children: PropTypes.node,
   placeholder: PropTypes.string, // also used as label
   displayValue: PropTypes.string,
   screenReaderMessage: PropTypes.string,
@@ -54,6 +55,7 @@ const propTypes = forbidExtraProps({
 });
 
 const defaultProps = {
+  children: null,
   placeholder: 'Select Date',
   displayValue: '',
   screenReaderMessage: '',
@@ -90,6 +92,7 @@ const defaultProps = {
 
 function SingleDatePickerInput({
   id,
+  children,
   placeholder,
   displayValue,
   focused,
@@ -183,6 +186,8 @@ function SingleDatePickerInput({
         block={block}
       />
 
+      {children}
+
       {showClearDate && (
         <button
           {...css(
diff --git a/src/components/SingleDatePickerInputController.jsx b/src/components/SingleDatePickerInputController.jsx
index 32f0626816..7bb8071ced 100644
--- a/src/components/SingleDatePickerInputController.jsx
+++ b/src/components/SingleDatePickerInputController.jsx
@@ -25,6 +25,8 @@ import {
 } from '../constants';
 
 const propTypes = forbidExtraProps({
+  children: PropTypes.node,
+
   date: momentPropTypes.momentObj,
   onDateChange: PropTypes.func.isRequired,
 
@@ -70,6 +72,8 @@ const propTypes = forbidExtraProps({
 });
 
 const defaultProps = {
+  children: null,
+
   date: null,
   focused: false,
 
@@ -191,6 +195,7 @@ export default class SingleDatePickerInputController extends React.PureComponent
   render() {
     const {
       id,
+      children,
       placeholder,
       disabled,
       focused,
@@ -240,7 +245,6 @@ export default class SingleDatePickerInputController extends React.PureComponent
         onChange={this.onChange}
         onFocus={this.onFocus}
         onKeyDownShiftTab={this.onClearFocus}
-        onKeyDownTab={this.onClearFocus}
         onKeyDownArrowDown={onKeyDownArrowDown}
         onKeyDownQuestionMark={onKeyDownQuestionMark}
         screenReaderMessage={screenReaderMessage}
@@ -251,7 +255,9 @@ export default class SingleDatePickerInputController extends React.PureComponent
         small={small}
         regular={regular}
         verticalSpacing={verticalSpacing}
-      />
+      >
+        {children}
+      </SingleDatePickerInput>
     );
   }
 }
diff --git a/test/components/SingleDatePickerInputController_spec.jsx b/test/components/SingleDatePickerInputController_spec.jsx
index 995552d13c..af304dc712 100644
--- a/test/components/SingleDatePickerInputController_spec.jsx
+++ b/test/components/SingleDatePickerInputController_spec.jsx
@@ -28,6 +28,18 @@ describe('SingleDatePickerInputController', () => {
     expect(wrapper.find(SingleDatePickerInput)).to.have.lengthOf(1);
   });
 
+  it('should pass children to the SingleDatePickerInput', () => {
+    const Child = () => <div>CHILD</div>;
+
+    const wrapper = shallow((
+      <SingleDatePickerInputController id="date">
+        <Child />
+      </SingleDatePickerInputController>));
+
+    expect(wrapper.find(SingleDatePickerInput)).to.have.property('children');
+    expect(wrapper.find(Child)).to.have.lengthOf(1);
+  });
+
   describe('#onChange', () => {
     describe('valid future date string', () => {
       const futureDateString = moment().add(10, 'days').format('YYYY-MM-DD');
diff --git a/test/components/SingleDatePickerInput_spec.jsx b/test/components/SingleDatePickerInput_spec.jsx
index 285b744e27..7d4935c4ee 100644
--- a/test/components/SingleDatePickerInput_spec.jsx
+++ b/test/components/SingleDatePickerInput_spec.jsx
@@ -6,6 +6,19 @@ import sinon from 'sinon-sandbox';
 import SingleDatePickerInput from '../../src/components/SingleDatePickerInput';
 
 describe('SingleDatePickerInput', () => {
+  describe('render', () => {
+    it('should render any children provided', () => {
+      const Child = () => <div>CHILD</div>;
+
+      const wrapper = shallow((
+        <SingleDatePickerInput id="date">
+          <Child />
+        </SingleDatePickerInput>
+      )).dive();
+      expect(wrapper.find(Child)).to.have.lengthOf(1);
+    });
+  });
+
   describe('clear date', () => {
     describe('props.showClearDate is falsy', () => {
       it('does not render a clear date button', () => {
diff --git a/test/components/SingleDatePicker_spec.jsx b/test/components/SingleDatePicker_spec.jsx
index 026e91fea1..a38bdcd018 100644
--- a/test/components/SingleDatePicker_spec.jsx
+++ b/test/components/SingleDatePicker_spec.jsx
@@ -8,6 +8,7 @@ import CloseButton from '../../src/components/CloseButton';
 import DayPickerSingleDateController from '../../src/components/DayPickerSingleDateController';
 import SingleDatePickerInputController from '../../src/components/SingleDatePickerInputController';
 import SingleDatePicker, { PureSingleDatePicker } from '../../src/components/SingleDatePicker';
+import DayPickerRangeController from "../../src/components/DayPickerRangeController";
 
 const describeIfWindow = typeof document === 'undefined' ? describe.skip : describe;
 
@@ -29,6 +30,19 @@ describe('SingleDatePicker', () => {
         expect(wrapper.find(SingleDatePickerInputController)).to.have.lengthOf(1);
       });
 
+      it('renders with a DayPickerSingleDateController child when focused', () => {
+        const wrapper = shallow((
+          <SingleDatePicker
+            id="date"
+            focused
+          />
+        )).dive();
+        expect(wrapper.find(SingleDatePickerInputController)).to.have.property('children');
+        expect(
+          wrapper.find(SingleDatePickerInputController).find(DayPickerSingleDateController),
+        ).to.have.lengthOf(1);
+      });
+
       describe('props.isOutsideRange is defined', () => {
         it('should pass props.isOutsideRange to <SingleDatePickerInputController>', () => {
           const isOutsideRange = sinon.stub();
@@ -115,6 +129,7 @@ describe('SingleDatePicker', () => {
               focused
             />
           )).dive();
+
           expect(wrapper.find(Portal)).to.have.length(1);
         });
 
@@ -582,4 +597,21 @@ describe('SingleDatePicker', () => {
       expect(wrapper.state().showKeyboardShortcuts).to.equal(true);
     });
   });
+
+  describe('#onFocusOut', () => {
+    it('calls props.onFocusChange with focused: false', () => {
+      const onFocusChangeStub = sinon.stub();
+      const wrapper = shallow((
+        <SingleDatePicker id="date" onFocusChange={onFocusChangeStub} />
+      )).dive();
+
+      wrapper.instance().container = {
+        contains: () => false,
+      };
+
+      wrapper.instance().onFocusOut({});
+      expect(onFocusChangeStub.callCount).to.equal(1);
+      expect(onFocusChangeStub.getCall(0).args[0]).to.deep.equal({ focused: false });
+    });
+  });
 });

From 06407e1495761128a935c5169d3f56e8893d3361 Mon Sep 17 00:00:00 2001
From: Bailey Stoner <monokrome@monokro.me>
Date: Thu, 3 Jan 2019 13:11:06 -0800
Subject: [PATCH 335/618] Move calendar date picker to currently focused input
 element

---
 src/components/DateRangePicker.jsx               |  1 +
 src/components/DateRangePickerInput.jsx          | 10 +++++++---
 .../DateRangePickerInputController.jsx           | 16 ++++++++++++++++
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index b578155248..902ae054c0 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -390,6 +390,7 @@ class DateRangePicker extends React.PureComponent {
       disabled,
       theme: { reactDates },
     } = this.props;
+
     const { dayPickerContainerStyles, isDayPickerFocused, showKeyboardShortcuts } = this.state;
 
     const onOutsideClick = (!withFullScreenPortal && withPortal)
diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index 6a627a612f..98d41dbe01 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -158,6 +158,7 @@ function DateRangePickerInput({
   customArrowIcon,
   customCloseIcon,
   isFocused,
+  datePickerIsAfterEndInput,
   phrases,
   isRTL,
   noBorder,
@@ -183,6 +184,7 @@ function DateRangePickerInput({
       )}
     />
   );
+
   const screenReaderText = screenReaderMessage || phrases.keyboardNavigationInstructions;
   const inputIcon = (showDefaultInputIcon || customInputIcon !== null) && (
     <button
@@ -195,6 +197,7 @@ function DateRangePickerInput({
       {calendarIcon}
     </button>
   );
+
   const startDateDisabled = disabled === START_DATE || disabled === true;
   const endDateDisabled = disabled === END_DATE || disabled === true;
 
@@ -238,12 +241,13 @@ function DateRangePickerInput({
           {...css(styles.DateRangePickerInput_arrow)}
           aria-hidden="true"
           role="presentation"
+          onKeyDownTab={onEndDateTab}
         >
           {arrowIcon}
         </div>
       }
 
-      {children}
+      {datePickerIsAfterEndInput || children}
 
       <DateInput
         id={endDateId}
@@ -259,7 +263,6 @@ function DateRangePickerInput({
         openDirection={openDirection}
         onChange={onEndDateChange}
         onFocus={onEndDateFocus}
-        onKeyDownTab={onEndDateTab}
         onKeyDownArrowDown={onKeyDownArrowDown}
         onKeyDownQuestionMark={onKeyDownQuestionMark}
         verticalSpacing={verticalSpacing}
@@ -267,6 +270,8 @@ function DateRangePickerInput({
         regular={regular}
       />
 
+      {datePickerIsAfterEndInput && children}
+
       {showClearDates && (
         <button
           type="button"
@@ -285,7 +290,6 @@ function DateRangePickerInput({
       )}
 
       {inputIconPosition === ICON_AFTER_POSITION && inputIcon}
-
     </div>
   );
 }
diff --git a/src/components/DateRangePickerInputController.jsx b/src/components/DateRangePickerInputController.jsx
index 3e0a216a8b..da31640a5a 100644
--- a/src/components/DateRangePickerInputController.jsx
+++ b/src/components/DateRangePickerInputController.jsx
@@ -139,6 +139,10 @@ export default class DateRangePickerInputController extends React.PureComponent
   constructor(props) {
     super(props);
 
+    this.state = {
+      datePickerIsAfterEndInput: false,
+    };
+
     this.onClearFocus = this.onClearFocus.bind(this);
     this.onStartDateChange = this.onStartDateChange.bind(this);
     this.onStartDateFocus = this.onStartDateFocus.bind(this);
@@ -192,6 +196,8 @@ export default class DateRangePickerInputController extends React.PureComponent
       disabled,
     } = this.props;
 
+    this.setState({ datePickerIsAfterEndInput: true });
+
     if (!startDate && withFullScreenPortal && (!disabled || disabled === END_DATE)) {
       // When the datepicker is full screen, we never want to focus the end date first
       // because there's no indication that that is the case once the datepicker is open and it
@@ -236,6 +242,11 @@ export default class DateRangePickerInputController extends React.PureComponent
 
   onStartDateFocus() {
     const { disabled, onFocusChange } = this.props;
+
+    this.setState({
+      datePickerIsAfterEndInput: false,
+    });
+
     if (!disabled || disabled === END_DATE) {
       onFocusChange(START_DATE);
     }
@@ -297,6 +308,10 @@ export default class DateRangePickerInputController extends React.PureComponent
       verticalSpacing,
     } = this.props;
 
+    const {
+      datePickerIsAfterEndInput,
+    } = this.state;
+
     const startDateString = this.getDateString(startDate);
     const endDateString = this.getDateString(endDate);
 
@@ -321,6 +336,7 @@ export default class DateRangePickerInputController extends React.PureComponent
         customInputIcon={customInputIcon}
         customArrowIcon={customArrowIcon}
         customCloseIcon={customCloseIcon}
+        datePickerIsAfterEndInput={datePickerIsAfterEndInput}
         phrases={phrases}
         onStartDateChange={this.onStartDateChange}
         onStartDateFocus={this.onStartDateFocus}

From 079e34fdea37c10657949529d44242569fe4461a Mon Sep 17 00:00:00 2001
From: Bailey Stoner <monokrome@monokro.me>
Date: Mon, 7 Jan 2019 15:49:53 -0800
Subject: [PATCH 336/618] Fix issue with onKeyDownTab

---
 src/components/DateRangePickerInput.jsx           |  6 ++----
 src/components/DateRangePickerInputController.jsx | 15 ---------------
 2 files changed, 2 insertions(+), 19 deletions(-)

diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index 98d41dbe01..eff3d33ae8 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -158,7 +158,6 @@ function DateRangePickerInput({
   customArrowIcon,
   customCloseIcon,
   isFocused,
-  datePickerIsAfterEndInput,
   phrases,
   isRTL,
   noBorder,
@@ -241,13 +240,12 @@ function DateRangePickerInput({
           {...css(styles.DateRangePickerInput_arrow)}
           aria-hidden="true"
           role="presentation"
-          onKeyDownTab={onEndDateTab}
         >
           {arrowIcon}
         </div>
       }
 
-      {datePickerIsAfterEndInput || children}
+      {isStartDateFocused || children}
 
       <DateInput
         id={endDateId}
@@ -270,7 +268,7 @@ function DateRangePickerInput({
         regular={regular}
       />
 
-      {datePickerIsAfterEndInput && children}
+      {isEndDateFocused && children}
 
       {showClearDates && (
         <button
diff --git a/src/components/DateRangePickerInputController.jsx b/src/components/DateRangePickerInputController.jsx
index da31640a5a..673702b3b8 100644
--- a/src/components/DateRangePickerInputController.jsx
+++ b/src/components/DateRangePickerInputController.jsx
@@ -139,10 +139,6 @@ export default class DateRangePickerInputController extends React.PureComponent
   constructor(props) {
     super(props);
 
-    this.state = {
-      datePickerIsAfterEndInput: false,
-    };
-
     this.onClearFocus = this.onClearFocus.bind(this);
     this.onStartDateChange = this.onStartDateChange.bind(this);
     this.onStartDateFocus = this.onStartDateFocus.bind(this);
@@ -196,8 +192,6 @@ export default class DateRangePickerInputController extends React.PureComponent
       disabled,
     } = this.props;
 
-    this.setState({ datePickerIsAfterEndInput: true });
-
     if (!startDate && withFullScreenPortal && (!disabled || disabled === END_DATE)) {
       // When the datepicker is full screen, we never want to focus the end date first
       // because there's no indication that that is the case once the datepicker is open and it
@@ -243,10 +237,6 @@ export default class DateRangePickerInputController extends React.PureComponent
   onStartDateFocus() {
     const { disabled, onFocusChange } = this.props;
 
-    this.setState({
-      datePickerIsAfterEndInput: false,
-    });
-
     if (!disabled || disabled === END_DATE) {
       onFocusChange(START_DATE);
     }
@@ -308,10 +298,6 @@ export default class DateRangePickerInputController extends React.PureComponent
       verticalSpacing,
     } = this.props;
 
-    const {
-      datePickerIsAfterEndInput,
-    } = this.state;
-
     const startDateString = this.getDateString(startDate);
     const endDateString = this.getDateString(endDate);
 
@@ -336,7 +322,6 @@ export default class DateRangePickerInputController extends React.PureComponent
         customInputIcon={customInputIcon}
         customArrowIcon={customArrowIcon}
         customCloseIcon={customCloseIcon}
-        datePickerIsAfterEndInput={datePickerIsAfterEndInput}
         phrases={phrases}
         onStartDateChange={this.onStartDateChange}
         onStartDateFocus={this.onStartDateFocus}

From 62b09f02b9aed038f6ad5115d5901bb56675911b Mon Sep 17 00:00:00 2001
From: Bailey Stoner <monokrome@monokro.me>
Date: Mon, 7 Jan 2019 16:16:12 -0800
Subject: [PATCH 337/618] Remove ternary usage

---
 src/components/DateRangePicker.jsx  | 16 +++++++---------
 src/components/SingleDatePicker.jsx | 15 ++++++---------
 2 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 902ae054c0..59a5c13c0b 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -189,6 +189,7 @@ class DateRangePicker extends React.PureComponent {
       endDate,
       appendToBody,
     } = this.props;
+
     if (!this.isOpened()) return;
     if (appendToBody && this.dayPickerContainer.contains(event.target)) return;
 
@@ -587,15 +588,12 @@ class DateRangePicker extends React.PureComponent {
           block && styles.DateRangePicker__block,
         )}
       >
-        {
-          enableOutsideClick
-            ? (
-              <OutsideClickHandler onOutsideClick={this.onOutsideClick}>
-                {input}
-              </OutsideClickHandler>
-            )
-            : input
-        }
+        {enableOutsideClick && (
+          <OutsideClickHandler onOutsideClick={this.onOutsideClick}>
+            {input}
+          </OutsideClickHandler>
+        )}
+        {enableOutsideClick || input}
       </div>
     );
   }
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index f1d477da24..cbb500efd1 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -576,15 +576,12 @@ class SingleDatePicker extends React.PureComponent {
           block && styles.SingleDatePicker__block,
         )}
       >
-        {
-          enableOutsideClick
-            ? (
-              <OutsideClickHandler onOutsideClick={this.onOutsideClick}>
-                {input}
-              </OutsideClickHandler>
-            )
-            : input
-        }
+        {enableOutsideClick && (
+          <OutsideClickHandler onOutsideClick={this.onOutsideClick}>
+            {input}
+          </OutsideClickHandler>
+        )}
+        { enableOutsideClick || input}
       </div>
     );
   }

From 37d1b838f482c9ead0e268a222a745d2b3dd133b Mon Sep 17 00:00:00 2001
From: Bailey Stoner <monokrome@monokro.me>
Date: Mon, 7 Jan 2019 16:16:33 -0800
Subject: [PATCH 338/618] Fix wrong comparison :)

---
 src/components/DateRangePickerInput.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index eff3d33ae8..4ade394ae9 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -245,7 +245,7 @@ function DateRangePickerInput({
         </div>
       }
 
-      {isStartDateFocused || children}
+      {isStartDateFocused && children}
 
       <DateInput
         id={endDateId}

From 7d16e58212c1e911968d48baf8a1a12919956cc9 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Mon, 7 Jan 2019 17:33:47 -0800
Subject: [PATCH 339/618] Update src/components/SingleDatePicker.jsx

Co-Authored-By: monokrome <github@monokro.me>
---
 src/components/SingleDatePicker.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index cbb500efd1..a796923e71 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -581,7 +581,7 @@ class SingleDatePicker extends React.PureComponent {
             {input}
           </OutsideClickHandler>
         )}
-        { enableOutsideClick || input}
+        {enableOutsideClick || input}
       </div>
     );
   }

From 450e79403917321c1b2d6ab279ef6215bcb848ed Mon Sep 17 00:00:00 2001
From: Bailey Stoner <monokrome@monokro.me>
Date: Mon, 7 Jan 2019 17:41:26 -0800
Subject: [PATCH 340/618] Remove unnecessary `children` prop.

---
 src/components/DateRangePickerInputController.jsx | 9 +--------
 src/components/SingleDatePickerInput.jsx          | 5 -----
 2 files changed, 1 insertion(+), 13 deletions(-)

diff --git a/src/components/DateRangePickerInputController.jsx b/src/components/DateRangePickerInputController.jsx
index 673702b3b8..6466c6d9ff 100644
--- a/src/components/DateRangePickerInputController.jsx
+++ b/src/components/DateRangePickerInputController.jsx
@@ -28,8 +28,6 @@ import {
 } from '../constants';
 
 const propTypes = forbidExtraProps({
-  children: PropTypes.node,
-
   startDate: momentPropTypes.momentObj,
   startDateId: PropTypes.string,
   startDatePlaceholderText: PropTypes.string,
@@ -82,8 +80,6 @@ const propTypes = forbidExtraProps({
 });
 
 const defaultProps = {
-  children: null,
-
   startDate: null,
   startDateId: START_DATE,
   startDatePlaceholderText: 'Start Date',
@@ -265,7 +261,6 @@ export default class DateRangePickerInputController extends React.PureComponent
 
   render() {
     const {
-      children,
       startDate,
       startDateId,
       startDatePlaceholderText,
@@ -340,9 +335,7 @@ export default class DateRangePickerInputController extends React.PureComponent
         small={small}
         regular={regular}
         verticalSpacing={verticalSpacing}
-      >
-        {children}
-      </DateRangePickerInput>
+      />
     );
   }
 }
diff --git a/src/components/SingleDatePickerInput.jsx b/src/components/SingleDatePickerInput.jsx
index a877f52c7b..4c48654b95 100644
--- a/src/components/SingleDatePickerInput.jsx
+++ b/src/components/SingleDatePickerInput.jsx
@@ -19,7 +19,6 @@ import { ICON_BEFORE_POSITION, ICON_AFTER_POSITION, OPEN_DOWN } from '../constan
 const propTypes = forbidExtraProps({
   ...withStylesPropTypes,
   id: PropTypes.string.isRequired,
-  children: PropTypes.node,
   placeholder: PropTypes.string, // also used as label
   displayValue: PropTypes.string,
   screenReaderMessage: PropTypes.string,
@@ -55,7 +54,6 @@ const propTypes = forbidExtraProps({
 });
 
 const defaultProps = {
-  children: null,
   placeholder: 'Select Date',
   displayValue: '',
   screenReaderMessage: '',
@@ -92,7 +90,6 @@ const defaultProps = {
 
 function SingleDatePickerInput({
   id,
-  children,
   placeholder,
   displayValue,
   focused,
@@ -186,8 +183,6 @@ function SingleDatePickerInput({
         block={block}
       />
 
-      {children}
-
       {showClearDate && (
         <button
           {...css(

From 6793c746baa423fe857ab3cf58f6a79c0f1c277a Mon Sep 17 00:00:00 2001
From: Bailey Stoner <monokrome@monokro.me>
Date: Mon, 7 Jan 2019 17:46:17 -0800
Subject: [PATCH 341/618] Remove .cache from .gitignore

---
 .gitignore | 2 --
 1 file changed, 2 deletions(-)

diff --git a/.gitignore b/.gitignore
index 645dfa1028..46eaf68548 100644
--- a/.gitignore
+++ b/.gitignore
@@ -47,5 +47,3 @@ yarn.lock
 package-lock.json
 
 css/styles.css
-
-.cache
\ No newline at end of file

From 16b9f5d14aa1c112e1d2e0695b2a6d5fd623df7b Mon Sep 17 00:00:00 2001
From: Bailey Stoner <monokrome@monokro.me>
Date: Tue, 8 Jan 2019 11:52:12 -0800
Subject: [PATCH 342/618] Revert "Remove unnecessary `children` prop."

This reverts commit f5d58d536a603139187c315dce6599970bac9c49.
---
 src/components/DateRangePickerInputController.jsx | 9 ++++++++-
 src/components/SingleDatePickerInput.jsx          | 5 +++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/DateRangePickerInputController.jsx b/src/components/DateRangePickerInputController.jsx
index 6466c6d9ff..673702b3b8 100644
--- a/src/components/DateRangePickerInputController.jsx
+++ b/src/components/DateRangePickerInputController.jsx
@@ -28,6 +28,8 @@ import {
 } from '../constants';
 
 const propTypes = forbidExtraProps({
+  children: PropTypes.node,
+
   startDate: momentPropTypes.momentObj,
   startDateId: PropTypes.string,
   startDatePlaceholderText: PropTypes.string,
@@ -80,6 +82,8 @@ const propTypes = forbidExtraProps({
 });
 
 const defaultProps = {
+  children: null,
+
   startDate: null,
   startDateId: START_DATE,
   startDatePlaceholderText: 'Start Date',
@@ -261,6 +265,7 @@ export default class DateRangePickerInputController extends React.PureComponent
 
   render() {
     const {
+      children,
       startDate,
       startDateId,
       startDatePlaceholderText,
@@ -335,7 +340,9 @@ export default class DateRangePickerInputController extends React.PureComponent
         small={small}
         regular={regular}
         verticalSpacing={verticalSpacing}
-      />
+      >
+        {children}
+      </DateRangePickerInput>
     );
   }
 }
diff --git a/src/components/SingleDatePickerInput.jsx b/src/components/SingleDatePickerInput.jsx
index 4c48654b95..a877f52c7b 100644
--- a/src/components/SingleDatePickerInput.jsx
+++ b/src/components/SingleDatePickerInput.jsx
@@ -19,6 +19,7 @@ import { ICON_BEFORE_POSITION, ICON_AFTER_POSITION, OPEN_DOWN } from '../constan
 const propTypes = forbidExtraProps({
   ...withStylesPropTypes,
   id: PropTypes.string.isRequired,
+  children: PropTypes.node,
   placeholder: PropTypes.string, // also used as label
   displayValue: PropTypes.string,
   screenReaderMessage: PropTypes.string,
@@ -54,6 +55,7 @@ const propTypes = forbidExtraProps({
 });
 
 const defaultProps = {
+  children: null,
   placeholder: 'Select Date',
   displayValue: '',
   screenReaderMessage: '',
@@ -90,6 +92,7 @@ const defaultProps = {
 
 function SingleDatePickerInput({
   id,
+  children,
   placeholder,
   displayValue,
   focused,
@@ -183,6 +186,8 @@ function SingleDatePickerInput({
         block={block}
       />
 
+      {children}
+
       {showClearDate && (
         <button
           {...css(

From f9368df81497315c5bccb148bd762a50d76d4109 Mon Sep 17 00:00:00 2001
From: Bailey Stoner <monokrome@monokro.me>
Date: Tue, 8 Jan 2019 13:30:20 -0800
Subject: [PATCH 343/618] [SUGGESTION] Push events through onBlur/onTab
 callbacks

---
 src/components/DayPicker.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 5a007b3120..5c750c7cd8 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -355,6 +355,7 @@ class DayPicker extends React.PureComponent {
 
   onKeyDown(e) {
     e.stopPropagation();
+
     if (!MODIFIER_KEY_NAMES.has(e.key)) {
       this.throttledKeyDown(e);
     }
@@ -442,7 +443,7 @@ class DayPicker extends React.PureComponent {
         if (showKeyboardShortcuts) {
           this.closeKeyboardShortcutsPanel();
         } else {
-          onBlur();
+          onBlur(e);
         }
         break;
 
@@ -450,7 +451,7 @@ class DayPicker extends React.PureComponent {
         if (e.shiftKey) {
           onShiftTab();
         } else {
-          onTab();
+          onTab(e);
         }
         break;
 

From 41df02153ae3633cf984e782e8eaf9f3589cac9c Mon Sep 17 00:00:00 2001
From: Bailey Stoner <monokrome@monokro.me>
Date: Tue, 8 Jan 2019 15:54:54 -0800
Subject: [PATCH 344/618] Call into onClose on focusout for keyboard navigation

---
 src/components/DateRangePicker.jsx            | 22 +++++++++++++++++++
 src/components/DayPicker.jsx                  |  2 --
 .../SingleDatePickerInputController.jsx       |  9 +-------
 3 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 59a5c13c0b..f36e4a380f 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -134,6 +134,7 @@ class DateRangePicker extends React.PureComponent {
     this.onOutsideClick = this.onOutsideClick.bind(this);
     this.onDateRangePickerInputFocus = this.onDateRangePickerInputFocus.bind(this);
     this.onDayPickerFocus = this.onDayPickerFocus.bind(this);
+    this.onDayPickerFocusOut = this.onDayPickerFocusOut.bind(this);
     this.onDayPickerBlur = this.onDayPickerBlur.bind(this);
     this.showKeyboardShortcutsPanel = this.showKeyboardShortcutsPanel.bind(this);
 
@@ -177,6 +178,7 @@ class DateRangePicker extends React.PureComponent {
   }
 
   componentWillUnmount() {
+    this.removeDayPickerEventListeners();
     if (this.removeEventListener) this.removeEventListener();
     if (this.enableScroll) this.enableScroll();
   }
@@ -239,6 +241,11 @@ class DateRangePicker extends React.PureComponent {
     });
   }
 
+  onDayPickerFocusOut(e) {
+    if (this.dayPickerContainer.contains(e.relatedTarget)) return;
+    this.onOutsideClick(e);
+  }
+
   onDayPickerBlur() {
     this.setState({
       isDateRangePickerInputFocused: true,
@@ -248,13 +255,28 @@ class DateRangePicker extends React.PureComponent {
   }
 
   setDayPickerContainerRef(ref) {
+    if (this.dayPickerContainer) this.removeDayPickerEventListeners();
+    if (!ref) return;
     this.dayPickerContainer = ref;
+    this.addDayPickerEventListeners();
   }
 
   setContainerRef(ref) {
     this.container = ref;
   }
 
+  addDayPickerEventListeners() {
+    this.removeDayPickerFocusOut = addEventListener(
+      this.dayPickerContainer,
+      'focusout',
+      this.onDayPickerFocusOut,
+    );
+  }
+
+  removeDayPickerEventListeners() {
+    if (this.removeDayPickerFocusOut) this.removeDayPickerFocusOut();
+  }
+
   isOpened() {
     const { focusedInput } = this.props;
     return focusedInput === START_DATE || focusedInput === END_DATE;
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 5c750c7cd8..a3be8c8e60 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -469,7 +469,6 @@ class DayPicker extends React.PureComponent {
     }
   }
 
-
   onPrevMonthClick(e) {
     if (e) e.preventDefault();
     this.onPrevMonthTransition();
@@ -1123,7 +1122,6 @@ class DayPicker extends React.PureComponent {
                 />
               )}
             </div>
-
           </div>
 
           {(calendarInfoPositionBottom || calendarInfoPositionAfter) && calendarInfo}
diff --git a/src/components/SingleDatePickerInputController.jsx b/src/components/SingleDatePickerInputController.jsx
index 7bb8071ced..6f07f263a5 100644
--- a/src/components/SingleDatePickerInputController.jsx
+++ b/src/components/SingleDatePickerInputController.jsx
@@ -25,8 +25,6 @@ import {
 } from '../constants';
 
 const propTypes = forbidExtraProps({
-  children: PropTypes.node,
-
   date: momentPropTypes.momentObj,
   onDateChange: PropTypes.func.isRequired,
 
@@ -72,8 +70,6 @@ const propTypes = forbidExtraProps({
 });
 
 const defaultProps = {
-  children: null,
-
   date: null,
   focused: false,
 
@@ -195,7 +191,6 @@ export default class SingleDatePickerInputController extends React.PureComponent
   render() {
     const {
       id,
-      children,
       placeholder,
       disabled,
       focused,
@@ -255,9 +250,7 @@ export default class SingleDatePickerInputController extends React.PureComponent
         small={small}
         regular={regular}
         verticalSpacing={verticalSpacing}
-      >
-        {children}
-      </SingleDatePickerInput>
+      />
     );
   }
 }

From a20d6232d2e027b4aaafd3d10e89022d6cb961d2 Mon Sep 17 00:00:00 2001
From: Bailey Stoner <monokrome@monokro.me>
Date: Fri, 11 Jan 2019 11:53:47 -0800
Subject: [PATCH 345/618] Fix a number of linting issues

---
 .tern-port                                         |  1 +
 src/components/.tern-port                          |  1 +
 src/components/DateRangePickerInput.jsx            |  1 +
 src/components/DayPickerRangeController.jsx        | 12 +++++++++---
 src/components/SingleDatePicker.jsx                |  1 +
 src/components/SingleDatePickerInputController.jsx |  7 ++++++-
 stories/.tern-port                                 |  1 +
 test/components/SingleDatePicker_spec.jsx          |  1 -
 8 files changed, 20 insertions(+), 5 deletions(-)
 create mode 100644 .tern-port
 create mode 100644 src/components/.tern-port
 create mode 100644 stories/.tern-port

diff --git a/.tern-port b/.tern-port
new file mode 100644
index 0000000000..dcb26926b3
--- /dev/null
+++ b/.tern-port
@@ -0,0 +1 @@
+56258
\ No newline at end of file
diff --git a/src/components/.tern-port b/src/components/.tern-port
new file mode 100644
index 0000000000..2dd3385e3f
--- /dev/null
+++ b/src/components/.tern-port
@@ -0,0 +1 @@
+56254
\ No newline at end of file
diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index 4ade394ae9..a1a54ec983 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -263,6 +263,7 @@ function DateRangePickerInput({
         onFocus={onEndDateFocus}
         onKeyDownArrowDown={onKeyDownArrowDown}
         onKeyDownQuestionMark={onKeyDownQuestionMark}
+        onKeyDownTab={onEndDateTab}
         verticalSpacing={verticalSpacing}
         small={small}
         regular={regular}
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index e4708d27d6..9345022dae 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -547,7 +547,13 @@ export default class DayPickerRangeController extends React.PureComponent {
       startDateOffset,
       endDateOffset,
     } = this.props;
-    const { hoverDate, visibleDays } = this.state;
+
+    const {
+      hoverDate,
+      visibleDays,
+      dateOffset: currentDateOffset,
+    } = this.state;
+
     let dateOffset = null;
 
     if (focusedInput) {
@@ -564,8 +570,8 @@ export default class DayPickerRangeController extends React.PureComponent {
         };
 
         // eslint-disable-next-line react/destructuring-assignment
-        if (this.state.dateOffset && this.state.dateOffset.start && this.state.dateOffset.end) {
-          modifiers = this.deleteModifierFromRange(modifiers, this.state.dateOffset.start, this.state.dateOffset.end, 'hovered-offset');
+        if (this.state.dateOffset && currentDateOffset.start && currentDateOffset.end) {
+          modifiers = this.deleteModifierFromRange(modifiers, currentDateOffset.start, currentDateOffset.end, 'hovered-offset');
         }
         modifiers = this.addModifierToRange(modifiers, start, end, 'hovered-offset');
       }
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index a796923e71..e0110159b8 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -197,6 +197,7 @@ class SingleDatePicker extends React.PureComponent {
       appendToBody,
     } = this.props;
     if (!focused) return;
+    if (!this.dayPickerContainer) return;
     if (appendToBody && this.dayPickerContainer.contains(event.target)) return;
 
     this.setState({
diff --git a/src/components/SingleDatePickerInputController.jsx b/src/components/SingleDatePickerInputController.jsx
index 6f07f263a5..600ecfa403 100644
--- a/src/components/SingleDatePickerInputController.jsx
+++ b/src/components/SingleDatePickerInputController.jsx
@@ -25,6 +25,8 @@ import {
 } from '../constants';
 
 const propTypes = forbidExtraProps({
+  children: PropTypes.node,
+
   date: momentPropTypes.momentObj,
   onDateChange: PropTypes.func.isRequired,
 
@@ -190,6 +192,7 @@ export default class SingleDatePickerInputController extends React.PureComponent
 
   render() {
     const {
+      children,
       id,
       placeholder,
       disabled,
@@ -250,7 +253,9 @@ export default class SingleDatePickerInputController extends React.PureComponent
         small={small}
         regular={regular}
         verticalSpacing={verticalSpacing}
-      />
+      >
+        {children}
+      </SingleDatePickerInput>
     );
   }
 }
diff --git a/stories/.tern-port b/stories/.tern-port
new file mode 100644
index 0000000000..24f778ea99
--- /dev/null
+++ b/stories/.tern-port
@@ -0,0 +1 @@
+56465
\ No newline at end of file
diff --git a/test/components/SingleDatePicker_spec.jsx b/test/components/SingleDatePicker_spec.jsx
index a38bdcd018..1c02c0688f 100644
--- a/test/components/SingleDatePicker_spec.jsx
+++ b/test/components/SingleDatePicker_spec.jsx
@@ -8,7 +8,6 @@ import CloseButton from '../../src/components/CloseButton';
 import DayPickerSingleDateController from '../../src/components/DayPickerSingleDateController';
 import SingleDatePickerInputController from '../../src/components/SingleDatePickerInputController';
 import SingleDatePicker, { PureSingleDatePicker } from '../../src/components/SingleDatePicker';
-import DayPickerRangeController from "../../src/components/DayPickerRangeController";
 
 const describeIfWindow = typeof document === 'undefined' ? describe.skip : describe;
 

From 591e8befc4a4ae23ab6465c35e10a929f1f53422 Mon Sep 17 00:00:00 2001
From: Bailey Stoner <monokrome@monokro.me>
Date: Fri, 11 Jan 2019 12:12:44 -0800
Subject: [PATCH 346/618] Fix specs.

---
 .tern-port                                        | 1 -
 src/components/.tern-port                         | 1 -
 src/components/DateRangePickerInputController.jsx | 1 -
 src/components/SingleDatePicker.jsx               | 2 +-
 stories/.tern-port                                | 1 -
 test/components/.tern-port                        | 1 +
 test/components/DateRangePickerInput_spec.jsx     | 9 ---------
 test/components/SingleDatePicker_spec.jsx         | 4 +---
 8 files changed, 3 insertions(+), 17 deletions(-)
 delete mode 100644 .tern-port
 delete mode 100644 src/components/.tern-port
 delete mode 100644 stories/.tern-port
 create mode 100644 test/components/.tern-port

diff --git a/.tern-port b/.tern-port
deleted file mode 100644
index dcb26926b3..0000000000
--- a/.tern-port
+++ /dev/null
@@ -1 +0,0 @@
-56258
\ No newline at end of file
diff --git a/src/components/.tern-port b/src/components/.tern-port
deleted file mode 100644
index 2dd3385e3f..0000000000
--- a/src/components/.tern-port
+++ /dev/null
@@ -1 +0,0 @@
-56254
\ No newline at end of file
diff --git a/src/components/DateRangePickerInputController.jsx b/src/components/DateRangePickerInputController.jsx
index 673702b3b8..97026260d5 100644
--- a/src/components/DateRangePickerInputController.jsx
+++ b/src/components/DateRangePickerInputController.jsx
@@ -328,7 +328,6 @@ export default class DateRangePickerInputController extends React.PureComponent
         onStartDateShiftTab={this.onClearFocus}
         onEndDateChange={this.onEndDateChange}
         onEndDateFocus={this.onEndDateFocus}
-        onEndDateTab={this.onClearFocus}
         showClearDates={showClearDates}
         onClearDates={this.clearDates}
         screenReaderMessage={screenReaderMessage}
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index e0110159b8..b30d14db45 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -196,8 +196,8 @@ class SingleDatePicker extends React.PureComponent {
       endDate,
       appendToBody,
     } = this.props;
+
     if (!focused) return;
-    if (!this.dayPickerContainer) return;
     if (appendToBody && this.dayPickerContainer.contains(event.target)) return;
 
     this.setState({
diff --git a/stories/.tern-port b/stories/.tern-port
deleted file mode 100644
index 24f778ea99..0000000000
--- a/stories/.tern-port
+++ /dev/null
@@ -1 +0,0 @@
-56465
\ No newline at end of file
diff --git a/test/components/.tern-port b/test/components/.tern-port
new file mode 100644
index 0000000000..11cb151f51
--- /dev/null
+++ b/test/components/.tern-port
@@ -0,0 +1 @@
+56872
\ No newline at end of file
diff --git a/test/components/DateRangePickerInput_spec.jsx b/test/components/DateRangePickerInput_spec.jsx
index 63d71aba48..1e8ca505b6 100644
--- a/test/components/DateRangePickerInput_spec.jsx
+++ b/test/components/DateRangePickerInput_spec.jsx
@@ -49,15 +49,6 @@ describe('DateRangePickerInput', () => {
         });
       });
     });
-
-    describe('props.children', () => {
-      it('should render children when provided', () => {
-        const Child = () => <div>CHILD</div>;
-
-        const wrapper = shallow(<DateRangePickerInput><Child /></DateRangePickerInput>).dive();
-        expect(wrapper.find('Child')).to.have.lengthOf(1);
-      });
-    });
   });
 
   describe('props.customArrowIcon', () => {
diff --git a/test/components/SingleDatePicker_spec.jsx b/test/components/SingleDatePicker_spec.jsx
index 1c02c0688f..cbe0d3749c 100644
--- a/test/components/SingleDatePicker_spec.jsx
+++ b/test/components/SingleDatePicker_spec.jsx
@@ -413,9 +413,7 @@ describe('SingleDatePicker', () => {
             focused
           />
         )).dive();
-        wrapper.setState({
-          isDayPickerFocused: true,
-        });
+        wrapper.setState({ isDayPickerFocused: true });
         wrapper.instance().onOutsideClick();
         expect(wrapper.state().isDayPickerFocused).to.equal(false);
       });

From 69622f885a13804436099381a50ac1a0ac6eb81c Mon Sep 17 00:00:00 2001
From: Bailey Stoner <monokrome@monokro.me>
Date: Fri, 11 Jan 2019 12:36:35 -0800
Subject: [PATCH 347/618] Fix issue caused when relatedTarget is sometimes
 null.

---
 src/components/DateRangePicker.jsx  | 6 +++---
 src/components/SingleDatePicker.jsx | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index f36e4a380f..ae03feea86 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -241,9 +241,9 @@ class DateRangePicker extends React.PureComponent {
     });
   }
 
-  onDayPickerFocusOut(e) {
-    if (this.dayPickerContainer.contains(e.relatedTarget)) return;
-    this.onOutsideClick(e);
+  onDayPickerFocusOut(event) {
+    if (this.dayPickerContainer.contains(event.target || event.relatedTarget)) return;
+    this.onOutsideClick(event);
   }
 
   onDayPickerBlur() {
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index b30d14db45..ddd112e36f 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -252,7 +252,7 @@ class SingleDatePicker extends React.PureComponent {
   }
 
   onFocusOut(e) {
-    if (!this.container.contains(e.relatedTarget)) {
+    if (!this.container.contains(e.target || e.relatedTarget)) {
       const { onFocusChange } = this.props;
       onFocusChange({ focused: false });
     }

From bb22f7a5f6cc041583a2dc56f04cc28f1d0846af Mon Sep 17 00:00:00 2001
From: Bailey Stoner <monokrome@monokro.me>
Date: Fri, 11 Jan 2019 12:47:01 -0800
Subject: [PATCH 348/618] Add comment explaining why we are using focusout
 here.

---
 src/components/DateRangePicker.jsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index ae03feea86..17be917c7b 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -266,6 +266,12 @@ class DateRangePicker extends React.PureComponent {
   }
 
   addDayPickerEventListeners() {
+    // NOTE: We are using a manual event listener here, because React doesn't
+    // provide FocusOut, while blur and keydown don't provide the information
+    // needed in order to know whether we have left focus or not.
+    //
+    // For reference, this issue is further described here:
+    // - https://github.com/facebook/react/issues/6410
     this.removeDayPickerFocusOut = addEventListener(
       this.dayPickerContainer,
       'focusout',

From bb6391af2b48d5db76f6b7f0f694c3e87389e5ad Mon Sep 17 00:00:00 2001
From: Bailey Stoner <monokrome@monokro.me>
Date: Fri, 11 Jan 2019 14:49:20 -0800
Subject: [PATCH 349/618] Fix issues with inconsistencies handling events
 between date pickers.

---
 src/components/DateRangePicker.jsx  |  7 +++--
 src/components/SingleDatePicker.jsx | 41 ++++++++++++++++++++---------
 2 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 17be917c7b..c23fcfd141 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -242,7 +242,7 @@ class DateRangePicker extends React.PureComponent {
   }
 
   onDayPickerFocusOut(event) {
-    if (this.dayPickerContainer.contains(event.target || event.relatedTarget)) return;
+    if (this.dayPickerContainer.contains(event.relatedTarget || event.target)) return;
     this.onOutsideClick(event);
   }
 
@@ -255,9 +255,12 @@ class DateRangePicker extends React.PureComponent {
   }
 
   setDayPickerContainerRef(ref) {
+    if (ref === this.dayPickerContainer) return;
     if (this.dayPickerContainer) this.removeDayPickerEventListeners();
-    if (!ref) return;
+
     this.dayPickerContainer = ref;
+    if (!ref) return;
+
     this.addDayPickerEventListeners();
   }
 
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index ddd112e36f..47633a7b2d 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -144,12 +144,13 @@ class SingleDatePicker extends React.PureComponent {
 
   /* istanbul ignore next */
   componentDidMount() {
-    this.removeEventListener = addEventListener(
+    this.removeResizeEventListener = addEventListener(
       window,
       'resize',
       this.responsivizePickerPosition,
       { passive: true },
     );
+
     this.responsivizePickerPosition();
     this.disableScroll();
 
@@ -162,11 +163,6 @@ class SingleDatePicker extends React.PureComponent {
     }
 
     this.isTouchDevice = isTouchDevice();
-
-    // We manually set event because React has not implemented onFocusIn/onFocusOut.
-    // Keep an eye on https://github.com/facebook/react/issues/6410 for updates
-    // We use "blur w/ useCapture param" vs "onfocusout" for FF browser support
-    this.container.addEventListener('blur', this.onFocusOut, true);
   }
 
   componentDidUpdate(prevProps) {
@@ -181,10 +177,9 @@ class SingleDatePicker extends React.PureComponent {
 
   /* istanbul ignore next */
   componentWillUnmount() {
-    if (this.removeEventListener) this.removeEventListener();
+    if (this.removeResizeEventListener) this.removeResizeEventListener();
+    if (this.removeFocusOutEventListener) this.removeFocusOutEventListener();
     if (this.enableScroll) this.enableScroll();
-
-    this.container.removeEventListener('blur', this.onFocusOut, true);
   }
 
   onOutsideClick(event) {
@@ -252,10 +247,9 @@ class SingleDatePicker extends React.PureComponent {
   }
 
   onFocusOut(e) {
-    if (!this.container.contains(e.target || e.relatedTarget)) {
-      const { onFocusChange } = this.props;
-      onFocusChange({ focused: false });
-    }
+    const { onFocusChange } = this.props;
+    if (this.container.contains(e.relatedTarget || e.target)) return;
+    onFocusChange({ focused: false });
   }
 
   setDayPickerContainerRef(ref) {
@@ -263,7 +257,28 @@ class SingleDatePicker extends React.PureComponent {
   }
 
   setContainerRef(ref) {
+    if (ref === this.container) return;
+    this.removeEventListeners();
+
     this.container = ref;
+    if (!ref) return;
+
+    this.addEventListeners();
+  }
+
+  addEventListeners() {
+    // We manually set event because React has not implemented onFocusIn/onFocusOut.
+    // Keep an eye on https://github.com/facebook/react/issues/6410 for updates
+    // We use "blur w/ useCapture param" vs "onfocusout" for FF browser support
+    this.removeFocusOutEventListener = addEventListener(
+      this.container,
+      'focusout',
+      this.onFocusOut,
+    );
+  }
+
+  removeEventListeners() {
+    if (this.removeFocusOutEventListener) this.removeFocusOutEventListener();
   }
 
   disableScroll() {

From 7f35ad46b3964dd72f6a58592061b30308e66df2 Mon Sep 17 00:00:00 2001
From: Bailey Stoner <monokrome@monokro.me>
Date: Mon, 14 Jan 2019 11:44:11 -0800
Subject: [PATCH 350/618] Fix issue where children had no default props.

---
 src/components/SingleDatePickerInputController.jsx | 4 +++-
 test/components/.tern-port                         | 1 -
 2 files changed, 3 insertions(+), 2 deletions(-)
 delete mode 100644 test/components/.tern-port

diff --git a/src/components/SingleDatePickerInputController.jsx b/src/components/SingleDatePickerInputController.jsx
index 600ecfa403..4982de4014 100644
--- a/src/components/SingleDatePickerInputController.jsx
+++ b/src/components/SingleDatePickerInputController.jsx
@@ -72,6 +72,8 @@ const propTypes = forbidExtraProps({
 });
 
 const defaultProps = {
+  children: null,
+
   date: null,
   focused: false,
 
@@ -254,7 +256,7 @@ export default class SingleDatePickerInputController extends React.PureComponent
         regular={regular}
         verticalSpacing={verticalSpacing}
       >
-        {children}
+        {children && children}
       </SingleDatePickerInput>
     );
   }
diff --git a/test/components/.tern-port b/test/components/.tern-port
deleted file mode 100644
index 11cb151f51..0000000000
--- a/test/components/.tern-port
+++ /dev/null
@@ -1 +0,0 @@
-56872
\ No newline at end of file

From b1d2abaac2580262858aaa1ead496442004bca11 Mon Sep 17 00:00:00 2001
From: Bailey Stoner <monokrome@monokro.me>
Date: Mon, 14 Jan 2019 13:15:15 -0800
Subject: [PATCH 351/618] Add tests ensuring that DateRangePicker focusout
 works as expected.

---
 test/components/DateRangePicker_spec.jsx | 30 ++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/test/components/DateRangePicker_spec.jsx b/test/components/DateRangePicker_spec.jsx
index bdcd013b12..f84462b8e1 100644
--- a/test/components/DateRangePicker_spec.jsx
+++ b/test/components/DateRangePicker_spec.jsx
@@ -567,6 +567,36 @@ describe('DateRangePicker', () => {
       wrapper.instance().onDayPickerBlur();
       expect(wrapper.state().showKeyboardShortcuts).to.equal(false);
     });
+
+    it('tabbing out with keyboard behaves as an outside click', () => {
+      const target = sinon.stub();
+      const onOutsideClick = sinon.stub();
+      const dayPickerContainer = {
+        addEventListener: sinon.stub(),
+        contains: sinon.stub().returns(false),
+      };
+      const wrapper = shallow((<DateRangePicker {...requiredProps} />)).dive();
+      wrapper.instance().setDayPickerContainerRef(dayPickerContainer);
+      wrapper.instance().onOutsideClick = onOutsideClick;
+      expect(onOutsideClick.callCount).to.equal(0);
+      wrapper.instance().onDayPickerFocusOut({ key: 'Tab', shiftKey: false, target });
+      expect(onOutsideClick.callCount).to.equal(1);
+    });
+
+
+    it('tabbing within itself does not behave as an outside click', () => {
+      const target = sinon.stub();
+      const onOutsideClick = sinon.stub();
+      const dayPickerContainer = {
+        addEventListener: sinon.stub(),
+        contains: sinon.stub().returns(true),
+      };
+      const wrapper = shallow((<DateRangePicker {...requiredProps} />)).dive();
+      wrapper.instance().setDayPickerContainerRef(dayPickerContainer);
+      wrapper.instance().onOutsideClick = onOutsideClick;
+      wrapper.instance().onDayPickerFocusOut({ key: 'Tab', shiftKey: false, target });
+      expect(onOutsideClick.callCount).to.equal(0);
+    });
   });
 
   describe('#showKeyboardShortcutsPanel', () => {

From 19bdce9d926793b11fd0eeba61556b42f330f7ef Mon Sep 17 00:00:00 2001
From: Bailey Stoner <monokrome@monokro.me>
Date: Tue, 22 Jan 2019 14:56:17 -0800
Subject: [PATCH 352/618] Add a comment explaining what is happening here.

---
 src/components/DateRangePicker.jsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index c23fcfd141..4ae3545767 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -242,6 +242,12 @@ class DateRangePicker extends React.PureComponent {
   }
 
   onDayPickerFocusOut(event) {
+    // In cases where **relatedTarget** is not null, it points to the right
+    // element here. However, in cases where it is null (such as clicking on a
+    // specific day), the appropriate value is **event.target**.
+    //
+    // We handle both situations here by using the ` || ` operator to fallback
+    // to *event.target** when **relatedTarget** is not provided.
     if (this.dayPickerContainer.contains(event.relatedTarget || event.target)) return;
     this.onOutsideClick(event);
   }

From 84177a30400a1799400bae54723876d9d5a9d81e Mon Sep 17 00:00:00 2001
From: Bailey Stoner <monokrome@monokro.me>
Date: Tue, 22 Jan 2019 15:05:55 -0800
Subject: [PATCH 353/618] Rename to `currentDateOffset`

I'm worried that maybe this feels a bit redundant since anything in
`this.state` should be "current", but it does help to solve the issue w/
naming being weird?...
---
 src/components/DayPickerRangeController.jsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 9345022dae..ec84c217d2 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -551,10 +551,10 @@ export default class DayPickerRangeController extends React.PureComponent {
     const {
       hoverDate,
       visibleDays,
-      dateOffset: currentDateOffset,
+      currentDateOffset,
     } = this.state;
 
-    let dateOffset = null;
+    let nextDateOffset = null;
 
     if (focusedInput) {
       const hasOffset = startDateOffset || endDateOffset;
@@ -564,13 +564,13 @@ export default class DayPickerRangeController extends React.PureComponent {
         const start = getSelectedDateOffset(startDateOffset, day);
         const end = getSelectedDateOffset(endDateOffset, day, rangeDay => rangeDay.add(1, 'day'));
 
-        dateOffset = {
+        nextDateOffset = {
           start,
           end,
         };
 
         // eslint-disable-next-line react/destructuring-assignment
-        if (this.state.dateOffset && currentDateOffset.start && currentDateOffset.end) {
+        if (this.state.nextDateOffset && currentDateOffset.start && currentDateOffset.end) {
           modifiers = this.deleteModifierFromRange(modifiers, currentDateOffset.start, currentDateOffset.end, 'hovered-offset');
         }
         modifiers = this.addModifierToRange(modifiers, start, end, 'hovered-offset');
@@ -622,7 +622,7 @@ export default class DayPickerRangeController extends React.PureComponent {
 
       this.setState({
         hoverDate: day,
-        dateOffset,
+        currentDateOffset: nextDateOffset,
         visibleDays: {
           ...visibleDays,
           ...modifiers,
@@ -633,14 +633,14 @@ export default class DayPickerRangeController extends React.PureComponent {
 
   onDayMouseLeave(day) {
     const { startDate, endDate, minimumNights } = this.props;
-    const { hoverDate, visibleDays, dateOffset } = this.state;
+    const { hoverDate, visibleDays, currentDateOffset } = this.state;
     if (this.isTouchDevice || !hoverDate) return;
 
     let modifiers = {};
     modifiers = this.deleteModifier(modifiers, hoverDate, 'hovered');
 
-    if (dateOffset) {
-      modifiers = this.deleteModifierFromRange(modifiers, dateOffset.start, dateOffset.end, 'hovered-offset');
+    if (currentDateOffset) {
+      modifiers = this.deleteModifierFromRange(modifiers, currentDateOffset.start, currentDateOffset.end, 'hovered-offset');
     }
 
     if (startDate && !endDate && isAfterDay(hoverDate, startDate)) {

From 2411c3c67207de647abde90ffaa5f6b51da539aa Mon Sep 17 00:00:00 2001
From: Bailey Stoner <monokrome@monokro.me>
Date: Tue, 22 Jan 2019 15:06:42 -0800
Subject: [PATCH 354/618] Prevent redundancy by renaming local instead of
 state.

---
 src/components/DayPickerRangeController.jsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index ec84c217d2..2ba4192283 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -551,7 +551,7 @@ export default class DayPickerRangeController extends React.PureComponent {
     const {
       hoverDate,
       visibleDays,
-      currentDateOffset,
+      dateOffset,
     } = this.state;
 
     let nextDateOffset = null;
@@ -570,8 +570,8 @@ export default class DayPickerRangeController extends React.PureComponent {
         };
 
         // eslint-disable-next-line react/destructuring-assignment
-        if (this.state.nextDateOffset && currentDateOffset.start && currentDateOffset.end) {
-          modifiers = this.deleteModifierFromRange(modifiers, currentDateOffset.start, currentDateOffset.end, 'hovered-offset');
+        if (this.state.nextDateOffset && dateOffset.start && dateOffset.end) {
+          modifiers = this.deleteModifierFromRange(modifiers, dateOffset.start, dateOffset.end, 'hovered-offset');
         }
         modifiers = this.addModifierToRange(modifiers, start, end, 'hovered-offset');
       }
@@ -622,7 +622,7 @@ export default class DayPickerRangeController extends React.PureComponent {
 
       this.setState({
         hoverDate: day,
-        currentDateOffset: nextDateOffset,
+        dateOffset: nextDateOffset,
         visibleDays: {
           ...visibleDays,
           ...modifiers,
@@ -633,14 +633,14 @@ export default class DayPickerRangeController extends React.PureComponent {
 
   onDayMouseLeave(day) {
     const { startDate, endDate, minimumNights } = this.props;
-    const { hoverDate, visibleDays, currentDateOffset } = this.state;
+    const { hoverDate, visibleDays, dateOffset } = this.state;
     if (this.isTouchDevice || !hoverDate) return;
 
     let modifiers = {};
     modifiers = this.deleteModifier(modifiers, hoverDate, 'hovered');
 
-    if (currentDateOffset) {
-      modifiers = this.deleteModifierFromRange(modifiers, currentDateOffset.start, currentDateOffset.end, 'hovered-offset');
+    if (dateOffset) {
+      modifiers = this.deleteModifierFromRange(modifiers, dateOffset.start, dateOffset.end, 'hovered-offset');
     }
 
     if (startDate && !endDate && isAfterDay(hoverDate, startDate)) {

From 98409065101a6140e3168daf4a6c2a2e4f7f9ae6 Mon Sep 17 00:00:00 2001
From: Bailey Stoner <monokrome@monokro.me>
Date: Tue, 22 Jan 2019 15:08:44 -0800
Subject: [PATCH 355/618] Only show children if focused. Using `children &&`
 was odd.

---
 src/components/SingleDatePickerInputController.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SingleDatePickerInputController.jsx b/src/components/SingleDatePickerInputController.jsx
index 4982de4014..dd2b31eba4 100644
--- a/src/components/SingleDatePickerInputController.jsx
+++ b/src/components/SingleDatePickerInputController.jsx
@@ -256,7 +256,7 @@ export default class SingleDatePickerInputController extends React.PureComponent
         regular={regular}
         verticalSpacing={verticalSpacing}
       >
-        {children && children}
+        {focused && children}
       </SingleDatePickerInput>
     );
   }

From dd9d6b27b300dc8e31d89fcd982d525845e9c698 Mon Sep 17 00:00:00 2001
From: Bailey Stoner <monokrome@monokro.me>
Date: Tue, 22 Jan 2019 15:26:23 -0800
Subject: [PATCH 356/618] Using `focused &&` broke a test, but plain
 `{children}` should work.

---
 src/components/SingleDatePickerInputController.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SingleDatePickerInputController.jsx b/src/components/SingleDatePickerInputController.jsx
index dd2b31eba4..cf3c28d320 100644
--- a/src/components/SingleDatePickerInputController.jsx
+++ b/src/components/SingleDatePickerInputController.jsx
@@ -256,7 +256,7 @@ export default class SingleDatePickerInputController extends React.PureComponent
         regular={regular}
         verticalSpacing={verticalSpacing}
       >
-        {focused && children}
+        {children}
       </SingleDatePickerInput>
     );
   }

From e137cea7eefd7f5eb14a526abe790d85ea364f7e Mon Sep 17 00:00:00 2001
From: Bailey Stoner <monokrome@monokro.me>
Date: Tue, 22 Jan 2019 15:56:32 -0800
Subject: [PATCH 357/618] Fix issue using `this.state` as opposed to
 deconstructed value.

---
 src/components/DayPickerRangeController.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 2ba4192283..4a0fbd4c41 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -570,7 +570,7 @@ export default class DayPickerRangeController extends React.PureComponent {
         };
 
         // eslint-disable-next-line react/destructuring-assignment
-        if (this.state.nextDateOffset && dateOffset.start && dateOffset.end) {
+        if (dateOffset && dateOffset.start && dateOffset.end) {
           modifiers = this.deleteModifierFromRange(modifiers, dateOffset.start, dateOffset.end, 'hovered-offset');
         }
         modifiers = this.addModifierToRange(modifiers, start, end, 'hovered-offset');

From e8b71d2b121213a2f695fd370be50e717abb5194 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Wed, 23 Jan 2019 10:12:55 -0800
Subject: [PATCH 358/618] Version 18.4.1

---
 CHANGELOG.md | 3 +++
 package.json | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 10adc22d12..4556eacb87 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,9 @@
 - []  ([#](https://github.com/airbnb/react-dates/pull/))
 -->
 
+## 18.4.1
+- [fix] Make DRP and SDP calendars tabbable from the inputs ([#1499](https://github.com/airbnb/react-dates/pull/1499))
+
 ## 18.4.0
 - [new] Clarify VoiceOver text for dates selected as start-date and end-date ([#1501](https://github.com/airbnb/react-dates/pull/1501))
 
diff --git a/package.json b/package.json
index c45640d683..30c2e3b85a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "18.4.0",
+  "version": "18.4.1",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 5789ad95c53c72829adf4ec344a2f9e54bbd8fa8 Mon Sep 17 00:00:00 2001
From: Nicole Kinser <nicole.kinser@airbnb.com>
Date: Wed, 30 Jan 2019 11:26:53 -0800
Subject: [PATCH 359/618] Add aria-disabled prop to CalendarDay and
 CustomizableCalendarDay

---
 src/components/CalendarDay.jsx             | 1 +
 src/components/CustomizableCalendarDay.jsx | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/components/CalendarDay.jsx b/src/components/CalendarDay.jsx
index 4832e7c07a..276bb5ef3d 100644
--- a/src/components/CalendarDay.jsx
+++ b/src/components/CalendarDay.jsx
@@ -142,6 +142,7 @@ class CalendarDay extends React.PureComponent {
         )}
         role="button" // eslint-disable-line jsx-a11y/no-noninteractive-element-to-interactive-role
         ref={this.setButtonRef}
+        aria-disabled={modifiers.has('blocked')}
         aria-label={ariaLabel}
         onMouseEnter={(e) => { this.onDayMouseEnter(day, e); }}
         onMouseLeave={(e) => { this.onDayMouseLeave(day, e); }}
diff --git a/src/components/CustomizableCalendarDay.jsx b/src/components/CustomizableCalendarDay.jsx
index 4d23e9a69a..fa864a83ff 100644
--- a/src/components/CustomizableCalendarDay.jsx
+++ b/src/components/CustomizableCalendarDay.jsx
@@ -335,6 +335,7 @@ class CustomizableCalendarDay extends React.PureComponent {
         )}
         role="button" // eslint-disable-line jsx-a11y/no-noninteractive-element-to-interactive-role
         ref={this.setButtonRef}
+        aria-disabled={modifiers.has('blocked')}
         aria-label={ariaLabel}
         onMouseEnter={(e) => { this.onDayMouseEnter(day, e); }}
         onMouseLeave={(e) => { this.onDayMouseLeave(day, e); }}

From 60f503695b63616810949a23ee85fe71856c12f7 Mon Sep 17 00:00:00 2001
From: Marcos Avila <m.avila@globant.com>
Date: Fri, 1 Feb 2019 15:39:00 -0300
Subject: [PATCH 360/618] Fixes the focus out event in IE11

---
 src/components/DateRangePicker.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 4ae3545767..8ada755948 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -248,7 +248,7 @@ class DateRangePicker extends React.PureComponent {
     //
     // We handle both situations here by using the ` || ` operator to fallback
     // to *event.target** when **relatedTarget** is not provided.
-    if (this.dayPickerContainer.contains(event.relatedTarget || event.target)) return;
+    if (this.dayPickerContainer.contains(event.relatedTarget || event.target) || this.dayPickerContainer.contains(event.target)) return;
     this.onOutsideClick(event);
   }
 

From 82b6752b595d32b3bf95f6c44412623707421e33 Mon Sep 17 00:00:00 2001
From: Marcos Avila <m.avila@globant.com>
Date: Fri, 1 Feb 2019 16:00:53 -0300
Subject: [PATCH 361/618] Fixes the focus out event in IE11 (#2)

---
 src/components/DateRangePicker.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 8ada755948..b46dedeaf0 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -248,7 +248,8 @@ class DateRangePicker extends React.PureComponent {
     //
     // We handle both situations here by using the ` || ` operator to fallback
     // to *event.target** when **relatedTarget** is not provided.
-    if (this.dayPickerContainer.contains(event.relatedTarget || event.target) || this.dayPickerContainer.contains(event.target)) return;
+    if (this.dayPickerContainer.contains(event.relatedTarget || event.target)
+      || this.dayPickerContainer.contains(event.target)) return;
     this.onOutsideClick(event);
   }
 

From 3b23397c5de370135eb521f8bae42545eeeaeb16 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Sun, 3 Feb 2019 14:23:02 -0800
Subject: [PATCH 362/618] [Dev Deps] update `why-did-you-update`

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 30c2e3b85a..9a2e8e4182 100644
--- a/package.json
+++ b/package.json
@@ -108,7 +108,7 @@
     "sinon-sandbox": "^2.0.0",
     "style-loader": "^0.20.3",
     "webpack": "^4.23.1",
-    "why-did-you-update": "^0.1.1"
+    "why-did-you-update": "^1.0.6"
   },
   "dependencies": {
     "airbnb-prop-types": "^2.10.0",

From 23556987c43228d7cb89c6506c18fa3571ae3adf Mon Sep 17 00:00:00 2001
From: Jake Clements <jclements@opentable.com>
Date: Tue, 11 Sep 2018 13:17:11 +1000
Subject: [PATCH 363/618] Add date offset functionality to DateRangePicker

---
 src/components/DateRangePicker.jsx            |  6 +++
 src/components/DayPickerRangeController.jsx   |  4 ++
 src/shapes/DateRangePickerShape.js            |  2 +
 stories/DateRangePicker_calendar.js           |  6 +++
 test/components/DateRangePicker_spec.jsx      | 42 +++++++++++++++++++
 .../DayPickerRangeController_spec.jsx         | 29 +++++++++++++
 6 files changed, 89 insertions(+)

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 4ae3545767..95bfbeafc6 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -51,6 +51,8 @@ const defaultProps = {
   // input related props
   startDatePlaceholderText: 'Start Date',
   endDatePlaceholderText: 'End Date',
+  startDateOffset: undefined,
+  endDateOffset: undefined,
   disabled: false,
   required: false,
   readOnly: false,
@@ -402,7 +404,9 @@ class DateRangePicker extends React.PureComponent {
       enableOutsideDays,
       focusedInput,
       startDate,
+      startDateOffset,
       endDate,
+      endDateOffset,
       minimumNights,
       keepOpenOnDateSelect,
       renderCalendarDay,
@@ -479,7 +483,9 @@ class DateRangePicker extends React.PureComponent {
           onClose={onClose}
           focusedInput={focusedInput}
           startDate={startDate}
+          startDateOffset={startDateOffset}
           endDate={endDate}
+          endDateOffset={endDateOffset}
           monthFormat={monthFormat}
           renderMonthText={renderMonthText}
           withPortal={withAnyPortal}
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 4a0fbd4c41..039b63b4c2 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -491,6 +491,10 @@ export default class DayPickerRangeController extends React.PureComponent {
       startDate = getSelectedDateOffset(startDateOffset, day);
       endDate = getSelectedDateOffset(endDateOffset, day);
 
+      if (this.isBlocked(startDate) || this.isBlocked(endDate)) {
+        return;
+      }
+
       if (!keepOpenOnDateSelect) {
         onFocusChange(null);
         onClose({ startDate, endDate });
diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js
index 5c73cfa4d9..05454c153e 100644
--- a/src/shapes/DateRangePickerShape.js
+++ b/src/shapes/DateRangePickerShape.js
@@ -28,6 +28,8 @@ export default {
   // input related props
   startDateId: PropTypes.string.isRequired,
   startDatePlaceholderText: PropTypes.string,
+  startDateOffset: PropTypes.func,
+  endDateOffset: PropTypes.func,
   endDateId: PropTypes.string.isRequired,
   endDatePlaceholderText: PropTypes.string,
   disabled: DisabledShape,
diff --git a/stories/DateRangePicker_calendar.js b/stories/DateRangePicker_calendar.js
index e5de2142fe..c465937f70 100644
--- a/stories/DateRangePicker_calendar.js
+++ b/stories/DateRangePicker_calendar.js
@@ -59,6 +59,12 @@ storiesOf('DRP - Calendar Props', module)
   .add('3 months', withInfo()(() => (
     <DateRangePickerWrapper numberOfMonths={3} autoFocus />
   )))
+  .add('with 7 days range selection', withInfo()(() => (
+    <DateRangePickerWrapper
+      startDateOffset={day => day.subtract(3, 'days')}
+      endDateOffset={day => day.add(3, 'days')}
+    />
+  )))
   .add('with custom day size', withInfo()(() => (
     <DateRangePickerWrapper daySize={50} autoFocus />
   )))
diff --git a/test/components/DateRangePicker_spec.jsx b/test/components/DateRangePicker_spec.jsx
index f84462b8e1..62413f260f 100644
--- a/test/components/DateRangePicker_spec.jsx
+++ b/test/components/DateRangePicker_spec.jsx
@@ -699,4 +699,46 @@ describe('DateRangePicker', () => {
       });
     });
   });
+
+  describe('dateOffsets', () => {
+    describe('startDateOffset is passed in', () => {
+      it('Should pass startDateOffset to DayPickerRangeController', () => {
+        const startDate = moment('2018-10-17');
+        const onDatesChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <DateRangePicker
+            {...requiredProps}
+            startDateOffset={date => date.subtract(5, 'days')}
+            onDatesChange={onDatesChangeStub}
+            focusedInput={START_DATE}
+          />
+        )).dive();
+
+        const dayPicker = wrapper.find(DayPickerRangeController);
+        const dayPickerStartDateOffset = dayPicker.props().startDateOffset(startDate);
+
+        expect(dayPickerStartDateOffset.format()).to.equal(startDate.format());
+      });
+    });
+
+    describe('endDateOffset is passed in', () => {
+      it('Should pass endDateOffset to DayPickerRangeController', () => {
+        const endDate = moment('2018-10-17', 'YYYY-MM-DD');
+        const onDatesChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <DateRangePicker
+            {...requiredProps}
+            endDateOffset={date => date.subtract(5, 'days')}
+            onDatesChange={onDatesChangeStub}
+            focusedInput={START_DATE}
+          />
+        )).dive();
+
+        const dayPicker = wrapper.find(DayPickerRangeController);
+        const dayPickerEndDateOffset = dayPicker.props().endDateOffset(endDate);
+
+        expect(dayPickerEndDateOffset.format()).to.equal(endDate.format());
+      });
+    });
+  });
 });
diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index b57f1c9354..bf82146820 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -1563,6 +1563,35 @@ describe('DayPickerRangeController', () => {
         expect(args.endDate.format()).to.equal(clickDate.clone().add(4, 'days').format());
       });
 
+      it('does not call props.onDatesChange with startDate === startDateOffset(date) and endDate === endDateOffset(date)', () => {
+        const clickDate = moment(today).clone().add(2, 'days');
+        const onDatesChangeStub = sinon.spy();
+        const wrapper = shallow((
+          <DayPickerRangeController
+            onDatesChange={onDatesChangeStub}
+            startDateOffset={day => day.subtract(2, 'days')}
+            endDateOffset={day => day.add(4, 'days')}
+            isOutsideRange={day => day.isAfter(moment(today))}
+          />
+        ));
+        wrapper.instance().onDayClick(clickDate);
+        expect(onDatesChangeStub).to.have.property('callCount', 0);
+      });
+
+      it('does not call props.onDatesChange when dateOffset isOutsideRange', () => {
+        const clickDate = moment(today);
+        const onDatesChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <DayPickerRangeController
+            onDatesChange={onDatesChangeStub}
+            endDateOffset={day => day.add(5, 'days')}
+            isOutsideRange={day => day.isAfter(moment(today).clone().add(1, 'days'))}
+          />
+        ));
+        wrapper.instance().onDayClick(clickDate);
+        expect(onDatesChangeStub).to.have.property('callCount', 0);
+      });
+
       it('calls props.onDatesChange with startDate === startDateOffset(date) and endDate === selectedDate when endDateOffset not provided', () => {
         const clickDate = moment(today).clone().add(2, 'days');
         const onDatesChangeStub = sinon.stub();

From 4076cc5a7a51b0f5e28c11a4ba9e6c4da119cfab Mon Sep 17 00:00:00 2001
From: Nicole Kinser <nicole.kinser@airbnb.com>
Date: Tue, 5 Feb 2019 13:29:39 -0800
Subject: [PATCH 364/618] Add tests to demonstrate how logic of onDatesChange
 can affect onFocusChange

---
 .../DayPickerRangeController_spec.jsx         | 51 +++++++++++++++++++
 1 file changed, 51 insertions(+)

diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index bf82146820..c5de000418 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -1622,6 +1622,57 @@ describe('DayPickerRangeController', () => {
         expect(args.endDate.format()).to.equal(clickDate.clone().add(12, 'days').format());
       });
     });
+
+    describe('logic in props.onDatesChange affects props.onFocusChange', () => {
+      let preventFocusChange;
+      let focusedInput;
+      let onDatesChange;
+      let onFocusChange;
+      beforeEach(() => {
+        preventFocusChange = false;
+        focusedInput = START_DATE;
+        onDatesChange = ({ startDate }) => {
+          if (isSameDay(startDate, today)) preventFocusChange = true;
+        };
+        onFocusChange = (input) => {
+          if (!preventFocusChange) {
+            focusedInput = input;
+          } else {
+            preventFocusChange = false;
+          }
+        };
+      });
+
+      it('calls onDayClick with a day that prevents a focus change', () => {
+        const clickDate = moment(today);
+        const wrapper = shallow((
+          <DayPickerRangeController
+            onDatesChange={onDatesChange}
+            onFocusChange={onFocusChange}
+            focusedInput={START_DATE}
+          />
+        ));
+        // The first day click sets preventFocusChange to true, but it doesn't take effect until the
+        // second day click because onFocusChange is called before onDatesChange
+        wrapper.instance().onDayClick(clickDate);
+        expect(focusedInput).to.equal(END_DATE);
+        wrapper.instance().onDayClick(clickDate.clone().add(1, 'days'));
+        expect(focusedInput).to.equal(END_DATE);
+      });
+
+      it('calls onDayClick with a day that does not prevent a focus change', () => {
+        const clickDate = moment(today).clone().add(2, 'days');
+        const wrapper = shallow((
+          <DayPickerRangeController
+            onDatesChange={onDatesChange}
+            onFocusChange={onFocusChange}
+            focusedInput={START_DATE}
+          />
+        ));
+        wrapper.instance().onDayClick(clickDate);
+        expect(focusedInput).to.equal(END_DATE);
+      });
+    });
   });
 
   describe('#onDayMouseEnter', () => {

From fe1d97cfb8c02d5b8023801233f733cefb7b46ab Mon Sep 17 00:00:00 2001
From: Nicole Kinser <nicole.kinser@airbnb.com>
Date: Mon, 4 Feb 2019 15:10:34 -0800
Subject: [PATCH 365/618] Move the call to onDatesChange before the call to
 onFocusChange

---
 src/components/DayPickerRangeController.jsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 039b63b4c2..e2c538081b 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -490,6 +490,7 @@ export default class DayPickerRangeController extends React.PureComponent {
     if (startDateOffset || endDateOffset) {
       startDate = getSelectedDateOffset(startDateOffset, day);
       endDate = getSelectedDateOffset(endDateOffset, day);
+      onDatesChange({ startDate, endDate });
 
       if (this.isBlocked(startDate) || this.isBlocked(endDate)) {
         return;
@@ -512,6 +513,8 @@ export default class DayPickerRangeController extends React.PureComponent {
         }
       }
 
+      onDatesChange({ startDate, endDate });
+
       if (isEndDateDisabled && !isStartDateAfterEndDate) {
         onFocusChange(null);
         onClose({ startDate, endDate });
@@ -523,9 +526,11 @@ export default class DayPickerRangeController extends React.PureComponent {
 
       if (!startDate) {
         endDate = day;
+        onDatesChange({ startDate, endDate });
         onFocusChange(START_DATE);
       } else if (isInclusivelyAfterDay(day, firstAllowedEndDate)) {
         endDate = day;
+        onDatesChange({ startDate, endDate });
         if (!keepOpenOnDateSelect) {
           onFocusChange(null);
           onClose({ startDate, endDate });
@@ -533,10 +538,14 @@ export default class DayPickerRangeController extends React.PureComponent {
       } else if (disabled !== START_DATE) {
         startDate = day;
         endDate = null;
+        onDatesChange({ startDate, endDate });
+      } else {
+        onDatesChange({ startDate, endDate });
       }
+    } else {
+      onDatesChange({ startDate, endDate });
     }
 
-    onDatesChange({ startDate, endDate });
     onBlur();
   }
 

From c89cc3c0ce4bd040a3ef5e5197bd0aaa32c0ab4a Mon Sep 17 00:00:00 2001
From: Nicole Kinser <nicole.kinser@airbnb.com>
Date: Mon, 4 Feb 2019 16:47:07 -0800
Subject: [PATCH 366/618] resolved rebased

---
 src/components/DayPickerRangeController.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index e2c538081b..13b67e2807 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -490,12 +490,13 @@ export default class DayPickerRangeController extends React.PureComponent {
     if (startDateOffset || endDateOffset) {
       startDate = getSelectedDateOffset(startDateOffset, day);
       endDate = getSelectedDateOffset(endDateOffset, day);
-      onDatesChange({ startDate, endDate });
 
       if (this.isBlocked(startDate) || this.isBlocked(endDate)) {
         return;
       }
 
+      onDatesChange({ startDate, endDate });
+
       if (!keepOpenOnDateSelect) {
         onFocusChange(null);
         onClose({ startDate, endDate });

From aaf2ab645f9c614be0cec563f951c0a64850d727 Mon Sep 17 00:00:00 2001
From: Nicole Kinser <nicole.kinser@airbnb.com>
Date: Tue, 5 Feb 2019 13:15:05 -0800
Subject: [PATCH 367/618] added tests to verify onDatesChange only called once

---
 .../DayPickerRangeController_spec.jsx         | 127 ++++++++++++++++++
 1 file changed, 127 insertions(+)

diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index c5de000418..27773020b4 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -1623,6 +1623,133 @@ describe('DayPickerRangeController', () => {
       });
     });
 
+    describe('props.onDatesChange only called once in onDayClick', () => {
+      it('calls props.onDatesChange once when focusedInput === START_DATE', () => {
+        const clickDate = moment(today);
+        const onDatesChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <DayPickerRangeController
+            onDatesChange={onDatesChangeStub}
+            focusedInput={START_DATE}
+            endDate={null}
+          />
+        ));
+        wrapper.instance().onDayClick(clickDate);
+        expect(onDatesChangeStub.callCount).to.equal(1);
+        const args = onDatesChangeStub.getCall(0).args[0];
+        expect(args.startDate.format()).to.equal(clickDate.clone().format());
+        expect(args.endDate).to.equal(null);
+      });
+
+      it('calls props.onDatesChange once when focusedInput === END_DATE and there is no startDate', () => {
+        const clickDate = moment(today);
+        const onDatesChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <DayPickerRangeController
+            onDatesChange={onDatesChangeStub}
+            focusedInput={END_DATE}
+            startDate={null}
+          />
+        ));
+        wrapper.instance().onDayClick(clickDate);
+        expect(onDatesChangeStub.callCount).to.equal(1);
+        const args = onDatesChangeStub.getCall(0).args[0];
+        expect(args.startDate).to.equal(null);
+        expect(args.endDate.format()).to.equal(clickDate.clone().format());
+      });
+
+      it('calls props.onDatesChange once when focusedInput === END_DATE and the day is a valid endDate', () => {
+        const clickDate = moment(today);
+        const startDate = clickDate.clone().subtract(2, 'days');
+        const onDatesChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <DayPickerRangeController
+            onDatesChange={onDatesChangeStub}
+            focusedInput={END_DATE}
+            minimumNights={2}
+            startDate={startDate}
+          />
+        ));
+        wrapper.instance().onDayClick(clickDate);
+        expect(onDatesChangeStub.callCount).to.equal(1);
+        const args = onDatesChangeStub.getCall(0).args[0];
+        expect(args.startDate.format()).to.equal(startDate.clone().format());
+        expect(args.endDate.format()).to.equal(clickDate.clone().format());
+      });
+
+      it('calls props.onDatesChange once when focusedInput === END_DATE, the day is an invalid endDate, and disabled !== START_DATE', () => {
+        const clickDate = moment(today);
+        const onDatesChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <DayPickerRangeController
+            onDatesChange={onDatesChangeStub}
+            focusedInput={END_DATE}
+            minimumNights={2}
+            startDate={clickDate.clone().add(1, 'days')}
+            endDate={null}
+          />
+        ));
+        wrapper.instance().onDayClick(clickDate);
+        expect(onDatesChangeStub.callCount).to.equal(1);
+        const args = onDatesChangeStub.getCall(0).args[0];
+        expect(args.startDate.format()).to.equal(clickDate.clone().format());
+        expect(args.endDate).to.equal(null);
+      });
+
+      it('calls props.onDatesChange once when focusedInput === END_DATE and the day is an invalid endDate', () => {
+        const clickDate = moment(today);
+        const startDate = clickDate.clone().add(1, 'days');
+        const onDatesChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <DayPickerRangeController
+            onDatesChange={onDatesChangeStub}
+            focusedInput={END_DATE}
+            disabled={START_DATE}
+            minimumNights={2}
+            startDate={startDate}
+            endDate={null}
+          />
+        ));
+        wrapper.instance().onDayClick(clickDate);
+        expect(onDatesChangeStub.callCount).to.equal(1);
+        const args = onDatesChangeStub.getCall(0).args[0];
+        expect(args.startDate.format()).to.equal(startDate.clone().format());
+        expect(args.endDate).to.equal(null);
+      });
+
+      it('calls props.onDatesChange once when there is a startDateOffset', () => {
+        const clickDate = moment(today);
+        const onDatesChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <DayPickerRangeController
+            onDatesChange={onDatesChangeStub}
+            startDateOffset={day => day.subtract(2, 'days')}
+          />
+        ));
+        wrapper.instance().onDayClick(clickDate);
+        expect(onDatesChangeStub.callCount).to.equal(1);
+        const args = onDatesChangeStub.getCall(0).args[0];
+        expect(args.startDate.format()).to.equal(clickDate.clone().subtract(2, 'days').format());
+        expect(args.endDate.format()).to.equal(clickDate.clone().format());
+      });
+
+      it('calls props.onDatesChange once when there is a endDateOffset', () => {
+        const clickDate = moment(today);
+        const onDatesChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <DayPickerRangeController
+            onDatesChange={onDatesChangeStub}
+            endDateOffset={day => day.add(4, 'days')}
+          />
+        ));
+        wrapper.instance().onDayClick(clickDate);
+        expect(onDatesChangeStub.callCount).to.equal(1);
+        const args = onDatesChangeStub.getCall(0).args[0];
+        expect(args.startDate.format()).to.equal(clickDate.clone().format());
+        expect(args.endDate.format()).to.equal(clickDate.clone().add(4, 'days').format());
+      });
+    });
+
     describe('logic in props.onDatesChange affects props.onFocusChange', () => {
       let preventFocusChange;
       let focusedInput;

From 21e9bb5ef79ecc9f9e1f9c05129d3308937afd09 Mon Sep 17 00:00:00 2001
From: Nicole Kinser <nicole.kinser@airbnb.com>
Date: Tue, 5 Feb 2019 13:33:03 -0800
Subject: [PATCH 368/618] changed way I retrieve callCount

---
 test/components/DayPickerRangeController_spec.jsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index 27773020b4..851a54a138 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -1635,7 +1635,7 @@ describe('DayPickerRangeController', () => {
           />
         ));
         wrapper.instance().onDayClick(clickDate);
-        expect(onDatesChangeStub.callCount).to.equal(1);
+        expect(onDatesChangeStub).to.have.property('callCount', 1);
         const args = onDatesChangeStub.getCall(0).args[0];
         expect(args.startDate.format()).to.equal(clickDate.clone().format());
         expect(args.endDate).to.equal(null);
@@ -1652,7 +1652,7 @@ describe('DayPickerRangeController', () => {
           />
         ));
         wrapper.instance().onDayClick(clickDate);
-        expect(onDatesChangeStub.callCount).to.equal(1);
+        expect(onDatesChangeStub).to.have.property('callCount', 1);
         const args = onDatesChangeStub.getCall(0).args[0];
         expect(args.startDate).to.equal(null);
         expect(args.endDate.format()).to.equal(clickDate.clone().format());
@@ -1671,7 +1671,7 @@ describe('DayPickerRangeController', () => {
           />
         ));
         wrapper.instance().onDayClick(clickDate);
-        expect(onDatesChangeStub.callCount).to.equal(1);
+        expect(onDatesChangeStub).to.have.property('callCount', 1);
         const args = onDatesChangeStub.getCall(0).args[0];
         expect(args.startDate.format()).to.equal(startDate.clone().format());
         expect(args.endDate.format()).to.equal(clickDate.clone().format());
@@ -1690,7 +1690,7 @@ describe('DayPickerRangeController', () => {
           />
         ));
         wrapper.instance().onDayClick(clickDate);
-        expect(onDatesChangeStub.callCount).to.equal(1);
+        expect(onDatesChangeStub).to.have.property('callCount', 1);
         const args = onDatesChangeStub.getCall(0).args[0];
         expect(args.startDate.format()).to.equal(clickDate.clone().format());
         expect(args.endDate).to.equal(null);
@@ -1711,7 +1711,7 @@ describe('DayPickerRangeController', () => {
           />
         ));
         wrapper.instance().onDayClick(clickDate);
-        expect(onDatesChangeStub.callCount).to.equal(1);
+        expect(onDatesChangeStub).to.have.property('callCount', 1);
         const args = onDatesChangeStub.getCall(0).args[0];
         expect(args.startDate.format()).to.equal(startDate.clone().format());
         expect(args.endDate).to.equal(null);
@@ -1727,7 +1727,7 @@ describe('DayPickerRangeController', () => {
           />
         ));
         wrapper.instance().onDayClick(clickDate);
-        expect(onDatesChangeStub.callCount).to.equal(1);
+        expect(onDatesChangeStub).to.have.property('callCount', 1);
         const args = onDatesChangeStub.getCall(0).args[0];
         expect(args.startDate.format()).to.equal(clickDate.clone().subtract(2, 'days').format());
         expect(args.endDate.format()).to.equal(clickDate.clone().format());
@@ -1743,7 +1743,7 @@ describe('DayPickerRangeController', () => {
           />
         ));
         wrapper.instance().onDayClick(clickDate);
-        expect(onDatesChangeStub.callCount).to.equal(1);
+        expect(onDatesChangeStub).to.have.property('callCount', 1);
         const args = onDatesChangeStub.getCall(0).args[0];
         expect(args.startDate.format()).to.equal(clickDate.clone().format());
         expect(args.endDate.format()).to.equal(clickDate.clone().add(4, 'days').format());

From 95ee6367a99affec66bb524a8310a5490a2462f7 Mon Sep 17 00:00:00 2001
From: Nicole Kinser <nicole.kinser@airbnb.com>
Date: Tue, 5 Feb 2019 14:19:55 -0800
Subject: [PATCH 369/618] adjust test

---
 test/components/DayPickerRangeController_spec.jsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index 851a54a138..40e7282fef 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -1779,10 +1779,8 @@ describe('DayPickerRangeController', () => {
             focusedInput={START_DATE}
           />
         ));
-        // The first day click sets preventFocusChange to true, but it doesn't take effect until the
-        // second day click because onFocusChange is called before onDatesChange
         wrapper.instance().onDayClick(clickDate);
-        expect(focusedInput).to.equal(END_DATE);
+        expect(focusedInput).to.equal(START_DATE);
         wrapper.instance().onDayClick(clickDate.clone().add(1, 'days'));
         expect(focusedInput).to.equal(END_DATE);
       });

From 2d3e390e3ab747d0694288f527db41ee2954db93 Mon Sep 17 00:00:00 2001
From: Marcos Avila <m.avila@globant.com>
Date: Wed, 6 Feb 2019 15:26:15 -0300
Subject: [PATCH 370/618] Requested changes #1524

---
 src/components/DateRangePicker.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 0917b956a0..9cef6e4205 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -250,8 +250,9 @@ class DateRangePicker extends React.PureComponent {
     //
     // We handle both situations here by using the ` || ` operator to fallback
     // to *event.target** when **relatedTarget** is not provided.
-    if (this.dayPickerContainer.contains(event.relatedTarget || event.target)
-      || this.dayPickerContainer.contains(event.target)) return;
+    const { contains } = this.dayPickerContainer;
+    const { relatedTarget, target } = event;
+    if (contains(relatedTarget) || contains(target)) return;
     this.onOutsideClick(event);
   }
 

From e66ae14bb29f09433a847dfa24d00bfccdb2183e Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Wed, 6 Feb 2019 14:01:00 -0800
Subject: [PATCH 371/618] Version 18.5.0

---
 CHANGELOG.md | 4 ++++
 package.json | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4556eacb87..dc476745e6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,10 @@
 - []  ([#](https://github.com/airbnb/react-dates/pull/))
 -->
 
+## 18.5.0
+- [fix] Add `aria-disabled` attribute to the (Customizable)CalendarDay ([#1521](https://github.com/airbnb/react-dates/pull/1521))
+- [new] Add `startDateOffset` and `endDateOffset` props to the DRP ([#1252](https://github.com/airbnb/react-dates/pull/1252))
+
 ## 18.4.1
 - [fix] Make DRP and SDP calendars tabbable from the inputs ([#1499](https://github.com/airbnb/react-dates/pull/1499))
 
diff --git a/package.json b/package.json
index 9a2e8e4182..b66f5903d7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "18.4.1",
+  "version": "18.5.0",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 64f0be97843d3627593260e3a73ff6a568ca8a54 Mon Sep 17 00:00:00 2001
From: Marcos Avila <m.avila@globant.com>
Date: Wed, 6 Feb 2019 19:12:43 -0300
Subject: [PATCH 372/618] Requested changes #1524

---
 src/components/DateRangePicker.jsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 9cef6e4205..d3119ae6e0 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -250,9 +250,8 @@ class DateRangePicker extends React.PureComponent {
     //
     // We handle both situations here by using the ` || ` operator to fallback
     // to *event.target** when **relatedTarget** is not provided.
-    const { contains } = this.dayPickerContainer;
-    const { relatedTarget, target } = event;
-    if (contains(relatedTarget) || contains(target)) return;
+    const relatedTarget = event.relatedTarget === document.body ? event.target : event.relatedTarget || event.target;
+    if (this.dayPickerContainer.contains(relatedTarget)) return;
     this.onOutsideClick(event);
   }
 

From 188b4a99c88482ef21e6923b4f7dfe7029234ff8 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Wed, 6 Feb 2019 20:07:23 -0300
Subject: [PATCH 373/618] Update src/components/DateRangePicker.jsx

Co-Authored-By: marcos0x <marcos0x@gmail.com>
---
 src/components/DateRangePicker.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index d3119ae6e0..481fed5142 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -250,7 +250,7 @@ class DateRangePicker extends React.PureComponent {
     //
     // We handle both situations here by using the ` || ` operator to fallback
     // to *event.target** when **relatedTarget** is not provided.
-    const relatedTarget = event.relatedTarget === document.body ? event.target : event.relatedTarget || event.target;
+    const relatedTarget = event.relatedTarget === document.body ? event.target : (event.relatedTarget || event.target);
     if (this.dayPickerContainer.contains(relatedTarget)) return;
     this.onOutsideClick(event);
   }

From 143119d6d5971d6c043214e0699e100121e75d8b Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Wed, 6 Feb 2019 15:26:11 -0800
Subject: [PATCH 374/618] Version 19.0.0

---
 CHANGELOG.md | 3 +++
 package.json | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dc476745e6..5ccdeb31a3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,9 @@
 - []  ([#](https://github.com/airbnb/react-dates/pull/))
 -->
 
+## 19.0.0
+- [breaking] Call `onDatesChange` before `onFocusChange` in the DRP ([#1525](https://github.com/airbnb/react-dates/pull/1525))
+
 ## 18.5.0
 - [fix] Add `aria-disabled` attribute to the (Customizable)CalendarDay ([#1521](https://github.com/airbnb/react-dates/pull/1521))
 - [new] Add `startDateOffset` and `endDateOffset` props to the DRP ([#1252](https://github.com/airbnb/react-dates/pull/1252))
diff --git a/package.json b/package.json
index b66f5903d7..5a32662935 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "18.5.0",
+  "version": "19.0.0",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 5392e33c8c4b7c3994a1d08bd3d79c7380097b3d Mon Sep 17 00:00:00 2001
From: Marcos <marcos0x@gmail.com>
Date: Wed, 6 Feb 2019 21:40:24 -0300
Subject: [PATCH 375/618] Updates the comment

---
 src/components/DateRangePicker.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 481fed5142..e2aad78f89 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -246,7 +246,7 @@ class DateRangePicker extends React.PureComponent {
   onDayPickerFocusOut(event) {
     // In cases where **relatedTarget** is not null, it points to the right
     // element here. However, in cases where it is null (such as clicking on a
-    // specific day), the appropriate value is **event.target**.
+    // specific day) or it is **document.body** (IE11), the appropriate value is **event.target**.
     //
     // We handle both situations here by using the ` || ` operator to fallback
     // to *event.target** when **relatedTarget** is not provided.

From 1191688d2a21e2efa772eff410a7c0dc3be10c83 Mon Sep 17 00:00:00 2001
From: Marcos <marcos0x@gmail.com>
Date: Wed, 6 Feb 2019 21:42:37 -0300
Subject: [PATCH 376/618] Updates the comment

---
 src/components/DateRangePicker.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index e2aad78f89..db58b1a366 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -250,7 +250,9 @@ class DateRangePicker extends React.PureComponent {
     //
     // We handle both situations here by using the ` || ` operator to fallback
     // to *event.target** when **relatedTarget** is not provided.
-    const relatedTarget = event.relatedTarget === document.body ? event.target : (event.relatedTarget || event.target);
+    const relatedTarget = event.relatedTarget === document.body
+      ? event.target
+      : (event.relatedTarget || event.target);
     if (this.dayPickerContainer.contains(relatedTarget)) return;
     this.onOutsideClick(event);
   }

From 60f5f3bd7beb25f8570045d87afe58a66173f383 Mon Sep 17 00:00:00 2001
From: Marcos <marcos0x@gmail.com>
Date: Wed, 6 Feb 2019 22:20:50 -0300
Subject: [PATCH 377/618] Fix test

---
 test/components/DateRangePicker_spec.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/components/DateRangePicker_spec.jsx b/test/components/DateRangePicker_spec.jsx
index 62413f260f..e573a0cf90 100644
--- a/test/components/DateRangePicker_spec.jsx
+++ b/test/components/DateRangePicker_spec.jsx
@@ -522,7 +522,7 @@ describe('DateRangePicker', () => {
     });
   });
 
-  describe('#onDayPickerBlur', () => {
+  describeIfWindow('#onDayPickerBlur', () => {
     it('sets state.isDateRangePickerInputFocused to true', () => {
       const wrapper = shallow((
         <DateRangePicker

From b40a79282962feacd0f4bd6cff5c2acff5bc2aa9 Mon Sep 17 00:00:00 2001
From: Bailey Stoner <monokrome@monokro.me>
Date: Wed, 6 Feb 2019 17:28:00 -0800
Subject: [PATCH 378/618] Fix single date picker not responding to input.

---
 src/components/SingleDatePicker.jsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index 47633a7b2d..2e0e2fb2b6 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -253,25 +253,25 @@ class SingleDatePicker extends React.PureComponent {
   }
 
   setDayPickerContainerRef(ref) {
-    this.dayPickerContainer = ref;
-  }
-
-  setContainerRef(ref) {
-    if (ref === this.container) return;
+    if (ref === this.dayPickerContainer) return;
     this.removeEventListeners();
 
-    this.container = ref;
+    this.dayPickerContainer = ref;
     if (!ref) return;
 
     this.addEventListeners();
   }
 
+  setContainerRef(ref) {
+    this.container = ref;
+  }
+
   addEventListeners() {
     // We manually set event because React has not implemented onFocusIn/onFocusOut.
     // Keep an eye on https://github.com/facebook/react/issues/6410 for updates
     // We use "blur w/ useCapture param" vs "onfocusout" for FF browser support
     this.removeFocusOutEventListener = addEventListener(
-      this.container,
+      this.dayPickerContainer,
       'focusout',
       this.onFocusOut,
     );
@@ -307,6 +307,7 @@ class SingleDatePicker extends React.PureComponent {
       appendToBody,
       focused,
     } = this.props;
+
     const { dayPickerContainerStyles } = this.state;
 
     if (!focused) {

From bb23531fa5cc5602f4ee300335072c86386ff0e5 Mon Sep 17 00:00:00 2001
From: Nicole Kinser <nicole.kinser@airbnb.com>
Date: Thu, 7 Feb 2019 16:53:04 -0800
Subject: [PATCH 379/618] Version 19.0.1

---
 CHANGELOG.md | 4 ++++
 package.json | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5ccdeb31a3..8a5c453eb0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,10 @@
 - []  ([#](https://github.com/airbnb/react-dates/pull/))
 -->
 
+## 19.0.1
+- [fix] Fix single date picker not responding to input  ([#1533](https://github.com/airbnb/react-dates/pull/1533))
+- [fix] Fixes the focus out event in IE11 ([#1524](https://github.com/airbnb/react-dates/pull/1524))
+
 ## 19.0.0
 - [breaking] Call `onDatesChange` before `onFocusChange` in the DRP ([#1525](https://github.com/airbnb/react-dates/pull/1525))
 
diff --git a/package.json b/package.json
index 5a32662935..22a056bced 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "19.0.0",
+  "version": "19.0.1",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 7c287db8fd013f45232c67e0456c530a1184279f Mon Sep 17 00:00:00 2001
From: Nicole Kinser <nicole.kinser@airbnb.com>
Date: Fri, 8 Feb 2019 13:31:44 -0800
Subject: [PATCH 380/618] Version 19.0.2

---
 CHANGELOG.md | 2 +-
 package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8a5c453eb0..df0d035bd9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,7 +5,7 @@
 -->
 
 ## 19.0.1
-- [fix] Fix single date picker not responding to input  ([#1533](https://github.com/airbnb/react-dates/pull/1533))
+- [fix] Fix single date picker not responding to input ([#1533](https://github.com/airbnb/react-dates/pull/1533))
 - [fix] Fixes the focus out event in IE11 ([#1524](https://github.com/airbnb/react-dates/pull/1524))
 
 ## 19.0.0
diff --git a/package.json b/package.json
index 22a056bced..6333ba20d3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "19.0.1",
+  "version": "19.0.2",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From d4a6eeb0e4a9ee868a878cfc97bc369182f3fb94 Mon Sep 17 00:00:00 2001
From: Dane David <dane@surveysparrow.com>
Date: Mon, 11 Feb 2019 00:35:45 +0530
Subject: [PATCH 381/618] Fix date selection issue with withPortal or
 appendToBody. Fixes #1535.

---
 src/components/SingleDatePicker.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index 2e0e2fb2b6..0d631faf97 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -248,7 +248,7 @@ class SingleDatePicker extends React.PureComponent {
 
   onFocusOut(e) {
     const { onFocusChange } = this.props;
-    if (this.container.contains(e.relatedTarget || e.target)) return;
+    if (this.dayPickerContainer.contains(e.relatedTarget || e.target)) return;
     onFocusChange({ focused: false });
   }
 

From 13f5486c7cb72712e6c9527c832abc6a5cceead0 Mon Sep 17 00:00:00 2001
From: Dane David <dane@surveysparrow.com>
Date: Mon, 11 Feb 2019 01:52:52 +0530
Subject: [PATCH 382/618] Add check for ref definition inside onFocusOut.

---
 src/components/SingleDatePicker.jsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index 0d631faf97..d9720c6123 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -248,7 +248,12 @@ class SingleDatePicker extends React.PureComponent {
 
   onFocusOut(e) {
     const { onFocusChange } = this.props;
-    if (this.dayPickerContainer.contains(e.relatedTarget || e.target)) return;
+    if (
+      this.dayPickerContainer
+      && this.dayPickerContainer.contains(e.relatedTarget || e.target)
+    ) {
+      return;
+    }
     onFocusChange({ focused: false });
   }
 

From 69962a6615495aff28ec0c93a45ac74544007738 Mon Sep 17 00:00:00 2001
From: Dane David <dane@surveysparrow.com>
Date: Mon, 11 Feb 2019 21:46:59 +0530
Subject: [PATCH 383/618] Revert "Add check for ref definition inside
 onFocusOut."

This reverts commit 13f5486c7cb72712e6c9527c832abc6a5cceead0.
---
 src/components/SingleDatePicker.jsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index d9720c6123..0d631faf97 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -248,12 +248,7 @@ class SingleDatePicker extends React.PureComponent {
 
   onFocusOut(e) {
     const { onFocusChange } = this.props;
-    if (
-      this.dayPickerContainer
-      && this.dayPickerContainer.contains(e.relatedTarget || e.target)
-    ) {
-      return;
-    }
+    if (this.dayPickerContainer.contains(e.relatedTarget || e.target)) return;
     onFocusChange({ focused: false });
   }
 

From 0351ccb87b206f48d586e45acd4fe1386e415223 Mon Sep 17 00:00:00 2001
From: Dane David <dane@surveysparrow.com>
Date: Mon, 11 Feb 2019 21:51:20 +0530
Subject: [PATCH 384/618] Update SingleDatePicker test to use proper instance
 ref.

---
 test/components/SingleDatePicker_spec.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/components/SingleDatePicker_spec.jsx b/test/components/SingleDatePicker_spec.jsx
index cbe0d3749c..a0094df441 100644
--- a/test/components/SingleDatePicker_spec.jsx
+++ b/test/components/SingleDatePicker_spec.jsx
@@ -602,7 +602,7 @@ describe('SingleDatePicker', () => {
         <SingleDatePicker id="date" onFocusChange={onFocusChangeStub} />
       )).dive();
 
-      wrapper.instance().container = {
+      wrapper.instance().dayPickerContainer = {
         contains: () => false,
       };
 

From 1a55d687284ae9998a7241a303ba44739b7243b9 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Mon, 11 Feb 2019 17:20:24 -0800
Subject: [PATCH 385/618] Version 19.0.3

---
 CHANGELOG.md | 6 ++++++
 package.json | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index df0d035bd9..946a6e6041 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,12 @@
 - []  ([#](https://github.com/airbnb/react-dates/pull/))
 -->
 
+## 19.0.3
+- [fix] Fix date selection in the SDP ([#1540](https://github.com/airbnb/react-dates/pull/1540))
+
+## 19.0.2
+- no changes; extraneous publish
+
 ## 19.0.1
 - [fix] Fix single date picker not responding to input ([#1533](https://github.com/airbnb/react-dates/pull/1533))
 - [fix] Fixes the focus out event in IE11 ([#1524](https://github.com/airbnb/react-dates/pull/1524))
diff --git a/package.json b/package.json
index 6333ba20d3..33624142fd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "19.0.2",
+  "version": "19.0.3",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From f4e97e62f1433ad05c0cbccf73368f2773a4173e Mon Sep 17 00:00:00 2001
From: Kris Salvador <kriss@spotify.com>
Date: Fri, 8 Feb 2019 15:48:14 -0500
Subject: [PATCH 386/618] Remove last-in-range style modifiers

---
 src/components/CalendarDay.jsx                    | 13 +------------
 src/components/CustomizableCalendarDay.jsx        | 12 ------------
 src/components/DayPickerRangeController.jsx       |  1 -
 test/components/DayPickerRangeController_spec.jsx | 12 ------------
 4 files changed, 1 insertion(+), 37 deletions(-)

diff --git a/src/components/CalendarDay.jsx b/src/components/CalendarDay.jsx
index 276bb5ef3d..bf6807e551 100644
--- a/src/components/CalendarDay.jsx
+++ b/src/components/CalendarDay.jsx
@@ -79,9 +79,7 @@ class CalendarDay extends React.PureComponent {
   }
 
   onKeyDown(day, e) {
-    const {
-      onDayClick,
-    } = this.props;
+    const { onDayClick } = this.props;
 
     const { key } = e;
     if (key === 'Enter' || key === ' ') {
@@ -133,7 +131,6 @@ class CalendarDay extends React.PureComponent {
           modifiers.has('blocked-calendar') && styles.CalendarDay__blocked_calendar,
           hoveredSpan && styles.CalendarDay__hovered_span,
           modifiers.has('selected-span') && styles.CalendarDay__selected_span,
-          modifiers.has('last-in-range') && styles.CalendarDay__last_in_range,
           modifiers.has('selected-start') && styles.CalendarDay__selected_start,
           modifiers.has('selected-end') && styles.CalendarDay__selected_end,
           selected && styles.CalendarDay__selected,
@@ -254,14 +251,6 @@ export default withStyles(({ reactDates: { color, font } }) => ({
     },
   },
 
-  CalendarDay__last_in_range: {
-    borderStyle: 'solid',
-
-    ':hover': {
-      borderStyle: 'solid',
-    },
-  },
-
   CalendarDay__selected: {
     background: color.selected.backgroundColor,
     border: `1px double ${color.selected.borderColor}`,
diff --git a/src/components/CustomizableCalendarDay.jsx b/src/components/CustomizableCalendarDay.jsx
index fa864a83ff..5145a26502 100644
--- a/src/components/CustomizableCalendarDay.jsx
+++ b/src/components/CustomizableCalendarDay.jsx
@@ -63,7 +63,6 @@ const propTypes = forbidExtraProps({
   blockedOutOfRangeStyles: DayStyleShape,
   hoveredSpanStyles: DayStyleShape,
   selectedSpanStyles: DayStyleShape,
-  lastInRangeStyles: DayStyleShape,
   selectedStyles: DayStyleShape,
   selectedStartStyles: DayStyleShape,
   selectedEndStyles: DayStyleShape,
@@ -160,14 +159,6 @@ export const selectedSpanStyles = {
   },
 };
 
-export const lastInRangeStyles = {
-  borderStyle: 'solid',
-
-  hover: {
-    borderStyle: 'solid',
-  },
-};
-
 export const selectedStyles = {
   background: color.selected.backgroundColor,
   border: `1px double ${color.selected.borderColor}`,
@@ -203,7 +194,6 @@ const defaultProps = {
   blockedOutOfRangeStyles,
   hoveredSpanStyles,
   selectedSpanStyles,
-  lastInRangeStyles,
   selectedStyles,
   selectedStartStyles: {},
   selectedEndStyles: {},
@@ -290,7 +280,6 @@ class CustomizableCalendarDay extends React.PureComponent {
       blockedOutOfRangeStyles: blockedOutOfRangeStylesWithHover,
       hoveredSpanStyles: hoveredSpanStylesWithHover,
       selectedSpanStyles: selectedSpanStylesWithHover,
-      lastInRangeStyles: lastInRangeStylesWithHover,
       selectedStyles: selectedStylesWithHover,
       selectedStartStyles: selectedStartStylesWithHover,
       selectedEndStyles: selectedEndStylesWithHover,
@@ -327,7 +316,6 @@ class CustomizableCalendarDay extends React.PureComponent {
           hoveredSpan && getStyles(hoveredSpanStylesWithHover, isHovered),
           modifiers.has('after-hovered-start') && getStyles(afterHoveredStartStylesWithHover, isHovered),
           modifiers.has('selected-span') && getStyles(selectedSpanStylesWithHover, isHovered),
-          modifiers.has('last-in-range') && getStyles(lastInRangeStylesWithHover, isHovered),
           selected && getStyles(selectedStylesWithHover, isHovered),
           modifiers.has('selected-start') && getStyles(selectedStartStylesWithHover, isHovered),
           modifiers.has('selected-end') && getStyles(selectedEndStylesWithHover, isHovered),
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 13b67e2807..e5c271d054 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -198,7 +198,6 @@ export default class DayPickerRangeController extends React.PureComponent {
       'selected-end': day => this.isEndDate(day),
       'blocked-minimum-nights': day => this.doesNotMeetMinimumNights(day),
       'selected-span': day => this.isInSelectedSpan(day),
-      'last-in-range': day => this.isLastInRange(day),
       hovered: day => this.isHovered(day),
       'hovered-span': day => this.isInHoveredSpan(day),
       'hovered-offset': day => this.isInHoveredSpan(day),
diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index 40e7282fef..d89334d341 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -2698,18 +2698,6 @@ describe('DayPickerRangeController', () => {
       expect(modifiers.has('selected-span')).to.equal(true);
     });
 
-    it('contains `last-in-range` if this.isLastInRange returns true', () => {
-      sinon.stub(DayPickerRangeController.prototype, 'isLastInRange').returns(true);
-      const wrapper = shallow((
-        <DayPickerRangeController
-          onDatesChange={sinon.stub()}
-          onFocusChange={sinon.stub()}
-        />
-      ));
-      const modifiers = wrapper.instance().getModifiersForDay(moment());
-      expect(modifiers.has('last-in-range')).to.equal(true);
-    });
-
     it('contains `hovered` if this.isHovered returns true', () => {
       sinon.stub(DayPickerRangeController.prototype, 'isHovered').returns(true);
       const wrapper = shallow(<DayPickerRangeController

From ad2a171c86b6c88a7b3be3c7fb57ff8f1b745d5e Mon Sep 17 00:00:00 2001
From: Kris Salvador <kriss@spotify.com>
Date: Sun, 10 Feb 2019 16:50:30 -0500
Subject: [PATCH 387/618] Keep last-in-range modifier and related test for
 DayPickerRangeController

---
 src/components/DayPickerRangeController.jsx       |  1 +
 test/components/DayPickerRangeController_spec.jsx | 12 ++++++++++++
 2 files changed, 13 insertions(+)

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index e5c271d054..13b67e2807 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -198,6 +198,7 @@ export default class DayPickerRangeController extends React.PureComponent {
       'selected-end': day => this.isEndDate(day),
       'blocked-minimum-nights': day => this.doesNotMeetMinimumNights(day),
       'selected-span': day => this.isInSelectedSpan(day),
+      'last-in-range': day => this.isLastInRange(day),
       hovered: day => this.isHovered(day),
       'hovered-span': day => this.isInHoveredSpan(day),
       'hovered-offset': day => this.isInHoveredSpan(day),
diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index d89334d341..40e7282fef 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -2698,6 +2698,18 @@ describe('DayPickerRangeController', () => {
       expect(modifiers.has('selected-span')).to.equal(true);
     });
 
+    it('contains `last-in-range` if this.isLastInRange returns true', () => {
+      sinon.stub(DayPickerRangeController.prototype, 'isLastInRange').returns(true);
+      const wrapper = shallow((
+        <DayPickerRangeController
+          onDatesChange={sinon.stub()}
+          onFocusChange={sinon.stub()}
+        />
+      ));
+      const modifiers = wrapper.instance().getModifiersForDay(moment());
+      expect(modifiers.has('last-in-range')).to.equal(true);
+    });
+
     it('contains `hovered` if this.isHovered returns true', () => {
       sinon.stub(DayPickerRangeController.prototype, 'isHovered').returns(true);
       const wrapper = shallow(<DayPickerRangeController

From 8f4627243439f8fcdad82ad58143c0e4f9d2007c Mon Sep 17 00:00:00 2001
From: Kris Salvador <kriss@spotify.com>
Date: Mon, 11 Feb 2019 21:57:20 -0500
Subject: [PATCH 388/618] Keep lastInRangeStyles prop and set default to empty
 object

---
 src/components/CustomizableCalendarDay.jsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/CustomizableCalendarDay.jsx b/src/components/CustomizableCalendarDay.jsx
index 5145a26502..c22049c163 100644
--- a/src/components/CustomizableCalendarDay.jsx
+++ b/src/components/CustomizableCalendarDay.jsx
@@ -63,6 +63,7 @@ const propTypes = forbidExtraProps({
   blockedOutOfRangeStyles: DayStyleShape,
   hoveredSpanStyles: DayStyleShape,
   selectedSpanStyles: DayStyleShape,
+  lastInRangeStyles: DayStyleShape,
   selectedStyles: DayStyleShape,
   selectedStartStyles: DayStyleShape,
   selectedEndStyles: DayStyleShape,
@@ -159,6 +160,8 @@ export const selectedSpanStyles = {
   },
 };
 
+export const lastInRangeStyles = {};
+
 export const selectedStyles = {
   background: color.selected.backgroundColor,
   border: `1px double ${color.selected.borderColor}`,
@@ -194,6 +197,7 @@ const defaultProps = {
   blockedOutOfRangeStyles,
   hoveredSpanStyles,
   selectedSpanStyles,
+  lastInRangeStyles,
   selectedStyles,
   selectedStartStyles: {},
   selectedEndStyles: {},
@@ -280,6 +284,7 @@ class CustomizableCalendarDay extends React.PureComponent {
       blockedOutOfRangeStyles: blockedOutOfRangeStylesWithHover,
       hoveredSpanStyles: hoveredSpanStylesWithHover,
       selectedSpanStyles: selectedSpanStylesWithHover,
+      lastInRangeStyles: lastInRangeStylesWithHover,
       selectedStyles: selectedStylesWithHover,
       selectedStartStyles: selectedStartStylesWithHover,
       selectedEndStyles: selectedEndStylesWithHover,
@@ -316,6 +321,7 @@ class CustomizableCalendarDay extends React.PureComponent {
           hoveredSpan && getStyles(hoveredSpanStylesWithHover, isHovered),
           modifiers.has('after-hovered-start') && getStyles(afterHoveredStartStylesWithHover, isHovered),
           modifiers.has('selected-span') && getStyles(selectedSpanStylesWithHover, isHovered),
+          modifiers.has('last-in-range') && getStyles(lastInRangeStylesWithHover, isHovered),
           selected && getStyles(selectedStylesWithHover, isHovered),
           modifiers.has('selected-start') && getStyles(selectedStartStylesWithHover, isHovered),
           modifiers.has('selected-end') && getStyles(selectedEndStylesWithHover, isHovered),

From 6a1b5643e0ac0dc55c711f4ab0aefad1c281dd28 Mon Sep 17 00:00:00 2001
From: GfxKai <julianregan@me.com>
Date: Tue, 19 Feb 2019 14:59:10 +0000
Subject: [PATCH 389/618] [Fix] `DateRangePickerInput`/`SingleDatePickerInput`:
 Stop calendar blinking on focus switch (fixes #1523)

Using `isStartDateFocused` and `isEndDateFocused` to conditionally render `children` causes a re-render whenever the focus switches from the start date input to end date input, during which the calendar disappears and reappears.

This pr adopts same approach as dd9d6b27b300dc8e31d89fcd982d525845e9c698 by skipping the focus check and just rendering the children.
---
 src/components/DateRangePickerInput.jsx       | 15 +++++++++------
 src/components/SingleDatePickerInput.jsx      |  2 +-
 src/defaultPhrases.js                         | 19 ++++++++++++-------
 test/components/DateRangePickerInput_spec.jsx |  9 +++++++++
 4 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index 9bebea109a..2389595852 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -190,7 +190,11 @@ function DateRangePickerInput({
     />
   );
 
-  const screenReaderText = screenReaderMessage || phrases.keyboardNavigationInstructions;
+  const screenReaderStartDateText = screenReaderMessage
+    || phrases.keyboardForwardNavigationInstructions;
+  const screenReaderEndDateText = screenReaderMessage
+    || phrases.keyboardBackwardNavigationInstructions;
+
   const inputIcon = (showDefaultInputIcon || customInputIcon !== null) && (
     <button
       {...css(styles.DateRangePickerInput_calendarIcon)}
@@ -224,7 +228,7 @@ function DateRangePickerInput({
         placeholder={startDatePlaceholderText}
         ariaLabel={startDateAriaLabel}
         displayValue={startDate}
-        screenReaderMessage={screenReaderText}
+        screenReaderMessage={screenReaderStartDateText}
         focused={isStartDateFocused}
         isFocused={isFocused}
         disabled={startDateDisabled}
@@ -242,6 +246,8 @@ function DateRangePickerInput({
         regular={regular}
       />
 
+      {children}
+
       {
         <div
           {...css(styles.DateRangePickerInput_arrow)}
@@ -252,14 +258,12 @@ function DateRangePickerInput({
         </div>
       }
 
-      {isStartDateFocused && children}
-
       <DateInput
         id={endDateId}
         placeholder={endDatePlaceholderText}
         ariaLabel={endDateAriaLabel}
         displayValue={endDate}
-        screenReaderMessage={screenReaderText}
+        screenReaderMessage={screenReaderEndDateText}
         focused={isEndDateFocused}
         isFocused={isFocused}
         disabled={endDateDisabled}
@@ -277,7 +281,6 @@ function DateRangePickerInput({
         regular={regular}
       />
 
-      {isEndDateFocused && children}
 
       {showClearDates && (
         <button
diff --git a/src/components/SingleDatePickerInput.jsx b/src/components/SingleDatePickerInput.jsx
index 3ca8dc46e5..af7b4d6731 100644
--- a/src/components/SingleDatePickerInput.jsx
+++ b/src/components/SingleDatePickerInput.jsx
@@ -139,7 +139,7 @@ function SingleDatePickerInput({
     />
   );
 
-  const screenReaderText = screenReaderMessage || phrases.keyboardNavigationInstructions;
+  const screenReaderText = screenReaderMessage || phrases.keyboardForwardNavigationInstructions;
   const inputIcon = (showDefaultInputIcon || customInputIcon !== null) && (
     <button
       {...css(styles.SingleDatePickerInput_calendarIcon)}
diff --git a/src/defaultPhrases.js b/src/defaultPhrases.js
index d431ed7014..4c5acb441b 100644
--- a/src/defaultPhrases.js
+++ b/src/defaultPhrases.js
@@ -22,8 +22,8 @@ const moveFocusByOneWeek = 'Move backward (up) and forward (down) by one week.';
 const moveFocusByOneMonth = 'Switch months.';
 const moveFocustoStartAndEndOfWeek = 'Go to the first or last day of a week.';
 const returnFocusToInput = 'Return to the date input field.';
-const keyboardNavigationInstructions = `Press the down arrow key to interact with the calendar and
-  select a date. Press the question mark key to get the keyboard shortcuts for changing dates.`;
+const keyboardForwardNavigationInstructions = 'Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.';
+const keyboardBackwardNavigationInstructions = 'Navigate backward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.';
 
 const chooseAvailableStartDate = ({ date }) => `Choose ${date} as your check-in date. It’s available.`;
 const chooseAvailableEndDate = ({ date }) => `Choose ${date} as your check-out date. It’s available.`;
@@ -58,7 +58,8 @@ export default {
   moveFocusByOneMonth,
   moveFocustoStartAndEndOfWeek,
   returnFocusToInput,
-  keyboardNavigationInstructions,
+  keyboardForwardNavigationInstructions,
+  keyboardBackwardNavigationInstructions,
 
   chooseAvailableStartDate,
   chooseAvailableEndDate,
@@ -92,7 +93,8 @@ export const DateRangePickerPhrases = {
   moveFocusByOneMonth,
   moveFocustoStartAndEndOfWeek,
   returnFocusToInput,
-  keyboardNavigationInstructions,
+  keyboardForwardNavigationInstructions,
+  keyboardBackwardNavigationInstructions,
   chooseAvailableStartDate,
   chooseAvailableEndDate,
   dateIsUnavailable,
@@ -104,7 +106,8 @@ export const DateRangePickerPhrases = {
 export const DateRangePickerInputPhrases = {
   focusStartDate,
   clearDates,
-  keyboardNavigationInstructions,
+  keyboardForwardNavigationInstructions,
+  keyboardBackwardNavigationInstructions,
 };
 
 export const SingleDatePickerPhrases = {
@@ -130,7 +133,8 @@ export const SingleDatePickerPhrases = {
   moveFocusByOneMonth,
   moveFocustoStartAndEndOfWeek,
   returnFocusToInput,
-  keyboardNavigationInstructions,
+  keyboardForwardNavigationInstructions,
+  keyboardBackwardNavigationInstructions,
   chooseAvailableDate,
   dateIsUnavailable,
   dateIsSelected,
@@ -138,7 +142,8 @@ export const SingleDatePickerPhrases = {
 
 export const SingleDatePickerInputPhrases = {
   clearDate,
-  keyboardNavigationInstructions,
+  keyboardForwardNavigationInstructions,
+  keyboardBackwardNavigationInstructions,
 };
 
 export const DayPickerPhrases = {
diff --git a/test/components/DateRangePickerInput_spec.jsx b/test/components/DateRangePickerInput_spec.jsx
index 1e8ca505b6..ef049df422 100644
--- a/test/components/DateRangePickerInput_spec.jsx
+++ b/test/components/DateRangePickerInput_spec.jsx
@@ -49,6 +49,15 @@ describe('DateRangePickerInput', () => {
         });
       });
     });
+
+    describe('props.children', () => {
+      it('should unconditionally render children when provided', () => {
+        const Child = () => <div>CHILD</div>;
+
+        const wrapper = shallow(<DateRangePickerInput><Child /></DateRangePickerInput>).dive();
+        expect(wrapper.find('Child')).to.have.lengthOf(1);
+      });
+    });
   });
 
   describe('props.customArrowIcon', () => {

From 0170b8118cb4c9434b77a8af37b93c4ec825af05 Mon Sep 17 00:00:00 2001
From: Bailey Stoner <monokrome@monokro.me>
Date: Wed, 20 Feb 2019 22:54:48 -0800
Subject: [PATCH 390/618] Clean up calendar day settings.

---
 src/utils/getCalendarDaySettings.js | 84 ++++++++++++++---------------
 1 file changed, 42 insertions(+), 42 deletions(-)

diff --git a/src/utils/getCalendarDaySettings.js b/src/utils/getCalendarDaySettings.js
index 71458fd88b..e64d2a035b 100644
--- a/src/utils/getCalendarDaySettings.js
+++ b/src/utils/getCalendarDaySettings.js
@@ -1,7 +1,7 @@
 import getPhrase from './getPhrase';
 import { BLOCKED_MODIFIER } from '../constants';
 
-export default function getCalendarDaySettings(day, ariaLabelFormat, daySize, modifiers, phrases) {
+function getAriaLabel(phrases, modifiers, day, ariaLabelFormat) {
   const {
     chooseAvailableDate,
     dateIsUnavailable,
@@ -10,51 +10,51 @@ export default function getCalendarDaySettings(day, ariaLabelFormat, daySize, mo
     dateIsSelectedAsEndDate,
   } = phrases;
 
-  const daySizeStyles = {
-    width: daySize,
-    height: daySize - 1,
+  const formattedDate = {
+    date: day.format(ariaLabelFormat),
   };
 
-  const useDefaultCursor = (
-    modifiers.has('blocked-minimum-nights')
-    || modifiers.has('blocked-calendar')
-    || modifiers.has('blocked-out-of-range')
-  );
-
-  const selected = (
-    modifiers.has('selected')
-    || modifiers.has('selected-start')
-    || modifiers.has('selected-end')
-  );
-
-  const hoveredSpan = !selected && (
-    modifiers.has('hovered-span')
-    || modifiers.has('after-hovered-start')
-  );
-
-  const isOutsideRange = modifiers.has('blocked-out-of-range');
-
-  const formattedDate = { date: day.format(ariaLabelFormat) };
-
-  let ariaLabel = getPhrase(chooseAvailableDate, formattedDate);
-  if (selected) {
-    if (modifiers.has('selected-start') && dateIsSelectedAsStartDate) {
-      ariaLabel = getPhrase(dateIsSelectedAsStartDate, formattedDate);
-    } else if (modifiers.has('selected-end') && dateIsSelectedAsEndDate) {
-      ariaLabel = getPhrase(dateIsSelectedAsEndDate, formattedDate);
-    } else {
-      ariaLabel = getPhrase(dateIsSelected, formattedDate);
-    }
-  } else if (modifiers.has(BLOCKED_MODIFIER)) {
-    ariaLabel = getPhrase(dateIsUnavailable, formattedDate);
+  if (modifiers.has('selected-start') && dateIsSelectedAsStartDate) {
+    return getPhrase(dateIsSelectedAsStartDate, formattedDate);
+  } if (modifiers.has('selected-end') && dateIsSelectedAsEndDate) {
+    return getPhrase(dateIsSelectedAsEndDate, formattedDate);
+  } if (modifiers.has('selected') && dateIsSelected) {
+    return getPhrase(dateIsSelected, formattedDate);
+  } if (modifiers.has(BLOCKED_MODIFIER)) {
+    return getPhrase(dateIsUnavailable, formattedDate);
   }
 
+  return getPhrase(chooseAvailableDate, formattedDate);
+}
+
+function isSelected(modifiers) {
+  return modifiers.has('selected')
+  || modifiers.has('selected-start')
+  || modifiers.has('selected-end');
+}
+
+function shouldUseDefaultCursor(modifiers) {
+  return modifiers.has('blocked-minimum-nights')
+  || modifiers.has('blocked-calendar')
+  || modifiers.has('blocked-out-of-range');
+}
+
+function isHoveredSpan(modifiers) {
+  if (isSelected(modifiers)) return false;
+  return modifiers.has('hovered-span') || modifiers.has('after-hovered-start');
+}
+
+export default function getCalendarDaySettings(day, ariaLabelFormat, daySize, modifiers, phrases) {
   return {
-    daySizeStyles,
-    useDefaultCursor,
-    selected,
-    hoveredSpan,
-    isOutsideRange,
-    ariaLabel,
+    ariaLabel: getAriaLabel(phrases, modifiers, day, ariaLabelFormat),
+    hoveredSpan: isHoveredSpan(modifiers),
+    isOutsideRange: modifiers.has('blocked-out-of-range'),
+    selected: isSelected(modifiers),
+    useDefaultCursor: shouldUseDefaultCursor(modifiers),
+
+    daySizeStyles: {
+      width: daySize,
+      height: daySize - 1,
+    },
   };
 }

From a48c286ccac624c4216bf9d9c9783a89327e03f9 Mon Sep 17 00:00:00 2001
From: Bailey Stoner <monokrome@monokro.me>
Date: Wed, 20 Feb 2019 23:31:50 -0800
Subject: [PATCH 391/618] Provide 'selected' behavior for 'selected-span'.

We may want different phrases for spans vs single selections. Need to
look further into this!
---
 src/utils/getCalendarDaySettings.js | 37 +++++++++++++++--------------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/utils/getCalendarDaySettings.js b/src/utils/getCalendarDaySettings.js
index e64d2a035b..33c530ec04 100644
--- a/src/utils/getCalendarDaySettings.js
+++ b/src/utils/getCalendarDaySettings.js
@@ -1,6 +1,24 @@
 import getPhrase from './getPhrase';
 import { BLOCKED_MODIFIER } from '../constants';
 
+function isSelected(modifiers) {
+  return modifiers.has('selected')
+  || modifiers.has('selected-span')
+  || modifiers.has('selected-start')
+  || modifiers.has('selected-end');
+}
+
+function shouldUseDefaultCursor(modifiers) {
+  return modifiers.has('blocked-minimum-nights')
+  || modifiers.has('blocked-calendar')
+  || modifiers.has('blocked-out-of-range');
+}
+
+function isHoveredSpan(modifiers) {
+  if (isSelected(modifiers)) return false;
+  return modifiers.has('hovered-span') || modifiers.has('after-hovered-start');
+}
+
 function getAriaLabel(phrases, modifiers, day, ariaLabelFormat) {
   const {
     chooseAvailableDate,
@@ -18,7 +36,7 @@ function getAriaLabel(phrases, modifiers, day, ariaLabelFormat) {
     return getPhrase(dateIsSelectedAsStartDate, formattedDate);
   } if (modifiers.has('selected-end') && dateIsSelectedAsEndDate) {
     return getPhrase(dateIsSelectedAsEndDate, formattedDate);
-  } if (modifiers.has('selected') && dateIsSelected) {
+  } if (isSelected(modifiers) && dateIsSelected) {
     return getPhrase(dateIsSelected, formattedDate);
   } if (modifiers.has(BLOCKED_MODIFIER)) {
     return getPhrase(dateIsUnavailable, formattedDate);
@@ -27,23 +45,6 @@ function getAriaLabel(phrases, modifiers, day, ariaLabelFormat) {
   return getPhrase(chooseAvailableDate, formattedDate);
 }
 
-function isSelected(modifiers) {
-  return modifiers.has('selected')
-  || modifiers.has('selected-start')
-  || modifiers.has('selected-end');
-}
-
-function shouldUseDefaultCursor(modifiers) {
-  return modifiers.has('blocked-minimum-nights')
-  || modifiers.has('blocked-calendar')
-  || modifiers.has('blocked-out-of-range');
-}
-
-function isHoveredSpan(modifiers) {
-  if (isSelected(modifiers)) return false;
-  return modifiers.has('hovered-span') || modifiers.has('after-hovered-start');
-}
-
 export default function getCalendarDaySettings(day, ariaLabelFormat, daySize, modifiers, phrases) {
   return {
     ariaLabel: getAriaLabel(phrases, modifiers, day, ariaLabelFormat),

From 5587e16f9ef85db4422c762caa72592705881b7f Mon Sep 17 00:00:00 2001
From: Bailey Stoner <monokrome@monokro.me>
Date: Wed, 20 Feb 2019 23:35:03 -0800
Subject: [PATCH 392/618] Fix broken styles after proper selection check

---
 src/components/CalendarDay.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/CalendarDay.jsx b/src/components/CalendarDay.jsx
index 276bb5ef3d..c1f7c32615 100644
--- a/src/components/CalendarDay.jsx
+++ b/src/components/CalendarDay.jsx
@@ -136,7 +136,7 @@ class CalendarDay extends React.PureComponent {
           modifiers.has('last-in-range') && styles.CalendarDay__last_in_range,
           modifiers.has('selected-start') && styles.CalendarDay__selected_start,
           modifiers.has('selected-end') && styles.CalendarDay__selected_end,
-          selected && styles.CalendarDay__selected,
+          selected && !modifiers.has('selected-span') && styles.CalendarDay__selected,
           isOutsideRange && styles.CalendarDay__blocked_out_of_range,
           daySizeStyles,
         )}

From 3a93bc5eafc6207fa1a475b39d625d2bda3b167c Mon Sep 17 00:00:00 2001
From: Bailey Stoner <monokrome@monokro.me>
Date: Wed, 20 Feb 2019 23:48:32 -0800
Subject: [PATCH 393/618] Test that the fix worked :)

---
 test/components/CalendarDay_spec.jsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/test/components/CalendarDay_spec.jsx b/test/components/CalendarDay_spec.jsx
index 0965bc542c..4394e02655 100644
--- a/test/components/CalendarDay_spec.jsx
+++ b/test/components/CalendarDay_spec.jsx
@@ -93,6 +93,20 @@ describe('CalendarDay', () => {
         expect(wrapper.prop('aria-label')).to.equal('dateIsSelected text');
       });
 
+      it('is formatted with the dateIsSelected phrase function when day is selected in a span', () => {
+        const modifiers = new Set(['selected-span']);
+
+        const wrapper = shallow((
+          <CalendarDay
+            modifiers={modifiers}
+            phrases={phrases}
+            day={day}
+          />
+        )).dive();
+
+        expect(wrapper.prop('aria-label')).to.equal('dateIsSelected text');
+      });
+
       it('is formatted with the dateIsSelectedAsStartDate phrase function when day is selected as the start date', () => {
         const modifiers = new Set().add(BLOCKED_MODIFIER).add('selected-start');
 

From 74a3790bb0d9ee47c2197d42fcbd982e36246058 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Mon, 25 Feb 2019 11:16:52 -0800
Subject: [PATCH 394/618] Version 19.0.4

---
 CHANGELOG.md | 3 +++
 package.json | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 946a6e6041..a93a8aa29a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,9 @@
 - []  ([#](https://github.com/airbnb/react-dates/pull/))
 -->
 
+## 19.0.4
+- [fix] Added `selected` aria label to dates in the selected range ([#1555](https://github.com/airbnb/react-dates/pull/1555))
+
 ## 19.0.3
 - [fix] Fix date selection in the SDP ([#1540](https://github.com/airbnb/react-dates/pull/1540))
 
diff --git a/package.json b/package.json
index 33624142fd..c4c7957c7f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "19.0.3",
+  "version": "19.0.4",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 0c938046fb763f794bed38afffc6b5e67abad1a6 Mon Sep 17 00:00:00 2001
From: Nicole Kinser <nicole.kinser@airbnb.com>
Date: Tue, 26 Feb 2019 17:59:56 -0800
Subject: [PATCH 395/618] Add tests that verify presence of tabIndex prop for
 navigation buttons

---
 test/components/DayPickerNavigation_spec.jsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/test/components/DayPickerNavigation_spec.jsx b/test/components/DayPickerNavigation_spec.jsx
index e7184627e6..96b22cc2da 100644
--- a/test/components/DayPickerNavigation_spec.jsx
+++ b/test/components/DayPickerNavigation_spec.jsx
@@ -17,6 +17,22 @@ describe('DayPickerNavigation', () => {
       const wrapper = shallow(<DayPickerNavigation orientation={VERTICAL_SCROLLABLE} />).dive();
       expect(wrapper.find('[role="button"]')).to.have.lengthOf(1);
     });
+
+    it('tabindex is present when the default buttons are used', () => {
+      const wrapper = shallow(<DayPickerNavigation />).dive();
+      const prevMonthButton = wrapper.find('[role="button"]').at(0);
+      const nextMonthButton = wrapper.find('[role="button"]').at(1);
+      expect(prevMonthButton.prop('tabIndex')).to.equal('0');
+      expect(nextMonthButton.prop('tabIndex')).to.equal('0');
+    });
+
+    it('tabindex is present when custom buttons are used', () => {
+      const wrapper = shallow(<DayPickerNavigation navNext={<div />} navPrev={<div />} />).dive();
+      const prevMonthButton = wrapper.find('[role="button"]').at(0);
+      const nextMonthButton = wrapper.find('[role="button"]').at(1);
+      expect(prevMonthButton.prop('tabIndex')).to.equal('0');
+      expect(nextMonthButton.prop('tabIndex')).to.equal('0');
+    });
   });
 
   describe('interactions', () => {

From d3e12decd3ad18c702a49f71bd7da763a383bbbe Mon Sep 17 00:00:00 2001
From: Nicole Kinser <nicole.kinser@airbnb.com>
Date: Mon, 25 Feb 2019 14:05:44 -0800
Subject: [PATCH 396/618] Focus ring now shows up around custom navigation
 buttons

---
 .gitignore                             |  3 +++
 src/components/DayPickerNavigation.jsx |  4 ++--
 stories/DayPicker.js                   | 16 ++++++++++++----
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/.gitignore b/.gitignore
index 46eaf68548..6374bef436 100644
--- a/.gitignore
+++ b/.gitignore
@@ -47,3 +47,6 @@ yarn.lock
 package-lock.json
 
 css/styles.css
+
+# Cache
+.cache/
diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index 6c4ea1f8c4..1e2f5b4aae 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -126,7 +126,7 @@ function DayPickerNavigation({
       {!isVerticalScrollable && (
         <div
           role="button"
-          tabIndex="0"
+          tabIndex={isDefaultNavPrev ? '0' : null}
           {...css(
             styles.DayPickerNavigation_button,
             isDefaultNavPrev && styles.DayPickerNavigation_button__default,
@@ -164,7 +164,7 @@ function DayPickerNavigation({
 
       <div
         role="button"
-        tabIndex="0"
+        tabIndex={isDefaultNavNext ? '0' : null}
         {...css(
           styles.DayPickerNavigation_button,
           isDefaultNavNext && styles.DayPickerNavigation_button__default,
diff --git a/stories/DayPicker.js b/stories/DayPicker.js
index 4a0c2acfae..11dde2f34c 100644
--- a/stories/DayPicker.js
+++ b/stories/DayPicker.js
@@ -10,29 +10,37 @@ import {
 } from '../src/constants';
 
 const TestPrevIcon = () => (
-  <span
+  <div
     style={{
       border: '1px solid #dce0e0',
       backgroundColor: '#fff',
       color: '#484848',
+      left: '24px',
       padding: '3px',
+      position: 'absolute',
+      width: '40px',
     }}
+    tabindex="0"
   >
     Prev
-  </span>
+  </div>
 );
 
 const TestNextIcon = () => (
-  <span
+  <div
     style={{
       border: '1px solid #dce0e0',
       backgroundColor: '#fff',
       color: '#484848',
       padding: '3px',
+      position: 'absolute',
+      right: '24px',
+      width: '40px',
     }}
+    tabindex="0"
   >
     Next
-  </span>
+  </div>
 );
 
 const TestCustomInfoPanel = () => (

From 7fd281807153660a1a9f17d7f06e2ba1240df432 Mon Sep 17 00:00:00 2001
From: Nicole Kinser <nicole.kinser@airbnb.com>
Date: Mon, 25 Feb 2019 16:59:34 -0800
Subject: [PATCH 397/618] use spreading props for tabindex

---
 src/components/DayPickerNavigation.jsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index 1e2f5b4aae..cbfc5fd1eb 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -70,7 +70,10 @@ function DayPickerNavigation({
   let navNextIcon = navNext;
   let isDefaultNavPrev = false;
   let isDefaultNavNext = false;
+  let navPrevTabIndex = {};
+  let navNextTabIndex = {};
   if (!navPrevIcon) {
+    navPrevTabIndex = { tabIndex: '0' };
     isDefaultNavPrev = true;
     let Icon = isVertical ? ChevronUp : LeftArrow;
     if (isRTL && !isVertical) {
@@ -88,6 +91,7 @@ function DayPickerNavigation({
   }
 
   if (!navNextIcon) {
+    navNextTabIndex = { tabIndex: '0' };
     isDefaultNavNext = true;
     let Icon = isVertical ? ChevronDown : RightArrow;
     if (isRTL && !isVertical) {
@@ -126,7 +130,7 @@ function DayPickerNavigation({
       {!isVerticalScrollable && (
         <div
           role="button"
-          tabIndex={isDefaultNavPrev ? '0' : null}
+          {...navPrevTabIndex}
           {...css(
             styles.DayPickerNavigation_button,
             isDefaultNavPrev && styles.DayPickerNavigation_button__default,
@@ -164,7 +168,7 @@ function DayPickerNavigation({
 
       <div
         role="button"
-        tabIndex={isDefaultNavNext ? '0' : null}
+        {...navNextTabIndex}
         {...css(
           styles.DayPickerNavigation_button,
           isDefaultNavNext && styles.DayPickerNavigation_button__default,

From 7ea7fb53b217ec4c81da3343f153c1946035cd04 Mon Sep 17 00:00:00 2001
From: Nicole Kinser <nicole.kinser@airbnb.com>
Date: Mon, 25 Feb 2019 17:19:47 -0800
Subject: [PATCH 398/618] add linter ignore comments

---
 src/components/DayPickerNavigation.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index cbfc5fd1eb..8f2f344604 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -128,7 +128,7 @@ function DayPickerNavigation({
       )}
     >
       {!isVerticalScrollable && (
-        <div
+        <div // eslint-disable-line jsx-a11y/interactive-supports-focus
           role="button"
           {...navPrevTabIndex}
           {...css(
@@ -166,7 +166,7 @@ function DayPickerNavigation({
         </div>
       )}
 
-      <div
+      <div // eslint-disable-line jsx-a11y/interactive-supports-focus
         role="button"
         {...navNextTabIndex}
         {...css(

From a84e51a2dc1760161879aa8bc587b35cf23e0ca0 Mon Sep 17 00:00:00 2001
From: Nicole Kinser <nicole.kinser@airbnb.com>
Date: Tue, 26 Feb 2019 22:59:47 -0800
Subject: [PATCH 399/618] adjust existing tests and add new test

---
 test/components/DayPickerNavigation_spec.jsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/test/components/DayPickerNavigation_spec.jsx b/test/components/DayPickerNavigation_spec.jsx
index 96b22cc2da..f3ad841b95 100644
--- a/test/components/DayPickerNavigation_spec.jsx
+++ b/test/components/DayPickerNavigation_spec.jsx
@@ -26,10 +26,23 @@ describe('DayPickerNavigation', () => {
       expect(nextMonthButton.prop('tabIndex')).to.equal('0');
     });
 
-    it('tabindex is present when custom buttons are used', () => {
+    it('tabindex is not present when custom buttons are used', () => {
       const wrapper = shallow(<DayPickerNavigation navNext={<div />} navPrev={<div />} />).dive();
       const prevMonthButton = wrapper.find('[role="button"]').at(0);
       const nextMonthButton = wrapper.find('[role="button"]').at(1);
+      expect(prevMonthButton.prop('tabIndex')).to.equal(undefined);
+      expect(nextMonthButton.prop('tabIndex')).to.equal(undefined);
+    });
+
+    it('tabindex is present when custom buttons are used and provide a tabIndex', () => {
+      const wrapper = shallow(
+        <DayPickerNavigation
+          navNext={<div id="navNext" tabIndex="0" />} // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
+          navPrev={<div id="navPrev" tabIndex="0" />} // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
+        />,
+      ).dive();
+      const prevMonthButton = wrapper.find('#navPrev');
+      const nextMonthButton = wrapper.find('#navNext');
       expect(prevMonthButton.prop('tabIndex')).to.equal('0');
       expect(nextMonthButton.prop('tabIndex')).to.equal('0');
     });

From 58bd081749f3754e18ad79877efb30c87bb8eb65 Mon Sep 17 00:00:00 2001
From: Nicole Kinser <nicole.kinser@airbnb.com>
Date: Thu, 14 Feb 2019 17:37:10 -0800
Subject: [PATCH 400/618] add hovered-start-blocked-minimum-nights and
 hovered-start-blocked-first-possible-end modifiers

---
 src/components/CalendarDay.jsx              |  12 ++
 src/components/CustomizableCalendarDay.jsx  |   8 ++
 src/components/DayPickerRangeController.jsx | 120 +++++++++++++++++++-
 3 files changed, 139 insertions(+), 1 deletion(-)

diff --git a/src/components/CalendarDay.jsx b/src/components/CalendarDay.jsx
index 0f51cde9f6..7256cd0710 100644
--- a/src/components/CalendarDay.jsx
+++ b/src/components/CalendarDay.jsx
@@ -126,6 +126,8 @@ class CalendarDay extends React.PureComponent {
           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,
@@ -323,6 +325,16 @@ export default withStyles(({ reactDates: { color, font } }) => ({
     },
   },
 
+  CalendarDay__hovered_start_first_possible_end: {
+    background: color.core.borderLighter,
+    border: `1px double ${color.core.borderLighter}`,
+  },
+
+  CalendarDay__hovered_start_blocked_min_nights: {
+    background: color.core.borderLighter,
+    border: `1px double ${color.core.borderLight}`,
+  },
+
   CalendarDay__selected_start: {},
   CalendarDay__selected_end: {},
   CalendarDay__today: {},
diff --git a/src/components/CustomizableCalendarDay.jsx b/src/components/CustomizableCalendarDay.jsx
index c22049c163..46c4bef564 100644
--- a/src/components/CustomizableCalendarDay.jsx
+++ b/src/components/CustomizableCalendarDay.jsx
@@ -68,6 +68,8 @@ const propTypes = forbidExtraProps({
   selectedStartStyles: DayStyleShape,
   selectedEndStyles: DayStyleShape,
   afterHoveredStartStyles: DayStyleShape,
+  hoveredStartFirstPossibleEndStyles: DayStyleShape,
+  hoveredStartBlockedMinNightsStyles: DayStyleShape,
 
   // internationalization
   phrases: PropTypes.shape(getPhrasePropTypes(CalendarDayPhrases)),
@@ -204,6 +206,8 @@ const defaultProps = {
   afterHoveredStartStyles: {},
   firstDayOfWeekStyles: {},
   lastDayOfWeekStyles: {},
+  hoveredStartFirstPossibleEndStyles: {},
+  hoveredStartBlockedMinNightsStyles: {},
 
   // internationalization
   phrases: CalendarDayPhrases,
@@ -289,6 +293,8 @@ class CustomizableCalendarDay extends React.PureComponent {
       selectedStartStyles: selectedStartStylesWithHover,
       selectedEndStyles: selectedEndStylesWithHover,
       afterHoveredStartStyles: afterHoveredStartStylesWithHover,
+      hoveredStartFirstPossibleEndStyles: hoveredStartFirstPossibleEndStylesWithHover,
+      hoveredStartBlockedMinNightsStyles: hoveredStartBlockedMinNightsStylesWithHover,
     } = this.props;
 
     const { isHovered } = this.state;
@@ -315,6 +321,8 @@ class CustomizableCalendarDay extends React.PureComponent {
           modifiers.has('today') && getStyles(todayStylesWithHover, isHovered),
           modifiers.has('first-day-of-week') && getStyles(firstDayOfWeekStylesWithHover, isHovered),
           modifiers.has('last-day-of-week') && getStyles(lastDayOfWeekStylesWithHover, isHovered),
+          modifiers.has('hovered-start-first-possible-end') && getStyles(hoveredStartFirstPossibleEndStylesWithHover, isHovered),
+          modifiers.has('hovered-start-blocked-minimum-nights') && getStyles(hoveredStartBlockedMinNightsStylesWithHover, isHovered),
           modifiers.has('highlighted-calendar') && getStyles(highlightedCalendarStylesWithHover, isHovered),
           modifiers.has('blocked-minimum-nights') && getStyles(blockedMinNightsStylesWithHover, isHovered),
           modifiers.has('blocked-calendar') && getStyles(blockedCalendarStylesWithHover, isHovered),
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 13b67e2807..4aff8059a3 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -59,6 +59,7 @@ const propTypes = forbidExtraProps({
   isOutsideRange: PropTypes.func,
   isDayBlocked: PropTypes.func,
   isDayHighlighted: PropTypes.func,
+  getMinNightsForHoverDate: PropTypes.func,
 
   // DayPicker props
   renderMonthText: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'),
@@ -124,6 +125,7 @@ const defaultProps = {
   isOutsideRange() {},
   isDayBlocked() {},
   isDayHighlighted() {},
+  getMinNightsForHoverDate() {},
 
   // DayPicker props
   renderMonthText: null,
@@ -205,6 +207,8 @@ export default class DayPickerRangeController extends React.PureComponent {
       'after-hovered-start': day => this.isDayAfterHoveredStartDate(day),
       'first-day-of-week': day => this.isFirstDayOfWeek(day),
       'last-day-of-week': day => this.isLastDayOfWeek(day),
+      'hovered-start-first-possible-end': (day, hoverDate) => this.isFirstPossibleEndDateForHoveredStartDate(day, hoverDate),
+      'hovered-start-blocked-minimum-nights': (day, hoverDate) => this.doesNotMeetMinNightsForHoveredStartDate(day, hoverDate),
     };
 
     const { currentMonth, visibleDays } = this.getStateForNewMonth(props);
@@ -241,6 +245,7 @@ export default class DayPickerRangeController extends React.PureComponent {
       startDate,
       endDate,
       focusedInput,
+      getMinNightsForHoverDate,
       minimumNights,
       isOutsideRange,
       isDayBlocked,
@@ -265,6 +270,7 @@ export default class DayPickerRangeController extends React.PureComponent {
       enableOutsideDays: prevEnableOutsideDays,
     } = this.props;
 
+    const { hoverDate } = this.state;
     let { visibleDays } = this.state;
 
     let recomputeOutsideRange = false;
@@ -423,6 +429,39 @@ export default class DayPickerRangeController extends React.PureComponent {
       });
     }
 
+    if (didFocusChange && hoverDate) {
+      const minNightsForHoverDate = getMinNightsForHoverDate(hoverDate);
+      if (minNightsForHoverDate > 0 && focusedInput === END_DATE) {
+        modifiers = this.deleteModifierFromRange(
+          modifiers,
+          hoverDate.clone().add(1, 'days'),
+          hoverDate.clone().add(minNightsForHoverDate, 'days'),
+          'hovered-start-blocked-minimum-nights',
+        );
+
+        modifiers = this.deleteModifier(
+          modifiers,
+          hoverDate.clone().add(minNightsForHoverDate, 'days'),
+          'hovered-start-first-possible-end',
+        );
+      }
+
+      if (minNightsForHoverDate > 0 && focusedInput === START_DATE) {
+        modifiers = this.addModifierToRange(
+          modifiers,
+          hoverDate.clone().add(1, 'days'),
+          hoverDate.clone().add(minNightsForHoverDate, 'days'),
+          'hovered-start-blocked-minimum-nights',
+        );
+
+        modifiers = this.addModifier(
+          modifiers,
+          hoverDate.clone().add(minNightsForHoverDate, 'days'),
+          'hovered-start-first-possible-end',
+        );
+      }
+    }
+
     if (minimumNights > 0 && startDate && focusedInput === END_DATE) {
       modifiers = this.addModifierToRange(
         modifiers,
@@ -557,6 +596,7 @@ export default class DayPickerRangeController extends React.PureComponent {
       startDate,
       endDate,
       focusedInput,
+      getMinNightsForHoverDate,
       minimumNights,
       startDateOffset,
       endDateOffset,
@@ -632,6 +672,38 @@ export default class DayPickerRangeController extends React.PureComponent {
             );
           }
         }
+
+        const minNightsForPrevHoverDate = getMinNightsForHoverDate(hoverDate);
+        if (hoverDate && minNightsForPrevHoverDate > 0 && focusedInput === START_DATE) {
+          modifiers = this.deleteModifierFromRange(
+            modifiers,
+            hoverDate.clone().add(1, 'days'),
+            hoverDate.clone().add(minNightsForPrevHoverDate, 'days'),
+            'hovered-start-blocked-minimum-nights',
+          );
+
+          modifiers = this.deleteModifier(
+            modifiers,
+            hoverDate.clone().add(minNightsForPrevHoverDate, 'days'),
+            'hovered-start-first-possible-end',
+          );
+        }
+
+        const minNightsForHoverDate = getMinNightsForHoverDate(day);
+        if (minNightsForHoverDate > 0 && focusedInput === START_DATE) {
+          modifiers = this.addModifierToRange(
+            modifiers,
+            day.clone().add(1, 'days'),
+            day.clone().add(minNightsForHoverDate, 'days'),
+            'hovered-start-blocked-minimum-nights',
+          );
+
+          modifiers = this.addModifier(
+            modifiers,
+            day.clone().add(minNightsForHoverDate, 'days'),
+            'hovered-start-first-possible-end',
+          );
+        }
       }
 
       this.setState({
@@ -646,7 +718,13 @@ export default class DayPickerRangeController extends React.PureComponent {
   }
 
   onDayMouseLeave(day) {
-    const { startDate, endDate, minimumNights } = this.props;
+    const {
+      startDate,
+      endDate,
+      focusedInput,
+      getMinNightsForHoverDate,
+      minimumNights,
+    } = this.props;
     const { hoverDate, visibleDays, dateOffset } = this.state;
     if (this.isTouchDevice || !hoverDate) return;
 
@@ -672,6 +750,22 @@ export default class DayPickerRangeController extends React.PureComponent {
       modifiers = this.deleteModifierFromRange(modifiers, startSpan, endSpan, 'after-hovered-start');
     }
 
+    const minNightsForHoverDate = getMinNightsForHoverDate(hoverDate);
+    if (minNightsForHoverDate > 0 && focusedInput === START_DATE) {
+      modifiers = this.deleteModifierFromRange(
+        modifiers,
+        hoverDate.clone().add(1, 'days'),
+        hoverDate.clone().add(minNightsForHoverDate, 'days'),
+        'hovered-start-blocked-minimum-nights',
+      );
+
+      modifiers = this.deleteModifier(
+        modifiers,
+        hoverDate.clone().add(minNightsForHoverDate, 'days'),
+        'hovered-start-first-possible-end',
+      );
+    }
+
     this.setState({
       hoverDate: null,
       visibleDays: {
@@ -1025,6 +1119,21 @@ export default class DayPickerRangeController extends React.PureComponent {
     return isOutsideRange(moment(day).subtract(minimumNights, 'days'));
   }
 
+  doesNotMeetMinNightsForHoveredStartDate(day, hoverDate) {
+    const {
+      focusedInput,
+      getMinNightsForHoverDate,
+    } = this.props;
+    if (focusedInput !== END_DATE) return false;
+
+    if (hoverDate) {
+      const minNights = getMinNightsForHoverDate(hoverDate);
+      const dayDiff = day.diff(hoverDate.clone().startOf('day').hour(12), 'days');
+      return dayDiff < minNights && dayDiff >= 0;
+    }
+    return false;
+  }
+
   isDayAfterHoveredStartDate(day) {
     const { startDate, endDate, minimumNights } = this.props;
     const { hoverDate } = this.state || {};
@@ -1097,6 +1206,15 @@ export default class DayPickerRangeController extends React.PureComponent {
     return day.day() === ((firstDayOfWeek || moment.localeData().firstDayOfWeek()) + 6) % 7;
   }
 
+  isFirstPossibleEndDateForHoveredStartDate(day, hoverDate) {
+    const { focusedInput, getMinNightsForHoverDate } = this.props;
+    if (focusedInput !== END_DATE) return false;
+    if (!hoverDate) return false;
+    const minNights = getMinNightsForHoverDate(hoverDate);
+    const firstAvailableEndDate = hoverDate.clone().add(minNights, 'days');
+    return isSameDay(day, firstAvailableEndDate);
+  }
+
   render() {
     const {
       numberOfMonths,

From 049b8f1c9b1acd678ef306dbb85da939b97904e0 Mon Sep 17 00:00:00 2001
From: Nicole Kinser <nicole.kinser@airbnb.com>
Date: Thu, 14 Feb 2019 17:37:30 -0800
Subject: [PATCH 401/618] add stories

---
 stories/DayPickerRangeController.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
index 41ff0ffe6f..0296fa10a6 100644
--- a/stories/DayPickerRangeController.js
+++ b/stories/DayPickerRangeController.js
@@ -400,4 +400,12 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       noNavButtons
     />
+  )))
+  .add('with minimum nights for the hovered date', withInfo()(() => (
+    <DayPickerRangeControllerWrapper
+      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
+      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
+      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
+      getMinNightsForHoverDate={() => 2}
+    />
   )));

From 1a72c374e2b8b4eee3f39b03db28f17d090b67d4 Mon Sep 17 00:00:00 2001
From: Nicole Kinser <nicole.kinser@airbnb.com>
Date: Thu, 14 Feb 2019 17:37:39 -0800
Subject: [PATCH 402/618] add tests

---
 .../DayPickerRangeController_spec.jsx         | 653 ++++++++++++++++++
 1 file changed, 653 insertions(+)

diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index 40e7282fef..34d1cc5236 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -1147,6 +1147,308 @@ describe('DayPickerRangeController', () => {
           });
         });
       });
+
+      describe('hovered-start-blocked-minimum-nights', () => {
+        describe('focusedInput did not change', () => {
+          it('does not call getMinNightsForHoverDate', () => {
+            const getMinNightsForHoverDateStub = sinon.stub();
+            const wrapper = shallow(<DayPickerRangeController
+              {...props}
+              getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+            />);
+            wrapper.instance().componentWillReceiveProps({
+              ...props,
+              getMinNightsForHoverDate: getMinNightsForHoverDateStub,
+            });
+            expect(getMinNightsForHoverDateStub.callCount).to.equal(0);
+          });
+        });
+
+        describe('focusedInput did change', () => {
+          it('does not call getMinNightsForHoverDate when there is no hoverDate state', () => {
+            const getMinNightsForHoverDateStub = sinon.stub();
+            const wrapper = shallow(<DayPickerRangeController
+              {...props}
+              getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+            />);
+            wrapper.instance().componentWillReceiveProps({
+              ...props,
+              focusedInput: START_DATE,
+              getMinNightsForHoverDate: getMinNightsForHoverDateStub,
+            });
+            expect(getMinNightsForHoverDateStub.callCount).to.equal(0);
+          });
+
+          it('calls getMinNightsForHoverDate when there is hoverDate state', () => {
+            const getMinNightsForHoverDateStub = sinon.stub();
+            const wrapper = shallow(<DayPickerRangeController
+              {...props}
+              getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+            />);
+            wrapper.setState({ hoverDate: today });
+            wrapper.instance().componentWillReceiveProps({
+              ...props,
+              focusedInput: START_DATE,
+              getMinNightsForHoverDate: getMinNightsForHoverDateStub,
+            });
+            expect(getMinNightsForHoverDateStub.callCount).to.equal(1);
+          });
+
+          describe('focusedInput === START_DATE', () => {
+            it('calls addModifierToRange with `hovered-start-blocked-minimum-nights` if getMinNightsForHoverDate returns a positive integer', () => {
+              const addModifierToRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifierToRange');
+              const getMinNightsForHoverDateStub = sinon.stub().returns(2);
+              const wrapper = shallow(<DayPickerRangeController
+                {...props}
+                getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+              />);
+              wrapper.setState({ hoverDate: today });
+              wrapper.instance().componentWillReceiveProps({
+                ...props,
+                focusedInput: START_DATE,
+                getMinNightsForHoverDate: getMinNightsForHoverDateStub,
+              });
+              const hoveredStartBlockedMinNightsCalls = getCallsByModifier(addModifierToRangeSpy, 'hovered-start-blocked-minimum-nights');
+              expect(hoveredStartBlockedMinNightsCalls.length).to.equal(1);
+              expect(isSameDay(hoveredStartBlockedMinNightsCalls[0].args[1], today.clone().add(1, 'days'))).to.equal(true);
+              expect(isSameDay(hoveredStartBlockedMinNightsCalls[0].args[2], today.clone().add(2, 'days'))).to.equal(true);
+            });
+
+            it('does not call addModifierToRange with `hovered-start-blocked-minimum-nights` if getMinNightsForHoverDate does not return a positive integer', () => {
+              const addModifierToRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifierToRange');
+              const getMinNightsForHoverDateStub = sinon.stub().returns(0);
+              const wrapper = shallow(<DayPickerRangeController
+                {...props}
+                getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+              />);
+              wrapper.setState({ hoverDate: today });
+              wrapper.instance().componentWillReceiveProps({
+                ...props,
+                focusedInput: START_DATE,
+                getMinNightsForHoverDate: getMinNightsForHoverDateStub,
+              });
+              const hoveredStartBlockedMinNightsCalls = getCallsByModifier(addModifierToRangeSpy, 'hovered-start-blocked-minimum-nights');
+              expect(hoveredStartBlockedMinNightsCalls.length).to.equal(0);
+            });
+
+            it('does not call addModifierToRange with `hovered-start-blocked-minimum-nights` if getMinNightsForHoverDate is not supplied as a prop', () => {
+              const addModifierToRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifierToRange');
+              const wrapper = shallow(<DayPickerRangeController
+                {...props}
+              />);
+              wrapper.setState({ hoverDate: today });
+              wrapper.instance().componentWillReceiveProps({
+                ...props,
+                focusedInput: START_DATE,
+              });
+              const hoveredStartBlockedMinNightsCalls = getCallsByModifier(addModifierToRangeSpy, 'hovered-start-blocked-minimum-nights');
+              expect(hoveredStartBlockedMinNightsCalls.length).to.equal(0);
+            });
+          });
+
+          describe('focusedInput === END_DATE', () => {
+            it('calls deleteModifierFromRange with `hovered-start-blocked-minimum-nights` if getMinNightsForHoverDate returns a positive integer', () => {
+              const deleteModifierFromRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifierFromRange');
+              const getMinNightsForHoverDateStub = sinon.stub().returns(2);
+              const wrapper = shallow(<DayPickerRangeController
+                {...props}
+                getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+              />);
+              wrapper.setState({ hoverDate: today });
+              wrapper.instance().componentWillReceiveProps({
+                ...props,
+                focusedInput: END_DATE,
+                getMinNightsForHoverDate: getMinNightsForHoverDateStub,
+              });
+              const hoveredStartBlockedMinNightsCalls = getCallsByModifier(deleteModifierFromRangeSpy, 'hovered-start-blocked-minimum-nights');
+              expect(hoveredStartBlockedMinNightsCalls.length).to.equal(1);
+              expect(isSameDay(hoveredStartBlockedMinNightsCalls[0].args[1], today.clone().add(1, 'days'))).to.equal(true);
+              expect(isSameDay(hoveredStartBlockedMinNightsCalls[0].args[2], today.clone().add(2, 'days'))).to.equal(true);
+            });
+
+            it('does not call deleteModifierFromRange with `hovered-start-blocked-minimum-nights` if getMinNightsForHoverDate does not return a positive integer', () => {
+              const deleteModifierFromRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifierFromRange');
+              const getMinNightsForHoverDateStub = sinon.stub().returns(0);
+              const wrapper = shallow(<DayPickerRangeController
+                {...props}
+                getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+              />);
+              wrapper.setState({ hoverDate: today });
+              wrapper.instance().componentWillReceiveProps({
+                ...props,
+                focusedInput: END_DATE,
+                getMinNightsForHoverDate: getMinNightsForHoverDateStub,
+              });
+              const hoveredStartBlockedMinNightsCalls = getCallsByModifier(deleteModifierFromRangeSpy, 'hovered-start-blocked-minimum-nights');
+              expect(hoveredStartBlockedMinNightsCalls.length).to.equal(0);
+            });
+
+            it('does not call deleteModifierFromRange with `hovered-start-blocked-minimum-nights` if getMinNightsForHoverDate is not supplied as a prop', () => {
+              const deleteModifierFromRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifierFromRange');
+              const wrapper = shallow(<DayPickerRangeController
+                {...props}
+              />);
+              wrapper.setState({ hoverDate: today });
+              wrapper.instance().componentWillReceiveProps({
+                ...props,
+                focusedInput: END_DATE,
+              });
+              const hoveredStartBlockedMinNightsCalls = getCallsByModifier(deleteModifierFromRangeSpy, 'hovered-start-blocked-minimum-nights');
+              expect(hoveredStartBlockedMinNightsCalls.length).to.equal(0);
+            });
+          });
+        });
+      });
+
+      describe('hovered-start-first-possible-end', () => {
+        describe('focusedInput did not change', () => {
+          it('does not call getMinNightsForHoverDate', () => {
+            const getMinNightsForHoverDateStub = sinon.stub();
+            const wrapper = shallow(<DayPickerRangeController
+              {...props}
+              getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+            />);
+            wrapper.instance().componentWillReceiveProps({
+              ...props,
+              getMinNightsForHoverDate: getMinNightsForHoverDateStub,
+            });
+            expect(getMinNightsForHoverDateStub.callCount).to.equal(0);
+          });
+        });
+
+        describe('focusedInput did change', () => {
+          it('does not call getMinNightsForHoverDate when there is no hoverDate state', () => {
+            const getMinNightsForHoverDateStub = sinon.stub();
+            const wrapper = shallow(<DayPickerRangeController
+              {...props}
+              getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+            />);
+            wrapper.instance().componentWillReceiveProps({
+              ...props,
+              focusedInput: START_DATE,
+              getMinNightsForHoverDate: getMinNightsForHoverDateStub,
+            });
+            expect(getMinNightsForHoverDateStub.callCount).to.equal(0);
+          });
+
+          it('calls getMinNightsForHoverDate when there is hoverDate state', () => {
+            const getMinNightsForHoverDateStub = sinon.stub();
+            const wrapper = shallow(<DayPickerRangeController
+              {...props}
+              getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+            />);
+            wrapper.setState({ hoverDate: today });
+            wrapper.instance().componentWillReceiveProps({
+              ...props,
+              focusedInput: START_DATE,
+              getMinNightsForHoverDate: getMinNightsForHoverDateStub,
+            });
+            expect(getMinNightsForHoverDateStub.callCount).to.equal(1);
+          });
+
+          describe('focusedInput === START_DATE', () => {
+            it('calls addModifier with `hovered-start-first-possible-end` if getMinNightsForHoverDate returns a positive integer', () => {
+              const addModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifier');
+              const getMinNightsForHoverDateStub = sinon.stub().returns(2);
+              const wrapper = shallow(<DayPickerRangeController
+                {...props}
+                getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+              />);
+              wrapper.setState({ hoverDate: today });
+              wrapper.instance().componentWillReceiveProps({
+                ...props,
+                focusedInput: START_DATE,
+                getMinNightsForHoverDate: getMinNightsForHoverDateStub,
+              });
+              const hoveredStartFirstPossibleEndCalls = getCallsByModifier(addModifierSpy, 'hovered-start-first-possible-end');
+              expect(hoveredStartFirstPossibleEndCalls.length).to.equal(1);
+              expect(isSameDay(hoveredStartFirstPossibleEndCalls[0].args[1], today.clone().add(2, 'days'))).to.equal(true);
+            });
+
+            it('does not call addModifier with `hovered-start-first-possible-end` if getMinNightsForHoverDate does not return a positive integer', () => {
+              const addModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifier');
+              const getMinNightsForHoverDateStub = sinon.stub().returns(0);
+              const wrapper = shallow(<DayPickerRangeController
+                {...props}
+                getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+              />);
+              wrapper.setState({ hoverDate: today });
+              wrapper.instance().componentWillReceiveProps({
+                ...props,
+                focusedInput: START_DATE,
+                getMinNightsForHoverDate: getMinNightsForHoverDateStub,
+              });
+              const hoveredStartFirstPossibleEndCalls = getCallsByModifier(addModifierSpy, 'hovered-start-first-possible-end');
+              expect(hoveredStartFirstPossibleEndCalls.length).to.equal(0);
+            });
+
+            it('does not call addModifier with `hovered-start-first-possible-end` if getMinNightsForHoverDate is not supplied as a prop', () => {
+              const addModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifier');
+              const wrapper = shallow(<DayPickerRangeController
+                {...props}
+              />);
+              wrapper.setState({ hoverDate: today });
+              wrapper.instance().componentWillReceiveProps({
+                ...props,
+                focusedInput: START_DATE,
+              });
+              const hoveredStartFirstPossibleEndCalls = getCallsByModifier(addModifierSpy, 'hovered-start-first-possible-end');
+              expect(hoveredStartFirstPossibleEndCalls.length).to.equal(0);
+            });
+          });
+
+          describe('focusedInput === END_DATE', () => {
+            it('calls deleteModifier with `hovered-start-first-possible-end` if getMinNightsForHoverDate returns a positive integer', () => {
+              const deleteModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifier');
+              const getMinNightsForHoverDateStub = sinon.stub().returns(2);
+              const wrapper = shallow(<DayPickerRangeController
+                {...props}
+                getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+              />);
+              wrapper.setState({ hoverDate: today });
+              wrapper.instance().componentWillReceiveProps({
+                ...props,
+                focusedInput: END_DATE,
+                getMinNightsForHoverDate: getMinNightsForHoverDateStub,
+              });
+              const hoveredStartFirstPossibleEndCalls = getCallsByModifier(deleteModifierSpy, 'hovered-start-first-possible-end');
+              expect(hoveredStartFirstPossibleEndCalls.length).to.equal(1);
+              expect(isSameDay(hoveredStartFirstPossibleEndCalls[0].args[1], today.clone().add(2, 'days'))).to.equal(true);
+            });
+
+            it('does not call deleteModifierFromRange with `hovered-start-first-possible-end` if getMinNightsForHoverDate does not return a positive integer', () => {
+              const deleteModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifier');
+              const getMinNightsForHoverDateStub = sinon.stub().returns(0);
+              const wrapper = shallow(<DayPickerRangeController
+                {...props}
+                getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+              />);
+              wrapper.setState({ hoverDate: today });
+              wrapper.instance().componentWillReceiveProps({
+                ...props,
+                focusedInput: END_DATE,
+                getMinNightsForHoverDate: getMinNightsForHoverDateStub,
+              });
+              const hoveredStartFirstPossibleEndCalls = getCallsByModifier(deleteModifierSpy, 'hovered-start-first-possible-end');
+              expect(hoveredStartFirstPossibleEndCalls.length).to.equal(0);
+            });
+
+            it('does not call deleteModifier with `hovered-start-first-possible-end` if getMinNightsForHoverDate is not supplied as a prop', () => {
+              const deleteModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifier');
+              const wrapper = shallow(<DayPickerRangeController
+                {...props}
+              />);
+              wrapper.setState({ hoverDate: today });
+              wrapper.instance().componentWillReceiveProps({
+                ...props,
+                focusedInput: END_DATE,
+              });
+              const hoveredStartFirstPossibleEndCalls = getCallsByModifier(deleteModifierSpy, 'hovered-start-first-possible-end');
+              expect(hoveredStartFirstPossibleEndCalls.length).to.equal(0);
+            });
+          });
+        });
+      });
     });
 
     describe('phrases', () => {
@@ -2024,6 +2326,252 @@ describe('DayPickerRangeController', () => {
           });
         });
       });
+
+      describe('hovered-start-first-possible-end modifier', () => {
+        it('does not call deleteModifier with `hovered-start-first-possible-end` if there is no previous hoverDate', () => {
+          const deleteModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifier');
+          const getMinNightsForHoverDateStub = sinon.stub().returns(2);
+          const wrapper = shallow(<DayPickerRangeController
+            onDatesChange={sinon.stub()}
+            onFocusChange={sinon.stub()}
+            focusedInput={START_DATE}
+            getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+          />);
+          wrapper.instance().onDayMouseEnter(today);
+          const hoveredStartFirstPossibleEndCalls = getCallsByModifier(deleteModifierSpy, 'hovered-start-first-possible-end');
+          expect(hoveredStartFirstPossibleEndCalls.length).to.equal(0);
+        });
+
+        describe('focusedInput === START_DATE', () => {
+          it('calls deleteModifier with `hovered-start-first-possible-end` if getMinNightsForHoverDate returns a positive integer', () => {
+            const hoverDate = today.clone().subtract(1, 'days');
+            const deleteModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifier');
+            const getMinNightsForHoverDateStub = sinon.stub().returns(2);
+            const wrapper = shallow(<DayPickerRangeController
+              onDatesChange={sinon.stub()}
+              onFocusChange={sinon.stub()}
+              focusedInput={START_DATE}
+              getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+            />);
+            wrapper.setState({ hoverDate });
+            wrapper.instance().onDayMouseEnter(today);
+            const hoveredStartFirstPossibleEndCalls = getCallsByModifier(deleteModifierSpy, 'hovered-start-first-possible-end');
+            expect(hoveredStartFirstPossibleEndCalls.length).to.equal(1);
+            expect(isSameDay(hoveredStartFirstPossibleEndCalls[0].args[1], hoverDate.clone().add(2, 'days'))).to.equal(true);
+          });
+
+          it('does not call deleteModifier with `hovered-start-first-possible-end` if getMinNightsForHoverDate does not return a positive integer', () => {
+            const deleteModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifier');
+            const getMinNightsForHoverDateStub = sinon.stub().returns(0);
+            const wrapper = shallow(<DayPickerRangeController
+              onDatesChange={sinon.stub()}
+              onFocusChange={sinon.stub()}
+              focusedInput={START_DATE}
+              getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+            />);
+            wrapper.setState({ hoverDate: today.clone().subtract(1, 'days') });
+            wrapper.instance().onDayMouseEnter(today);
+            const hoveredStartFirstPossibleEndCalls = getCallsByModifier(deleteModifierSpy, 'hovered-start-first-possible-end');
+            expect(hoveredStartFirstPossibleEndCalls.length).to.equal(0);
+          });
+
+          it('calls addModifier with `hovered-start-first-possible-end` if getMinNightsForHoverDate returns a positive integer', () => {
+            const addModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifier');
+            const getMinNightsForHoverDateStub = sinon.stub().returns(2);
+            const wrapper = shallow(<DayPickerRangeController
+              onDatesChange={sinon.stub()}
+              onFocusChange={sinon.stub()}
+              focusedInput={START_DATE}
+              getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+            />);
+            wrapper.instance().onDayMouseEnter(today);
+            const hoveredStartFirstPossibleEndCalls = getCallsByModifier(addModifierSpy, 'hovered-start-first-possible-end');
+            expect(hoveredStartFirstPossibleEndCalls.length).to.equal(1);
+            expect(isSameDay(hoveredStartFirstPossibleEndCalls[0].args[1], today.clone().add(2, 'days'))).to.equal(true);
+          });
+
+          it('does not call addModifier with `hovered-start-first-possible-end` if getMinNightsForHoverDate does not return a positive integer', () => {
+            const addModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifier');
+            const getMinNightsForHoverDateStub = sinon.stub().returns(0);
+            const wrapper = shallow(<DayPickerRangeController
+              onDatesChange={sinon.stub()}
+              onFocusChange={sinon.stub()}
+              focusedInput={START_DATE}
+              getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+            />);
+            wrapper.instance().onDayMouseEnter(today);
+            const hoveredStartFirstPossibleEndCalls = getCallsByModifier(addModifierSpy, 'hovered-start-first-possible-end');
+            expect(hoveredStartFirstPossibleEndCalls.length).to.equal(0);
+          });
+
+          it('does not call addModifier with `hovered-start-first-possible-end` if getMinNightsForHoverDate is not supplied as a prop', () => {
+            const addModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifier');
+            const wrapper = shallow(<DayPickerRangeController
+              onDatesChange={sinon.stub()}
+              onFocusChange={sinon.stub()}
+              focusedInput={START_DATE}
+            />);
+            wrapper.instance().onDayMouseEnter(today);
+            const hoveredStartFirstPossibleEndCalls = getCallsByModifier(addModifierSpy, 'hovered-start-first-possible-end');
+            expect(hoveredStartFirstPossibleEndCalls.length).to.equal(0);
+          });
+        });
+
+        describe('focusedInput === END_DATE', () => {
+          it('does not call deleteModifier with `hovered-start-first-possible-end`', () => {
+            const deleteModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifier');
+            const getMinNightsForHoverDateStub = sinon.stub().returns(2);
+            const wrapper = shallow(<DayPickerRangeController
+              onDatesChange={sinon.stub()}
+              onFocusChange={sinon.stub()}
+              focusedInput={END_DATE}
+              getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+            />);
+            wrapper.setState({ hoverDate: today.clone().subtract(1, 'days') });
+            wrapper.instance().onDayMouseEnter(today);
+            const hoveredStartFirstPossibleEndCalls = getCallsByModifier(deleteModifierSpy, 'hovered-start-first-possible-end');
+            expect(hoveredStartFirstPossibleEndCalls.length).to.equal(0);
+          });
+
+          it('does not call addModifier with `hovered-start-first-possible-end`', () => {
+            const addModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifier');
+            const getMinNightsForHoverDateStub = sinon.stub().returns(2);
+            const wrapper = shallow(<DayPickerRangeController
+              onDatesChange={sinon.stub()}
+              onFocusChange={sinon.stub()}
+              focusedInput={END_DATE}
+              getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+            />);
+            wrapper.instance().onDayMouseEnter(today);
+            const hoveredStartFirstPossibleEndCalls = getCallsByModifier(addModifierSpy, 'hovered-start-first-possible-end');
+            expect(hoveredStartFirstPossibleEndCalls.length).to.equal(0);
+          });
+        });
+      });
+
+      describe('hovered-start-blocked-minimum-nights modifier', () => {
+        it('does not call deleteModifierFromRange with `hovered-start-blocked-minimum-nights` if there is no previous hoverDate', () => {
+          const deleteModifierFromRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifierFromRange');
+          const getMinNightsForHoverDateStub = sinon.stub().returns(2);
+          const wrapper = shallow(<DayPickerRangeController
+            onDatesChange={sinon.stub()}
+            onFocusChange={sinon.stub()}
+            focusedInput={START_DATE}
+            getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+          />);
+          wrapper.instance().onDayMouseEnter(today);
+          const hoveredStartBlockedMinNightsCalls = getCallsByModifier(deleteModifierFromRangeSpy, 'hovered-start-blocked-minimum-nights');
+          expect(hoveredStartBlockedMinNightsCalls.length).to.equal(0);
+        });
+
+        describe('focusedInput === START_DATE', () => {
+          it('calls deleteModifierFromRange with `hovered-start-blocked-minimum-nights` if getMinNightsForHoverDate returns a positive integer', () => {
+            const hoverDate = today.clone().subtract(1, 'days');
+            const deleteModifierFromRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifierFromRange');
+            const getMinNightsForHoverDateStub = sinon.stub().returns(2);
+            const wrapper = shallow(<DayPickerRangeController
+              onDatesChange={sinon.stub()}
+              onFocusChange={sinon.stub()}
+              focusedInput={START_DATE}
+              getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+            />);
+            wrapper.setState({ hoverDate });
+            wrapper.instance().onDayMouseEnter(today);
+            const hoveredStartBlockedMinNightsCalls = getCallsByModifier(deleteModifierFromRangeSpy, 'hovered-start-blocked-minimum-nights');
+            expect(hoveredStartBlockedMinNightsCalls.length).to.equal(1);
+            expect(isSameDay(hoveredStartBlockedMinNightsCalls[0].args[1], hoverDate.clone().add(1, 'days'))).to.equal(true);
+            expect(isSameDay(hoveredStartBlockedMinNightsCalls[0].args[2], hoverDate.clone().add(2, 'days'))).to.equal(true);
+          });
+
+          it('does not call deleteModifierFromRange with `hovered-start-blocked-minimum-nights` if getMinNightsForHoverDate does not return a positive integer', () => {
+            const deleteModifierFromRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifierFromRange');
+            const getMinNightsForHoverDateStub = sinon.stub().returns(0);
+            const wrapper = shallow(<DayPickerRangeController
+              onDatesChange={sinon.stub()}
+              onFocusChange={sinon.stub()}
+              focusedInput={START_DATE}
+              getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+            />);
+            wrapper.setState({ hoverDate: today.clone().subtract(1, 'days') });
+            wrapper.instance().onDayMouseEnter(today);
+            const hoveredStartBlockedMinNightsCalls = getCallsByModifier(deleteModifierFromRangeSpy, 'hovered-start-blocked-minimum-nights');
+            expect(hoveredStartBlockedMinNightsCalls.length).to.equal(0);
+          });
+
+          it('calls addModifierToRange with `hovered-start-blocked-minimum-nights` if getMinNightsForHoverDate returns a positive integer', () => {
+            const addModifierToRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifierToRange');
+            const getMinNightsForHoverDateStub = sinon.stub().returns(2);
+            const wrapper = shallow(<DayPickerRangeController
+              onDatesChange={sinon.stub()}
+              onFocusChange={sinon.stub()}
+              focusedInput={START_DATE}
+              getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+            />);
+            wrapper.instance().onDayMouseEnter(today);
+            const hoveredStartBlockedMinNightsCalls = getCallsByModifier(addModifierToRangeSpy, 'hovered-start-blocked-minimum-nights');
+            expect(hoveredStartBlockedMinNightsCalls.length).to.equal(1);
+            expect(isSameDay(hoveredStartBlockedMinNightsCalls[0].args[1], today.clone().add(1, 'days'))).to.equal(true);
+            expect(isSameDay(hoveredStartBlockedMinNightsCalls[0].args[2], today.clone().add(2, 'days'))).to.equal(true);
+          });
+
+          it('does not call addModifier with `hovered-start-blocked-minimum-nights` if getMinNightsForHoverDate does not return a positive integer', () => {
+            const addModifierToRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifierToRange');
+            const getMinNightsForHoverDateStub = sinon.stub().returns(0);
+            const wrapper = shallow(<DayPickerRangeController
+              onDatesChange={sinon.stub()}
+              onFocusChange={sinon.stub()}
+              focusedInput={START_DATE}
+              getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+            />);
+            wrapper.instance().onDayMouseEnter(today);
+            const hoveredStartBlockedMinNightsCalls = getCallsByModifier(addModifierToRangeSpy, 'hovered-start-blocked-minimum-nights');
+            expect(hoveredStartBlockedMinNightsCalls.length).to.equal(0);
+          });
+
+          it('does not call addModifier with `hovered-start-blocked-minimum-nights` if getMinNightsForHoverDate is not supplied as a prop', () => {
+            const addModifierToRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifierToRange');
+            const wrapper = shallow(<DayPickerRangeController
+              onDatesChange={sinon.stub()}
+              onFocusChange={sinon.stub()}
+              focusedInput={START_DATE}
+            />);
+            wrapper.instance().onDayMouseEnter(today);
+            const hoveredStartBlockedMinNightsCalls = getCallsByModifier(addModifierToRangeSpy, 'hovered-start-blocked-minimum-nights');
+            expect(hoveredStartBlockedMinNightsCalls.length).to.equal(0);
+          });
+        });
+
+        describe('focusedInput === END_DATE', () => {
+          it('does not call deleteModifierFromRangeFromRange with `hovered-start-blocked-minimum-nights`', () => {
+            const deleteModifierFromRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifierFromRange');
+            const getMinNightsForHoverDateStub = sinon.stub().returns(2);
+            const wrapper = shallow(<DayPickerRangeController
+              onDatesChange={sinon.stub()}
+              onFocusChange={sinon.stub()}
+              focusedInput={END_DATE}
+              getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+            />);
+            wrapper.setState({ hoverDate: today.clone().subtract(1, 'days') });
+            wrapper.instance().onDayMouseEnter(today);
+            const hoveredStartBlockedMinNightsCalls = getCallsByModifier(deleteModifierFromRangeSpy, 'hovered-start-blocked-minimum-nights');
+            expect(hoveredStartBlockedMinNightsCalls.length).to.equal(0);
+          });
+
+          it('does not call addModifier with `hovered-start-blocked-minimum-nights`', () => {
+            const addModifierToRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifierToRange');
+            const getMinNightsForHoverDateStub = sinon.stub().returns(2);
+            const wrapper = shallow(<DayPickerRangeController
+              onDatesChange={sinon.stub()}
+              onFocusChange={sinon.stub()}
+              focusedInput={END_DATE}
+              getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+            />);
+            wrapper.instance().onDayMouseEnter(today);
+            const hoveredStartBlockedMinNightsCalls = getCallsByModifier(addModifierToRangeSpy, 'hovered-start-blocked-minimum-nights');
+            expect(hoveredStartBlockedMinNightsCalls.length).to.equal(0);
+          });
+        });
+      });
     });
   });
 
@@ -2170,6 +2718,111 @@ describe('DayPickerRangeController', () => {
           });
         });
       });
+
+      describe('hovered-start-first-possible-end modifier', () => {
+        describe('focusedInput === START_DATE', () => {
+          it('calls deleteModifier with `hovered-start-first-possible-end` if getMinNightsForHoverDate returns a positive integer', () => {
+            const deleteModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifier');
+            const getMinNightsForHoverDateStub = sinon.stub().returns(2);
+            const wrapper = shallow(<DayPickerRangeController
+              onDatesChange={sinon.stub()}
+              onFocusChange={sinon.stub()}
+              focusedInput={START_DATE}
+              getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+            />);
+            wrapper.setState({ hoverDate: today });
+            wrapper.instance().onDayMouseLeave(today);
+            const hoveredStartFirstPossibleEndCalls = getCallsByModifier(deleteModifierSpy, 'hovered-start-first-possible-end');
+            expect(hoveredStartFirstPossibleEndCalls.length).to.equal(1);
+            expect(isSameDay(hoveredStartFirstPossibleEndCalls[0].args[1], today.clone().add(2, 'days'))).to.equal(true);
+          });
+
+          it('does not call deleteModifier with `hovered-start-first-possible-end` if getMinNightsForHoverDate does not return a positive integer', () => {
+            const deleteModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifier');
+            const getMinNightsForHoverDateStub = sinon.stub().returns(0);
+            const wrapper = shallow(<DayPickerRangeController
+              onDatesChange={sinon.stub()}
+              onFocusChange={sinon.stub()}
+              focusedInput={START_DATE}
+              getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+            />);
+            wrapper.setState({ hoverDate: today });
+            wrapper.instance().onDayMouseEnter(today);
+            const hoveredStartFirstPossibleEndCalls = getCallsByModifier(deleteModifierSpy, 'hovered-start-first-possible-end');
+            expect(hoveredStartFirstPossibleEndCalls.length).to.equal(0);
+          });
+        });
+
+        describe('focusedInput === END_DATE', () => {
+          it('does not call deleteModifier with `hovered-start-first-possible-end`', () => {
+            const deleteModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifier');
+            const getMinNightsForHoverDateStub = sinon.stub().returns(2);
+            const wrapper = shallow(<DayPickerRangeController
+              onDatesChange={sinon.stub()}
+              onFocusChange={sinon.stub()}
+              focusedInput={END_DATE}
+              getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+            />);
+            wrapper.setState({ hoverDate: today.clone().subtract(1, 'days') });
+            wrapper.instance().onDayMouseEnter(today);
+            const hoveredStartFirstPossibleEndCalls = getCallsByModifier(deleteModifierSpy, 'hovered-start-first-possible-end');
+            expect(hoveredStartFirstPossibleEndCalls.length).to.equal(0);
+          });
+        });
+      });
+
+      describe('hovered-start-blocked-minimum-nights modifier', () => {
+        describe('focusedInput === START_DATE', () => {
+          it('calls deleteModifierFromRange with `hovered-start-blocked-minimum-nights` if getMinNightsForHoverDate returns a positive integer', () => {
+            const deleteModifierFromRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifierFromRange');
+            const getMinNightsForHoverDateStub = sinon.stub().returns(2);
+            const wrapper = shallow(<DayPickerRangeController
+              onDatesChange={sinon.stub()}
+              onFocusChange={sinon.stub()}
+              focusedInput={START_DATE}
+              getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+            />);
+            wrapper.setState({ hoverDate: today });
+            wrapper.instance().onDayMouseEnter(today);
+            const hoveredStartBlockedMinNightsCalls = getCallsByModifier(deleteModifierFromRangeSpy, 'hovered-start-blocked-minimum-nights');
+            expect(hoveredStartBlockedMinNightsCalls.length).to.equal(1);
+            expect(isSameDay(hoveredStartBlockedMinNightsCalls[0].args[1], today.clone().add(1, 'days'))).to.equal(true);
+            expect(isSameDay(hoveredStartBlockedMinNightsCalls[0].args[2], today.clone().add(2, 'days'))).to.equal(true);
+          });
+
+          it('does not call deleteModifierFromRange with `hovered-start-blocked-minimum-nights` if getMinNightsForHoverDate does not return a positive integer', () => {
+            const deleteModifierFromRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifierFromRange');
+            const getMinNightsForHoverDateStub = sinon.stub().returns(0);
+            const wrapper = shallow(<DayPickerRangeController
+              onDatesChange={sinon.stub()}
+              onFocusChange={sinon.stub()}
+              focusedInput={START_DATE}
+              getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+            />);
+            wrapper.setState({ hoverDate: today });
+            wrapper.instance().onDayMouseEnter(today);
+            const hoveredStartBlockedMinNightsCalls = getCallsByModifier(deleteModifierFromRangeSpy, 'hovered-start-blocked-minimum-nights');
+            expect(hoveredStartBlockedMinNightsCalls.length).to.equal(0);
+          });
+        });
+
+        describe('focusedInput === END_DATE', () => {
+          it('does not call deleteModifierFromRangeFromRange with `hovered-start-blocked-minimum-nights`', () => {
+            const deleteModifierFromRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifierFromRange');
+            const getMinNightsForHoverDateStub = sinon.stub().returns(2);
+            const wrapper = shallow(<DayPickerRangeController
+              onDatesChange={sinon.stub()}
+              onFocusChange={sinon.stub()}
+              focusedInput={END_DATE}
+              getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+            />);
+            wrapper.setState({ hoverDate: today.clone().subtract(1, 'days') });
+            wrapper.instance().onDayMouseEnter(today);
+            const hoveredStartBlockedMinNightsCalls = getCallsByModifier(deleteModifierFromRangeSpy, 'hovered-start-blocked-minimum-nights');
+            expect(hoveredStartBlockedMinNightsCalls.length).to.equal(0);
+          });
+        });
+      });
     });
   });
 

From 8bdaaf018b8f94fc249c3125d9632f877cc68793 Mon Sep 17 00:00:00 2001
From: Nicole Kinser <nicole.kinser@airbnb.com>
Date: Tue, 26 Feb 2019 23:20:10 -0800
Subject: [PATCH 403/618] don't compute hovered start modifiers in
 componentWillReceiveProps when it is a touch device

---
 src/components/DayPickerRangeController.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 4aff8059a3..bffefea362 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -429,7 +429,7 @@ export default class DayPickerRangeController extends React.PureComponent {
       });
     }
 
-    if (didFocusChange && hoverDate) {
+    if (!this.isTouchDevice && didFocusChange && hoverDate) {
       const minNightsForHoverDate = getMinNightsForHoverDate(hoverDate);
       if (minNightsForHoverDate > 0 && focusedInput === END_DATE) {
         modifiers = this.deleteModifierFromRange(

From aeb787916a8c6272af14f47170b3c6698dd4c687 Mon Sep 17 00:00:00 2001
From: Nicole Kinser <nicole.kinser@airbnb.com>
Date: Wed, 27 Feb 2019 14:24:51 -0800
Subject: [PATCH 404/618] don't apply hovered-start modifiers for blocked days

---
 src/components/DayPickerRangeController.jsx | 96 +++++++++++----------
 stories/DayPickerRangeController.js         |  9 ++
 2 files changed, 60 insertions(+), 45 deletions(-)

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index bffefea362..9e414c839c 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -429,7 +429,7 @@ export default class DayPickerRangeController extends React.PureComponent {
       });
     }
 
-    if (!this.isTouchDevice && didFocusChange && hoverDate) {
+    if (!this.isTouchDevice && didFocusChange && hoverDate && !this.isBlocked(hoverDate)) {
       const minNightsForHoverDate = getMinNightsForHoverDate(hoverDate);
       if (minNightsForHoverDate > 0 && focusedInput === END_DATE) {
         modifiers = this.deleteModifierFromRange(
@@ -673,36 +673,40 @@ export default class DayPickerRangeController extends React.PureComponent {
           }
         }
 
-        const minNightsForPrevHoverDate = getMinNightsForHoverDate(hoverDate);
-        if (hoverDate && minNightsForPrevHoverDate > 0 && focusedInput === START_DATE) {
-          modifiers = this.deleteModifierFromRange(
-            modifiers,
-            hoverDate.clone().add(1, 'days'),
-            hoverDate.clone().add(minNightsForPrevHoverDate, 'days'),
-            'hovered-start-blocked-minimum-nights',
-          );
-
-          modifiers = this.deleteModifier(
-            modifiers,
-            hoverDate.clone().add(minNightsForPrevHoverDate, 'days'),
-            'hovered-start-first-possible-end',
-          );
+        if (hoverDate && !this.isBlocked(hoverDate)) {
+          const minNightsForPrevHoverDate = getMinNightsForHoverDate(hoverDate);
+          if (minNightsForPrevHoverDate > 0 && focusedInput === START_DATE) {
+            modifiers = this.deleteModifierFromRange(
+              modifiers,
+              hoverDate.clone().add(1, 'days'),
+              hoverDate.clone().add(minNightsForPrevHoverDate, 'days'),
+              'hovered-start-blocked-minimum-nights',
+            );
+
+            modifiers = this.deleteModifier(
+              modifiers,
+              hoverDate.clone().add(minNightsForPrevHoverDate, 'days'),
+              'hovered-start-first-possible-end',
+            );
+          }
         }
 
-        const minNightsForHoverDate = getMinNightsForHoverDate(day);
-        if (minNightsForHoverDate > 0 && focusedInput === START_DATE) {
-          modifiers = this.addModifierToRange(
-            modifiers,
-            day.clone().add(1, 'days'),
-            day.clone().add(minNightsForHoverDate, 'days'),
-            'hovered-start-blocked-minimum-nights',
-          );
-
-          modifiers = this.addModifier(
-            modifiers,
-            day.clone().add(minNightsForHoverDate, 'days'),
-            'hovered-start-first-possible-end',
-          );
+        if (!this.isBlocked(day)) {
+          const minNightsForHoverDate = getMinNightsForHoverDate(day);
+          if (minNightsForHoverDate > 0 && focusedInput === START_DATE) {
+            modifiers = this.addModifierToRange(
+              modifiers,
+              day.clone().add(1, 'days'),
+              day.clone().add(minNightsForHoverDate, 'days'),
+              'hovered-start-blocked-minimum-nights',
+            );
+
+            modifiers = this.addModifier(
+              modifiers,
+              day.clone().add(minNightsForHoverDate, 'days'),
+              'hovered-start-first-possible-end',
+            );
+          }
         }
       }
 
@@ -750,22 +754,25 @@ export default class DayPickerRangeController extends React.PureComponent {
       modifiers = this.deleteModifierFromRange(modifiers, startSpan, endSpan, 'after-hovered-start');
     }
 
-    const minNightsForHoverDate = getMinNightsForHoverDate(hoverDate);
-    if (minNightsForHoverDate > 0 && focusedInput === START_DATE) {
-      modifiers = this.deleteModifierFromRange(
-        modifiers,
-        hoverDate.clone().add(1, 'days'),
-        hoverDate.clone().add(minNightsForHoverDate, 'days'),
-        'hovered-start-blocked-minimum-nights',
-      );
+    if (!this.isBlocked(hoverDate)) {
+      const minNightsForHoverDate = getMinNightsForHoverDate(hoverDate);
+      if (minNightsForHoverDate > 0 && focusedInput === START_DATE) {
+        modifiers = this.deleteModifierFromRange(
+          modifiers,
+          hoverDate.clone().add(1, 'days'),
+          hoverDate.clone().add(minNightsForHoverDate, 'days'),
+          'hovered-start-blocked-minimum-nights',
+        );
 
-      modifiers = this.deleteModifier(
-        modifiers,
-        hoverDate.clone().add(minNightsForHoverDate, 'days'),
-        'hovered-start-first-possible-end',
-      );
+        modifiers = this.deleteModifier(
+          modifiers,
+          hoverDate.clone().add(minNightsForHoverDate, 'days'),
+          'hovered-start-first-possible-end',
+        );
+      }
     }
 
+
     this.setState({
       hoverDate: null,
       visibleDays: {
@@ -1126,7 +1133,7 @@ export default class DayPickerRangeController extends React.PureComponent {
     } = this.props;
     if (focusedInput !== END_DATE) return false;
 
-    if (hoverDate) {
+    if (hoverDate && !this.isBlocked(hoverDate)) {
       const minNights = getMinNightsForHoverDate(hoverDate);
       const dayDiff = day.diff(hoverDate.clone().startOf('day').hour(12), 'days');
       return dayDiff < minNights && dayDiff >= 0;
@@ -1208,8 +1215,7 @@ export default class DayPickerRangeController extends React.PureComponent {
 
   isFirstPossibleEndDateForHoveredStartDate(day, hoverDate) {
     const { focusedInput, getMinNightsForHoverDate } = this.props;
-    if (focusedInput !== END_DATE) return false;
-    if (!hoverDate) return false;
+    if (focusedInput !== END_DATE || !hoverDate || this.isBlocked(hoverDate)) return false;
     const minNights = getMinNightsForHoverDate(hoverDate);
     const firstAvailableEndDate = hoverDate.clone().add(minNights, 'days');
     return isSameDay(day, firstAvailableEndDate);
diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
index 0296fa10a6..a165ccca9d 100644
--- a/stories/DayPickerRangeController.js
+++ b/stories/DayPickerRangeController.js
@@ -408,4 +408,13 @@ storiesOf('DayPickerRangeController', module)
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
       getMinNightsForHoverDate={() => 2}
     />
+  )))
+  .add('with minimum nights for the hovered date and some blocked dates', withInfo()(() => (
+    <DayPickerRangeControllerWrapper
+      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
+      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
+      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
+      getMinNightsForHoverDate={() => 2}
+      isDayBlocked={day1 => datesList.some(day2 => isSameDay(day1, day2))}
+    />
   )));

From 99135fe8c106b5f7003dfab4edf467f49ff6f8cd Mon Sep 17 00:00:00 2001
From: Nicole Kinser <nicole.kinser@airbnb.com>
Date: Wed, 27 Feb 2019 14:31:33 -0800
Subject: [PATCH 405/618] add tests to verify modifiers aren't applied for
 blocked dates

---
 .../DayPickerRangeController_spec.jsx         | 180 ++++++++++++++++++
 1 file changed, 180 insertions(+)

diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index 34d1cc5236..20efaea9d4 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -1214,6 +1214,26 @@ describe('DayPickerRangeController', () => {
               expect(isSameDay(hoveredStartBlockedMinNightsCalls[0].args[2], today.clone().add(2, 'days'))).to.equal(true);
             });
 
+            it('does not call addModifierToRange with `hovered-start-blocked-minimum-nights` if the hovered date is blocked', () => {
+              const addModifierToRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifierToRange');
+              const getMinNightsForHoverDateStub = sinon.stub().returns(2);
+              const wrapper = shallow(
+                <DayPickerRangeController
+                  {...props}
+                  getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+                  isDayBlocked={day => isSameDay(day, today)}
+                />,
+              );
+              wrapper.setState({ hoverDate: today });
+              wrapper.instance().componentWillReceiveProps({
+                ...props,
+                focusedInput: START_DATE,
+                getMinNightsForHoverDate: getMinNightsForHoverDateStub,
+              });
+              const hoveredStartBlockedMinNightsCalls = getCallsByModifier(addModifierToRangeSpy, 'hovered-start-blocked-minimum-nights');
+              expect(hoveredStartBlockedMinNightsCalls.length).to.equal(0);
+            });
+
             it('does not call addModifierToRange with `hovered-start-blocked-minimum-nights` if getMinNightsForHoverDate does not return a positive integer', () => {
               const addModifierToRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifierToRange');
               const getMinNightsForHoverDateStub = sinon.stub().returns(0);
@@ -1266,6 +1286,26 @@ describe('DayPickerRangeController', () => {
               expect(isSameDay(hoveredStartBlockedMinNightsCalls[0].args[2], today.clone().add(2, 'days'))).to.equal(true);
             });
 
+            it('does not call deleteModifierFromRange with `hovered-start-blocked-minimum-nights` if the hovered date is blocked', () => {
+              const deleteModifierFromRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifierFromRange');
+              const getMinNightsForHoverDateStub = sinon.stub().returns(2);
+              const wrapper = shallow(
+                <DayPickerRangeController
+                  {...props}
+                  getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+                  isDayBlocked={day => isSameDay(day, today)}
+                />,
+              );
+              wrapper.setState({ hoverDate: today });
+              wrapper.instance().componentWillReceiveProps({
+                ...props,
+                focusedInput: START_DATE,
+                getMinNightsForHoverDate: getMinNightsForHoverDateStub,
+              });
+              const hoveredStartBlockedMinNightsCalls = getCallsByModifier(deleteModifierFromRangeSpy, 'hovered-start-blocked-minimum-nights');
+              expect(hoveredStartBlockedMinNightsCalls.length).to.equal(0);
+            });
+
             it('does not call deleteModifierFromRange with `hovered-start-blocked-minimum-nights` if getMinNightsForHoverDate does not return a positive integer', () => {
               const deleteModifierFromRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifierFromRange');
               const getMinNightsForHoverDateStub = sinon.stub().returns(0);
@@ -1365,6 +1405,26 @@ describe('DayPickerRangeController', () => {
               expect(isSameDay(hoveredStartFirstPossibleEndCalls[0].args[1], today.clone().add(2, 'days'))).to.equal(true);
             });
 
+            it('does not call addModifierToRange with `hovered-start-first-possible-end` if the hovered date is blocked', () => {
+              const addModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifier');
+              const getMinNightsForHoverDateStub = sinon.stub().returns(2);
+              const wrapper = shallow(
+                <DayPickerRangeController
+                  {...props}
+                  getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+                  isDayBlocked={day => isSameDay(day, today)}
+                />,
+              );
+              wrapper.setState({ hoverDate: today });
+              wrapper.instance().componentWillReceiveProps({
+                ...props,
+                focusedInput: START_DATE,
+                getMinNightsForHoverDate: getMinNightsForHoverDateStub,
+              });
+              const hoveredStartFirstPossibleEndCalls = getCallsByModifier(addModifierSpy, 'hovered-start-first-possible-end');
+              expect(hoveredStartFirstPossibleEndCalls.length).to.equal(0);
+            });
+
             it('does not call addModifier with `hovered-start-first-possible-end` if getMinNightsForHoverDate does not return a positive integer', () => {
               const addModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifier');
               const getMinNightsForHoverDateStub = sinon.stub().returns(0);
@@ -1416,6 +1476,26 @@ describe('DayPickerRangeController', () => {
               expect(isSameDay(hoveredStartFirstPossibleEndCalls[0].args[1], today.clone().add(2, 'days'))).to.equal(true);
             });
 
+            it('does not call deleteModifierFromRange with `hovered-start-first-possible-end` if the hovered date is blocked', () => {
+              const deleteModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifier');
+              const getMinNightsForHoverDateStub = sinon.stub().returns(2);
+              const wrapper = shallow(
+                <DayPickerRangeController
+                  {...props}
+                  getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+                  isDayBlocked={day => isSameDay(day, today)}
+                />,
+              );
+              wrapper.setState({ hoverDate: today });
+              wrapper.instance().componentWillReceiveProps({
+                ...props,
+                focusedInput: START_DATE,
+                getMinNightsForHoverDate: getMinNightsForHoverDateStub,
+              });
+              const hoveredStartFirstPossibleEndCalls = getCallsByModifier(deleteModifierSpy, 'hovered-start-first-possible-end');
+              expect(hoveredStartFirstPossibleEndCalls.length).to.equal(0);
+            });
+
             it('does not call deleteModifierFromRange with `hovered-start-first-possible-end` if getMinNightsForHoverDate does not return a positive integer', () => {
               const deleteModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifier');
               const getMinNightsForHoverDateStub = sinon.stub().returns(0);
@@ -2360,6 +2440,23 @@ describe('DayPickerRangeController', () => {
             expect(isSameDay(hoveredStartFirstPossibleEndCalls[0].args[1], hoverDate.clone().add(2, 'days'))).to.equal(true);
           });
 
+          it('does not call deleteModifier with `hovered-start-first-possible-end` if the previous hovered date is blocked', () => {
+            const hoverDate = today.clone().subtract(1, 'days');
+            const deleteModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifier');
+            const getMinNightsForHoverDateStub = sinon.stub().returns(2);
+            const wrapper = shallow(<DayPickerRangeController
+              onDatesChange={sinon.stub()}
+              onFocusChange={sinon.stub()}
+              focusedInput={START_DATE}
+              getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+              isDayBlocked={day => isSameDay(day, hoverDate)}
+            />);
+            wrapper.setState({ hoverDate });
+            wrapper.instance().onDayMouseEnter(today);
+            const hoveredStartFirstPossibleEndCalls = getCallsByModifier(deleteModifierSpy, 'hovered-start-first-possible-end');
+            expect(hoveredStartFirstPossibleEndCalls.length).to.equal(0);
+          });
+
           it('does not call deleteModifier with `hovered-start-first-possible-end` if getMinNightsForHoverDate does not return a positive integer', () => {
             const deleteModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifier');
             const getMinNightsForHoverDateStub = sinon.stub().returns(0);
@@ -2390,6 +2487,23 @@ describe('DayPickerRangeController', () => {
             expect(isSameDay(hoveredStartFirstPossibleEndCalls[0].args[1], today.clone().add(2, 'days'))).to.equal(true);
           });
 
+          it('does not call addModifier with `hovered-start-first-possible-end` if the new hovered date is blocked', () => {
+            const hoverDate = today.clone().subtract(1, 'days');
+            const addModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifier');
+            const getMinNightsForHoverDateStub = sinon.stub().returns(2);
+            const wrapper = shallow(<DayPickerRangeController
+              onDatesChange={sinon.stub()}
+              onFocusChange={sinon.stub()}
+              focusedInput={START_DATE}
+              getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+              isDayBlocked={day => isSameDay(day, today)}
+            />);
+            wrapper.setState({ hoverDate });
+            wrapper.instance().onDayMouseEnter(today);
+            const hoveredStartFirstPossibleEndCalls = getCallsByModifier(addModifierSpy, 'hovered-start-first-possible-end');
+            expect(hoveredStartFirstPossibleEndCalls.length).to.equal(0);
+          });
+
           it('does not call addModifier with `hovered-start-first-possible-end` if getMinNightsForHoverDate does not return a positive integer', () => {
             const addModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifier');
             const getMinNightsForHoverDateStub = sinon.stub().returns(0);
@@ -2483,6 +2597,23 @@ describe('DayPickerRangeController', () => {
             expect(isSameDay(hoveredStartBlockedMinNightsCalls[0].args[2], hoverDate.clone().add(2, 'days'))).to.equal(true);
           });
 
+          it('does not call deleteModifierFromRange with `hovered-start-blocked-minimum-nights` if the previous hovered date is blocked', () => {
+            const hoverDate = today.clone().subtract(1, 'days');
+            const deleteModifierFromRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifierFromRange');
+            const getMinNightsForHoverDateStub = sinon.stub().returns(2);
+            const wrapper = shallow(<DayPickerRangeController
+              onDatesChange={sinon.stub()}
+              onFocusChange={sinon.stub()}
+              focusedInput={START_DATE}
+              getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+              isDayBlocked={day => isSameDay(day, hoverDate)}
+            />);
+            wrapper.setState({ hoverDate });
+            wrapper.instance().onDayMouseEnter(today);
+            const hoveredStartBlockedMinNightsCalls = getCallsByModifier(deleteModifierFromRangeSpy, 'hovered-start-blocked-minimum-nights');
+            expect(hoveredStartBlockedMinNightsCalls.length).to.equal(0);
+          });
+
           it('does not call deleteModifierFromRange with `hovered-start-blocked-minimum-nights` if getMinNightsForHoverDate does not return a positive integer', () => {
             const deleteModifierFromRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifierFromRange');
             const getMinNightsForHoverDateStub = sinon.stub().returns(0);
@@ -2514,6 +2645,23 @@ describe('DayPickerRangeController', () => {
             expect(isSameDay(hoveredStartBlockedMinNightsCalls[0].args[2], today.clone().add(2, 'days'))).to.equal(true);
           });
 
+          it('does not call addModifier with `hovered-start-blocked-minimum-nights` if the new hovered date is blocked', () => {
+            const hoverDate = today.clone().subtract(1, 'days');
+            const addModifierToRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifierToRange');
+            const getMinNightsForHoverDateStub = sinon.stub().returns(2);
+            const wrapper = shallow(<DayPickerRangeController
+              onDatesChange={sinon.stub()}
+              onFocusChange={sinon.stub()}
+              focusedInput={START_DATE}
+              getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+              isDayBlocked={day => isSameDay(day, today)}
+            />);
+            wrapper.setState({ hoverDate });
+            wrapper.instance().onDayMouseEnter(today);
+            const hoveredStartBlockedMinNightsCalls = getCallsByModifier(addModifierToRangeSpy, 'hovered-start-blocked-minimum-nights');
+            expect(hoveredStartBlockedMinNightsCalls.length).to.equal(0);
+          });
+
           it('does not call addModifier with `hovered-start-blocked-minimum-nights` if getMinNightsForHoverDate does not return a positive integer', () => {
             const addModifierToRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifierToRange');
             const getMinNightsForHoverDateStub = sinon.stub().returns(0);
@@ -2737,6 +2885,22 @@ describe('DayPickerRangeController', () => {
             expect(isSameDay(hoveredStartFirstPossibleEndCalls[0].args[1], today.clone().add(2, 'days'))).to.equal(true);
           });
 
+          it('does not call deleteModifier with `hovered-start-first-possible-end` if the hovered date is blocked', () => {
+            const deleteModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifier');
+            const getMinNightsForHoverDateStub = sinon.stub().returns(2);
+            const wrapper = shallow(<DayPickerRangeController
+              onDatesChange={sinon.stub()}
+              onFocusChange={sinon.stub()}
+              focusedInput={START_DATE}
+              getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+              isDayBlocked={day => isSameDay(day, today)}
+            />);
+            wrapper.setState({ hoverDate: today });
+            wrapper.instance().onDayMouseLeave(today);
+            const hoveredStartFirstPossibleEndCalls = getCallsByModifier(deleteModifierSpy, 'hovered-start-first-possible-end');
+            expect(hoveredStartFirstPossibleEndCalls.length).to.equal(0);
+          });
+
           it('does not call deleteModifier with `hovered-start-first-possible-end` if getMinNightsForHoverDate does not return a positive integer', () => {
             const deleteModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifier');
             const getMinNightsForHoverDateStub = sinon.stub().returns(0);
@@ -2790,6 +2954,22 @@ describe('DayPickerRangeController', () => {
             expect(isSameDay(hoveredStartBlockedMinNightsCalls[0].args[2], today.clone().add(2, 'days'))).to.equal(true);
           });
 
+          it('does not call deleteModifier with `hovered-start-blocked-minimum-nights` if the hovered date is blocked', () => {
+            const deleteModifierFromRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifierFromRange');
+            const getMinNightsForHoverDateStub = sinon.stub().returns(2);
+            const wrapper = shallow(<DayPickerRangeController
+              onDatesChange={sinon.stub()}
+              onFocusChange={sinon.stub()}
+              focusedInput={START_DATE}
+              getMinNightsForHoverDate={getMinNightsForHoverDateStub}
+              isDayBlocked={day => isSameDay(day, today)}
+            />);
+            wrapper.setState({ hoverDate: today });
+            wrapper.instance().onDayMouseLeave(today);
+            const hoveredStartBlockedMinNightsCalls = getCallsByModifier(deleteModifierFromRangeSpy, 'hovered-start-blocked-minimum-nights');
+            expect(hoveredStartBlockedMinNightsCalls.length).to.equal(0);
+          });
+
           it('does not call deleteModifierFromRange with `hovered-start-blocked-minimum-nights` if getMinNightsForHoverDate does not return a positive integer', () => {
             const deleteModifierFromRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifierFromRange');
             const getMinNightsForHoverDateStub = sinon.stub().returns(0);

From 64c9857e77935cfd2f69cd52d63d0c6b0e62b468 Mon Sep 17 00:00:00 2001
From: Nicole Kinser <nicole.kinser@airbnb.com>
Date: Wed, 27 Feb 2019 16:24:06 -0800
Subject: [PATCH 406/618] Version 20.0.0

---
 CHANGELOG.md | 6 ++++++
 package.json | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a93a8aa29a..243ef2a681 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,12 @@
 - []  ([#](https://github.com/airbnb/react-dates/pull/))
 -->
 
+## 20.0.0
+- [breaking] Omit tabindex prop from calendar navigation buttons when custom buttons are supplied ([#1563](https://github.com/airbnb/react-dates/pull/1563))
+- [new] Add hovered-start-blocked-minimun-nights and hovered-start-first-possible-end modifiers ([#1547](https://github.com/airbnb/react-dates/pull/1547))
+- [fix] clearTimeout added for the setCalendarMonthGridHeight timeout ([#1468](https://github.com/airbnb/react-dates/pull/1468))
+- [fix] Remove default styles for the last-in-range modifier ([#1538](https://github.com/airbnb/react-dates/pull/1538))
+
 ## 19.0.4
 - [fix] Added `selected` aria label to dates in the selected range ([#1555](https://github.com/airbnb/react-dates/pull/1555))
 
diff --git a/package.json b/package.json
index c4c7957c7f..356a6b20c2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "19.0.4",
+  "version": "20.0.0",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 4ad7be8f228d53356f4b9e652601514c4a69330c Mon Sep 17 00:00:00 2001
From: Kevin Pan <kevin.pan@airbnb.com>
Date: Thu, 7 Mar 2019 12:38:26 -0800
Subject: [PATCH 407/618] adding renderKeyboardShortcutsButton functional prop

---
 src/components/DayPicker.jsx                | 21 +++++++++++----------
 src/components/DayPickerRangeController.jsx |  5 ++++-
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 7f5b701505..6f9acc25d2 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -71,6 +71,7 @@ const propTypes = forbidExtraProps({
   transitionDuration: nonNegativeInteger,
   verticalBorderSpacing: nonNegativeInteger,
   horizontalMonthPadding: nonNegativeInteger,
+  renderKeyboardShortcutsButton: PropTypes.func,
 
   // navigation props
   disablePrev: PropTypes.bool,
@@ -131,6 +132,7 @@ export const defaultProps = {
   transitionDuration: undefined,
   verticalBorderSpacing: undefined,
   horizontalMonthPadding: 13,
+  renderKeyboardShortcutsButton: props => (<DayPickerKeyboardShortcuts {...props}/>),
 
   // navigation props
   disablePrev: false,
@@ -930,6 +932,7 @@ class DayPicker extends React.PureComponent {
       renderDayContents,
       renderCalendarInfo,
       renderMonthElement,
+      renderKeyboardShortcutsButton,
       calendarInfoPosition,
       hideKeyboardShortcutsPanel,
       onOutsideClick,
@@ -1113,16 +1116,14 @@ class DayPicker extends React.PureComponent {
                 {verticalScrollable && this.renderNavigation()}
               </div>
 
-              {!isTouch && !hideKeyboardShortcutsPanel && (
-                <DayPickerKeyboardShortcuts
-                  block={this.isVertical() && !withPortal}
-                  buttonLocation={keyboardShortcutButtonLocation}
-                  showKeyboardShortcutsPanel={showKeyboardShortcuts}
-                  openKeyboardShortcutsPanel={this.openKeyboardShortcutsPanel}
-                  closeKeyboardShortcutsPanel={this.closeKeyboardShortcutsPanel}
-                  phrases={phrases}
-                />
-              )}
+              {!isTouch && !hideKeyboardShortcutsPanel && renderKeyboardShortcutsButton({
+                  block: this.isVertical() && !withPortal,
+                  buttonLocation: keyboardShortcutButtonLocation,
+                  showKeyboardShortcutsPanel: showKeyboardShortcuts,
+                  openKeyboardShortcutsPanel: this.openKeyboardShortcutsPanel,
+                  closeKeyboardShortcutsPanel: this.closeKeyboardShortcutsPanel,
+                  phrases: phrases,
+              })}
             </div>
           </div>
 
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 9e414c839c..319d291606 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -84,7 +84,7 @@ const propTypes = forbidExtraProps({
   onOutsideClick: PropTypes.func,
   renderCalendarDay: PropTypes.func,
   renderDayContents: PropTypes.func,
-  renderCalendarInfo: PropTypes.func,
+  renderKeyboardShorcutsButton: PropTypes.func,
   calendarInfoPosition: CalendarInfoPositionShape,
   firstDayOfWeek: DayOfWeekShape,
   verticalHeight: nonNegativeInteger,
@@ -149,6 +149,7 @@ const defaultProps = {
   renderDayContents: null,
   renderCalendarInfo: null,
   renderMonthElement: null,
+  renderKeyboardShortcutsButton: undefined,
   calendarInfoPosition: INFO_POSITION_BOTTOM,
   firstDayOfWeek: null,
   verticalHeight: null,
@@ -1234,6 +1235,7 @@ export default class DayPickerRangeController extends React.PureComponent {
       withPortal,
       enableOutsideDays,
       firstDayOfWeek,
+      renderKeyboardShortcutsButton,
       hideKeyboardShortcutsPanel,
       daySize,
       focusedInput,
@@ -1297,6 +1299,7 @@ export default class DayPickerRangeController extends React.PureComponent {
         renderDayContents={renderDayContents}
         renderCalendarInfo={renderCalendarInfo}
         renderMonthElement={renderMonthElement}
+        renderKeyboardShortcutsButton={renderKeyboardShortcutsButton}
         calendarInfoPosition={calendarInfoPosition}
         firstDayOfWeek={firstDayOfWeek}
         hideKeyboardShortcutsPanel={hideKeyboardShortcutsPanel}

From 1b8465df29aecf827ec5adc5ed68668217e5922f Mon Sep 17 00:00:00 2001
From: Kevin Pan <kevin.pan@airbnb.com>
Date: Thu, 7 Mar 2019 15:42:58 -0800
Subject: [PATCH 408/618] fixing renderKeyboardShortcutsButton functional prop

---
 src/components/DayPicker.jsx                  | 21 ++++---
 src/components/DayPickerKeyboardShortcuts.jsx | 58 ++++++++++---------
 2 files changed, 44 insertions(+), 35 deletions(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 6f9acc25d2..090752bba3 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -132,7 +132,7 @@ export const defaultProps = {
   transitionDuration: undefined,
   verticalBorderSpacing: undefined,
   horizontalMonthPadding: 13,
-  renderKeyboardShortcutsButton: props => (<DayPickerKeyboardShortcuts {...props}/>),
+  renderKeyboardShortcutsButton: undefined,
 
   // navigation props
   disablePrev: false,
@@ -1116,14 +1116,17 @@ class DayPicker extends React.PureComponent {
                 {verticalScrollable && this.renderNavigation()}
               </div>
 
-              {!isTouch && !hideKeyboardShortcutsPanel && renderKeyboardShortcutsButton({
-                  block: this.isVertical() && !withPortal,
-                  buttonLocation: keyboardShortcutButtonLocation,
-                  showKeyboardShortcutsPanel: showKeyboardShortcuts,
-                  openKeyboardShortcutsPanel: this.openKeyboardShortcutsPanel,
-                  closeKeyboardShortcutsPanel: this.closeKeyboardShortcutsPanel,
-                  phrases: phrases,
-              })}
+              {!isTouch && !hideKeyboardShortcutsPanel && (
+              <DayPickerKeyboardShortcuts
+                block={this.isVertical() && !withPortal}
+                buttonLocation={keyboardShortcutButtonLocation}
+                showKeyboardShortcutsPanel={showKeyboardShortcuts}
+                openKeyboardShortcutsPanel={this.openKeyboardShortcutsPanel}
+                closeKeyboardShortcutsPanel={this.closeKeyboardShortcutsPanel}
+                phrases={phrases}
+                renderKeyboardShortcutsButton={this.renderKeyboardShortcutsButton}
+              />
+              )}
             </div>
           </div>
 
diff --git a/src/components/DayPickerKeyboardShortcuts.jsx b/src/components/DayPickerKeyboardShortcuts.jsx
index 8f8775db6f..959a5525ac 100644
--- a/src/components/DayPickerKeyboardShortcuts.jsx
+++ b/src/components/DayPickerKeyboardShortcuts.jsx
@@ -22,6 +22,7 @@ const propTypes = forbidExtraProps({
   openKeyboardShortcutsPanel: PropTypes.func,
   closeKeyboardShortcutsPanel: PropTypes.func,
   phrases: PropTypes.shape(getPhrasePropTypes(DayPickerKeyboardShortcutsPhrases)),
+  renderKeyboardShortcutsButton: PropTypes.func,
 });
 
 const defaultProps = {
@@ -31,6 +32,7 @@ const defaultProps = {
   openKeyboardShortcutsPanel() {},
   closeKeyboardShortcutsPanel() {},
   phrases: DayPickerKeyboardShortcutsPhrases,
+  renderKeyboardShortcutsButton: undefined,
 };
 
 function getKeyboardShortcuts(phrases) {
@@ -164,6 +166,7 @@ class DayPickerKeyboardShortcuts extends React.PureComponent {
       closeKeyboardShortcutsPanel,
       styles,
       phrases,
+      renderKeyboardShortcutsButton,
     } = this.props;
 
     const toggleButtonText = showKeyboardShortcutsPanel
@@ -176,33 +179,36 @@ class DayPickerKeyboardShortcuts extends React.PureComponent {
 
     return (
       <div>
-        <button
-          ref={this.setShowKeyboardShortcutsButtonRef}
-          {...css(
-            styles.DayPickerKeyboardShortcuts_buttonReset,
-            styles.DayPickerKeyboardShortcuts_show,
-            bottomRight && styles.DayPickerKeyboardShortcuts_show__bottomRight,
-            topRight && styles.DayPickerKeyboardShortcuts_show__topRight,
-            topLeft && styles.DayPickerKeyboardShortcuts_show__topLeft,
-          )}
-          type="button"
-          aria-label={toggleButtonText}
-          onClick={this.onShowKeyboardShortcutsButtonClick}
-          onMouseUp={(e) => {
-            e.currentTarget.blur();
-          }}
-        >
-          <span
-            {...css(
-              styles.DayPickerKeyboardShortcuts_showSpan,
-              bottomRight && styles.DayPickerKeyboardShortcuts_showSpan__bottomRight,
-              topRight && styles.DayPickerKeyboardShortcuts_showSpan__topRight,
-              topLeft && styles.DayPickerKeyboardShortcuts_showSpan__topLeft,
-            )}
-          >
+        { typeof renderKeyboardShortcutsButton === 'function' ? renderKeyboardShortcutsButton()
+          : (
+            <button
+              ref={this.setShowKeyboardShortcutsButtonRef}
+              {...css(
+                styles.DayPickerKeyboardShortcuts_buttonReset,
+                styles.DayPickerKeyboardShortcuts_show,
+                bottomRight && styles.DayPickerKeyboardShortcuts_show__bottomRight,
+                topRight && styles.DayPickerKeyboardShortcuts_show__topRight,
+                topLeft && styles.DayPickerKeyboardShortcuts_show__topLeft,
+              )}
+              type="button"
+              aria-label={toggleButtonText}
+              onClick={this.onShowKeyboardShortcutsButtonClick}
+              onMouseUp={(e) => {
+                e.currentTarget.blur();
+              }}
+            >
+              <span
+                {...css(
+                  styles.DayPickerKeyboardShortcuts_showSpan,
+                  bottomRight && styles.DayPickerKeyboardShortcuts_showSpan__bottomRight,
+                  topRight && styles.DayPickerKeyboardShortcuts_showSpan__topRight,
+                  topLeft && styles.DayPickerKeyboardShortcuts_showSpan__topLeft,
+                )}
+              >
             ?
-          </span>
-        </button>
+              </span>
+            </button>
+          )}
 
         {showKeyboardShortcutsPanel && (
           <div

From 111494f802edcb482d28f58638ee55b91345cbfc Mon Sep 17 00:00:00 2001
From: Kevin Pan <kevin.pan@airbnb.com>
Date: Thu, 7 Mar 2019 15:57:30 -0800
Subject: [PATCH 409/618] small null check fix

---
 src/components/DayPickerKeyboardShortcuts.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DayPickerKeyboardShortcuts.jsx b/src/components/DayPickerKeyboardShortcuts.jsx
index 959a5525ac..16680ba012 100644
--- a/src/components/DayPickerKeyboardShortcuts.jsx
+++ b/src/components/DayPickerKeyboardShortcuts.jsx
@@ -179,7 +179,7 @@ class DayPickerKeyboardShortcuts extends React.PureComponent {
 
     return (
       <div>
-        { typeof renderKeyboardShortcutsButton === 'function' ? renderKeyboardShortcutsButton()
+        { renderKeyboardShortcutsButton ? renderKeyboardShortcutsButton()
           : (
             <button
               ref={this.setShowKeyboardShortcutsButtonRef}

From 4e94f84aa3262e62e79560423d7da7f9d0a024e5 Mon Sep 17 00:00:00 2001
From: Kevin Pan <kevin.pan@airbnb.com>
Date: Thu, 7 Mar 2019 16:57:11 -0800
Subject: [PATCH 410/618] typo and other fixes

---
 src/components/DayPicker.jsx                | 18 +++++++++---------
 src/components/DayPickerRangeController.jsx |  3 +--
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 090752bba3..8501e2863e 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -1117,15 +1117,15 @@ class DayPicker extends React.PureComponent {
               </div>
 
               {!isTouch && !hideKeyboardShortcutsPanel && (
-              <DayPickerKeyboardShortcuts
-                block={this.isVertical() && !withPortal}
-                buttonLocation={keyboardShortcutButtonLocation}
-                showKeyboardShortcutsPanel={showKeyboardShortcuts}
-                openKeyboardShortcutsPanel={this.openKeyboardShortcutsPanel}
-                closeKeyboardShortcutsPanel={this.closeKeyboardShortcutsPanel}
-                phrases={phrases}
-                renderKeyboardShortcutsButton={this.renderKeyboardShortcutsButton}
-              />
+                <DayPickerKeyboardShortcuts
+                  block={this.isVertical() && !withPortal}
+                  buttonLocation={keyboardShortcutButtonLocation}
+                  showKeyboardShortcutsPanel={showKeyboardShortcuts}
+                  openKeyboardShortcutsPanel={this.openKeyboardShortcutsPanel}
+                  closeKeyboardShortcutsPanel={this.closeKeyboardShortcutsPanel}
+                  phrases={phrases}
+                  renderKeyboardShortcutsButton={renderKeyboardShortcutsButton}
+                />
               )}
             </div>
           </div>
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 319d291606..82a8f2bd56 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -84,7 +84,7 @@ const propTypes = forbidExtraProps({
   onOutsideClick: PropTypes.func,
   renderCalendarDay: PropTypes.func,
   renderDayContents: PropTypes.func,
-  renderKeyboardShorcutsButton: PropTypes.func,
+  renderKeyboardShortcutsButton: PropTypes.func,
   calendarInfoPosition: CalendarInfoPositionShape,
   firstDayOfWeek: DayOfWeekShape,
   verticalHeight: nonNegativeInteger,
@@ -147,7 +147,6 @@ const defaultProps = {
 
   renderCalendarDay: undefined,
   renderDayContents: null,
-  renderCalendarInfo: null,
   renderMonthElement: null,
   renderKeyboardShortcutsButton: undefined,
   calendarInfoPosition: INFO_POSITION_BOTTOM,

From 22d6a4b5bb7c759ed590d539abab476b0d370b58 Mon Sep 17 00:00:00 2001
From: Kevin Pan <kevin.pan@airbnb.com>
Date: Thu, 7 Mar 2019 18:43:58 -0800
Subject: [PATCH 411/618] adding props at render to button

---
 src/components/DayPickerKeyboardShortcuts.jsx       | 11 +++++++++--
 test/components/DayPickerKeyboardShortcuts_spec.jsx | 10 ++++++++++
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/DayPickerKeyboardShortcuts.jsx b/src/components/DayPickerKeyboardShortcuts.jsx
index 16680ba012..042b1a7700 100644
--- a/src/components/DayPickerKeyboardShortcuts.jsx
+++ b/src/components/DayPickerKeyboardShortcuts.jsx
@@ -179,8 +179,15 @@ class DayPickerKeyboardShortcuts extends React.PureComponent {
 
     return (
       <div>
-        { renderKeyboardShortcutsButton ? renderKeyboardShortcutsButton()
-          : (
+        { renderKeyboardShortcutsButton
+          ? React.cloneElement(
+            renderKeyboardShortcutsButton(),
+            {
+            // can't pass context-specific callbacks from passed-in button
+              ref: this.setShowKeyboardShortcutsButtonRef,
+              onClick: this.onShowKeyboardShortcutsButtonClick,
+            },
+          ) : (
             <button
               ref={this.setShowKeyboardShortcutsButtonRef}
               {...css(
diff --git a/test/components/DayPickerKeyboardShortcuts_spec.jsx b/test/components/DayPickerKeyboardShortcuts_spec.jsx
index 728b8fcdc2..04c17d8544 100644
--- a/test/components/DayPickerKeyboardShortcuts_spec.jsx
+++ b/test/components/DayPickerKeyboardShortcuts_spec.jsx
@@ -135,6 +135,16 @@ describe('DayPickerKeyboardShortcuts', () => {
           expect(mockEvent.currentTarget.blur.callCount).to.equal(1);
         });
       });
+
+      describe('renderKeyboardShortcutsButton', () => {
+        it('renders the provided button', () => {
+          const props = { renderKeyboardShortcutsButton: () => (<button type="button">Success!</button>) };
+          const wrapper = shallow(<DayPickerKeyboardShortcuts {...props} />).dive();
+          const buttonWrapper = wrapper.children().find('button');
+          expect(buttonWrapper.text()).to.equal('Success!');
+          expect(buttonWrapper.props()).to.contain.keys(['ref', 'onClick']);
+        });
+      });
     });
 
     describe('#DayPickerKeyboardShortcuts_panel', () => {

From 92052b5ac40d778715da485872972c8867c37cdf Mon Sep 17 00:00:00 2001
From: Kevin Pan <kevin.pan@airbnb.com>
Date: Fri, 8 Mar 2019 10:33:27 -0800
Subject: [PATCH 412/618] replace deleted renderCalendarInfo

---
 src/components/DayPickerRangeController.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 82a8f2bd56..2bc4b65075 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -84,6 +84,7 @@ const propTypes = forbidExtraProps({
   onOutsideClick: PropTypes.func,
   renderCalendarDay: PropTypes.func,
   renderDayContents: PropTypes.func,
+  renderCalendarInfo: PropTypes.func,
   renderKeyboardShortcutsButton: PropTypes.func,
   calendarInfoPosition: CalendarInfoPositionShape,
   firstDayOfWeek: DayOfWeekShape,
@@ -147,6 +148,7 @@ const defaultProps = {
 
   renderCalendarDay: undefined,
   renderDayContents: null,
+  renderCalendarInfo: null,
   renderMonthElement: null,
   renderKeyboardShortcutsButton: undefined,
   calendarInfoPosition: INFO_POSITION_BOTTOM,

From 8b62e7b4772a471195080280559503b5f690f894 Mon Sep 17 00:00:00 2001
From: Kevin Pan <kevin.pan@airbnb.com>
Date: Fri, 8 Mar 2019 11:11:11 -0800
Subject: [PATCH 413/618] removing need to clone button

---
 src/components/DayPickerKeyboardShortcuts.jsx       | 9 +--------
 test/components/DayPickerKeyboardShortcuts_spec.jsx | 1 -
 2 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/components/DayPickerKeyboardShortcuts.jsx b/src/components/DayPickerKeyboardShortcuts.jsx
index 042b1a7700..8e63d35107 100644
--- a/src/components/DayPickerKeyboardShortcuts.jsx
+++ b/src/components/DayPickerKeyboardShortcuts.jsx
@@ -180,14 +180,7 @@ class DayPickerKeyboardShortcuts extends React.PureComponent {
     return (
       <div>
         { renderKeyboardShortcutsButton
-          ? React.cloneElement(
-            renderKeyboardShortcutsButton(),
-            {
-            // can't pass context-specific callbacks from passed-in button
-              ref: this.setShowKeyboardShortcutsButtonRef,
-              onClick: this.onShowKeyboardShortcutsButtonClick,
-            },
-          ) : (
+          ? renderKeyboardShortcutsButton() : (
             <button
               ref={this.setShowKeyboardShortcutsButtonRef}
               {...css(
diff --git a/test/components/DayPickerKeyboardShortcuts_spec.jsx b/test/components/DayPickerKeyboardShortcuts_spec.jsx
index 04c17d8544..5b93bfb666 100644
--- a/test/components/DayPickerKeyboardShortcuts_spec.jsx
+++ b/test/components/DayPickerKeyboardShortcuts_spec.jsx
@@ -142,7 +142,6 @@ describe('DayPickerKeyboardShortcuts', () => {
           const wrapper = shallow(<DayPickerKeyboardShortcuts {...props} />).dive();
           const buttonWrapper = wrapper.children().find('button');
           expect(buttonWrapper.text()).to.equal('Success!');
-          expect(buttonWrapper.props()).to.contain.keys(['ref', 'onClick']);
         });
       });
     });

From ce258840651abace8207f90bcf5c65145085c1f1 Mon Sep 17 00:00:00 2001
From: Kevin Pan <kevin.pan@airbnb.com>
Date: Fri, 8 Mar 2019 16:09:29 -0800
Subject: [PATCH 414/618] PR fixes: adding params to
 renderKeyboardShortcutsButton; updating specs

---
 src/components/DayPickerKeyboardShortcuts.jsx | 58 ++++++++++---------
 .../DayPickerKeyboardShortcuts_spec.jsx       |  8 ++-
 2 files changed, 37 insertions(+), 29 deletions(-)

diff --git a/src/components/DayPickerKeyboardShortcuts.jsx b/src/components/DayPickerKeyboardShortcuts.jsx
index 8e63d35107..e0ffb5220d 100644
--- a/src/components/DayPickerKeyboardShortcuts.jsx
+++ b/src/components/DayPickerKeyboardShortcuts.jsx
@@ -179,37 +179,43 @@ class DayPickerKeyboardShortcuts extends React.PureComponent {
 
     return (
       <div>
-        { renderKeyboardShortcutsButton
-          ? renderKeyboardShortcutsButton() : (
-            <button
-              ref={this.setShowKeyboardShortcutsButtonRef}
+        {renderKeyboardShortcutsButton
+          && renderKeyboardShortcutsButton({
+            // passing in context-specific props
+            ref: this.setShowKeyboardShortcutsButtonRef,
+            onClick: this.onShowKeyboardShortcutsButtonClick,
+            ariaLabel: toggleButtonText,
+          })}
+        {renderKeyboardShortcutsButton
+          || (
+          <button
+            ref={this.setShowKeyboardShortcutsButtonRef}
+            {...css(
+              styles.DayPickerKeyboardShortcuts_buttonReset,
+              styles.DayPickerKeyboardShortcuts_show,
+              bottomRight && styles.DayPickerKeyboardShortcuts_show__bottomRight,
+              topRight && styles.DayPickerKeyboardShortcuts_show__topRight,
+              topLeft && styles.DayPickerKeyboardShortcuts_show__topLeft,
+            )}
+            type="button"
+            aria-label={toggleButtonText}
+            onClick={this.onShowKeyboardShortcutsButtonClick}
+            onMouseUp={(e) => {
+              e.currentTarget.blur();
+            }}
+          >
+            <span
               {...css(
-                styles.DayPickerKeyboardShortcuts_buttonReset,
-                styles.DayPickerKeyboardShortcuts_show,
-                bottomRight && styles.DayPickerKeyboardShortcuts_show__bottomRight,
-                topRight && styles.DayPickerKeyboardShortcuts_show__topRight,
-                topLeft && styles.DayPickerKeyboardShortcuts_show__topLeft,
+                styles.DayPickerKeyboardShortcuts_showSpan,
+                bottomRight && styles.DayPickerKeyboardShortcuts_showSpan__bottomRight,
+                topRight && styles.DayPickerKeyboardShortcuts_showSpan__topRight,
+                topLeft && styles.DayPickerKeyboardShortcuts_showSpan__topLeft,
               )}
-              type="button"
-              aria-label={toggleButtonText}
-              onClick={this.onShowKeyboardShortcutsButtonClick}
-              onMouseUp={(e) => {
-                e.currentTarget.blur();
-              }}
             >
-              <span
-                {...css(
-                  styles.DayPickerKeyboardShortcuts_showSpan,
-                  bottomRight && styles.DayPickerKeyboardShortcuts_showSpan__bottomRight,
-                  topRight && styles.DayPickerKeyboardShortcuts_showSpan__topRight,
-                  topLeft && styles.DayPickerKeyboardShortcuts_showSpan__topLeft,
-                )}
-              >
             ?
-              </span>
-            </button>
+            </span>
+          </button>
           )}
-
         {showKeyboardShortcutsPanel && (
           <div
             {...css(styles.DayPickerKeyboardShortcuts_panel)}
diff --git a/test/components/DayPickerKeyboardShortcuts_spec.jsx b/test/components/DayPickerKeyboardShortcuts_spec.jsx
index 5b93bfb666..bc4c786ace 100644
--- a/test/components/DayPickerKeyboardShortcuts_spec.jsx
+++ b/test/components/DayPickerKeyboardShortcuts_spec.jsx
@@ -138,10 +138,12 @@ describe('DayPickerKeyboardShortcuts', () => {
 
       describe('renderKeyboardShortcutsButton', () => {
         it('renders the provided button', () => {
-          const props = { renderKeyboardShortcutsButton: () => (<button type="button">Success!</button>) };
+          function Button() {
+            return (<button type="button">Success!</button>);
+          }
+          const props = { renderKeyboardShortcutsButton: () => (<Button />) };
           const wrapper = shallow(<DayPickerKeyboardShortcuts {...props} />).dive();
-          const buttonWrapper = wrapper.children().find('button');
-          expect(buttonWrapper.text()).to.equal('Success!');
+          expect(wrapper.children().find(Button)).to.have.lengthOf(1);
         });
       });
     });

From ba397af049137b111c507d55c09b16167f57096d Mon Sep 17 00:00:00 2001
From: Kevin Pan <kevin.pan@airbnb.com>
Date: Fri, 8 Mar 2019 17:21:30 -0800
Subject: [PATCH 415/618] adding storybook variation

---
 examples/DayPickerRangeControllerWrapper.jsx |  2 +
 stories/DayPickerRangeController.js          | 51 ++++++++++++++++++++
 2 files changed, 53 insertions(+)

diff --git a/examples/DayPickerRangeControllerWrapper.jsx b/examples/DayPickerRangeControllerWrapper.jsx
index 0cf1e7d115..340f419201 100644
--- a/examples/DayPickerRangeControllerWrapper.jsx
+++ b/examples/DayPickerRangeControllerWrapper.jsx
@@ -49,6 +49,7 @@ const propTypes = forbidExtraProps({
   onOutsideClick: PropTypes.func,
   renderCalendarDay: PropTypes.func,
   renderDayContents: PropTypes.func,
+  renderKeyboardShortcutsButton: PropTypes.func,
 
   // i18n
   monthFormat: PropTypes.string,
@@ -88,6 +89,7 @@ const defaultProps = {
   isRTL: false,
   renderMonthText: null,
   renderMonthElement: null,
+  renderKeyboardShortcutsButton: undefined,
 
   // navigation related props
   navPrev: null,
diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
index a165ccca9d..3170d99156 100644
--- a/stories/DayPickerRangeController.js
+++ b/stories/DayPickerRangeController.js
@@ -68,6 +68,49 @@ const TestCustomInfoPanel = () => (
   </div>
 );
 
+function renderKeyboardShortcutsButton(buttonProps) {
+  const { ref, onClick, ariaLabel } = buttonProps || {};
+
+  const buttonStyle = {
+    backgroundColor: '#914669',
+    border: 0,
+    borderRadius: 0,
+    color: 'inherit',
+    font: 'inherit',
+    lineHeight: 'normal',
+    overflow: 'visible',
+    padding: 0,
+    cursor: 'pointer',
+    width: 26,
+    height: 26,
+    position: 'absolute',
+    bottom: 0,
+    right: 0,
+  };
+
+  const spanStyle = {
+    color: 'white',
+    position: 'absolute',
+    bottom: 5,
+    right: 9,
+  };
+
+  return (
+    <button
+      ref={ref}
+      style={buttonStyle}
+      type="button"
+      aria-label={ariaLabel}
+      onClick={onClick}
+      onMouseUp={(e) => {
+        e.currentTarget.blur();
+      }}
+    >
+      <span style={spanStyle}>?</span>
+    </button>
+  );
+}
+
 const datesList = [
   moment(),
   moment().add(1, 'days'),
@@ -417,4 +460,12 @@ storiesOf('DayPickerRangeController', module)
       getMinNightsForHoverDate={() => 2}
       isDayBlocked={day1 => datesList.some(day2 => isSameDay(day1, day2))}
     />
+  )))
+  .add('with custom keyboard shortcuts button', withInfo()(() => (
+    <DayPickerRangeControllerWrapper
+      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
+      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
+      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
+      renderKeyboardShortcutsButton={renderKeyboardShortcutsButton}
+    />
   )));

From ba0b6768d48a1078f0a873e8fbedcc30c003d9d3 Mon Sep 17 00:00:00 2001
From: Nora Tarano <nora.tarano@airbnb.com>
Date: Wed, 11 Sep 2019 13:20:47 -0700
Subject: [PATCH 416/618] [fix][deps] Update react-with-styles 4.0.0 -> 4.0.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 6db4f3d781..2fc3fe07cc 100644
--- a/package.json
+++ b/package.json
@@ -127,7 +127,7 @@
     "react-outside-click-handler": "^1.2.4",
     "react-portal": "^4.2.0",
     "react-with-direction": "^1.3.1",
-    "react-with-styles": "^4.0.0",
+    "react-with-styles": "^4.0.1",
     "react-with-styles-interface-css": "^6.0.0"
   },
   "peerDependencies": {

From 26246e7ae1aa0526519049b3f10568a3e680c0be Mon Sep 17 00:00:00 2001
From: Nora Tarano <nora.tarano@airbnb.com>
Date: Wed, 11 Sep 2019 16:02:52 -0700
Subject: [PATCH 417/618] [dev][ci] Allow failures -- TODO: debug this issue

---
 .travis.yml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.travis.yml b/.travis.yml
index 57583f8c53..40af3ca812 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -37,3 +37,6 @@ matrix:
       env: COVERAGE=true TEST=false
     - node_js: "lts/*"
       env: KARMA=true TEST=false
+  allow_failures:
+    - node_js: "10"
+      env: REACT=16

From 2657568d0997220ef005870c7fb98951423edc8a Mon Sep 17 00:00:00 2001
From: Nora Tarano <nora.tarano@airbnb.com>
Date: Wed, 11 Sep 2019 17:00:13 -0700
Subject: [PATCH 418/618] Version 21.0.1

---
 CHANGELOG.md | 4 ++++
 package.json | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a9d88ab127..937e26553e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,10 @@
 
 ## Unreleased
 
+## 21.0.1
+
+- [fix] [deps] Update react-with-styles ^4.0.0 -> ^4.0.1 ([#1781](https://github.com/airbnb/react-dates/pull/1781))
+
 ## 21.0.0
 
 - [breaking] [deps] Update react-with-styles and other deps ([#1761](https://github.com/airbnb/react-dates/pull/1761)
diff --git a/package.json b/package.json
index 2fc3fe07cc..d5c606043d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "21.0.0",
+  "version": "21.0.1",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From c588a9d5ece36c4a0633d7fa8d0910f51223a52b Mon Sep 17 00:00:00 2001
From: WarrickPardoe <warrick.pardoe@kognitiv.com>
Date: Mon, 11 Mar 2019 18:52:09 +0000
Subject: [PATCH 419/618] =?UTF-8?q?[Fix]=20`DayPicker`:=20week=20headers:?=
 =?UTF-8?q?=20use=20the=20passed-in=20moment=20object=E2=80=99s=20instance?=
 =?UTF-8?q?,=20to=20support=20locale?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes #1575.
---
 src/components/DayPicker.jsx       | 30 +++++++++++++++++++-----------
 test/components/DayPicker_spec.jsx | 14 ++++++++++++--
 2 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 3f7e6b41fe..24f8a53298 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -582,6 +582,19 @@ class DayPicker extends React.PureComponent {
     return firstDayOfWeek;
   }
 
+  getWeekHeaders() {
+    const { weekDayFormat } = this.props;
+    const { currentMonth } = this.state;
+    const firstDayOfWeek = this.getFirstDayOfWeek();
+
+    const weekHeaders = [];
+    for (let i = 0; i < 7; i += 1) {
+      weekHeaders.push(currentMonth.day((i + firstDayOfWeek) % 7).format(weekDayFormat));
+    }
+
+    return weekHeaders;
+  }
+
   getFirstVisibleIndex() {
     const { orientation } = this.props;
     const { monthTransition } = this.state;
@@ -854,7 +867,6 @@ class DayPicker extends React.PureComponent {
       daySize,
       horizontalMonthPadding,
       orientation,
-      weekDayFormat,
       styles,
       css,
     } = this.props;
@@ -874,16 +886,12 @@ class DayPicker extends React.PureComponent {
       weekHeaderStyle = verticalStyle;
     }
 
-    const firstDayOfWeek = this.getFirstDayOfWeek();
-
-    const header = [];
-    for (let i = 0; i < 7; i += 1) {
-      header.push((
-        <li key={i} {...css(styles.DayPicker_weekHeader_li, { width: daySize })}>
-          <small>{moment().day((i + firstDayOfWeek) % 7).format(weekDayFormat)}</small>
-        </li>
-      ));
-    }
+    const weekHeaders = this.getWeekHeaders();
+    const header = weekHeaders.map((day) => (
+      <li key={day} {...css(styles.DayPicker_weekHeader_li, { width: daySize })}>
+        <small>{day}</small>
+      </li>
+    ));
 
     return (
       <div
diff --git a/test/components/DayPicker_spec.jsx b/test/components/DayPicker_spec.jsx
index 389bc1f0f7..c8ecc768ab 100644
--- a/test/components/DayPicker_spec.jsx
+++ b/test/components/DayPicker_spec.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import moment from 'moment';
+import moment from 'moment/min/moment-with-locales';
 import { expect } from 'chai';
 import sinon from 'sinon-sandbox';
 import { mount, shallow } from 'enzyme';
@@ -16,7 +16,8 @@ import {
   VERTICAL_SCROLLABLE,
 } from '../../src/constants';
 
-const today = moment();
+
+const today = moment().locale('en');
 const event = { preventDefault() {}, stopPropagation() {} };
 
 describe('DayPicker', () => {
@@ -805,6 +806,15 @@ describe('DayPicker', () => {
     });
   });
 
+  describe('#weekHeaderNames', () => {
+    it('returns weekheaders in fr', () => {
+      const INITIAL_MONTH = moment().locale('fr');
+      const wrapper = shallow(<DayPicker initialVisibleMonth={() => INITIAL_MONTH} />).dive();
+      const instance = wrapper.instance();
+      expect(instance.getWeekHeaders()).to.be.eql(INITIAL_MONTH.localeData().weekdaysMin());
+    });
+  });
+
   describe.skip('life cycle methods', () => {
     let adjustDayPickerHeightSpy;
     beforeEach(() => {

From 116aacf0c8572c1c6c247828b5eb8bf2803b6b6c Mon Sep 17 00:00:00 2001
From: Kevin Pan <kevin.pan@airbnb.com>
Date: Mon, 11 Mar 2019 12:49:18 -0700
Subject: [PATCH 420/618] PR fixes: syntax issues, adding specs, misc fixes

---
 src/components/DayPickerKeyboardShortcuts.jsx    |  5 ++---
 stories/DayPickerRangeController.js              | 15 +++++++--------
 .../components/DayPickerRangeController_spec.jsx | 16 ++++++++++++++++
 test/components/DayPicker_spec.jsx               | 12 ++++++++++++
 4 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/src/components/DayPickerKeyboardShortcuts.jsx b/src/components/DayPickerKeyboardShortcuts.jsx
index e0ffb5220d..ffb8e83a8f 100644
--- a/src/components/DayPickerKeyboardShortcuts.jsx
+++ b/src/components/DayPickerKeyboardShortcuts.jsx
@@ -186,8 +186,7 @@ class DayPickerKeyboardShortcuts extends React.PureComponent {
             onClick: this.onShowKeyboardShortcutsButtonClick,
             ariaLabel: toggleButtonText,
           })}
-        {renderKeyboardShortcutsButton
-          || (
+        {renderKeyboardShortcutsButton || (
           <button
             ref={this.setShowKeyboardShortcutsButtonRef}
             {...css(
@@ -215,7 +214,7 @@ class DayPickerKeyboardShortcuts extends React.PureComponent {
             ?
             </span>
           </button>
-          )}
+        )}
         {showKeyboardShortcutsPanel && (
           <div
             {...css(styles.DayPickerKeyboardShortcuts_panel)}
diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
index 3170d99156..9071abbfbb 100644
--- a/stories/DayPickerRangeController.js
+++ b/stories/DayPickerRangeController.js
@@ -69,7 +69,7 @@ const TestCustomInfoPanel = () => (
 );
 
 function renderKeyboardShortcutsButton(buttonProps) {
-  const { ref, onClick, ariaLabel } = buttonProps || {};
+  const { ref, onClick, ariaLabel } = buttonProps;
 
   const buttonStyle = {
     backgroundColor: '#914669',
@@ -262,9 +262,9 @@ storiesOf('DayPickerRangeController', module)
         orientation={VERTICAL_SCROLLABLE}
         numberOfMonths={3}
         verticalHeight={300}
-        navNext={
+        navNext={(
           <div style={{ position: 'relative' }}>
-            <span
+  <span
               style={{
                 position: 'absolute',
                 bottom: 20,
@@ -277,8 +277,8 @@ storiesOf('DayPickerRangeController', module)
             >
               Show More Months
             </span>
-          </div>
-        }
+</div>
+)}
       />
     </div>
   )))
@@ -352,9 +352,8 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      isOutsideRange={day =>
-        !isInclusivelyAfterDay(day, moment()) ||
-        isInclusivelyAfterDay(day, moment().add(2, 'weeks'))
+      isOutsideRange={day => !isInclusivelyAfterDay(day, moment())
+        || isInclusivelyAfterDay(day, moment().add(2, 'weeks'))
       }
     />
   )))
diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index 20efaea9d4..a62ef71fac 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -4426,5 +4426,21 @@ describe('DayPickerRangeController', () => {
         expect(wrapper.find(DayPickerNavigation)).to.have.lengthOf(0);
       });
     });
+
+    describe('renderKeyboardShortcutsButton prop', () => {
+      it('pass down custom button render function', () => {
+        const testRenderKeyboardShortcutsButton = () => {};
+        const wrapper = shallow(
+          <DayPickerRangeController
+            renderKeyboardShortcutsButton={testRenderKeyboardShortcutsButton}
+          />,
+        );
+        const dayPicker = wrapper.find(DayPicker);
+        expect(dayPicker).to.have.lengthOf(1);
+        expect(dayPicker.prop('renderKeyboardShortcutsButton'))
+          .to
+          .eql(testRenderKeyboardShortcutsButton);
+      });
+    });
   });
 });
diff --git a/test/components/DayPicker_spec.jsx b/test/components/DayPicker_spec.jsx
index 8bb60a48dc..389bc1f0f7 100644
--- a/test/components/DayPicker_spec.jsx
+++ b/test/components/DayPicker_spec.jsx
@@ -105,6 +105,18 @@ describe('DayPicker', () => {
         const wrapper = shallow(<DayPicker hideKeyboardShortcutsPanel />).dive();
         expect(wrapper.find(DayPickerKeyboardShortcuts)).to.have.lengthOf(0);
       });
+
+      it('component exists with custom button render function if renderKeyboardShortcutsButton is passed down', () => {
+        const testRenderKeyboardShortcutsButton = () => {};
+        const wrapper = shallow(
+          <DayPicker renderKeyboardShortcutsButton={testRenderKeyboardShortcutsButton} />,
+        ).dive();
+        const dayPickerKeyboardShortcuts = wrapper.find(DayPickerKeyboardShortcuts);
+        expect(dayPickerKeyboardShortcuts).to.have.lengthOf(1);
+        expect(dayPickerKeyboardShortcuts.prop('renderKeyboardShortcutsButton'))
+          .to
+          .eql(testRenderKeyboardShortcutsButton);
+      });
     });
   });
 

From 98fe1763c87945370ecedc4ff5f6df31ce8f7636 Mon Sep 17 00:00:00 2001
From: Kevin Pan <kevin.pan@airbnb.com>
Date: Mon, 11 Mar 2019 14:14:02 -0700
Subject: [PATCH 421/618] linting issues

---
 stories/DayPickerRangeController.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
index 9071abbfbb..8ff8f15c2f 100644
--- a/stories/DayPickerRangeController.js
+++ b/stories/DayPickerRangeController.js
@@ -264,7 +264,7 @@ storiesOf('DayPickerRangeController', module)
         verticalHeight={300}
         navNext={(
           <div style={{ position: 'relative' }}>
-  <span
+            <span
               style={{
                 position: 'absolute',
                 bottom: 20,
@@ -277,8 +277,8 @@ storiesOf('DayPickerRangeController', module)
             >
               Show More Months
             </span>
-</div>
-)}
+          </div>
+        )}
       />
     </div>
   )))

From 32b5f3dc4ccbd5484fe03b0d2b253c11089c700b Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Tue, 12 Mar 2019 10:37:10 -0700
Subject: [PATCH 422/618] Version 20.1.0

---
 CHANGELOG.md | 3 +++
 package.json | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 243ef2a681..76d2921dbd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,9 @@
 - []  ([#](https://github.com/airbnb/react-dates/pull/))
 -->
 
+## 20.1.0
+- [new] Add `renderKeyboardShortcutsButton` prop ([#1576](https://github.com/airbnb/react-dates/pull/1576))
+
 ## 20.0.0
 - [breaking] Omit tabindex prop from calendar navigation buttons when custom buttons are supplied ([#1563](https://github.com/airbnb/react-dates/pull/1563))
 - [new] Add hovered-start-blocked-minimun-nights and hovered-start-first-possible-end modifiers ([#1547](https://github.com/airbnb/react-dates/pull/1547))
diff --git a/package.json b/package.json
index 356a6b20c2..3b3a9c4d2e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "20.0.0",
+  "version": "20.1.0",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From a9fdd4b92f52a31c7a2576533291472e475e50a8 Mon Sep 17 00:00:00 2001
From: Samantha <samantha.mineman@cws.it>
Date: Wed, 13 Mar 2019 11:51:37 +0100
Subject: [PATCH 423/618] issue #1530 - Fix date selection in the SDP

---
 CHANGELOG.md                        | 4 ++++
 src/components/SingleDatePicker.jsx | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 76d2921dbd..cd629140eb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,10 @@
 - []  ([#](https://github.com/airbnb/react-dates/pull/))
 -->
 
+## [Unreleased]
+- [fix] Fix date selection in the SDP ([#1530])
+
+
 ## 20.1.0
 - [new] Add `renderKeyboardShortcutsButton` prop ([#1576](https://github.com/airbnb/react-dates/pull/1576))
 
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index a5732d6ff1..931f498ab2 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -249,7 +249,7 @@ class SingleDatePicker extends React.PureComponent {
 
   onFocusOut(e) {
     const { onFocusChange } = this.props;
-    if (this.dayPickerContainer.contains(e.relatedTarget || e.target)) return;
+    if (this.dayPickerContainer.contains(e.relatedTarget || e.target) || this.dayPickerContainer.contains(e.target)) return;
     onFocusChange({ focused: false });
   }
 

From a969e8e977b02b5b721f4ec47cc51fc72a5e09cd Mon Sep 17 00:00:00 2001
From: Ryan Lewis <ryanharrisonlewis@gmail.com>
Date: Thu, 21 Mar 2019 10:53:51 -0600
Subject: [PATCH 424/618] explicitly set aria-label

---
 README.md                                          | 3 +++
 src/components/DateInput.jsx                       | 7 +++++--
 src/components/DateRangePicker.jsx                 | 6 ++++++
 src/components/DateRangePickerInput.jsx            | 8 ++++++++
 src/components/DateRangePickerInputController.jsx  | 8 ++++++++
 src/components/SingleDatePicker.jsx                | 3 +++
 src/components/SingleDatePickerInput.jsx           | 8 ++++++--
 src/components/SingleDatePickerInputController.jsx | 6 +++++-
 src/shapes/DateRangePickerShape.js                 | 2 ++
 src/shapes/SingleDatePickerShape.js                | 1 +
 test/components/DateInput_spec.jsx                 | 8 ++++----
 11 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 3b40fb2deb..6ca688041e 100644
--- a/README.md
+++ b/README.md
@@ -138,6 +138,8 @@ The following is a list of other *OPTIONAL* props you may provide to the `DateRa
 // input related props
 startDatePlaceholderText: PropTypes.string,
 endDatePlaceholderText: PropTypes.string,
+startDateAriaLabel: PropTypes.string,
+endDateAriaLabel: PropTypes.string,
 disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([START_DATE, END_DATE])]),
 required: PropTypes.bool,
 readOnly: PropTypes.bool,
@@ -221,6 +223,7 @@ The following is a list of other *OPTIONAL* props you may provide to the `Single
 ```js
 // input related props
 placeholder: PropTypes.string,
+ariaLabel: PropTypes.string,
 disabled: PropTypes.bool,
 required: PropTypes.bool,
 readOnly: PropTypes.bool,
diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
index e5f3cee4c0..1bfea2f474 100644
--- a/src/components/DateInput.jsx
+++ b/src/components/DateInput.jsx
@@ -26,8 +26,9 @@ const FANG_STROKE_BOTTOM = `M0,0 ${FANG_WIDTH_PX / 2},${FANG_HEIGHT_PX} ${FANG_W
 const propTypes = forbidExtraProps({
   ...withStylesPropTypes,
   id: PropTypes.string.isRequired,
-  placeholder: PropTypes.string, // also used as label
+  placeholder: PropTypes.string,
   displayValue: PropTypes.string,
+  ariaLabel: PropTypes.string,
   screenReaderMessage: PropTypes.string,
   focused: PropTypes.bool,
   disabled: PropTypes.bool,
@@ -55,6 +56,7 @@ const propTypes = forbidExtraProps({
 const defaultProps = {
   placeholder: 'Select Date',
   displayValue: '',
+  ariaLabel: null,
   screenReaderMessage: '',
   focused: false,
   disabled: false,
@@ -172,6 +174,7 @@ class DateInput extends React.PureComponent {
     const {
       id,
       placeholder,
+      ariaLabel,
       displayValue,
       screenReaderMessage,
       focused,
@@ -217,7 +220,7 @@ class DateInput extends React.PureComponent {
             focused && styles.DateInput_input__focused,
             disabled && styles.DateInput_input__disabled,
           )}
-          aria-label={placeholder}
+          aria-label={ariaLabel}
           type="text"
           id={id}
           name={id}
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index db58b1a366..adc9ceef3f 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -51,6 +51,8 @@ const defaultProps = {
   // input related props
   startDatePlaceholderText: 'Start Date',
   endDatePlaceholderText: 'End Date',
+  startDateAriaLabel: null,
+  endDateAriaLabel: null,
   startDateOffset: undefined,
   endDateOffset: undefined,
   disabled: false,
@@ -540,9 +542,11 @@ class DateRangePicker extends React.PureComponent {
       startDate,
       startDateId,
       startDatePlaceholderText,
+      startDateAriaLabel,
       endDate,
       endDateId,
       endDatePlaceholderText,
+      endDateAriaLabel,
       focusedInput,
       screenReaderInputMessage,
       showClearDates,
@@ -586,10 +590,12 @@ class DateRangePicker extends React.PureComponent {
         startDateId={startDateId}
         startDatePlaceholderText={startDatePlaceholderText}
         isStartDateFocused={focusedInput === START_DATE}
+        startDateAriaLabel={startDateAriaLabel}
         endDate={endDate}
         endDateId={endDateId}
         endDatePlaceholderText={endDatePlaceholderText}
         isEndDateFocused={focusedInput === END_DATE}
+        endDateAriaLabel={endDateAriaLabel}
         displayFormat={displayFormat}
         showClearDates={showClearDates}
         showCaret={!withPortal && !withFullScreenPortal && !hideFang}
diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index a1a54ec983..1cd0f34b5c 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -32,10 +32,12 @@ const propTypes = forbidExtraProps({
 
   startDateId: PropTypes.string,
   startDatePlaceholderText: PropTypes.string,
+  startDateAriaLabel: PropTypes.string,
   screenReaderMessage: PropTypes.string,
 
   endDateId: PropTypes.string,
   endDatePlaceholderText: PropTypes.string,
+  endDateAriaLabel: PropTypes.string,
 
   onStartDateFocus: PropTypes.func,
   onEndDateFocus: PropTypes.func,
@@ -84,6 +86,8 @@ const defaultProps = {
   endDateId: END_DATE,
   startDatePlaceholderText: 'Start Date',
   endDatePlaceholderText: 'End Date',
+  startDateAriaLabel: null,
+  endDateAriaLabel: null,
   screenReaderMessage: '',
   onStartDateFocus() {},
   onEndDateFocus() {},
@@ -136,6 +140,7 @@ function DateRangePickerInput({
   onStartDateChange,
   onStartDateFocus,
   onStartDateShiftTab,
+  startDateAriaLabel,
   endDate,
   endDateId,
   endDatePlaceholderText,
@@ -143,6 +148,7 @@ function DateRangePickerInput({
   onEndDateChange,
   onEndDateFocus,
   onEndDateTab,
+  endDateAriaLabel,
   onKeyDownArrowDown,
   onKeyDownQuestionMark,
   onClearDates,
@@ -216,6 +222,7 @@ function DateRangePickerInput({
       <DateInput
         id={startDateId}
         placeholder={startDatePlaceholderText}
+        ariaLabel={startDateAriaLabel}
         displayValue={startDate}
         screenReaderMessage={screenReaderText}
         focused={isStartDateFocused}
@@ -250,6 +257,7 @@ function DateRangePickerInput({
       <DateInput
         id={endDateId}
         placeholder={endDatePlaceholderText}
+        ariaLabel={endDateAriaLabel}
         displayValue={endDate}
         screenReaderMessage={screenReaderText}
         focused={isEndDateFocused}
diff --git a/src/components/DateRangePickerInputController.jsx b/src/components/DateRangePickerInputController.jsx
index 97026260d5..b3218180cf 100644
--- a/src/components/DateRangePickerInputController.jsx
+++ b/src/components/DateRangePickerInputController.jsx
@@ -34,11 +34,13 @@ const propTypes = forbidExtraProps({
   startDateId: PropTypes.string,
   startDatePlaceholderText: PropTypes.string,
   isStartDateFocused: PropTypes.bool,
+  startDateAriaLabel: PropTypes.string,
 
   endDate: momentPropTypes.momentObj,
   endDateId: PropTypes.string,
   endDatePlaceholderText: PropTypes.string,
   isEndDateFocused: PropTypes.bool,
+  endDateAriaLabel: PropTypes.string,
 
   screenReaderMessage: PropTypes.string,
   showClearDates: PropTypes.bool,
@@ -88,11 +90,13 @@ const defaultProps = {
   startDateId: START_DATE,
   startDatePlaceholderText: 'Start Date',
   isStartDateFocused: false,
+  startDateAriaLabel: null,
 
   endDate: null,
   endDateId: END_DATE,
   endDatePlaceholderText: 'End Date',
   isEndDateFocused: false,
+  endDateAriaLabel: null,
 
   screenReaderMessage: '',
   showClearDates: false,
@@ -270,9 +274,11 @@ export default class DateRangePickerInputController extends React.PureComponent
       startDateId,
       startDatePlaceholderText,
       isStartDateFocused,
+      startDateAriaLabel,
       endDate,
       endDateId,
       endDatePlaceholderText,
+      endDateAriaLabel,
       isEndDateFocused,
       screenReaderMessage,
       showClearDates,
@@ -307,10 +313,12 @@ export default class DateRangePickerInputController extends React.PureComponent
         startDateId={startDateId}
         startDatePlaceholderText={startDatePlaceholderText}
         isStartDateFocused={isStartDateFocused}
+        startDateAriaLabel={startDateAriaLabel}
         endDate={endDateString}
         endDateId={endDateId}
         endDatePlaceholderText={endDatePlaceholderText}
         isEndDateFocused={isEndDateFocused}
+        endDateAriaLabel={endDateAriaLabel}
         isFocused={isFocused}
         disabled={disabled}
         required={required}
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index 0d631faf97..ac9b6c6190 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -48,6 +48,7 @@ const defaultProps = {
   // input related props
   id: 'date',
   placeholder: 'Date',
+  ariaLabel: null,
   disabled: false,
   required: false,
   readOnly: false,
@@ -512,6 +513,7 @@ class SingleDatePicker extends React.PureComponent {
     const {
       id,
       placeholder,
+      ariaLabel,
       disabled,
       focused,
       required,
@@ -551,6 +553,7 @@ class SingleDatePicker extends React.PureComponent {
       <SingleDatePickerInputController
         id={id}
         placeholder={placeholder}
+        ariaLabel={ariaLabel}
         focused={focused}
         isFocused={isInputFocused}
         disabled={disabled}
diff --git a/src/components/SingleDatePickerInput.jsx b/src/components/SingleDatePickerInput.jsx
index a877f52c7b..60df68040f 100644
--- a/src/components/SingleDatePickerInput.jsx
+++ b/src/components/SingleDatePickerInput.jsx
@@ -20,7 +20,8 @@ const propTypes = forbidExtraProps({
   ...withStylesPropTypes,
   id: PropTypes.string.isRequired,
   children: PropTypes.node,
-  placeholder: PropTypes.string, // also used as label
+  placeholder: PropTypes.string,
+  ariaLabel: PropTypes.string,
   displayValue: PropTypes.string,
   screenReaderMessage: PropTypes.string,
   focused: PropTypes.bool,
@@ -57,6 +58,7 @@ const propTypes = forbidExtraProps({
 const defaultProps = {
   children: null,
   placeholder: 'Select Date',
+  ariaLabel: null,
   displayValue: '',
   screenReaderMessage: '',
   focused: false,
@@ -94,6 +96,7 @@ function SingleDatePickerInput({
   id,
   children,
   placeholder,
+  ariaLabel,
   displayValue,
   focused,
   isFocused,
@@ -164,7 +167,8 @@ function SingleDatePickerInput({
 
       <DateInput
         id={id}
-        placeholder={placeholder} // also used as label
+        placeholder={placeholder}
+        ariaLabel={ariaLabel}
         displayValue={displayValue}
         screenReaderMessage={screenReaderText}
         focused={focused}
diff --git a/src/components/SingleDatePickerInputController.jsx b/src/components/SingleDatePickerInputController.jsx
index cf3c28d320..d2e7a9a3ee 100644
--- a/src/components/SingleDatePickerInputController.jsx
+++ b/src/components/SingleDatePickerInputController.jsx
@@ -34,7 +34,8 @@ const propTypes = forbidExtraProps({
   onFocusChange: PropTypes.func.isRequired,
 
   id: PropTypes.string.isRequired,
-  placeholder: PropTypes.string, // also used as label
+  placeholder: PropTypes.string,
+  ariaLabel: PropTypes.string,
   screenReaderMessage: PropTypes.string,
   showClearDate: PropTypes.bool,
   showCaret: PropTypes.bool,
@@ -78,6 +79,7 @@ const defaultProps = {
   focused: false,
 
   placeholder: '',
+  ariaLabel: null,
   screenReaderMessage: 'Date',
   showClearDate: false,
   showCaret: false,
@@ -197,6 +199,7 @@ export default class SingleDatePickerInputController extends React.PureComponent
       children,
       id,
       placeholder,
+      ariaLabel,
       disabled,
       focused,
       isFocused,
@@ -228,6 +231,7 @@ export default class SingleDatePickerInputController extends React.PureComponent
       <SingleDatePickerInput
         id={id}
         placeholder={placeholder}
+        ariaLabel={ariaLabel}
         focused={focused}
         isFocused={isFocused}
         disabled={disabled}
diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js
index 05454c153e..c35f3db742 100644
--- a/src/shapes/DateRangePickerShape.js
+++ b/src/shapes/DateRangePickerShape.js
@@ -32,6 +32,8 @@ export default {
   endDateOffset: PropTypes.func,
   endDateId: PropTypes.string.isRequired,
   endDatePlaceholderText: PropTypes.string,
+  startDateAriaLabel: PropTypes.string,
+  endDateAriaLabel: PropTypes.string,
   disabled: DisabledShape,
   required: PropTypes.bool,
   readOnly: PropTypes.bool,
diff --git a/src/shapes/SingleDatePickerShape.js b/src/shapes/SingleDatePickerShape.js
index f4e672509d..e90fb2e9f1 100644
--- a/src/shapes/SingleDatePickerShape.js
+++ b/src/shapes/SingleDatePickerShape.js
@@ -23,6 +23,7 @@ export default {
   // input related props
   id: PropTypes.string.isRequired,
   placeholder: PropTypes.string,
+  ariaLabel: PropTypes.string,
   disabled: PropTypes.bool,
   required: PropTypes.bool,
   readOnly: PropTypes.bool,
diff --git a/test/components/DateInput_spec.jsx b/test/components/DateInput_spec.jsx
index 58452cc4a6..21dec9d83d 100644
--- a/test/components/DateInput_spec.jsx
+++ b/test/components/DateInput_spec.jsx
@@ -10,10 +10,10 @@ const event = { preventDefault() {}, stopPropagation() {} };
 describe('DateInput', () => {
   describe('#render', () => {
     describe('input', () => {
-      it('has props.placeholder as an aria-label if prop is passed in', () => {
-        const placeholder = 'placeholder_foo';
-        const wrapper = shallow(<DateInput id="date" placeholder={placeholder} />).dive();
-        expect(wrapper.find('input').props()['aria-label']).to.equal(placeholder);
+      it('has props.ariaLabel as an aria-label if prop is passed in', () => {
+        const ariaLabel = 'ariaLabelExample';
+        const wrapper = shallow(<DateInput id="date" ariaLabel={ariaLabel} />).dive();
+        expect(wrapper.find('input').props()['aria-label']).to.equal(ariaLabel);
       });
 
       it('has value === props.displayValue', () => {

From a5e0f299c23ea46e9e3c56643cf044943ab48401 Mon Sep 17 00:00:00 2001
From: Ryan Lewis <ryanharrisonlewis@gmail.com>
Date: Thu, 21 Mar 2019 14:52:26 -0600
Subject: [PATCH 425/618] undoing breaking change and adding test

---
 src/components/DateInput.jsx                       |  4 ++--
 src/components/DateRangePicker.jsx                 |  4 ++--
 src/components/DateRangePickerInput.jsx            |  4 ++--
 src/components/DateRangePickerInputController.jsx  |  4 ++--
 src/components/SingleDatePicker.jsx                |  2 +-
 src/components/SingleDatePickerInput.jsx           |  2 +-
 src/components/SingleDatePickerInputController.jsx |  2 +-
 test/components/DateInput_spec.jsx                 | 11 +++++++++++
 8 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
index 1bfea2f474..d50ecd9411 100644
--- a/src/components/DateInput.jsx
+++ b/src/components/DateInput.jsx
@@ -56,7 +56,7 @@ const propTypes = forbidExtraProps({
 const defaultProps = {
   placeholder: 'Select Date',
   displayValue: '',
-  ariaLabel: null,
+  ariaLabel: undefined,
   screenReaderMessage: '',
   focused: false,
   disabled: false,
@@ -220,7 +220,7 @@ class DateInput extends React.PureComponent {
             focused && styles.DateInput_input__focused,
             disabled && styles.DateInput_input__disabled,
           )}
-          aria-label={ariaLabel}
+          aria-label={ariaLabel === undefined ? placeholder : ariaLabel}
           type="text"
           id={id}
           name={id}
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index adc9ceef3f..fa9868cc5a 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -51,8 +51,8 @@ const defaultProps = {
   // input related props
   startDatePlaceholderText: 'Start Date',
   endDatePlaceholderText: 'End Date',
-  startDateAriaLabel: null,
-  endDateAriaLabel: null,
+  startDateAriaLabel: undefined,
+  endDateAriaLabel: undefined,
   startDateOffset: undefined,
   endDateOffset: undefined,
   disabled: false,
diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index 1cd0f34b5c..9bebea109a 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -86,8 +86,8 @@ const defaultProps = {
   endDateId: END_DATE,
   startDatePlaceholderText: 'Start Date',
   endDatePlaceholderText: 'End Date',
-  startDateAriaLabel: null,
-  endDateAriaLabel: null,
+  startDateAriaLabel: undefined,
+  endDateAriaLabel: undefined,
   screenReaderMessage: '',
   onStartDateFocus() {},
   onEndDateFocus() {},
diff --git a/src/components/DateRangePickerInputController.jsx b/src/components/DateRangePickerInputController.jsx
index b3218180cf..a504e3cc74 100644
--- a/src/components/DateRangePickerInputController.jsx
+++ b/src/components/DateRangePickerInputController.jsx
@@ -90,13 +90,13 @@ const defaultProps = {
   startDateId: START_DATE,
   startDatePlaceholderText: 'Start Date',
   isStartDateFocused: false,
-  startDateAriaLabel: null,
+  startDateAriaLabel: undefined,
 
   endDate: null,
   endDateId: END_DATE,
   endDatePlaceholderText: 'End Date',
   isEndDateFocused: false,
-  endDateAriaLabel: null,
+  endDateAriaLabel: undefined,
 
   screenReaderMessage: '',
   showClearDates: false,
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index ac9b6c6190..a5732d6ff1 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -48,7 +48,7 @@ const defaultProps = {
   // input related props
   id: 'date',
   placeholder: 'Date',
-  ariaLabel: null,
+  ariaLabel: undefined,
   disabled: false,
   required: false,
   readOnly: false,
diff --git a/src/components/SingleDatePickerInput.jsx b/src/components/SingleDatePickerInput.jsx
index 60df68040f..3ca8dc46e5 100644
--- a/src/components/SingleDatePickerInput.jsx
+++ b/src/components/SingleDatePickerInput.jsx
@@ -58,7 +58,7 @@ const propTypes = forbidExtraProps({
 const defaultProps = {
   children: null,
   placeholder: 'Select Date',
-  ariaLabel: null,
+  ariaLabel: undefined,
   displayValue: '',
   screenReaderMessage: '',
   focused: false,
diff --git a/src/components/SingleDatePickerInputController.jsx b/src/components/SingleDatePickerInputController.jsx
index d2e7a9a3ee..5777068f1a 100644
--- a/src/components/SingleDatePickerInputController.jsx
+++ b/src/components/SingleDatePickerInputController.jsx
@@ -79,7 +79,7 @@ const defaultProps = {
   focused: false,
 
   placeholder: '',
-  ariaLabel: null,
+  ariaLabel: undefined,
   screenReaderMessage: 'Date',
   showClearDate: false,
   showCaret: false,
diff --git a/test/components/DateInput_spec.jsx b/test/components/DateInput_spec.jsx
index 21dec9d83d..1f7f16906c 100644
--- a/test/components/DateInput_spec.jsx
+++ b/test/components/DateInput_spec.jsx
@@ -16,6 +16,17 @@ describe('DateInput', () => {
         expect(wrapper.find('input').props()['aria-label']).to.equal(ariaLabel);
       });
 
+      it('has no aria-label if props.ariaLabel is null', () => {
+        const wrapper = shallow(<DateInput id="date" ariaLabel={null} />).dive();
+        expect(wrapper.find('input').props()['aria-label']).to.equal(null);
+      });
+
+      it('has props.ariaLabel as an aria-label if prop is passed in', () => {
+        const placeholder = 'placeholder foo';
+        const wrapper = shallow(<DateInput id="date" placeholder={placeholder} />).dive();
+        expect(wrapper.find('input').props()['aria-label']).to.equal(placeholder);
+      });
+
       it('has value === props.displayValue', () => {
         const DISPLAY_VALUE = 'foobar';
         const wrapper = shallow(<DateInput id="date" displayValue={DISPLAY_VALUE} />).dive();

From f34f22768afd172e55cd0fc3742af096f5929b96 Mon Sep 17 00:00:00 2001
From: Ryan Lewis <ryanharrisonlewis@gmail.com>
Date: Thu, 21 Mar 2019 15:24:02 -0600
Subject: [PATCH 426/618] fixing test description

---
 test/components/DateInput_spec.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/components/DateInput_spec.jsx b/test/components/DateInput_spec.jsx
index 1f7f16906c..2e7886144b 100644
--- a/test/components/DateInput_spec.jsx
+++ b/test/components/DateInput_spec.jsx
@@ -10,7 +10,7 @@ const event = { preventDefault() {}, stopPropagation() {} };
 describe('DateInput', () => {
   describe('#render', () => {
     describe('input', () => {
-      it('has props.ariaLabel as an aria-label if prop is passed in', () => {
+      it('has props.ariaLabel as an aria-label if ariaLabel is passed in', () => {
         const ariaLabel = 'ariaLabelExample';
         const wrapper = shallow(<DateInput id="date" ariaLabel={ariaLabel} />).dive();
         expect(wrapper.find('input').props()['aria-label']).to.equal(ariaLabel);
@@ -21,7 +21,7 @@ describe('DateInput', () => {
         expect(wrapper.find('input').props()['aria-label']).to.equal(null);
       });
 
-      it('has props.ariaLabel as an aria-label if prop is passed in', () => {
+      it('has props.placeholder as an aria-label if ariaLabel is not passed in', () => {
         const placeholder = 'placeholder foo';
         const wrapper = shallow(<DateInput id="date" placeholder={placeholder} />).dive();
         expect(wrapper.find('input').props()['aria-label']).to.equal(placeholder);

From 0ae047835088a8744c39018d361b6f25fdebfef7 Mon Sep 17 00:00:00 2001
From: Kris Salvador <kriss@spotify.com>
Date: Sun, 24 Mar 2019 23:54:29 -0400
Subject: [PATCH 427/618] Add after hovered start class

---
 src/components/CalendarDay.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/CalendarDay.jsx b/src/components/CalendarDay.jsx
index 7256cd0710..982f18bcbd 100644
--- a/src/components/CalendarDay.jsx
+++ b/src/components/CalendarDay.jsx
@@ -132,6 +132,7 @@ class CalendarDay extends React.PureComponent {
           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,
@@ -340,4 +341,5 @@ export default withStyles(({ reactDates: { color, font } }) => ({
   CalendarDay__today: {},
   CalendarDay__firstDayOfWeek: {},
   CalendarDay__lastDayOfWeek: {},
+  CalendarDay__after_hovered_start: {}
 }), { pureComponent: typeof React.PureComponent !== 'undefined' })(CalendarDay);

From 6f99bb487fd962be7257d505c07f538cea8314b4 Mon Sep 17 00:00:00 2001
From: Kris Salvador <kriss@spotify.com>
Date: Mon, 25 Mar 2019 17:01:12 -0400
Subject: [PATCH 428/618] Add no-selected-start-before-selected-end and
 before-hovered-end

---
 src/components/CalendarDay.jsx              |  6 +-
 src/components/DayPickerRangeController.jsx | 61 +++++++++++++++++++++
 src/utils/getCalendarDaySettings.js         |  2 +-
 src/utils/isPreviousDay.js                  |  9 +++
 test/utils/isPreviousDay_spec.js            | 27 +++++++++
 5 files changed, 103 insertions(+), 2 deletions(-)
 create mode 100644 src/utils/isPreviousDay.js
 create mode 100644 test/utils/isPreviousDay_spec.js

diff --git a/src/components/CalendarDay.jsx b/src/components/CalendarDay.jsx
index 982f18bcbd..8f58a05236 100644
--- a/src/components/CalendarDay.jsx
+++ b/src/components/CalendarDay.jsx
@@ -137,6 +137,8 @@ class CalendarDay extends React.PureComponent {
           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,
           isOutsideRange && styles.CalendarDay__blocked_out_of_range,
           daySizeStyles,
         )}
@@ -341,5 +343,7 @@ export default withStyles(({ reactDates: { color, font } }) => ({
   CalendarDay__today: {},
   CalendarDay__firstDayOfWeek: {},
   CalendarDay__lastDayOfWeek: {},
-  CalendarDay__after_hovered_start: {}
+  CalendarDay__after_hovered_start: {},
+  CalendarDay__before_hovered_end: {},
+  CalendarDay__no_selected_start_before_selected_end: {}
 }), { pureComponent: typeof React.PureComponent !== 'undefined' })(CalendarDay);
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 2bc4b65075..d2535cedbd 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -14,6 +14,7 @@ import isNextDay from '../utils/isNextDay';
 import isSameDay from '../utils/isSameDay';
 import isAfterDay from '../utils/isAfterDay';
 import isBeforeDay from '../utils/isBeforeDay';
+import isPreviousDay from '../utils/isPreviousDay';
 
 import getVisibleDays from '../utils/getVisibleDays';
 import isDayVisible from '../utils/isDayVisible';
@@ -211,6 +212,8 @@ export default class DayPickerRangeController extends React.PureComponent {
       'last-day-of-week': day => this.isLastDayOfWeek(day),
       'hovered-start-first-possible-end': (day, hoverDate) => this.isFirstPossibleEndDateForHoveredStartDate(day, hoverDate),
       'hovered-start-blocked-minimum-nights': (day, hoverDate) => this.doesNotMeetMinNightsForHoveredStartDate(day, hoverDate),
+      'before-hovered-end': day => this.isDayBeforeHoveredEndDate(day),
+      'no-selected-start-before-selected-end': (day) => { return this.beforeSelectedEnd(day) && !props.startDate }
     };
 
     const { currentMonth, visibleDays } = this.getStateForNewMonth(props);
@@ -330,6 +333,18 @@ export default class DayPickerRangeController extends React.PureComponent {
         const startSpan = prevStartDate.clone().add(1, 'day');
         const endSpan = prevStartDate.clone().add(prevMinimumNights + 1, 'days');
         modifiers = this.deleteModifierFromRange(modifiers, startSpan, endSpan, 'after-hovered-start');
+
+        if (!startDate && endDate) {
+          values(visibleDays).forEach((days) => {
+            Object.keys(days).forEach((day) => {
+              const momentObj = moment(day);
+
+              if (isBeforeDay(momentObj, endDate)) {
+                modifiers = this.addModifier(modifiers, momentObj, 'no-selected-start-before-selected-end')
+              }
+            });
+          });
+        }
       }
     }
 
@@ -371,6 +386,12 @@ export default class DayPickerRangeController extends React.PureComponent {
       modifiers = this.addModifierToRange(modifiers, startSpan, endSpan, 'after-hovered-start');
     }
 
+    if (!this.isTouchDevice && didEndDateChange && !startDate && endDate) {
+      const startSpan = endDate.clone().subtract(minimumNights, 'days');
+      const endSpan = endDate.clone().add(1, 'day');
+      modifiers = this.addModifierToRange(modifiers, startSpan, endSpan, 'before-hovered-end');
+    }
+
     if (prevMinimumNights > 0) {
       if (didFocusChange || didStartDateChange || minimumNights !== prevMinimumNights) {
         const startSpan = prevStartDate || this.today;
@@ -675,6 +696,23 @@ export default class DayPickerRangeController extends React.PureComponent {
           }
         }
 
+        if (endDate) {
+          const startSpan = endDate.clone().subtract(minimumNights, 'days');
+          const endSpan = endDate.clone().add(1, 'day');
+          modifiers = this.deleteModifierFromRange(modifiers, startSpan, endSpan, 'before-hovered-end');
+
+          if (isSameDay(day, endDate)) {
+            const newStartSpan = endDate.clone().subtract(minimumNights, 'days');
+            const newEndSpan = endDate.clone().add(1, 'day');
+            modifiers = this.addModifierToRange(
+              modifiers,
+              newStartSpan,
+              newEndSpan,
+              'before-hovered-end',
+            );
+          }
+        }
+
         if (hoverDate && !this.isBlocked(hoverDate)) {
           const minNightsForPrevHoverDate = getMinNightsForHoverDate(hoverDate);
           if (minNightsForPrevHoverDate > 0 && focusedInput === START_DATE) {
@@ -756,6 +794,12 @@ export default class DayPickerRangeController extends React.PureComponent {
       modifiers = this.deleteModifierFromRange(modifiers, startSpan, endSpan, 'after-hovered-start');
     }
 
+    if (endDate && isSameDay(day, endDate)) {
+      const startSpan = endDate.clone().subtract(minimumNights, 'days');
+      const endSpan = endDate.clone().add(1, 'day');
+      modifiers = this.deleteModifierFromRange(modifiers, startSpan, endSpan, 'before-hovered-end');
+    }
+
     if (!this.isBlocked(hoverDate)) {
       const minNightsForHoverDate = getMinNightsForHoverDate(hoverDate);
       if (minNightsForHoverDate > 0 && focusedInput === START_DATE) {
@@ -1223,6 +1267,23 @@ export default class DayPickerRangeController extends React.PureComponent {
     return isSameDay(day, firstAvailableEndDate);
   }
 
+  beforeSelectedEnd(day) {
+    const { endDate } = this.props;
+    return isBeforeDay(day, endDate);
+  }
+
+  isDayBeforeHoveredEndDate(day) {
+    const { startDate, endDate, minimumNights } = this.props;
+    const { hoverDate } = this.state || {};
+
+    return !!endDate
+      && !startDate
+      && !this.isBlocked(day)
+      && isPreviousDay(hoverDate, day)
+      && minimumNights > 0
+      && isSameDay(hoverDate, endDate);
+  }
+
   render() {
     const {
       numberOfMonths,
diff --git a/src/utils/getCalendarDaySettings.js b/src/utils/getCalendarDaySettings.js
index 33c530ec04..5ef662c294 100644
--- a/src/utils/getCalendarDaySettings.js
+++ b/src/utils/getCalendarDaySettings.js
@@ -16,7 +16,7 @@ function shouldUseDefaultCursor(modifiers) {
 
 function isHoveredSpan(modifiers) {
   if (isSelected(modifiers)) return false;
-  return modifiers.has('hovered-span') || modifiers.has('after-hovered-start');
+  return modifiers.has('hovered-span') || modifiers.has('after-hovered-start') || modifiers.has('before-hovered-end');
 }
 
 function getAriaLabel(phrases, modifiers, day, ariaLabelFormat) {
diff --git a/src/utils/isPreviousDay.js b/src/utils/isPreviousDay.js
new file mode 100644
index 0000000000..f7355c6a29
--- /dev/null
+++ b/src/utils/isPreviousDay.js
@@ -0,0 +1,9 @@
+import moment from 'moment';
+
+import isSameDay from './isSameDay';
+
+export default function isPreviousDay(a, b) {
+  if (!moment.isMoment(a) || !moment.isMoment(b)) return false;
+  const dayBefore = moment(a).subtract(1, 'day');
+  return isSameDay(dayBefore, b);
+}
diff --git a/test/utils/isPreviousDay_spec.js b/test/utils/isPreviousDay_spec.js
new file mode 100644
index 0000000000..0c1b5d4947
--- /dev/null
+++ b/test/utils/isPreviousDay_spec.js
@@ -0,0 +1,27 @@
+import moment from 'moment';
+import { expect } from 'chai';
+
+import isPreviousDay from '../../src/utils/isPreviousDay';
+
+const today = moment();
+const yesterday = moment().subtract(1, 'days');
+
+describe('isPreviousDay', () => {
+  it('returns true if second argument is the day immediately before the first', () => {
+    expect(isPreviousDay(today, yesterday)).to.equal(true);
+  });
+
+  it('returns false if the second arg is not the day immediately before the first', () => {
+    expect(isPreviousDay(yesterday, today)).to.equal(false);
+  });
+
+  describe('non-moment arguments', () => {
+    it('is false if first argument is not a moment object', () => {
+      expect(isPreviousDay(null, today)).to.equal(false);
+    });
+
+    it('is false if second argument is not a moment object', () => {
+      expect(isPreviousDay(today, 'foo')).to.equal(false);
+    });
+  });
+});

From 98fd20b5cfad1ba18c1a07926ffae5d89c70105d Mon Sep 17 00:00:00 2001
From: Kris Salvador <kriss@spotify.com>
Date: Sun, 31 Mar 2019 22:35:50 -0400
Subject: [PATCH 429/618] Add selected-start-no-selected-end and
 selected-end-no-selected-start

---
 src/components/CalendarDay.jsx              | 10 ++-
 src/components/DayPickerRangeController.jsx | 87 +++++++++++++++------
 2 files changed, 73 insertions(+), 24 deletions(-)

diff --git a/src/components/CalendarDay.jsx b/src/components/CalendarDay.jsx
index 8f58a05236..deb49d71db 100644
--- a/src/components/CalendarDay.jsx
+++ b/src/components/CalendarDay.jsx
@@ -139,6 +139,10 @@ class CalendarDay extends React.PureComponent {
           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,
         )}
@@ -345,5 +349,9 @@ export default withStyles(({ reactDates: { color, font } }) => ({
   CalendarDay__lastDayOfWeek: {},
   CalendarDay__after_hovered_start: {},
   CalendarDay__before_hovered_end: {},
-  CalendarDay__no_selected_start_before_selected_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);
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index d2535cedbd..c265c7e836 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -113,21 +113,21 @@ const defaultProps = {
   endDate: undefined, // TODO: use null
   minDate: null,
   maxDate: null,
-  onDatesChange() {},
+  onDatesChange() { },
   startDateOffset: undefined,
   endDateOffset: undefined,
 
   focusedInput: null,
-  onFocusChange() {},
-  onClose() {},
+  onFocusChange() { },
+  onClose() { },
 
   keepOpenOnDateSelect: false,
   minimumNights: 1,
   disabled: false,
-  isOutsideRange() {},
-  isDayBlocked() {},
-  isDayHighlighted() {},
-  getMinNightsForHoverDate() {},
+  isOutsideRange() { },
+  isDayBlocked() { },
+  isDayHighlighted() { },
+  getMinNightsForHoverDate() { },
 
   // DayPicker props
   renderMonthText: null,
@@ -143,9 +143,9 @@ const defaultProps = {
   navNext: null,
   noNavButtons: false,
 
-  onPrevMonthClick() {},
-  onNextMonthClick() {},
-  onOutsideClick() {},
+  onPrevMonthClick() { },
+  onNextMonthClick() { },
+  onOutsideClick() { },
 
   renderCalendarDay: undefined,
   renderDayContents: null,
@@ -161,11 +161,11 @@ const defaultProps = {
   horizontalMonthPadding: 13,
 
   // accessibility
-  onBlur() {},
+  onBlur() { },
   isFocused: false,
   showKeyboardShortcuts: false,
-  onTab() {},
-  onShiftTab() {},
+  onTab() { },
+  onShiftTab() { },
 
   // i18n
   monthFormat: 'MMMM YYYY',
@@ -213,7 +213,10 @@ export default class DayPickerRangeController extends React.PureComponent {
       'hovered-start-first-possible-end': (day, hoverDate) => this.isFirstPossibleEndDateForHoveredStartDate(day, hoverDate),
       'hovered-start-blocked-minimum-nights': (day, hoverDate) => this.doesNotMeetMinNightsForHoveredStartDate(day, hoverDate),
       'before-hovered-end': day => this.isDayBeforeHoveredEndDate(day),
-      'no-selected-start-before-selected-end': (day) => { return this.beforeSelectedEnd(day) && !props.startDate }
+      'no-selected-start-before-selected-end': (day) => this.beforeSelectedEnd(day) && !props.startDate,
+      'selected-start-in-hovered-span': (day, hoverDate) => this.isStartDate(day) && isAfterDay(hoverDate, day),
+      'selected-start-no-selected-end': (day) => this.isStartDate(day) && !props.endDate,
+      'selected-end-no-selected-start': (day) => this.isEndDate(day) && !props.startDate
     };
 
     const { currentMonth, visibleDays } = this.getStateForNewMonth(props);
@@ -334,6 +337,10 @@ export default class DayPickerRangeController extends React.PureComponent {
         const endSpan = prevStartDate.clone().add(prevMinimumNights + 1, 'days');
         modifiers = this.deleteModifierFromRange(modifiers, startSpan, endSpan, 'after-hovered-start');
 
+        if (!endDate || !prevEndDate) {
+          modifiers = this.deleteModifier(modifiers, prevStartDate, 'selected-start-no-selected-end');
+        }
+
         if (!startDate && endDate) {
           values(visibleDays).forEach((days) => {
             Object.keys(days).forEach((day) => {
@@ -351,6 +358,10 @@ export default class DayPickerRangeController extends React.PureComponent {
     if (didEndDateChange) {
       modifiers = this.deleteModifier(modifiers, prevEndDate, 'selected-end');
       modifiers = this.addModifier(modifiers, endDate, 'selected-end');
+
+      if (prevEndDate && (!startDate || !prevStartDate)) {
+        modifiers = this.deleteModifier(modifiers, prevEndDate, 'selected-end-no-start-date');
+      }
     }
 
     if (didStartDateChange || didEndDateChange) {
@@ -378,6 +389,14 @@ export default class DayPickerRangeController extends React.PureComponent {
           'selected-span',
         );
       }
+
+      if (startDate && !endDate) {
+        modifiers = this.addModifier(modifiers, startDate, 'selected-start-no-selected-end');
+      }
+
+      if (endDate && !startDate) {
+        modifiers = this.addModifier(modifiers, endDate, 'selected-end-no-selected-start');
+      }
     }
 
     if (!this.isTouchDevice && didStartDateChange && startDate && !endDate) {
@@ -388,7 +407,7 @@ export default class DayPickerRangeController extends React.PureComponent {
 
     if (!this.isTouchDevice && didEndDateChange && !startDate && endDate) {
       const startSpan = endDate.clone().subtract(minimumNights, 'days');
-      const endSpan = endDate.clone().add(1, 'day');
+      const endSpan = endDate.clone();
       modifiers = this.addModifierToRange(modifiers, startSpan, endSpan, 'before-hovered-end');
     }
 
@@ -663,9 +682,14 @@ export default class DayPickerRangeController extends React.PureComponent {
             modifiers = this.deleteModifierFromRange(modifiers, startDate, endSpan, 'hovered-span');
           }
 
+          if (isBeforeDay(day, startDate) || isSameDay(day, startDate)) {
+            modifiers = this.deleteModifier(modifiers, startDate, 'selected-start-in-hovered-span');
+          }
+
           if (!this.isBlocked(day) && isAfterDay(day, startDate)) {
             const endSpan = day.clone().add(1, 'day');
             modifiers = this.addModifierToRange(modifiers, startDate, endSpan, 'hovered-span');
+            modifiers = this.addModifier(modifiers, startDate, 'selected-start-in-hovered-span');
           }
         }
 
@@ -674,8 +698,13 @@ export default class DayPickerRangeController extends React.PureComponent {
             modifiers = this.deleteModifierFromRange(modifiers, hoverDate, endDate, 'hovered-span');
           }
 
+          if (isAfterDay(day, endDate) || isSameDay(day, endDate)) {
+            modifiers = this.deleteModifier(modifiers, endDate, 'selected-end-in-hovered-span');
+          }
+
           if (!this.isBlocked(day) && isBeforeDay(day, endDate)) {
             modifiers = this.addModifierToRange(modifiers, day, endDate, 'hovered-span');
+            modifiers = this.addModifier(modifiers, endDate, 'selected-end-in-hovered-span');
           }
         }
 
@@ -698,12 +727,12 @@ export default class DayPickerRangeController extends React.PureComponent {
 
         if (endDate) {
           const startSpan = endDate.clone().subtract(minimumNights, 'days');
-          const endSpan = endDate.clone().add(1, 'day');
+          const endSpan = endDate.clone();
           modifiers = this.deleteModifierFromRange(modifiers, startSpan, endSpan, 'before-hovered-end');
 
           if (isSameDay(day, endDate)) {
             const newStartSpan = endDate.clone().subtract(minimumNights, 'days');
-            const newEndSpan = endDate.clone().add(1, 'day');
+            const newEndSpan = endDate.clone();
             modifiers = this.addModifierToRange(
               modifiers,
               newStartSpan,
@@ -779,13 +808,25 @@ export default class DayPickerRangeController extends React.PureComponent {
       modifiers = this.deleteModifierFromRange(modifiers, dateOffset.start, dateOffset.end, 'hovered-offset');
     }
 
-    if (startDate && !endDate && isAfterDay(hoverDate, startDate)) {
-      const endSpan = hoverDate.clone().add(1, 'day');
-      modifiers = this.deleteModifierFromRange(modifiers, startDate, endSpan, 'hovered-span');
+    if (startDate && !endDate) {
+      if (isAfterDay(hoverDate, startDate)) {
+        const endSpan = hoverDate.clone().add(1, 'day');
+        modifiers = this.deleteModifierFromRange(modifiers, startDate, endSpan, 'hovered-span');
+      }
+
+      if (isAfterDay(day, startDate)) {
+        modifiers = this.deleteModifier(modifiers, startDate, 'selected-start-in-hovered-span');
+      }
     }
 
-    if (!startDate && endDate && isAfterDay(endDate, hoverDate)) {
-      modifiers = this.deleteModifierFromRange(modifiers, hoverDate, endDate, 'hovered-span');
+    if (!startDate && endDate) {
+      if (isAfterDay(endDate, hoverDate)) {
+        modifiers = this.deleteModifierFromRange(modifiers, hoverDate, endDate, 'hovered-span');
+      }
+
+      if (isBeforeDay(day, endDate)) {
+        modifiers = this.deleteModifier(modifiers, endDate, 'selected-end-in-hovered-span');
+      }
     }
 
     if (startDate && isSameDay(day, startDate)) {
@@ -796,7 +837,7 @@ export default class DayPickerRangeController extends React.PureComponent {
 
     if (endDate && isSameDay(day, endDate)) {
       const startSpan = endDate.clone().subtract(minimumNights, 'days');
-      const endSpan = endDate.clone().add(1, 'day');
+      const endSpan = endDate.clone();
       modifiers = this.deleteModifierFromRange(modifiers, startSpan, endSpan, 'before-hovered-end');
     }
 

From f58954b50433b5fbef62947964fd46941bc45f1c Mon Sep 17 00:00:00 2001
From: Jacob Parish <jparish@d3banking.com>
Date: Tue, 2 Apr 2019 17:04:27 -0500
Subject: [PATCH 430/618] test(SingleDatePicker): add tests for `onFocusOut`
 event

---
 karma.conf.js                             |  2 +-
 package.json                              |  1 -
 src/components/SingleDatePicker.jsx       | 11 +++-
 test/components/SingleDatePicker_spec.jsx | 62 ++++++++++++++++++++---
 4 files changed, 65 insertions(+), 11 deletions(-)

diff --git a/karma.conf.js b/karma.conf.js
index 31d3de8a5b..732ff364b5 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -11,6 +11,7 @@ module.exports = (config) => {
     files: ['test/browser-main.js'],
 
     webpack: {
+      mode: 'development',
       externals: {
         sinon: true,
       },
@@ -36,7 +37,6 @@ module.exports = (config) => {
               presets: ['airbnb'],
             },
           },
-          { test: /\.json$/, loader: 'json-loader' },
 
           // Inject the Airbnb shims into the bundle
           { test: /test\/_helpers/, loader: 'imports-loader?shims=airbnb-js-shims' },
diff --git a/package.json b/package.json
index 3b3a9c4d2e..170c56d98f 100644
--- a/package.json
+++ b/package.json
@@ -83,7 +83,6 @@
     "git-directory-deploy": "^1.5.1",
     "imports-loader": "^0.8.0",
     "in-publish": "^2.0.0",
-    "json-loader": "^0.5.7",
     "karma": "^3.1.1",
     "karma-chai": "^0.1.0",
     "karma-firefox-launcher": "^1.1.0",
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index 931f498ab2..850e63af46 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -249,7 +249,16 @@ class SingleDatePicker extends React.PureComponent {
 
   onFocusOut(e) {
     const { onFocusChange } = this.props;
-    if (this.dayPickerContainer.contains(e.relatedTarget || e.target) || this.dayPickerContainer.contains(e.target)) return;
+    // In cases where **relatedTarget** is not null, it points to the right
+    // element here. However, in cases where it is null (such as clicking on a
+    // specific day) or it is **document.body** (IE11), the appropriate value is **event.target**.
+    //
+    // We handle both situations here by using the ` || ` operator to fallback
+    // to *event.target** when **relatedTarget** is not provided.
+    const relatedTarget = e.relatedTarget === document.body
+      ? e.target
+      : (e.relatedTarget || e.target);
+    if (this.dayPickerContainer.contains(relatedTarget)) return;
     onFocusChange({ focused: false });
   }
 
diff --git a/test/components/SingleDatePicker_spec.jsx b/test/components/SingleDatePicker_spec.jsx
index a0094df441..6d63f862d9 100644
--- a/test/components/SingleDatePicker_spec.jsx
+++ b/test/components/SingleDatePicker_spec.jsx
@@ -595,20 +595,66 @@ describe('SingleDatePicker', () => {
     });
   });
 
-  describe('#onFocusOut', () => {
-    it('calls props.onFocusChange with focused: false', () => {
-      const onFocusChangeStub = sinon.stub();
-      const wrapper = shallow((
+  describeIfWindow('#onFocusOut', () => {
+    let wrapper;
+    let ctrl;
+    let onFocusChangeStub;
+    let dpcContainsStub;
+
+    beforeEach(() => {
+      onFocusChangeStub = sinon.stub();
+      dpcContainsStub = sinon.stub();
+      wrapper = shallow((
         <SingleDatePicker id="date" onFocusChange={onFocusChangeStub} />
       )).dive();
-
-      wrapper.instance().dayPickerContainer = {
-        contains: () => false,
+      ctrl = wrapper.instance();
+      ctrl.dayPickerContainer = {
+        contains: dpcContainsStub.returns(true),
       };
+    });
+
+    afterEach(() => {
+      onFocusChangeStub.reset();
+      dpcContainsStub.reset();
+    });
 
-      wrapper.instance().onFocusOut({});
+    it('calls props.onFocusChange with focused: false when dayPickerContainer does not contain the target', () => {
+      dpcContainsStub.returns(false);
+      ctrl.onFocusOut({});
       expect(onFocusChangeStub.callCount).to.equal(1);
       expect(onFocusChangeStub.getCall(0).args[0]).to.deep.equal({ focused: false });
     });
+
+    it('should not call props.onFocusChange when dayPickerContainer contains the target', () => {
+      ctrl.onFocusOut({});
+      expect(onFocusChangeStub.callCount).to.equal(0);
+    });
+
+    it('should check the target when related target is the same as the document body', () => {
+      const event = {
+        relatedTarget: document.body,
+        target: 'target',
+      };
+      ctrl.onFocusOut(event);
+      expect(dpcContainsStub.getCall(0).args[0]).to.equal(event.target);
+    });
+
+    it('should check the target when related target is defined', () => {
+      const event = {
+        relatedTarget: 'related target',
+        target: 'target',
+      };
+      ctrl.onFocusOut(event);
+      expect(dpcContainsStub.getCall(0).args[0]).to.equal(event.relatedTarget);
+    });
+
+    it('should check the target when related target is not defined', () => {
+      const event = {
+        relatedTarget: undefined,
+        target: 'target',
+      };
+      ctrl.onFocusOut(event);
+      expect(dpcContainsStub.getCall(0).args[0]).to.equal(event.target);
+    });
   });
 });

From 5f1964b38c5d020b40a0caf897e6612179ada9c9 Mon Sep 17 00:00:00 2001
From: Gideon Pyzer <gideon.pyzer@huddle.com>
Date: Sat, 6 Apr 2019 11:37:38 -0500
Subject: [PATCH 431/618] [New] `CalendarMonth`: Pass isVisible to
 renderMonthElement

---
 README.md                              |  6 +++---
 src/components/CalendarMonth.jsx       |  7 ++++++-
 test/components/CalendarMonth_spec.jsx | 20 ++++++++++++++++++++
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 6ca688041e..862afeb695 100644
--- a/README.md
+++ b/README.md
@@ -173,7 +173,7 @@ numberOfMonths: PropTypes.number,
 keepOpenOnDateSelect: PropTypes.bool,
 reopenPickerOnClearDates: PropTypes.bool,
 renderCalendarInfo: PropTypes.func,
-renderMonthElement: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'), PropTypes.func, // ({ month, onMonthSelect, onYearSelect }) => PropTypes.node,
+renderMonthElement: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'), PropTypes.func, // ({ month, onMonthSelect, onYearSelect, isVisible }) => PropTypes.node,
 hideKeyboardShortcutsPanel: PropTypes.bool,
 
 // navigation related props
@@ -254,7 +254,7 @@ numberOfMonths: PropTypes.number,
 keepOpenOnDateSelect: PropTypes.bool,
 reopenPickerOnClearDate: PropTypes.bool,
 renderCalendarInfo: PropTypes.func,
-renderMonthElement: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'), // ({ month, onMonthSelect, onYearSelect }) => PropTypes.node,
+renderMonthElement: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'), // ({ month, onMonthSelect, onYearSelect, isVisible }) => PropTypes.node,
 hideKeyboardShortcutsPanel: PropTypes.bool,
 daySize: nonNegativeInteger,
 isRTL: PropTypes.bool,
@@ -308,7 +308,7 @@ The following is a list of other *OPTIONAL* props you may provide to the `DayPic
   withPortal: PropTypes.bool,
   initialVisibleMonth: PropTypes.func,
   renderCalendarInfo: PropTypes.func,
-  renderMonthElement: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'), // ({ month, onMonthSelect, onYearSelect }) => PropTypes.node,
+  renderMonthElement: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'), // ({ month, onMonthSelect, onYearSelect, isVisible }) => PropTypes.node,
   onOutsideClick: PropTypes.func,
   keepOpenOnDateSelect: PropTypes.bool,
   noBorder: PropTypes.bool,
diff --git a/src/components/CalendarMonth.jsx b/src/components/CalendarMonth.jsx
index a894432ff5..76e540a1c7 100644
--- a/src/components/CalendarMonth.jsx
+++ b/src/components/CalendarMonth.jsx
@@ -197,7 +197,12 @@ class CalendarMonth extends React.PureComponent {
           )}
         >
           {renderMonthElement ? (
-            renderMonthElement({ month, onMonthSelect, onYearSelect })
+            renderMonthElement({
+              month,
+              onMonthSelect,
+              onYearSelect,
+              isVisible,
+            })
           ) : (
             <strong>
               {monthTitle}
diff --git a/test/components/CalendarMonth_spec.jsx b/test/components/CalendarMonth_spec.jsx
index 777aa73e2d..05a3a6dd82 100644
--- a/test/components/CalendarMonth_spec.jsx
+++ b/test/components/CalendarMonth_spec.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { expect } from 'chai';
 import { shallow } from 'enzyme';
+import sinon from 'sinon-sandbox';
 import moment from 'moment';
 
 import CalendarMonth from '../../src/components/CalendarMonth';
@@ -26,5 +27,24 @@ describe('CalendarMonth', () => {
         expect(captionWrapper.text()).to.equal(MONTH.format('MMMM YYYY'));
       });
     });
+
+    it('renderMonthElement renders month element when month changes', () => {
+      const renderMonthElementStub = sinon.stub().returns(<div id="month-element" />);
+      const wrapper = shallow(<CalendarMonth renderMonthElement={renderMonthElementStub} />).dive();
+      wrapper.setProps({ month: moment().subtract(1, 'months') });
+
+      const [{
+        month,
+        onMonthSelect,
+        onYearSelect,
+        isVisible,
+      }] = renderMonthElementStub.getCall(0).args;
+
+      expect(moment.isMoment(month)).to.equal(true);
+      expect(typeof onMonthSelect).to.equal('function');
+      expect(typeof onYearSelect).to.equal('function');
+      expect(typeof isVisible).to.equal('boolean');
+      expect(wrapper.find('#month-element').exists()).to.equal(true);
+    });
   });
 });

From 5a184695cf14718a587e7d2d01cf5d8512f3251a Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Sat, 18 May 2019 09:02:30 -0700
Subject: [PATCH 432/618] [Dev Deps] update `@babel/cli`, `@babel/core`,
 `@babel/register`, `acorn`, `airbnb-js-shims`, `aphrodite`, `babel-loader`,
 `babel-plugin-inline-react-svg`, `babel-plugin-istanbul`,
 `babel-preset-airbnb`, `coveralls`, `enzyme`, `enzyme-adapter-react-helper`,
 `eslint`, `eslint-plugin-import`, `eslint-plugin-jsx-a11y`,
 `eslint-plugin-react`, `node-sass`, `rimraf`, `sinon`, `webpack`

---
 package.json | 42 +++++++++++++++++++++---------------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/package.json b/package.json
index 4c7a0cca1b..71df533dcc 100644
--- a/package.json
+++ b/package.json
@@ -51,34 +51,34 @@
   },
   "homepage": "https://github.com/airbnb/react-dates#readme",
   "devDependencies": {
-    "@babel/cli": "^7.1.2",
-    "@babel/core": "^7.1.2",
-    "@babel/register": "^7.0.0",
+    "@babel/cli": "^7.4.4",
+    "@babel/core": "^7.4.4",
+    "@babel/register": "^7.4.4",
     "@storybook/addon-actions": "^4.0.0",
     "@storybook/addon-info": "^4.0.0",
     "@storybook/addon-links": "^4.0.0",
     "@storybook/addon-options": "^4.0.0",
     "@storybook/react": "^4.0.0",
-    "acorn": "^6.0.2",
-    "airbnb-js-shims": "^2.1.1",
-    "aphrodite": "^2.2.3",
-    "babel-loader": "^8.0.4",
-    "babel-plugin-inline-react-svg": "^1.0.1",
+    "acorn": "^6.1.1",
+    "airbnb-js-shims": "^2.2.0",
+    "aphrodite": "^2.3.1",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-inline-react-svg": "^1.1.0",
     "babel-plugin-inline-svg": "^1.0.0",
-    "babel-plugin-istanbul": "^5.1.0",
+    "babel-plugin-istanbul": "^5.1.4",
     "babel-plugin-transform-replace-object-assign": "^2.0.0",
-    "babel-preset-airbnb": "^3.0.1",
+    "babel-preset-airbnb": "^3.2.1",
     "chai": "^4.2.0",
     "clean-css": "^4.2.1",
-    "coveralls": "^3.0.2",
+    "coveralls": "^3.0.3",
     "cross-env": "^5.2.0",
-    "enzyme": "^3.7.0",
-    "enzyme-adapter-react-helper": "^1.3.1",
-    "eslint": "^5.7.0",
+    "enzyme": "^3.9.0",
+    "enzyme-adapter-react-helper": "^1.3.4",
+    "eslint": "^5.16.0",
     "eslint-config-airbnb": "^17.1.0",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "^6.1.2",
-    "eslint-plugin-react": "^7.11.1",
+    "eslint-plugin-import": "^2.17.2",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "eslint-plugin-react": "^7.13.0",
     "eslint-plugin-react-with-styles": "^2.1.0",
     "git-directory-deploy": "^1.5.1",
     "imports-loader": "^0.8.0",
@@ -91,22 +91,22 @@
     "karma-webpack": "^4.0.0-rc.2",
     "mocha": "^3.5.3",
     "mocha-wrap": "^2.1.2",
-    "moment": "^2.22.2",
+    "moment": "^2.24.0",
     "moment-jalaali": "^0.7.4",
-    "node-sass": "^4.9.3",
+    "node-sass": "^4.12.0",
     "nyc": "^12.0.2",
     "raw-loader": "^0.5.1",
     "react": "^0.14 || ^15.5.4 || ^16.1.1",
     "react-dom": "^0.14 || ^15.5.4 || ^16.1.1",
     "react-with-styles-interface-aphrodite": "^5.0.1",
     "react-with-styles-interface-css-compiler": "^2.0.0",
-    "rimraf": "^2.6.2",
+    "rimraf": "^2.6.3",
     "safe-publish-latest": "^1.1.2",
     "sass-loader": "^7.1.0",
     "sinon": "^6.3.5",
     "sinon-sandbox": "^2.0.0",
     "style-loader": "^0.20.3",
-    "webpack": "^4.23.1",
+    "webpack": "^4.31.0",
     "why-did-you-update": "^1.0.6"
   },
   "dependencies": {

From 0d2a295a4f7ed40e92a7c3951d9e840a787935bc Mon Sep 17 00:00:00 2001
From: Jacob Parish <jparish@d3banking.com>
Date: Mon, 8 Apr 2019 07:55:21 -0500
Subject: [PATCH 433/618] [test] transform modules in karma so sinon can stub
 properly

 - require karma tests
 - temporarily turn off module transformation on airbnb-preset
---
 .travis.yml   | 3 ---
 karma.conf.js | 9 +++++++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index cd38096a9d..394623fcae 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -34,6 +34,3 @@ matrix:
       env: COVERAGE=true TEST=false
     - node_js: "lts/*"
       env: KARMA=true TEST=false
-  allow_failures:
-    - node_js: "9"
-    - env: KARMA=true TEST=false # temporary
diff --git a/karma.conf.js b/karma.conf.js
index 732ff364b5..6e34dceadf 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -33,8 +33,13 @@ module.exports = (config) => {
               path.join(__dirname, 'test'),
               require.resolve('airbnb-js-shims'),
             ],
-            query: {
-              presets: ['airbnb'],
+            options: {
+              presets: [
+                // setting modules to false so it does not transform twice
+                ['airbnb', { modules: false }],
+                // transform to cjs so sinon can stub properly
+                ['@babel/preset-env', { modules: 'cjs' }],
+              ],
             },
           },
 

From d847a91c718fd60aa54eef22e1867905748bae4f Mon Sep 17 00:00:00 2001
From: Kris Salvador <kriss@spotify.com>
Date: Sat, 13 Apr 2019 23:46:13 -0400
Subject: [PATCH 434/618] Fix broken test

---
 src/components/DayPickerRangeController.jsx   | 29 +++++++++----------
 .../DayPickerRangeController_spec.jsx         | 15 ++++++----
 2 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index c265c7e836..484dda50c3 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -113,21 +113,21 @@ const defaultProps = {
   endDate: undefined, // TODO: use null
   minDate: null,
   maxDate: null,
-  onDatesChange() { },
+  onDatesChange() {},
   startDateOffset: undefined,
   endDateOffset: undefined,
 
   focusedInput: null,
-  onFocusChange() { },
-  onClose() { },
+  onFocusChange() {},
+  onClose() {},
 
   keepOpenOnDateSelect: false,
   minimumNights: 1,
   disabled: false,
-  isOutsideRange() { },
-  isDayBlocked() { },
-  isDayHighlighted() { },
-  getMinNightsForHoverDate() { },
+  isOutsideRange() {},
+  isDayBlocked() {},
+  isDayHighlighted() {},
+  getMinNightsForHoverDate() {},
 
   // DayPicker props
   renderMonthText: null,
@@ -143,9 +143,9 @@ const defaultProps = {
   navNext: null,
   noNavButtons: false,
 
-  onPrevMonthClick() { },
-  onNextMonthClick() { },
-  onOutsideClick() { },
+  onPrevMonthClick() {},
+  onNextMonthClick() {},
+  onOutsideClick() {},
 
   renderCalendarDay: undefined,
   renderDayContents: null,
@@ -161,11 +161,11 @@ const defaultProps = {
   horizontalMonthPadding: 13,
 
   // accessibility
-  onBlur() { },
+  onBlur() {},
   isFocused: false,
   showKeyboardShortcuts: false,
-  onTab() { },
-  onShiftTab() { },
+  onTab() {},
+  onShiftTab() {},
 
   // i18n
   monthFormat: 'MMMM YYYY',
@@ -727,8 +727,7 @@ export default class DayPickerRangeController extends React.PureComponent {
 
         if (endDate) {
           const startSpan = endDate.clone().subtract(minimumNights, 'days');
-          const endSpan = endDate.clone();
-          modifiers = this.deleteModifierFromRange(modifiers, startSpan, endSpan, 'before-hovered-end');
+          modifiers = this.deleteModifierFromRange(modifiers, startSpan, endDate, 'before-hovered-end');
 
           if (isSameDay(day, endDate)) {
             const newStartSpan = endDate.clone().subtract(minimumNights, 'days');
diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index a62ef71fac..2c086ddaa3 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -40,8 +40,8 @@ describe('DayPickerRangeController', () => {
   describe('#componentDidMount', () => {
     const props = {
       ...DayPickerRangeController.defaultProps,
-      onDatesChange() {},
-      onFocusChange() {},
+      onDatesChange() { },
+      onFocusChange() { },
     };
 
     describe('phrases', () => {
@@ -98,8 +98,8 @@ describe('DayPickerRangeController', () => {
   describe('#componentWillReceiveProps', () => {
     const props = {
       ...DayPickerRangeController.defaultProps,
-      onDatesChange() {},
-      onFocusChange() {},
+      onDatesChange() { },
+      onFocusChange() { },
     };
 
     describe('rebuilding currentMonth/visibleDays', () => {
@@ -2306,10 +2306,13 @@ describe('DayPickerRangeController', () => {
             wrapper.setState({ hoverDate });
             deleteModifierFromRangeSpy.resetHistory();
             wrapper.instance().onDayMouseEnter(moment().add(10, 'days'));
-            expect(deleteModifierFromRangeSpy.callCount).to.equal(1);
+            expect(deleteModifierFromRangeSpy.callCount).to.equal(2);
             expect(deleteModifierFromRangeSpy.getCall(0).args[1]).to.equal(hoverDate);
             expect(deleteModifierFromRangeSpy.getCall(0).args[2]).to.equal(endDate);
             expect(deleteModifierFromRangeSpy.getCall(0).args[3]).to.equal('hovered-span');
+            expect(isSameDay(deleteModifierFromRangeSpy.getCall(1).args[1], endDate.subtract(DayPickerRangeController.defaultProps.minimumNights, 'days'))).to.equal(true);
+            expect(deleteModifierFromRangeSpy.getCall(1).args[2]).to.equal(endDate);
+            expect(deleteModifierFromRangeSpy.getCall(1).args[3]).to.equal('before-hovered-end');
           });
         });
 
@@ -4429,7 +4432,7 @@ describe('DayPickerRangeController', () => {
 
     describe('renderKeyboardShortcutsButton prop', () => {
       it('pass down custom button render function', () => {
-        const testRenderKeyboardShortcutsButton = () => {};
+        const testRenderKeyboardShortcutsButton = () => { };
         const wrapper = shallow(
           <DayPickerRangeController
             renderKeyboardShortcutsButton={testRenderKeyboardShortcutsButton}

From 953adfd136a3106b1ced2d366a04e7e0bb417d66 Mon Sep 17 00:00:00 2001
From: Kris Salvador <kriss@spotify.com>
Date: Sun, 14 Apr 2019 11:15:41 -0400
Subject: [PATCH 435/618] Eslint fixes

---
 src/components/CalendarDay.jsx              | 2 +-
 src/components/DayPickerRangeController.jsx | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/CalendarDay.jsx b/src/components/CalendarDay.jsx
index deb49d71db..1335e6b534 100644
--- a/src/components/CalendarDay.jsx
+++ b/src/components/CalendarDay.jsx
@@ -353,5 +353,5 @@ export default withStyles(({ reactDates: { color, font } }) => ({
   CalendarDay__selected_start_in_hovered_span: {},
   CalendarDay__selected_end_in_hovered_span: {},
   CalendarDay__selected_start_no_selected_end: {},
-  CalendarDay__selected_end_no_selected_start: {}
+  CalendarDay__selected_end_no_selected_start: {},
 }), { pureComponent: typeof React.PureComponent !== 'undefined' })(CalendarDay);
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 484dda50c3..a9b7fab251 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -213,10 +213,10 @@ export default class DayPickerRangeController extends React.PureComponent {
       'hovered-start-first-possible-end': (day, hoverDate) => this.isFirstPossibleEndDateForHoveredStartDate(day, hoverDate),
       'hovered-start-blocked-minimum-nights': (day, hoverDate) => this.doesNotMeetMinNightsForHoveredStartDate(day, hoverDate),
       'before-hovered-end': day => this.isDayBeforeHoveredEndDate(day),
-      'no-selected-start-before-selected-end': (day) => this.beforeSelectedEnd(day) && !props.startDate,
+      'no-selected-start-before-selected-end': day => this.beforeSelectedEnd(day) && !props.startDate,
       'selected-start-in-hovered-span': (day, hoverDate) => this.isStartDate(day) && isAfterDay(hoverDate, day),
-      'selected-start-no-selected-end': (day) => this.isStartDate(day) && !props.endDate,
-      'selected-end-no-selected-start': (day) => this.isEndDate(day) && !props.startDate
+      'selected-start-no-selected-end': day => this.isStartDate(day) && !props.endDate,
+      'selected-end-no-selected-start': day => this.isEndDate(day) && !props.startDate,
     };
 
     const { currentMonth, visibleDays } = this.getStateForNewMonth(props);
@@ -347,7 +347,7 @@ export default class DayPickerRangeController extends React.PureComponent {
               const momentObj = moment(day);
 
               if (isBeforeDay(momentObj, endDate)) {
-                modifiers = this.addModifier(modifiers, momentObj, 'no-selected-start-before-selected-end')
+                modifiers = this.addModifier(modifiers, momentObj, 'no-selected-start-before-selected-end');
               }
             });
           });

From 78c20b6ceb968d8b46729bb8d41c6d6903ea1ca8 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Mon, 13 May 2019 15:56:07 -0700
Subject: [PATCH 436/618] Version 20.2.0

---
 CHANGELOG.md | 6 +++---
 package.json | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cd629140eb..3c0f69ee4e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,9 +4,9 @@
 - []  ([#](https://github.com/airbnb/react-dates/pull/))
 -->
 
-## [Unreleased]
-- [fix] Fix date selection in the SDP ([#1530])
-
+## 20.2.0
+- [fix] Fix date selection in the SDP ([#1530](https://github.com/airbnb/react-dates/pull/1530))
+- [new] Add explicit aria label props ([#1594](https://github.com/airbnb/react-dates/pull/1594))
 
 ## 20.1.0
 - [new] Add `renderKeyboardShortcutsButton` prop ([#1576](https://github.com/airbnb/react-dates/pull/1576))
diff --git a/package.json b/package.json
index 170c56d98f..4c7a0cca1b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "20.1.0",
+  "version": "20.2.0",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From c20807f4e85e3739ab9804e3b4ff2571c59d8bbe Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Sun, 26 May 2019 13:23:22 -0700
Subject: [PATCH 437/618] [Tests] fix travis-ci for karma, per
 https://benlimmer.com/2019/01/14/travis-ci-xvfb/

---
 .travis.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index 394623fcae..cb0705112c 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -5,10 +5,10 @@ node_js:
   - "6"
 before_install:
   - 'nvm install-latest-npm'
+services:
+  - xvfb
 before_script:
   - 'if [ -n "${KARMA-}" ]; then export DISPLAY=:99.0; fi'
-  - 'if [ -n "${KARMA-}" ]; then sh -e /etc/init.d/xvfb start; fi'
-  - 'if [ -n "${KARMA-}" ]; then sleep 3; fi'
 script:
   - 'if [ -n "${LINT-}" ]; then npm run lint ; fi'
   - 'if [ -n "${BUILD-}" ]; then npm run build ; fi'

From 888f650565b4256dde39210fdba7faadba969516 Mon Sep 17 00:00:00 2001
From: alok <alok.takshak@gmail.com>
Date: Sun, 26 May 2019 11:33:55 +0530
Subject: [PATCH 438/618] [Docs] added initialVisibleMonth to
 DayPickerRangeController in ReadMe

Fixes #1619.
---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 862afeb695..c79b204f1e 100644
--- a/README.md
+++ b/README.md
@@ -296,6 +296,7 @@ Here is the minimum *REQUIRED* setup you need to get the `DayPickerRangeControll
   onDatesChange={({ startDate, endDate }) => this.setState({ startDate, endDate })} // PropTypes.func.isRequired,
   focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null,
   onFocusChange={focusedInput => this.setState({ focusedInput })} // PropTypes.func.isRequired,
+  initialVisibleMonth={() => moment().add(2, "M")} // PropTypes.func or null,
 />
 ```
 

From 4073d24c9b76966156866cf4972faa444bbd9cfc Mon Sep 17 00:00:00 2001
From: Joe Lencioni <joe.lencioni@airbnb.com>
Date: Thu, 30 May 2019 08:41:33 -0700
Subject: [PATCH 439/618] Compile classes in loose mode

This is low-risk and will give us a little better bundle size and
runtime performance. More information:

https://babeljs.io/docs/en/babel-plugin-transform-classes#loose
---
 .babelrc | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/.babelrc b/.babelrc
index 1b0f8475f1..4e91c4584c 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,7 +1,7 @@
 {
   "env": {
     "test": {
-      "presets": ["airbnb"],
+      "presets": [["airbnb", { looseClasses: true }]],
       "plugins": [
         ["inline-react-svg", {
           "svgo": false
@@ -13,7 +13,7 @@
     },
 
     "development": {
-      "presets": ["airbnb"],
+      "presets": [["airbnb", { looseClasses: true }]],
       "plugins": [
         ["inline-react-svg", {
           "svgo": false
@@ -24,7 +24,7 @@
     },
 
     "production": {
-      "presets": [["airbnb", { removePropTypes: true }]],
+      "presets": [["airbnb", { looseClasses: true, removePropTypes: true }]],
       "plugins": [
         ["inline-react-svg", {
           "svgo": false
@@ -35,7 +35,7 @@
     },
 
     "cjs": {
-      "presets": [["airbnb", { removePropTypes: true }]],
+      "presets": [["airbnb", { looseClasses: true, removePropTypes: true }]],
       "plugins": [
         ["inline-react-svg", {
           "svgo": false
@@ -46,7 +46,7 @@
     },
 
     "esm": {
-      "presets": [["airbnb", { modules: false, removePropTypes: true }]],
+      "presets": [["airbnb", { looseClasses: true, modules: false, removePropTypes: true }]],
       "plugins": [
         ["inline-react-svg", {
           "svgo": false

From 9f541162d275da3458de36a68a9256e0383afb2c Mon Sep 17 00:00:00 2001
From: Joe Lencioni <joe.lencioni@airbnb.com>
Date: Thu, 30 May 2019 09:09:29 -0700
Subject: [PATCH 440/618] Optimize toISODateString and toISOMonthString

These functions get called repeatedly when computing modifiers, which
happens any time components like DayPickerRangeController receives
props.

By manually building this string instead of relying on moment's format
function, we can get better performance. In my profiling, this cuts the
time spent in DayPickerRangeController#componentWillReceiveProps from
~50ms to ~40ms.
---
 src/constants.js                   | 2 +-
 src/utils/toISODateString.js       | 8 +++++---
 src/utils/toISOMonthString.js      | 8 +++++---
 test/utils/toISODateString_spec.js | 6 ++++++
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/constants.js b/src/constants.js
index de308b98e5..31eec9a200 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -1,6 +1,6 @@
 export const DISPLAY_FORMAT = 'L';
 export const ISO_FORMAT = 'YYYY-MM-DD';
-export const ISO_MONTH_FORMAT = 'YYYY-MM';
+export const ISO_MONTH_FORMAT = 'YYYY-MM'; // TODO delete this line of dead code on next breaking change
 
 export const START_DATE = 'startDate';
 export const END_DATE = 'endDate';
diff --git a/src/utils/toISODateString.js b/src/utils/toISODateString.js
index de3cd5ac6b..eb28a1a5f4 100644
--- a/src/utils/toISODateString.js
+++ b/src/utils/toISODateString.js
@@ -2,11 +2,13 @@ import moment from 'moment';
 
 import toMomentObject from './toMomentObject';
 
-import { ISO_FORMAT } from '../constants';
-
 export default function toISODateString(date, currentFormat) {
   const dateObj = moment.isMoment(date) ? date : toMomentObject(date, currentFormat);
   if (!dateObj) return null;
 
-  return dateObj.format(ISO_FORMAT);
+  // Template strings compiled in strict mode uses concat, which is slow. Since
+  // this code is in a hot path and we want it to be as fast as possible, we
+  // want to use old-fashioned +.
+  // eslint-disable-next-line prefer-template
+  return dateObj.year() + '-' + String(dateObj.month() + 1).padStart(2, '0') + '-' + String(dateObj.date()).padStart(2, '0');
 }
diff --git a/src/utils/toISOMonthString.js b/src/utils/toISOMonthString.js
index d024d51c5b..f480e5cc6f 100644
--- a/src/utils/toISOMonthString.js
+++ b/src/utils/toISOMonthString.js
@@ -2,11 +2,13 @@ import moment from 'moment';
 
 import toMomentObject from './toMomentObject';
 
-import { ISO_MONTH_FORMAT } from '../constants';
-
 export default function toISOMonthString(date, currentFormat) {
   const dateObj = moment.isMoment(date) ? date : toMomentObject(date, currentFormat);
   if (!dateObj) return null;
 
-  return dateObj.format(ISO_MONTH_FORMAT);
+  // Template strings compiled in strict mode uses concat, which is slow. Since
+  // this code is in a hot path and we want it to be as fast as possible, we
+  // want to use old-fashioned +.
+  // eslint-disable-next-line prefer-template
+  return dateObj.year() + '-' + String(dateObj.month() + 1).padStart(2, '0');
 }
diff --git a/test/utils/toISODateString_spec.js b/test/utils/toISODateString_spec.js
index d089c8c0e1..7af4cff558 100644
--- a/test/utils/toISODateString_spec.js
+++ b/test/utils/toISODateString_spec.js
@@ -15,6 +15,12 @@ describe('toISODateString', () => {
     expect(dateString).to.equal('1991-07-13');
   });
 
+  it('matches moment format behavior', () => {
+    const testDate = moment('1991-07-13');
+    const dateString = toISODateString(testDate);
+    expect(dateString).to.equal(testDate.format(ISO_FORMAT));
+  });
+
   it('converts iso date string to ISO date string', () => {
     const testDate = moment('1991-07-13');
     const dateString = toISODateString(testDate.format(ISO_FORMAT));

From 5e0c8c140e68528f84e1313d7293cca90dab44b8 Mon Sep 17 00:00:00 2001
From: Joe Lencioni <joe.lencioni@airbnb.com>
Date: Thu, 30 May 2019 09:26:09 -0700
Subject: [PATCH 441/618] Optimize isDayVisible

Cloning is a little expensive, so we want to do it as little as possible.
Here we clone the month once and keep mutating that moment object.

In my profiling this change by itself appears to reduce the amount of
time spent in this function when updating DayPickeRangeController from
~16ms to ~11ms, with almost all of the time being spent in Moment clone.
---
 src/utils/isDayVisible.js       | 20 ++++++++++++++++----
 test/utils/isDayVisible_spec.js | 28 ++++++++++++++++++++++++++++
 2 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/src/utils/isDayVisible.js b/src/utils/isDayVisible.js
index b04f2f6355..1bd4b22e71 100644
--- a/src/utils/isDayVisible.js
+++ b/src/utils/isDayVisible.js
@@ -5,11 +5,23 @@ import isAfterDay from './isAfterDay';
 
 export default function isDayVisible(day, month, numberOfMonths, enableOutsideDays) {
   if (!moment.isMoment(day)) return false;
-  let firstDayOfFirstMonth = month.clone().startOf('month');
-  if (enableOutsideDays) firstDayOfFirstMonth = firstDayOfFirstMonth.startOf('week');
+
+  // Cloning is a little expensive, so we want to do it as little as possible.
+  // Here we clone the month once and keep mutating that moment object.
+  const mutableMonth = month.clone();
+
+  const firstDayOfFirstMonth = enableOutsideDays
+    ? mutableMonth.startOf('month').startOf('week')
+    : mutableMonth.startOf('month');
+
   if (isBeforeDay(day, firstDayOfFirstMonth)) return false;
 
-  let lastDayOfLastMonth = month.clone().add(numberOfMonths - 1, 'months').endOf('month');
-  if (enableOutsideDays) lastDayOfLastMonth = lastDayOfLastMonth.endOf('week');
+  const lastDayOfLastMonth = enableOutsideDays
+    // We need to call endOf('week') when enableOutsideDays is true, because we
+    // are reusing the moment object, and our earlier mutation may have moved it
+    // to a previous month. This should snap us back to a good starting place.
+    ? mutableMonth.endOf('week').add(numberOfMonths - 1, 'months').endOf('month').endOf('week')
+    : mutableMonth.add(numberOfMonths - 1, 'months').endOf('month');
+
   return !isAfterDay(day, lastDayOfLastMonth);
 }
diff --git a/test/utils/isDayVisible_spec.js b/test/utils/isDayVisible_spec.js
index 7af0f334be..f42455b549 100644
--- a/test/utils/isDayVisible_spec.js
+++ b/test/utils/isDayVisible_spec.js
@@ -21,4 +21,32 @@ describe('#isDayVisible', () => {
     const currentMonth = moment().add(2, 'months');
     expect(isDayVisible(test, currentMonth, 2)).to.equal(false);
   });
+
+  describe('enableOutsideDays', () => {
+    it('returns true if arg is in partial week before visible months', () => {
+      const test = moment('2019-04-30');
+      const currentMonth = moment('2019-05-01');
+      expect(isDayVisible(test, currentMonth, 1, false)).to.equal(false);
+      expect(isDayVisible(test, currentMonth, 1, true)).to.equal(true);
+    });
+
+    it('returns true if arg is in partial week after visible months', () => {
+      const test = moment('2019-06-01');
+      const currentMonth = moment('2019-05-01');
+      expect(isDayVisible(test, currentMonth, 1, false)).to.equal(false);
+      expect(isDayVisible(test, currentMonth, 1, true)).to.equal(true);
+    });
+
+    it('returns false if arg is before partial week before visible months', () => {
+      const test = moment('2019-04-27');
+      const currentMonth = moment('2019-05-01');
+      expect(isDayVisible(test, currentMonth, 1, true)).to.equal(false);
+    });
+
+    it('returns false if arg is after partial week after visible months', () => {
+      const test = moment('2019-06-03');
+      const currentMonth = moment('2019-05-01');
+      expect(isDayVisible(test, currentMonth, 1, true)).to.equal(false);
+    });
+  });
 });

From e3b9c8d36564f66b5d13d0f3ee4bbaf4fbc1df79 Mon Sep 17 00:00:00 2001
From: Joe Lencioni <joe.lencioni@airbnb.com>
Date: Thu, 30 May 2019 15:46:04 -0700
Subject: [PATCH 442/618] Add caching to isDayVisible

After the optimizations I applied to generating modifiers in
https://github.com/airbnb/react-dates/pull/1659, I noticed that
about 50% of the time in componentWillReceiveProps is spent in
isDayVisible() doing moment operations to generate the boundaries for
the check. Since these boundaries remain very stable across each call,
we can reduce most of the work done here to very little by adding some
caching of these values.

On top of my reduce optimizations, this brings down the time spent in
componentWillReceiveProps to ~15ms.

I'm not doing anything to limit the size of these Maps, so this will
leak some memory, but I think the size of the cache will be really small
in most cases, so I'm not sure it matters.
---
 src/utils/isDayVisible.js | 55 ++++++++++++++++++++++++++++++---------
 1 file changed, 42 insertions(+), 13 deletions(-)

diff --git a/src/utils/isDayVisible.js b/src/utils/isDayVisible.js
index 1bd4b22e71..34b9420339 100644
--- a/src/utils/isDayVisible.js
+++ b/src/utils/isDayVisible.js
@@ -2,26 +2,55 @@ import moment from 'moment';
 
 import isBeforeDay from './isBeforeDay';
 import isAfterDay from './isAfterDay';
+import toISOMonthString from './toISOMonthString';
+
+const startCacheOutsideDays = new Map();
+const endCacheOutsideDays = new Map();
+
+const startCacheInsideDays = new Map();
+const endCacheInsideDays = new Map();
 
 export default function isDayVisible(day, month, numberOfMonths, enableOutsideDays) {
   if (!moment.isMoment(day)) return false;
 
   // Cloning is a little expensive, so we want to do it as little as possible.
-  // Here we clone the month once and keep mutating that moment object.
-  const mutableMonth = month.clone();
 
-  const firstDayOfFirstMonth = enableOutsideDays
-    ? mutableMonth.startOf('month').startOf('week')
-    : mutableMonth.startOf('month');
+  const startKey = toISOMonthString(month);
+  // eslint-disable-next-line prefer-template
+  const endKey = startKey + '+' + numberOfMonths;
+
+  if (enableOutsideDays) {
+    if (!startCacheOutsideDays.has(startKey)) {
+      startCacheOutsideDays.set(startKey, month.clone().startOf('month').startOf('week'));
+    }
+
+    if (isBeforeDay(day, startCacheOutsideDays.get(startKey))) return false;
+
+    if (!endCacheOutsideDays.has(endKey)) {
+      endCacheOutsideDays.set(
+        endKey,
+        month.clone().endOf('week').add(numberOfMonths - 1, 'months').endOf('month')
+          .endOf('week'),
+      );
+    }
+
+    return !isAfterDay(day, endCacheOutsideDays.get(endKey));
+  }
+
+  // !enableOutsideDays
+
+  if (!startCacheInsideDays.has(startKey)) {
+    startCacheInsideDays.set(startKey, month.clone().startOf('month'));
+  }
 
-  if (isBeforeDay(day, firstDayOfFirstMonth)) return false;
+  if (isBeforeDay(day, startCacheInsideDays.get(startKey))) return false;
 
-  const lastDayOfLastMonth = enableOutsideDays
-    // We need to call endOf('week') when enableOutsideDays is true, because we
-    // are reusing the moment object, and our earlier mutation may have moved it
-    // to a previous month. This should snap us back to a good starting place.
-    ? mutableMonth.endOf('week').add(numberOfMonths - 1, 'months').endOf('month').endOf('week')
-    : mutableMonth.add(numberOfMonths - 1, 'months').endOf('month');
+  if (!endCacheInsideDays.has(endKey)) {
+    endCacheInsideDays.set(
+      endKey,
+      month.clone().add(numberOfMonths - 1, 'months').endOf('month'),
+    );
+  }
 
-  return !isAfterDay(day, lastDayOfLastMonth);
+  return !isAfterDay(day, endCacheInsideDays.get(endKey));
 }

From 0e2ed9a322dd0d8f9782614b40a362413406a76b Mon Sep 17 00:00:00 2001
From: Joe Lencioni <joe.lencioni@airbnb.com>
Date: Thu, 30 May 2019 16:02:40 -0700
Subject: [PATCH 443/618] Avoid some moment object creation in modifier
 generation

Creating these moment objects is expensive, and we do it a lot in
addModifier/deleteModifier, which get called a lot whenever these day
pickers update. For this particular one, we almost always want the same
value every time it is called, so we can memoize the previous value, a
la reselect.

This reduces the amount of time spent generating modifiers from ~46ms to
~32ms.
---
 src/components/DayPickerRangeController.jsx      |  5 +++--
 src/components/DayPickerSingleDateController.jsx |  5 +++--
 src/utils/getPreviousMonthMemoLast.js            | 11 +++++++++++
 3 files changed, 17 insertions(+), 4 deletions(-)
 create mode 100644 src/utils/getPreviousMonthMemoLast.js

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 2bc4b65075..15cbeb8ce7 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -39,6 +39,7 @@ import {
 } from '../constants';
 
 import DayPicker from './DayPicker';
+import getPreviousMonthMemoLast from '../utils/getPreviousMonthMemoLast';
 
 const propTypes = forbidExtraProps({
   startDate: momentPropTypes.momentObj,
@@ -990,7 +991,7 @@ export default class DayPickerRangeController extends React.PureComponent {
     if (orientation === VERTICAL_SCROLLABLE) {
       numberOfMonths = Object.keys(visibleDays).length;
     } else {
-      currentMonth = currentMonth.clone().subtract(1, 'month');
+      currentMonth = getPreviousMonthMemoLast(currentMonth);
       numberOfMonths += 2;
     }
     if (!day || !isDayVisible(day, currentMonth, numberOfMonths, enableOutsideDays)) {
@@ -1055,7 +1056,7 @@ export default class DayPickerRangeController extends React.PureComponent {
     if (orientation === VERTICAL_SCROLLABLE) {
       numberOfMonths = Object.keys(visibleDays).length;
     } else {
-      currentMonth = currentMonth.clone().subtract(1, 'month');
+      currentMonth = getPreviousMonthMemoLast(currentMonth);
       numberOfMonths += 2;
     }
     if (!day || !isDayVisible(day, currentMonth, numberOfMonths, enableOutsideDays)) {
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 2650a47842..66a018b1c3 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -30,6 +30,7 @@ import {
 } from '../constants';
 
 import DayPicker from './DayPicker';
+import getPreviousMonthMemoLast from '../utils/getPreviousMonthMemoLast';
 
 const propTypes = forbidExtraProps({
   date: momentPropTypes.momentObj,
@@ -517,7 +518,7 @@ export default class DayPickerSingleDateController extends React.PureComponent {
     if (orientation === VERTICAL_SCROLLABLE) {
       numberOfMonths = Object.keys(visibleDays).length;
     } else {
-      currentMonth = currentMonth.clone().subtract(1, 'month');
+      currentMonth = getPreviousMonthMemoLast(currentMonth);
       numberOfMonths += 2;
     }
     if (!day || !isDayVisible(day, currentMonth, numberOfMonths, enableOutsideDays)) {
@@ -571,7 +572,7 @@ export default class DayPickerSingleDateController extends React.PureComponent {
     if (orientation === VERTICAL_SCROLLABLE) {
       numberOfMonths = Object.keys(visibleDays).length;
     } else {
-      currentMonth = currentMonth.clone().subtract(1, 'month');
+      currentMonth = getPreviousMonthMemoLast(currentMonth);
       numberOfMonths += 2;
     }
     if (!day || !isDayVisible(day, currentMonth, numberOfMonths, enableOutsideDays)) {
diff --git a/src/utils/getPreviousMonthMemoLast.js b/src/utils/getPreviousMonthMemoLast.js
new file mode 100644
index 0000000000..79b552af16
--- /dev/null
+++ b/src/utils/getPreviousMonthMemoLast.js
@@ -0,0 +1,11 @@
+let getPreviousMonthMemoKey;
+let getPreviousMonthMemoValue;
+
+export default function getPreviousMonthMemoLast(month) {
+  if (month !== getPreviousMonthMemoKey) {
+    getPreviousMonthMemoKey = month;
+    getPreviousMonthMemoValue = month.clone().subtract(1, 'month');
+  }
+
+  return getPreviousMonthMemoValue;
+}

From ea51d5af1f247baad95a6bf9abbb827b6caad40d Mon Sep 17 00:00:00 2001
From: Joe Lencioni <joe.lencioni@airbnb.com>
Date: Thu, 30 May 2019 09:40:22 -0700
Subject: [PATCH 444/618] Use accumulator-mutating reducers

While profiling DayRangePickerController, I noticed that we spend a
significant amount of time generating modifiers whenever anything is
changed. A good amount of this cost comes from these reducers that
unnecessarily create new objects and spread into them on every
iteration. We can make this faster by mutating the accumulator while
inside the reducer.

In my profiling, this reduces the speed of deleteModifier from ~28ms to
~20ms, and I think it will reduce the memory usage, which should further
help reduce garbage collection times.
---
 src/components/DayPickerRangeController.jsx      | 14 ++++++--------
 src/components/DayPickerSingleDateController.jsx | 14 ++++++--------
 2 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 15cbeb8ce7..ae87067a2b 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -1006,17 +1006,16 @@ export default class DayPickerRangeController extends React.PureComponent {
         Object.keys(visibleDays[monthKey]).indexOf(iso) > -1
       ));
 
-      updatedDaysAfterAddition = monthsToUpdate.reduce((days, monthIso) => {
+      updatedDaysAfterAddition = monthsToUpdate.reduce((acc, monthIso) => {
         const month = updatedDays[monthIso] || visibleDays[monthIso];
         const modifiers = new Set(month[iso]);
         modifiers.add(modifier);
-        return {
-          ...days,
+        return Object.assign(acc, {
           [monthIso]: {
             ...month,
             [iso]: modifiers,
           },
-        };
+        });
       }, updatedDaysAfterAddition);
     } else {
       const monthIso = toISOMonthString(day);
@@ -1071,17 +1070,16 @@ export default class DayPickerRangeController extends React.PureComponent {
         Object.keys(visibleDays[monthKey]).indexOf(iso) > -1
       ));
 
-      updatedDaysAfterDeletion = monthsToUpdate.reduce((days, monthIso) => {
+      updatedDaysAfterDeletion = monthsToUpdate.reduce((acc, monthIso) => {
         const month = updatedDays[monthIso] || visibleDays[monthIso];
         const modifiers = new Set(month[iso]);
         modifiers.delete(modifier);
-        return {
-          ...days,
+        return Object.assign(acc, {
           [monthIso]: {
             ...month,
             [iso]: modifiers,
           },
-        };
+        });
       }, updatedDaysAfterDeletion);
     } else {
       const monthIso = toISOMonthString(day);
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 66a018b1c3..5ba65c493b 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -533,17 +533,16 @@ export default class DayPickerSingleDateController extends React.PureComponent {
         Object.keys(visibleDays[monthKey]).indexOf(iso) > -1
       ));
 
-      updatedDaysAfterAddition = monthsToUpdate.reduce((days, monthIso) => {
+      updatedDaysAfterAddition = monthsToUpdate.reduce((acc, monthIso) => {
         const month = updatedDays[monthIso] || visibleDays[monthIso];
         const modifiers = new Set(month[iso]);
         modifiers.add(modifier);
-        return {
-          ...days,
+        return Object.assign(acc, {
           [monthIso]: {
             ...month,
             [iso]: modifiers,
           },
-        };
+        });
       }, updatedDaysAfterAddition);
     } else {
       const monthIso = toISOMonthString(day);
@@ -587,17 +586,16 @@ export default class DayPickerSingleDateController extends React.PureComponent {
         Object.keys(visibleDays[monthKey]).indexOf(iso) > -1
       ));
 
-      updatedDaysAfterDeletion = monthsToUpdate.reduce((days, monthIso) => {
+      updatedDaysAfterDeletion = monthsToUpdate.reduce((acc, monthIso) => {
         const month = updatedDays[monthIso] || visibleDays[monthIso];
         const modifiers = new Set(month[iso]);
         modifiers.delete(modifier);
-        return {
-          ...days,
+        return Object.assign(acc, {
           [monthIso]: {
             ...month,
             [iso]: modifiers,
           },
-        };
+        });
       }, updatedDaysAfterDeletion);
     } else {
       const monthIso = toISOMonthString(day);

From ac0f70ce7f4148ca90c2f7c93ceb77ab807fa9e1 Mon Sep 17 00:00:00 2001
From: Joe Lencioni <joe.lencioni@airbnb.com>
Date: Thu, 30 May 2019 11:24:21 -0700
Subject: [PATCH 445/618] Mutate updatedDaysAfterDeletion in
 deleteModifier/addModifier

We create this object in this function and then return it at the end, so
it should be safe to just mutate it while we are in this function
instead of rebuilding it immediately again.

This reduces the amount of time spent in deleteModifier from ~20ms to
~16ms.
---
 src/components/DayPickerRangeController.jsx   | 42 ++++++++-----------
 .../DayPickerSingleDateController.jsx         | 42 ++++++++-----------
 2 files changed, 36 insertions(+), 48 deletions(-)

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index ae87067a2b..60b0263c06 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -1008,14 +1008,15 @@ export default class DayPickerRangeController extends React.PureComponent {
 
       updatedDaysAfterAddition = monthsToUpdate.reduce((acc, monthIso) => {
         const month = updatedDays[monthIso] || visibleDays[monthIso];
+
         const modifiers = new Set(month[iso]);
         modifiers.add(modifier);
-        return Object.assign(acc, {
-          [monthIso]: {
-            ...month,
-            [iso]: modifiers,
-          },
-        });
+        acc[monthIso] = {
+          ...month,
+          [iso]: modifiers,
+        };
+
+        return acc;
       }, updatedDaysAfterAddition);
     } else {
       const monthIso = toISOMonthString(day);
@@ -1023,12 +1024,9 @@ export default class DayPickerRangeController extends React.PureComponent {
 
       const modifiers = new Set(month[iso]);
       modifiers.add(modifier);
-      updatedDaysAfterAddition = {
-        ...updatedDaysAfterAddition,
-        [monthIso]: {
-          ...month,
-          [iso]: modifiers,
-        },
+      updatedDaysAfterAddition[monthIso] = {
+        ...month,
+        [iso]: modifiers,
       };
     }
 
@@ -1074,12 +1072,11 @@ export default class DayPickerRangeController extends React.PureComponent {
         const month = updatedDays[monthIso] || visibleDays[monthIso];
         const modifiers = new Set(month[iso]);
         modifiers.delete(modifier);
-        return Object.assign(acc, {
-          [monthIso]: {
-            ...month,
-            [iso]: modifiers,
-          },
-        });
+        acc[monthIso] = {
+          ...month,
+          [iso]: modifiers,
+        };
+        return acc;
       }, updatedDaysAfterDeletion);
     } else {
       const monthIso = toISOMonthString(day);
@@ -1087,12 +1084,9 @@ export default class DayPickerRangeController extends React.PureComponent {
 
       const modifiers = new Set(month[iso]);
       modifiers.delete(modifier);
-      updatedDaysAfterDeletion = {
-        ...updatedDaysAfterDeletion,
-        [monthIso]: {
-          ...month,
-          [iso]: modifiers,
-        },
+      updatedDaysAfterDeletion[monthIso] = {
+        ...month,
+        [iso]: modifiers,
       };
     }
 
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 5ba65c493b..c4b1cd6dc9 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -535,14 +535,15 @@ export default class DayPickerSingleDateController extends React.PureComponent {
 
       updatedDaysAfterAddition = monthsToUpdate.reduce((acc, monthIso) => {
         const month = updatedDays[monthIso] || visibleDays[monthIso];
+
         const modifiers = new Set(month[iso]);
         modifiers.add(modifier);
-        return Object.assign(acc, {
-          [monthIso]: {
-            ...month,
-            [iso]: modifiers,
-          },
-        });
+        acc[monthIso] = {
+          ...month,
+          [iso]: modifiers,
+        };
+
+        return acc;
       }, updatedDaysAfterAddition);
     } else {
       const monthIso = toISOMonthString(day);
@@ -550,12 +551,9 @@ export default class DayPickerSingleDateController extends React.PureComponent {
 
       const modifiers = new Set(month[iso]);
       modifiers.add(modifier);
-      updatedDaysAfterAddition = {
-        ...updatedDaysAfterAddition,
-        [monthIso]: {
-          ...month,
-          [iso]: modifiers,
-        },
+      updatedDaysAfterAddition[monthIso] = {
+        ...month,
+        [iso]: modifiers,
       };
     }
 
@@ -590,12 +588,11 @@ export default class DayPickerSingleDateController extends React.PureComponent {
         const month = updatedDays[monthIso] || visibleDays[monthIso];
         const modifiers = new Set(month[iso]);
         modifiers.delete(modifier);
-        return Object.assign(acc, {
-          [monthIso]: {
-            ...month,
-            [iso]: modifiers,
-          },
-        });
+        acc[monthIso] = {
+          ...month,
+          [iso]: modifiers,
+        };
+        return acc;
       }, updatedDaysAfterDeletion);
     } else {
       const monthIso = toISOMonthString(day);
@@ -603,12 +600,9 @@ export default class DayPickerSingleDateController extends React.PureComponent {
 
       const modifiers = new Set(month[iso]);
       modifiers.delete(modifier);
-      updatedDaysAfterDeletion = {
-        ...updatedDaysAfterDeletion,
-        [monthIso]: {
-          ...month,
-          [iso]: modifiers,
-        },
+      updatedDaysAfterDeletion[monthIso] = {
+        ...month,
+        [iso]: modifiers,
       };
     }
 

From 2e1dd23457dd26830439a50f1079b40c51d83d60 Mon Sep 17 00:00:00 2001
From: Joe Lencioni <joe.lencioni@airbnb.com>
Date: Thu, 30 May 2019 11:32:02 -0700
Subject: [PATCH 446/618] Avoid creating new Sets when deleting/adding
 modifiers

I noticed that we always create a new set and then delete from it even
if the modifier is not in the set, or create a new set and then add it
even it the modifier is already in the set. This optimization reduces
the cost of DayPickerRangeController#componentWillReceiveProps from
~16ms to ~12ms.
---
 src/components/DayPickerRangeController.jsx   | 58 +++++++++++--------
 .../DayPickerSingleDateController.jsx         | 58 +++++++++++--------
 .../DayPickerRangeController_spec.jsx         | 28 +++++----
 .../DayPickerSingleDateController_spec.jsx    | 36 +++++++-----
 4 files changed, 106 insertions(+), 74 deletions(-)

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 60b0263c06..2383ab0277 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -1009,12 +1009,14 @@ export default class DayPickerRangeController extends React.PureComponent {
       updatedDaysAfterAddition = monthsToUpdate.reduce((acc, monthIso) => {
         const month = updatedDays[monthIso] || visibleDays[monthIso];
 
-        const modifiers = new Set(month[iso]);
-        modifiers.add(modifier);
-        acc[monthIso] = {
-          ...month,
-          [iso]: modifiers,
-        };
+        if (!month[iso] || !month[iso].has(modifier)) {
+          const modifiers = new Set(month[iso]);
+          modifiers.add(modifier);
+          acc[monthIso] = {
+            ...month,
+            [iso]: modifiers,
+          };
+        }
 
         return acc;
       }, updatedDaysAfterAddition);
@@ -1022,12 +1024,14 @@ export default class DayPickerRangeController extends React.PureComponent {
       const monthIso = toISOMonthString(day);
       const month = updatedDays[monthIso] || visibleDays[monthIso];
 
-      const modifiers = new Set(month[iso]);
-      modifiers.add(modifier);
-      updatedDaysAfterAddition[monthIso] = {
-        ...month,
-        [iso]: modifiers,
-      };
+      if (!month[iso] || !month[iso].has(modifier)) {
+        const modifiers = new Set(month[iso]);
+        modifiers.add(modifier);
+        updatedDaysAfterAddition[monthIso] = {
+          ...month,
+          [iso]: modifiers,
+        };
+      }
     }
 
     return updatedDaysAfterAddition;
@@ -1070,24 +1074,30 @@ export default class DayPickerRangeController extends React.PureComponent {
 
       updatedDaysAfterDeletion = monthsToUpdate.reduce((acc, monthIso) => {
         const month = updatedDays[monthIso] || visibleDays[monthIso];
-        const modifiers = new Set(month[iso]);
-        modifiers.delete(modifier);
-        acc[monthIso] = {
-          ...month,
-          [iso]: modifiers,
-        };
+
+        if (month[iso] && month[iso].has(modifier)) {
+          const modifiers = new Set(month[iso]);
+          modifiers.delete(modifier);
+          acc[monthIso] = {
+            ...month,
+            [iso]: modifiers,
+          };
+        }
+
         return acc;
       }, updatedDaysAfterDeletion);
     } else {
       const monthIso = toISOMonthString(day);
       const month = updatedDays[monthIso] || visibleDays[monthIso];
 
-      const modifiers = new Set(month[iso]);
-      modifiers.delete(modifier);
-      updatedDaysAfterDeletion[monthIso] = {
-        ...month,
-        [iso]: modifiers,
-      };
+      if (month[iso] && month[iso].has(modifier)) {
+        const modifiers = new Set(month[iso]);
+        modifiers.delete(modifier);
+        updatedDaysAfterDeletion[monthIso] = {
+          ...month,
+          [iso]: modifiers,
+        };
+      }
     }
 
     return updatedDaysAfterDeletion;
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index c4b1cd6dc9..c6b9642706 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -536,12 +536,14 @@ export default class DayPickerSingleDateController extends React.PureComponent {
       updatedDaysAfterAddition = monthsToUpdate.reduce((acc, monthIso) => {
         const month = updatedDays[monthIso] || visibleDays[monthIso];
 
-        const modifiers = new Set(month[iso]);
-        modifiers.add(modifier);
-        acc[monthIso] = {
-          ...month,
-          [iso]: modifiers,
-        };
+        if (!month[iso] || !month[iso].has(modifier)) {
+          const modifiers = new Set(month[iso]);
+          modifiers.add(modifier);
+          acc[monthIso] = {
+            ...month,
+            [iso]: modifiers,
+          };
+        }
 
         return acc;
       }, updatedDaysAfterAddition);
@@ -549,12 +551,14 @@ export default class DayPickerSingleDateController extends React.PureComponent {
       const monthIso = toISOMonthString(day);
       const month = updatedDays[monthIso] || visibleDays[monthIso];
 
-      const modifiers = new Set(month[iso]);
-      modifiers.add(modifier);
-      updatedDaysAfterAddition[monthIso] = {
-        ...month,
-        [iso]: modifiers,
-      };
+      if (!month[iso] || !month[iso].has(modifier)) {
+        const modifiers = new Set(month[iso]);
+        modifiers.add(modifier);
+        updatedDaysAfterAddition[monthIso] = {
+          ...month,
+          [iso]: modifiers,
+        };
+      }
     }
 
     return updatedDaysAfterAddition;
@@ -586,24 +590,30 @@ export default class DayPickerSingleDateController extends React.PureComponent {
 
       updatedDaysAfterDeletion = monthsToUpdate.reduce((acc, monthIso) => {
         const month = updatedDays[monthIso] || visibleDays[monthIso];
-        const modifiers = new Set(month[iso]);
-        modifiers.delete(modifier);
-        acc[monthIso] = {
-          ...month,
-          [iso]: modifiers,
-        };
+
+        if (month[iso] && month[iso].has(modifier)) {
+          const modifiers = new Set(month[iso]);
+          modifiers.delete(modifier);
+          acc[monthIso] = {
+            ...month,
+            [iso]: modifiers,
+          };
+        }
+
         return acc;
       }, updatedDaysAfterDeletion);
     } else {
       const monthIso = toISOMonthString(day);
       const month = updatedDays[monthIso] || visibleDays[monthIso];
 
-      const modifiers = new Set(month[iso]);
-      modifiers.delete(modifier);
-      updatedDaysAfterDeletion[monthIso] = {
-        ...month,
-        [iso]: modifiers,
-      };
+      if (month[iso] && month[iso].has(modifier)) {
+        const modifiers = new Set(month[iso]);
+        modifiers.delete(modifier);
+        updatedDaysAfterDeletion[monthIso] = {
+          ...month,
+          [iso]: modifiers,
+        };
+      }
     }
 
     return updatedDaysAfterDeletion;
diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index a62ef71fac..7cd803010d 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -891,9 +891,9 @@ describe('DayPickerRangeController', () => {
             const startOfMonth = today.clone().startOf('month');
             visibleDays = {
               [toISOMonthString(startOfMonth)]: {
-                [toISODateString(startOfMonth)]: [],
-                [toISODateString(startOfMonth.clone().add(1, 'day'))]: [],
-                [toISODateString(startOfMonth.clone().add(2, 'days'))]: [],
+                [toISODateString(startOfMonth)]: new Set(),
+                [toISODateString(startOfMonth.clone().add(1, 'day'))]: new Set(),
+                [toISODateString(startOfMonth.clone().add(2, 'days'))]: new Set(),
               },
             };
           });
@@ -974,9 +974,9 @@ describe('DayPickerRangeController', () => {
             const startOfMonth = today.clone().startOf('month');
             visibleDays = {
               [toISOMonthString(startOfMonth)]: {
-                [toISODateString(startOfMonth)]: [],
-                [toISODateString(startOfMonth.clone().add(1, 'day'))]: [],
-                [toISODateString(startOfMonth.clone().add(2, 'days'))]: [],
+                [toISODateString(startOfMonth)]: new Set(),
+                [toISODateString(startOfMonth.clone().add(1, 'day'))]: new Set(),
+                [toISODateString(startOfMonth.clone().add(2, 'days'))]: new Set(),
               },
             };
           });
@@ -1057,9 +1057,9 @@ describe('DayPickerRangeController', () => {
             const startOfMonth = today.clone().startOf('month');
             visibleDays = {
               [toISOMonthString(startOfMonth)]: {
-                [toISODateString(startOfMonth)]: [],
-                [toISODateString(startOfMonth.clone().add(1, 'day'))]: [],
-                [toISODateString(startOfMonth.clone().add(2, 'days'))]: [],
+                [toISODateString(startOfMonth)]: new Set(),
+                [toISODateString(startOfMonth.clone().add(1, 'day'))]: new Set(),
+                [toISODateString(startOfMonth.clone().add(2, 'days'))]: new Set(),
               },
             };
           });
@@ -3798,8 +3798,14 @@ describe('DayPickerRangeController', () => {
           onFocusChange={sinon.stub()}
         />
       ));
-      const modifiers = wrapper.instance().deleteModifier({}, today);
-      expect(Object.keys(modifiers)).to.contain(toISOMonthString(today));
+
+      const isoMonth = toISOMonthString(today);
+      const isoDate = toISODateString(today);
+      const modifiers = wrapper.instance()
+        .deleteModifier({ [isoMonth]: { [isoDate]: new Set(['foo']) } }, today, 'foo');
+
+      expect(Object.keys(modifiers)).to.contain(isoMonth);
+      expect(modifiers[isoMonth][isoDate].size).to.equal(0);
     });
 
     it('has day ISO as key one layer down', () => {
diff --git a/test/components/DayPickerSingleDateController_spec.jsx b/test/components/DayPickerSingleDateController_spec.jsx
index e23e048aff..cf5ad01f71 100644
--- a/test/components/DayPickerSingleDateController_spec.jsx
+++ b/test/components/DayPickerSingleDateController_spec.jsx
@@ -111,9 +111,9 @@ describe('DayPickerSingleDateController', () => {
             const startOfMonth = today.clone().startOf('month');
             visibleDays = {
               [toISOMonthString(startOfMonth)]: {
-                [toISODateString(startOfMonth)]: [],
-                [toISODateString(startOfMonth.clone().add(1, 'day'))]: [],
-                [toISODateString(startOfMonth.clone().add(2, 'days'))]: [],
+                [toISODateString(startOfMonth)]: new Set(),
+                [toISODateString(startOfMonth.clone().add(1, 'day'))]: new Set(),
+                [toISODateString(startOfMonth.clone().add(2, 'days'))]: new Set(),
               },
             };
           });
@@ -194,9 +194,9 @@ describe('DayPickerSingleDateController', () => {
             const startOfMonth = today.clone().startOf('month');
             visibleDays = {
               [toISOMonthString(startOfMonth)]: {
-                [toISODateString(startOfMonth)]: [],
-                [toISODateString(startOfMonth.clone().add(1, 'day'))]: [],
-                [toISODateString(startOfMonth.clone().add(2, 'days'))]: [],
+                [toISODateString(startOfMonth)]: new Set(),
+                [toISODateString(startOfMonth.clone().add(1, 'day'))]: new Set(),
+                [toISODateString(startOfMonth.clone().add(2, 'days'))]: new Set(),
               },
             };
           });
@@ -289,9 +289,9 @@ describe('DayPickerSingleDateController', () => {
             const startOfMonth = today.clone().startOf('month');
             visibleDays = {
               [toISOMonthString(startOfMonth)]: {
-                [toISODateString(startOfMonth)]: [],
-                [toISODateString(startOfMonth.clone().add(1, 'day'))]: [],
-                [toISODateString(startOfMonth.clone().add(2, 'days'))]: [],
+                [toISODateString(startOfMonth)]: new Set(),
+                [toISODateString(startOfMonth.clone().add(1, 'day'))]: new Set(),
+                [toISODateString(startOfMonth.clone().add(2, 'days'))]: new Set(),
               },
             };
           });
@@ -372,9 +372,9 @@ describe('DayPickerSingleDateController', () => {
             const startOfMonth = today.clone().startOf('month');
             visibleDays = {
               [toISOMonthString(startOfMonth)]: {
-                [toISODateString(startOfMonth)]: [],
-                [toISODateString(startOfMonth.clone().add(1, 'day'))]: [],
-                [toISODateString(startOfMonth.clone().add(2, 'days'))]: [],
+                [toISODateString(startOfMonth)]: new Set(),
+                [toISODateString(startOfMonth.clone().add(1, 'day'))]: new Set(),
+                [toISODateString(startOfMonth.clone().add(2, 'days'))]: new Set(),
               },
             };
           });
@@ -1087,7 +1087,7 @@ describe('DayPickerSingleDateController', () => {
           onFocusChange={sinon.stub()}
         />
       ));
-      const modifiers = wrapper.instance().addModifier({}, today);
+      const modifiers = wrapper.instance().addModifier({}, today, 'foo');
       expect(Object.keys(modifiers)).to.contain(toISOMonthString(today));
     });
 
@@ -1200,8 +1200,14 @@ describe('DayPickerSingleDateController', () => {
           onFocusChange={sinon.stub()}
         />
       ));
-      const modifiers = wrapper.instance().deleteModifier({}, today);
-      expect(Object.keys(modifiers)).to.contain(toISOMonthString(today));
+
+      const isoMonth = toISOMonthString(today);
+      const isoDate = toISODateString(today);
+      const modifiers = wrapper.instance()
+        .deleteModifier({ [isoMonth]: { [isoDate]: new Set(['foo']) } }, today, 'foo');
+
+      expect(Object.keys(modifiers)).to.contain(isoMonth);
+      expect(modifiers[isoMonth][isoDate].size).to.equal(0);
     });
 
     it('has day ISO as key one layer down', () => {

From a60a76a14bddbba43033ad20b507137d18ab0248 Mon Sep 17 00:00:00 2001
From: Joe Lencioni <joe.lencioni@airbnb.com>
Date: Fri, 31 May 2019 09:22:16 -0700
Subject: [PATCH 447/618] Cache some moment instances when rebuilding modifiers

When modifiers need to be rebuilt, which happens pretty frequently, we
iterate over every day and create a new moment instance for these
operations. These moment instances are never mutated, so we can safely
store and reuse them to improve performance.

This optimization reduces the time spent in
DayPickerRangeController#componentWillReceiveProps when selecting dates
from ~16ms to ~6-10ms.
---
 src/components/DayPickerRangeController.jsx   |  3 ++-
 .../DayPickerSingleDateController.jsx         |  3 ++-
 src/utils/getPooledMoment.js                  | 10 ++++++++
 test/utils/getPooledMoment_spec.js            | 24 +++++++++++++++++++
 4 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 src/utils/getPooledMoment.js
 create mode 100644 test/utils/getPooledMoment_spec.js

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 2383ab0277..83aaa21b9a 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -40,6 +40,7 @@ import {
 
 import DayPicker from './DayPicker';
 import getPreviousMonthMemoLast from '../utils/getPreviousMonthMemoLast';
+import getPooledMoment from '../utils/getPooledMoment';
 
 const propTypes = forbidExtraProps({
   startDate: momentPropTypes.momentObj,
@@ -394,7 +395,7 @@ export default class DayPickerRangeController extends React.PureComponent {
     if (didFocusChange || recomputePropModifiers) {
       values(visibleDays).forEach((days) => {
         Object.keys(days).forEach((day) => {
-          const momentObj = moment(day);
+          const momentObj = getPooledMoment(day);
           let isBlocked = false;
 
           if (didFocusChange || recomputeOutsideRange) {
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index c6b9642706..24649038fd 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -31,6 +31,7 @@ import {
 
 import DayPicker from './DayPicker';
 import getPreviousMonthMemoLast from '../utils/getPreviousMonthMemoLast';
+import getPooledMoment from '../utils/getPooledMoment';
 
 const propTypes = forbidExtraProps({
   date: momentPropTypes.momentObj,
@@ -268,7 +269,7 @@ export default class DayPickerSingleDateController extends React.PureComponent {
     if (didFocusChange || recomputePropModifiers) {
       values(visibleDays).forEach((days) => {
         Object.keys(days).forEach((day) => {
-          const momentObj = moment(day);
+          const momentObj = getPooledMoment(day);
           if (this.isBlocked(momentObj)) {
             modifiers = this.addModifier(modifiers, momentObj, 'blocked');
           } else {
diff --git a/src/utils/getPooledMoment.js b/src/utils/getPooledMoment.js
new file mode 100644
index 0000000000..38cd9fd25e
--- /dev/null
+++ b/src/utils/getPooledMoment.js
@@ -0,0 +1,10 @@
+import moment from 'moment';
+
+const momentPool = new Map();
+export default function getPooledMoment(dayString) {
+  if (!momentPool.has(dayString)) {
+    momentPool.set(dayString, moment(dayString));
+  }
+
+  return momentPool.get(dayString);
+}
diff --git a/test/utils/getPooledMoment_spec.js b/test/utils/getPooledMoment_spec.js
new file mode 100644
index 0000000000..7c28318270
--- /dev/null
+++ b/test/utils/getPooledMoment_spec.js
@@ -0,0 +1,24 @@
+import { expect } from 'chai';
+import moment from 'moment';
+
+import getPooledMoment from '../../src/utils/getPooledMoment';
+
+describe('getPooledMoment', () => {
+  it('returns a moment given a day string', () => {
+    const momentObj = getPooledMoment('2017-12-10');
+    expect(moment.isMoment(momentObj)).to.equal(true);
+    expect(momentObj.format('YYYY MM DD')).to.equal('2017 12 10');
+  });
+
+  it('returns the same moment given the same day string', () => {
+    const momentObj1 = getPooledMoment('2017-12-10');
+    const momentObj2 = getPooledMoment('2017-12-10');
+    expect(momentObj1).to.equal(momentObj2);
+  });
+
+  it('returns a different moment given a different day string', () => {
+    const momentObj1 = getPooledMoment('2017-12-10');
+    const momentObj2 = getPooledMoment('2017-12-11');
+    expect(momentObj1).not.to.equal(momentObj2);
+  });
+});

From 8af003610ae746b296ec4d82d9930f34d2ef9f1f Mon Sep 17 00:00:00 2001
From: Joe Lencioni <joe.lencioni@airbnb.com>
Date: Mon, 3 Jun 2019 09:08:54 -0700
Subject: [PATCH 448/618] Version 20.2.1

---
 CHANGELOG.md | 5 +++++
 package.json | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3c0f69ee4e..2e11692794 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,11 @@
 - []  ([#](https://github.com/airbnb/react-dates/pull/))
 -->
 
+## 20.2.1
+- [fix] Compile classes in loose mode ([#1655](https://github.com/airbnb/react-dates/pull/1655))
+- [fix] Performance optimizations ([#1656](https://github.com/airbnb/react-dates/pull/1656), [#1657](https://github.com/airbnb/react-dates/pull/1657), [#1659](https://github.com/airbnb/react-dates/pull/1659), [#1661](https://github.com/airbnb/react-dates/pull/1661), [#1662](https://github.com/airbnb/react-dates/pull/1662), and [#1663](https://github.com/airbnb/react-dates/pull/1663))
+- [docs] Add `initialVisibleMonth` to `DayPickerRangeController` in readme ([@AlokTakshak](https://github.com/AlokTakshak) [1652](https://github.com/airbnb/react-dates/pull/1652))
+
 ## 20.2.0
 - [fix] Fix date selection in the SDP ([#1530](https://github.com/airbnb/react-dates/pull/1530))
 - [new] Add explicit aria label props ([#1594](https://github.com/airbnb/react-dates/pull/1594))
diff --git a/package.json b/package.json
index 71df533dcc..39fc451542 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "20.2.0",
+  "version": "20.2.1",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From ae3b1a68639d1d1df600b8eb469d2fb6f7f9e319 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Tue, 4 Jun 2019 00:08:30 -0700
Subject: [PATCH 449/618] [Dev Deps] update `@babel/core`,
 `@storybook/addon-actions`, `@storybook/addon-info`,
 `@storybook/addon-links`, `@storybook/addon-options`, `@storybook/react ,
 `enzyme`, `enzyme-adapter-react-helper`, `eslint-plugin-import`, `karma`

---
 package.json | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 39fc451542..a590fd5ddf 100644
--- a/package.json
+++ b/package.json
@@ -52,13 +52,13 @@
   "homepage": "https://github.com/airbnb/react-dates#readme",
   "devDependencies": {
     "@babel/cli": "^7.4.4",
-    "@babel/core": "^7.4.4",
+    "@babel/core": "^7.4.5",
     "@babel/register": "^7.4.4",
-    "@storybook/addon-actions": "^4.0.0",
-    "@storybook/addon-info": "^4.0.0",
-    "@storybook/addon-links": "^4.0.0",
-    "@storybook/addon-options": "^4.0.0",
-    "@storybook/react": "^4.0.0",
+    "@storybook/addon-actions": "^4.1.18",
+    "@storybook/addon-info": "^4.1.18",
+    "@storybook/addon-links": "^4.1.18",
+    "@storybook/addon-options": "^4.1.18",
+    "@storybook/react": "^4.1.18",
     "acorn": "^6.1.1",
     "airbnb-js-shims": "^2.2.0",
     "aphrodite": "^2.3.1",
@@ -72,18 +72,18 @@
     "clean-css": "^4.2.1",
     "coveralls": "^3.0.3",
     "cross-env": "^5.2.0",
-    "enzyme": "^3.9.0",
-    "enzyme-adapter-react-helper": "^1.3.4",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-helper": "^1.3.5",
     "eslint": "^5.16.0",
     "eslint-config-airbnb": "^17.1.0",
-    "eslint-plugin-import": "^2.17.2",
+    "eslint-plugin-import": "^2.17.3",
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-react": "^7.13.0",
     "eslint-plugin-react-with-styles": "^2.1.0",
     "git-directory-deploy": "^1.5.1",
     "imports-loader": "^0.8.0",
     "in-publish": "^2.0.0",
-    "karma": "^3.1.1",
+    "karma": "^3.1.4",
     "karma-chai": "^0.1.0",
     "karma-firefox-launcher": "^1.1.0",
     "karma-mocha": "^1.3.0",

From d6304cba0fb315ff21f5dd8a4d6405ba45b46db4 Mon Sep 17 00:00:00 2001
From: Joe Lencioni <joe.lencioni@airbnb.com>
Date: Tue, 4 Jun 2019 08:14:37 -0700
Subject: [PATCH 450/618] Add guard for undefined objects in addModifier

After updating to v20.2.1, we started seeing a handful of errors about
`undefined is not an object` coming from these addModifier calls. It
isn't entirely clear to me how this happens, but I think we can prevent
it from being a problem by adding some guards in these codepaths.
---
 src/components/DayPickerRangeController.jsx          |  2 +-
 src/components/DayPickerSingleDateController.jsx     |  2 +-
 test/components/DayPickerRangeController_spec.jsx    | 12 ++++++++++++
 .../DayPickerSingleDateController_spec.jsx           | 12 ++++++++++++
 4 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 83aaa21b9a..f76464a0ae 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -1023,7 +1023,7 @@ export default class DayPickerRangeController extends React.PureComponent {
       }, updatedDaysAfterAddition);
     } else {
       const monthIso = toISOMonthString(day);
-      const month = updatedDays[monthIso] || visibleDays[monthIso];
+      const month = updatedDays[monthIso] || visibleDays[monthIso] || {};
 
       if (!month[iso] || !month[iso].has(modifier)) {
         const modifiers = new Set(month[iso]);
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 24649038fd..4ddfb102ca 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -550,7 +550,7 @@ export default class DayPickerSingleDateController extends React.PureComponent {
       }, updatedDaysAfterAddition);
     } else {
       const monthIso = toISOMonthString(day);
-      const month = updatedDays[monthIso] || visibleDays[monthIso];
+      const month = updatedDays[monthIso] || visibleDays[monthIso] || {};
 
       if (!month[iso] || !month[iso].has(modifier)) {
         const modifiers = new Set(month[iso]);
diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index 7cd803010d..0abd776cfb 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -3819,6 +3819,18 @@ describe('DayPickerRangeController', () => {
       expect(Object.keys(modifiers[toISOMonthString(today)])).to.contain(toISODateString(today));
     });
 
+    it('is resilient when visibleDays is an empty object', () => {
+      const wrapper = shallow((
+        <DayPickerRangeController
+          onDatesChange={sinon.stub()}
+          onFocusChange={sinon.stub()}
+        />
+      ));
+      wrapper.instance().setState({ visibleDays: {} });
+      const modifiers = wrapper.instance().addModifier({}, today);
+      expect(Object.keys(modifiers[toISOMonthString(today)])).to.contain(toISODateString(today));
+    });
+
     it('return value no longer has modifier arg for day if was in first arg', () => {
       const modifierToDelete = 'foo';
       const monthISO = toISOMonthString(today);
diff --git a/test/components/DayPickerSingleDateController_spec.jsx b/test/components/DayPickerSingleDateController_spec.jsx
index cf5ad01f71..d7016baec8 100644
--- a/test/components/DayPickerSingleDateController_spec.jsx
+++ b/test/components/DayPickerSingleDateController_spec.jsx
@@ -1102,6 +1102,18 @@ describe('DayPickerSingleDateController', () => {
       expect(Object.keys(modifiers[toISOMonthString(today)])).to.contain(toISODateString(today));
     });
 
+    it('is resilient when visibleDays is an empty object', () => {
+      const wrapper = shallow((
+        <DayPickerSingleDateController
+          onDateChange={sinon.stub()}
+          onFocusChange={sinon.stub()}
+        />
+      ));
+      wrapper.instance().setState({ visibleDays: {} });
+      const modifiers = wrapper.instance().addModifier({}, today);
+      expect(Object.keys(modifiers[toISOMonthString(today)])).to.contain(toISODateString(today));
+    });
+
     it('return value no longer has modifier arg for day if was in first arg', () => {
       const modifierToAdd = 'foo';
       const monthISO = toISOMonthString(today);

From 8b3f93932a54604fbd8815991a8091d4dc348ca4 Mon Sep 17 00:00:00 2001
From: Joe Lencioni <joe.lencioni@airbnb.com>
Date: Tue, 4 Jun 2019 09:19:54 -0700
Subject: [PATCH 451/618] Version 20.2.2

---
 CHANGELOG.md | 3 +++
 package.json | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2e11692794..030504873a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,9 @@
 - []  ([#](https://github.com/airbnb/react-dates/pull/))
 -->
 
+## 20.2.2
+- [fix] Add guard for undefined objects in addModifier ([#1667](https://github.com/airbnb/react-dates/pull/1667))
+
 ## 20.2.1
 - [fix] Compile classes in loose mode ([#1655](https://github.com/airbnb/react-dates/pull/1655))
 - [fix] Performance optimizations ([#1656](https://github.com/airbnb/react-dates/pull/1656), [#1657](https://github.com/airbnb/react-dates/pull/1657), [#1659](https://github.com/airbnb/react-dates/pull/1659), [#1661](https://github.com/airbnb/react-dates/pull/1661), [#1662](https://github.com/airbnb/react-dates/pull/1662), and [#1663](https://github.com/airbnb/react-dates/pull/1663))
diff --git a/package.json b/package.json
index a590fd5ddf..0793205c86 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "20.2.1",
+  "version": "20.2.2",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From b6295428e618b1eaf7184080fd81893ef912e50a Mon Sep 17 00:00:00 2001
From: Henric Trotzig <henric.trotzig@gmail.com>
Date: Wed, 5 Jun 2019 22:48:44 +0200
Subject: [PATCH 452/618] Update to Storybook v5

I was running into issues making a static Storybook build on v4 of
Storybook (see https://github.com/airbnb/react-dates/pull/1382#issuecomment-498856007).

The error I'm seeing is something like

ERR! ./examples/DateRangePickerWrapper.jsx
ERR! Module build failed (from ./node_modules/babel-loader/lib/index.js):
ERR! TypeError: Property declarations[0] of VariableDeclaration expected node to be of a type ["VariableDeclarator"] but instead got "ExpressionStatement"
ERR!     at validate (/home/travis/build/airbnb/react-dates/node_modules/@babel/types/lib/definitions/utils.js:128:13)
ERR!     at validator (/home/travis/build/airbnb/react-dates/node_modules/@babel/types/lib/definitions/utils.js:97:7)
ERR!     at Object.validate (/home/travis/build/airbnb/react-dates/node_modules/@babel/types/lib/definitions/utils.js:172:7)
ERR!     at validate (/home/travis/build/airbnb/react-dates/node_modules/@babel/types/lib/validators/validate.js:17:9)
ERR!     at builder (/home/travis/build/airbnb/react-dates/node_modules/@babel/types/lib/builders/builder.js:46:27)
ERR!     at Object.VariableDeclaration (/home/travis/build/airbnb/react-

It seems to happen at the minification step, because right before that
error happens I'm seeing "92% chunk asset TerserPlugin".

I started going down the route of tracing this down in Storybook v4, but
then decided to give v5 a spin instead. It turns out the upgrade isn't
all that complicated, and it does resolve the error I was seeing.

The only change needed except for bumping all the @storybook
dependencies was to turn the webpack config from "extend mode" to "full
control mode". See https://storybook.js.org/docs/configurations/custom-webpack-config/

I used this guide as a starting point to the upgrade:
https://medium.com/storybookjs/storybook-5-migration-guide-d804b38c739d
---
 .storybook/webpack.config.js | 17 +++++++----------
 package.json                 | 10 +++++-----
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
index 88fcdd2cf2..801ae4fee0 100644
--- a/.storybook/webpack.config.js
+++ b/.storybook/webpack.config.js
@@ -1,14 +1,12 @@
 const path = require('path');
 
-module.exports = {
-  module: {
-    rules: [
+module.exports = ({ config }) => {
+  config.module.rules.push(
+    ...[
       {
         test: /\.s?css$/,
         use: ['style-loader', 'raw-loader', 'sass-loader'],
-        include: [
-          path.resolve(__dirname, '../css/'),
-        ],
+        include: [path.resolve(__dirname, '../css/')],
       },
       {
         test: /\.svg$/,
@@ -33,8 +31,7 @@ module.exports = {
         ],
       },
     ],
-  },
-  resolve: {
-    extensions: ['.js', '.jsx'],
-  },
+  );
+  config.resolve.extensions = ['.js', '.jsx'];
+  return config;
 };
diff --git a/package.json b/package.json
index 0793205c86..e71121451d 100644
--- a/package.json
+++ b/package.json
@@ -54,11 +54,11 @@
     "@babel/cli": "^7.4.4",
     "@babel/core": "^7.4.5",
     "@babel/register": "^7.4.4",
-    "@storybook/addon-actions": "^4.1.18",
-    "@storybook/addon-info": "^4.1.18",
-    "@storybook/addon-links": "^4.1.18",
-    "@storybook/addon-options": "^4.1.18",
-    "@storybook/react": "^4.1.18",
+    "@storybook/addon-actions": "^5.1.1",
+    "@storybook/addon-info": "^5.1.1",
+    "@storybook/addon-links": "^5.1.1",
+    "@storybook/addon-options": "^5.1.1",
+    "@storybook/react": "^5.1.1",
     "acorn": "^6.1.1",
     "airbnb-js-shims": "^2.2.0",
     "aphrodite": "^2.3.1",

From fcdeeb463f4ce9645cbf1e6777a14bababf06d25 Mon Sep 17 00:00:00 2001
From: Henric Trotzig <henric.trotzig@gmail.com>
Date: Wed, 5 Jun 2019 23:06:37 +0200
Subject: [PATCH 453/618] Avoid unnecessary spread

We can just push multiple objects into the array in one go.
---
 .storybook/webpack.config.js | 52 +++++++++++++++++-------------------
 1 file changed, 25 insertions(+), 27 deletions(-)

diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
index 801ae4fee0..0e6b53922b 100644
--- a/.storybook/webpack.config.js
+++ b/.storybook/webpack.config.js
@@ -2,35 +2,33 @@ const path = require('path');
 
 module.exports = ({ config }) => {
   config.module.rules.push(
-    ...[
-      {
-        test: /\.s?css$/,
-        use: ['style-loader', 'raw-loader', 'sass-loader'],
-        include: [path.resolve(__dirname, '../css/')],
-      },
-      {
-        test: /\.svg$/,
-        use: [
-          {
-            loader: 'babel-loader',
-            query: {
-              presets: ['airbnb'],
-            },
+    {
+      test: /\.s?css$/,
+      use: ['style-loader', 'raw-loader', 'sass-loader'],
+      include: [path.resolve(__dirname, '../css/')],
+    },
+    {
+      test: /\.svg$/,
+      use: [
+        {
+          loader: 'babel-loader',
+          query: {
+            presets: ['airbnb'],
           },
-        ],
-      },
-      {
-        test: /\.jsx$/,
-        use: [
-          {
-            loader: 'babel-loader',
-            query: {
-              presets: ['airbnb'],
-            },
+        },
+      ],
+    },
+    {
+      test: /\.jsx$/,
+      use: [
+        {
+          loader: 'babel-loader',
+          query: {
+            presets: ['airbnb'],
           },
-        ],
-      },
-    ],
+        },
+      ],
+    },
   );
   config.resolve.extensions = ['.js', '.jsx'];
   return config;

From 25df22f16c753b517e33a09865226832f3d7293d Mon Sep 17 00:00:00 2001
From: Joe Lencioni <joe.lencioni@airbnb.com>
Date: Fri, 14 Jun 2019 14:40:07 -0700
Subject: [PATCH 454/618] Add guard for undefined objects in deleteModifier

I fixed this for addModifier in d6304cb, but failed to address
deleteModifier.
---
 src/components/DayPickerRangeController.jsx       |  2 +-
 src/components/DayPickerSingleDateController.jsx  |  2 +-
 test/components/DayPickerRangeController_spec.jsx | 15 +++++++++++++--
 .../DayPickerSingleDateController_spec.jsx        | 11 +++++++++++
 4 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index f76464a0ae..866446c20c 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -1089,7 +1089,7 @@ export default class DayPickerRangeController extends React.PureComponent {
       }, updatedDaysAfterDeletion);
     } else {
       const monthIso = toISOMonthString(day);
-      const month = updatedDays[monthIso] || visibleDays[monthIso];
+      const month = updatedDays[monthIso] || visibleDays[monthIso] || {};
 
       if (month[iso] && month[iso].has(modifier)) {
         const modifiers = new Set(month[iso]);
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 4ddfb102ca..c0f939ca6f 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -605,7 +605,7 @@ export default class DayPickerSingleDateController extends React.PureComponent {
       }, updatedDaysAfterDeletion);
     } else {
       const monthIso = toISOMonthString(day);
-      const month = updatedDays[monthIso] || visibleDays[monthIso];
+      const month = updatedDays[monthIso] || visibleDays[monthIso] || {};
 
       if (month[iso] && month[iso].has(modifier)) {
         const modifiers = new Set(month[iso]);
diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index 0abd776cfb..c6c0435d2a 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -3615,6 +3615,18 @@ describe('DayPickerRangeController', () => {
       expect(Object.keys(modifiers)).to.contain(toISOMonthString(today));
     });
 
+    it('is resilient when visibleDays is an empty object', () => {
+      const wrapper = shallow((
+        <DayPickerRangeController
+          onDatesChange={sinon.stub()}
+          onFocusChange={sinon.stub()}
+        />
+      ));
+      wrapper.instance().setState({ visibleDays: {} });
+      const modifiers = wrapper.instance().addModifier({}, today);
+      expect(Object.keys(modifiers[toISOMonthString(today)])).to.contain(toISODateString(today));
+    });
+
     it('has day ISO as key one layer down', () => {
       const wrapper = shallow((
         <DayPickerRangeController
@@ -3827,8 +3839,7 @@ describe('DayPickerRangeController', () => {
         />
       ));
       wrapper.instance().setState({ visibleDays: {} });
-      const modifiers = wrapper.instance().addModifier({}, today);
-      expect(Object.keys(modifiers[toISOMonthString(today)])).to.contain(toISODateString(today));
+      expect(() => { wrapper.instance().deleteModifier({}, today); }).to.not.throw();
     });
 
     it('return value no longer has modifier arg for day if was in first arg', () => {
diff --git a/test/components/DayPickerSingleDateController_spec.jsx b/test/components/DayPickerSingleDateController_spec.jsx
index d7016baec8..6d756cccb0 100644
--- a/test/components/DayPickerSingleDateController_spec.jsx
+++ b/test/components/DayPickerSingleDateController_spec.jsx
@@ -1233,6 +1233,17 @@ describe('DayPickerSingleDateController', () => {
       expect(Object.keys(modifiers[toISOMonthString(today)])).to.contain(toISODateString(today));
     });
 
+    it('is resilient when visibleDays is an empty object', () => {
+      const wrapper = shallow((
+        <DayPickerSingleDateController
+          onDateChange={sinon.stub()}
+          onFocusChange={sinon.stub()}
+        />
+      ));
+      wrapper.instance().setState({ visibleDays: {} });
+      expect(() => { wrapper.instance().deleteModifier({}, today); }).to.not.throw();
+    });
+
     it('return value no longer has modifier arg for day if was in first arg', () => {
       const modifierToDelete = 'foo';
       const monthISO = toISOMonthString(today);

From 02645b73ec0ec7c41a70acaf21b72b80382d8c4c Mon Sep 17 00:00:00 2001
From: Joe Lencioni <joe.lencioni@airbnb.com>
Date: Fri, 14 Jun 2019 15:55:52 -0700
Subject: [PATCH 455/618] Version 20.2.3

---
 CHANGELOG.md | 4 ++++
 package.json | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 030504873a..63bbb63486 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,10 @@
 - []  ([#](https://github.com/airbnb/react-dates/pull/))
 -->
 
+## 20.2.3
+- [fix] Add guard for undefined objects in deleteModifier ([#1687](https://github.com/airbnb/react-dates/pull/1687))
+- [dev] Update Storybook from v4 to v5 ([@trotzig](https://github.com/trotzig) [#1673](https://github.com/airbnb/react-dates/pull/1673))
+
 ## 20.2.2
 - [fix] Add guard for undefined objects in addModifier ([#1667](https://github.com/airbnb/react-dates/pull/1667))
 
diff --git a/package.json b/package.json
index e71121451d..6dfc7ee3ff 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "20.2.2",
+  "version": "20.2.3",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From bf7e3347702fadebec3ea3dc2ce9d273d5fea6ff Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Sun, 16 Jun 2019 09:50:16 -0700
Subject: [PATCH 456/618] [Refactor] use `enzyme-shallow-equal` instead of
 `react-addons-shallow-compare`

Closes #1671.
---
 package.json                       |  2 +-
 scripts/pure-component-fallback.js | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 6dfc7ee3ff..37774d2ec8 100644
--- a/package.json
+++ b/package.json
@@ -112,12 +112,12 @@
   "dependencies": {
     "airbnb-prop-types": "^2.10.0",
     "consolidated-events": "^1.1.1 || ^2.0.0",
+    "enzyme-shallow-equal": "^1.0.0",
     "is-touch-device": "^1.0.1",
     "lodash": "^4.1.1",
     "object.assign": "^4.1.0",
     "object.values": "^1.0.4",
     "prop-types": "^15.6.1",
-    "react-addons-shallow-compare": "^15.6.2",
     "react-moment-proptypes": "^1.6.0",
     "react-outside-click-handler": "^1.2.0",
     "react-portal": "^4.1.5",
diff --git a/scripts/pure-component-fallback.js b/scripts/pure-component-fallback.js
index 21de3715a6..8cf60d5420 100644
--- a/scripts/pure-component-fallback.js
+++ b/scripts/pure-component-fallback.js
@@ -12,7 +12,7 @@ module.exports = function pureComponentFallback({ types: t, template }) {
         t.stringLiteral('shouldComponentUpdate')
       ),
       [t.identifier('nextProps'), t.identifier('nextState')],
-      t.blockStatement([template('return shallowCompare(this, nextProps, nextState);')()]),
+      t.blockStatement([template('return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState);')()]),
       true
     );
     return method;
@@ -38,11 +38,11 @@ module.exports = function pureComponentFallback({ types: t, template }) {
     visitor: {
       Program: {
         exit({ node }, { file }) {
-          if (file.get('addShallowCompareImport')) {
-            const shallowCompareImportDeclaration = t.importDeclaration([
-              t.importDefaultSpecifier(t.identifier('shallowCompare')),
-            ], t.stringLiteral('react-addons-shallow-compare'));
-            node.body.unshift(shallowCompareImportDeclaration);
+          if (file.get('addShallowEqualImport')) {
+            const shallowEqualImportDeclaration = t.importDeclaration([
+              t.importDefaultSpecifier(t.identifier('shallowEqual')),
+            ], t.stringLiteral('enzyme-shallow-equal'));
+            node.body.unshift(shallowEqualImportDeclaration);
           }
         },
       },
@@ -60,7 +60,7 @@ module.exports = function pureComponentFallback({ types: t, template }) {
           ));
 
           if (!existingSCU) {
-            file.set('addShallowCompareImport', true);
+            file.set('addShallowEqualImport', true);
             path.get('body').unshiftContainer('body', buildShouldComponentUpdate());
           }
         }

From 182fd56feb566537fcd17a01dc885f8093e1d133 Mon Sep 17 00:00:00 2001
From: Joe Lencioni <joe.lencioni@airbnb.com>
Date: Mon, 17 Jun 2019 10:21:19 -0700
Subject: [PATCH 457/618] Run SVGs through SVGO with most aggressive settings

I noticed that these SVGs could be optimized a little more, by reducing
the precision. The end result is slightly different, but at the size
they are used, I don't think it will really be perceptible.

I left close.svg alone because it has a 12x12 viewBox instead of a
1000x1000 viewbox, so the precision here is actually pretty important
for the shape.

I think some more bytes could maybe be squeezed out of these by
recreating them from hand using different shapes instead of paths, but
that's a bit more work than I'd like to do at this time.

This optimization reduces the size of the svg directory from 2678 bytes
to 2106 bytes.
---
 src/svg/arrow-left.svg   | 2 +-
 src/svg/arrow-right.svg  | 2 +-
 src/svg/calendar.svg     | 2 +-
 src/svg/chevron-down.svg | 2 +-
 src/svg/chevron-up.svg   | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/svg/arrow-left.svg b/src/svg/arrow-left.svg
index 96cdee9bfd..e183dcb709 100644
--- a/src/svg/arrow-left.svg
+++ b/src/svg/arrow-left.svg
@@ -1 +1 @@
-<svg focusable="false" viewBox="0 0 1000 1000"><path d="M336.2 274.5l-210.1 210h805.4c13 0 23 10 23 23s-10 23-23 23H126.1l210.1 210.1c11 11 11 21 0 32-5 5-10 7-16 7s-11-2-16-7l-249.1-249c-11-11-11-21 0-32l249.1-249.1c21-21.1 53 10.9 32 32z"/></svg>
+<svg focusable="false" viewBox="0 0 1000 1000"><path d="M336 275L126 485h806c13 0 23 10 23 23s-10 23-23 23H126l210 210c11 11 11 21 0 32-5 5-10 7-16 7s-11-2-16-7L55 524c-11-11-11-21 0-32l249-249c21-22 53 10 32 32z"/></svg>
diff --git a/src/svg/arrow-right.svg b/src/svg/arrow-right.svg
index 765ffda559..ad9d30934d 100644
--- a/src/svg/arrow-right.svg
+++ b/src/svg/arrow-right.svg
@@ -1 +1 @@
-<svg focusable="false" viewBox="0 0 1000 1000"><path d="M694.4 242.4l249.1 249.1c11 11 11 21 0 32L694.4 772.7c-5 5-10 7-16 7s-11-2-16-7c-11-11-11-21 0-32l210.1-210.1H67.1c-13 0-23-10-23-23s10-23 23-23h805.4L662.4 274.5c-21-21.1 11-53.1 32-32.1z"/></svg>
+<svg focusable="false" viewBox="0 0 1000 1000"><path d="M694 242l249 250c12 11 12 21 1 32L694 773c-5 5-10 7-16 7s-11-2-16-7c-11-11-11-21 0-32l210-210H68c-13 0-23-10-23-23s10-23 23-23h806L662 275c-21-22 11-54 32-33z"/></svg>
diff --git a/src/svg/calendar.svg b/src/svg/calendar.svg
index 35c4d101d5..d26c6e7bff 100644
--- a/src/svg/calendar.svg
+++ b/src/svg/calendar.svg
@@ -1 +1 @@
-<svg focusable="false" viewBox="0 0 1393.1 1500"><path d="M107.2 1392.9h241.1v-241.1H107.2v241.1zm294.7 0h267.9v-241.1H401.9v241.1zm-294.7-294.7h241.1V830.4H107.2v267.8zm294.7 0h267.9V830.4H401.9v267.8zM107.2 776.8h241.1V535.7H107.2v241.1zm616.2 616.1h267.9v-241.1H723.4v241.1zM401.9 776.8h267.9V535.7H401.9v241.1zm642.9 616.1H1286v-241.1h-241.1v241.1zm-321.4-294.7h267.9V830.4H723.4v267.8zM428.7 375V133.9c0-7.3-2.7-13.5-8-18.8-5.3-5.3-11.6-8-18.8-8h-53.6c-7.3 0-13.5 2.7-18.8 8-5.3 5.3-8 11.6-8 18.8V375c0 7.3 2.7 13.5 8 18.8 5.3 5.3 11.6 8 18.8 8h53.6c7.3 0 13.5-2.7 18.8-8 5.3-5.3 8-11.5 8-18.8zm616.1 723.2H1286V830.4h-241.1v267.8zM723.4 776.8h267.9V535.7H723.4v241.1zm321.4 0H1286V535.7h-241.1v241.1zm26.8-401.8V133.9c0-7.3-2.7-13.5-8-18.8-5.3-5.3-11.6-8-18.8-8h-53.6c-7.3 0-13.5 2.7-18.8 8-5.3 5.3-8 11.6-8 18.8V375c0 7.3 2.7 13.5 8 18.8 5.3 5.3 11.6 8 18.8 8h53.6c7.3 0 13.5-2.7 18.8-8 5.4-5.3 8-11.5 8-18.8zm321.5-53.6v1071.4c0 29-10.6 54.1-31.8 75.3-21.2 21.2-46.3 31.8-75.3 31.8H107.2c-29 0-54.1-10.6-75.3-31.8C10.6 1447 0 1421.9 0 1392.9V321.4c0-29 10.6-54.1 31.8-75.3s46.3-31.8 75.3-31.8h107.2v-80.4c0-36.8 13.1-68.4 39.3-94.6S311.4 0 348.3 0h53.6c36.8 0 68.4 13.1 94.6 39.3 26.2 26.2 39.3 57.8 39.3 94.6v80.4h321.5v-80.4c0-36.8 13.1-68.4 39.3-94.6C922.9 13.1 954.4 0 991.3 0h53.6c36.8 0 68.4 13.1 94.6 39.3s39.3 57.8 39.3 94.6v80.4H1286c29 0 54.1 10.6 75.3 31.8 21.2 21.2 31.8 46.3 31.8 75.3z"/></svg>
+<svg focusable="false" viewBox="0 0 1393.1 1500"><path d="M107 1393h241v-241H107v241zm295 0h268v-241H402v241zm-295-295h241V830H107v268zm295 0h268V830H402v268zM107 777h241V536H107v241zm616 616h268v-241H723v241zM402 777h268V536H402v241zm643 616h241v-241h-241v241zm-322-295h268V830H723v268zM429 375V134c0-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 723h241V830h-241v268zM723 777h268V536H723v241zm322 0h241V536h-241v241zm27-402V134c0-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 32H107c-29 0-54-11-75-32s-32-46-32-75V321c0-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"/></svg>
diff --git a/src/svg/chevron-down.svg b/src/svg/chevron-down.svg
index 4c864e2201..dd9918fddd 100644
--- a/src/svg/chevron-down.svg
+++ b/src/svg/chevron-down.svg
@@ -1 +1 @@
-<svg focusable="false" viewBox="0 0 1000 1000"><path d="M967.5 288.5L514.3 740.7c-11 11-21 11-32 0L29.1 288.5c-4-5-6-11-6-16 0-13 10-23 23-23 6 0 11 2 15 7l437.2 436.2 437.2-436.2c4-5 9-7 16-7 6 0 11 2 16 7 9 10.9 9 21 0 32z"/></svg>
+<svg focusable="false" viewBox="0 0 1000 1000"><path d="M968 289L514 741c-11 11-21 11-32 0L29 289c-4-5-6-11-6-16 0-13 10-23 23-23 6 0 11 2 15 7l437 436 438-436c4-5 9-7 16-7 6 0 11 2 16 7 9 10 9 21 0 32z"/></svg>
diff --git a/src/svg/chevron-up.svg b/src/svg/chevron-up.svg
index ad1c1a6e82..a9c2948bee 100644
--- a/src/svg/chevron-up.svg
+++ b/src/svg/chevron-up.svg
@@ -1 +1 @@
-<svg focusable="false" viewBox="0 0 1000 1000"><path d="M32.1 712.6l453.2-452.2c11-11 21-11 32 0l453.2 452.2c4 5 6 10 6 16 0 13-10 23-22 23-7 0-12-2-16-7L501.3 308.5 64.1 744.7c-4 5-9 7-15 7-7 0-12-2-17-7-9-11-9-21 0-32.1z"/></svg>
+<svg focusable="false" viewBox="0 0 1000 1000"><path d="M32 713l453-453c11-11 21-11 32 0l453 453c5 5 7 10 7 16 0 13-10 23-22 23-7 0-12-2-16-7L501 309 64 745c-4 5-9 7-15 7-7 0-12-2-17-7-9-11-9-21 0-32z"/></svg>

From 32de4305e9cb42418602c1b1e76d5c298bc64cc3 Mon Sep 17 00:00:00 2001
From: Joe Lencioni <joe.lencioni@airbnb.com>
Date: Mon, 17 Jun 2019 10:39:05 -0700
Subject: [PATCH 458/618] Run calendar.svg through svgcleaner

I found that I can squeeze out a few extra bytes in this SVG by running
it through svgcleaner.
---
 src/svg/calendar.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/svg/calendar.svg b/src/svg/calendar.svg
index d26c6e7bff..b07cb0a6ef 100644
--- a/src/svg/calendar.svg
+++ b/src/svg/calendar.svg
@@ -1 +1 @@
-<svg focusable="false" viewBox="0 0 1393.1 1500"><path d="M107 1393h241v-241H107v241zm295 0h268v-241H402v241zm-295-295h241V830H107v268zm295 0h268V830H402v268zM107 777h241V536H107v241zm616 616h268v-241H723v241zM402 777h268V536H402v241zm643 616h241v-241h-241v241zm-322-295h268V830H723v268zM429 375V134c0-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 723h241V830h-241v268zM723 777h268V536H723v241zm322 0h241V536h-241v241zm27-402V134c0-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 32H107c-29 0-54-11-75-32s-32-46-32-75V321c0-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"/></svg>
+<svg focusable="false" viewBox="0 0 1393.1 1500"><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"/></svg>

From 6a6ee4b5b894478e0b9c191fcb0e493a297e62e1 Mon Sep 17 00:00:00 2001
From: Joe Lencioni <joe.lencioni@airbnb.com>
Date: Tue, 18 Jun 2019 11:53:23 -0700
Subject: [PATCH 459/618] =?UTF-8?q?Update=20babel-preset-airbnb=203.2.1=20?=
 =?UTF-8?q?=E2=86=92=204.0.0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This version adds `@babel/plugin-transform-runtime` to help us reduce
bundle size.

This should have the same effect as
https://github.com/airbnb/react-dates/pull/1689
---
 package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 37774d2ec8..151934abd0 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
     "babel-plugin-inline-svg": "^1.0.0",
     "babel-plugin-istanbul": "^5.1.4",
     "babel-plugin-transform-replace-object-assign": "^2.0.0",
-    "babel-preset-airbnb": "^3.2.1",
+    "babel-preset-airbnb": "^4.0.0",
     "chai": "^4.2.0",
     "clean-css": "^4.2.1",
     "coveralls": "^3.0.3",
@@ -110,6 +110,7 @@
     "why-did-you-update": "^1.0.6"
   },
   "dependencies": {
+    "@babel/runtime": "^7.4.5",
     "airbnb-prop-types": "^2.10.0",
     "consolidated-events": "^1.1.1 || ^2.0.0",
     "enzyme-shallow-equal": "^1.0.0",

From 259feb967f4f848e2d5a82e0e909261e765f34f3 Mon Sep 17 00:00:00 2001
From: Joe Lencioni <joe.lencioni@airbnb.com>
Date: Tue, 18 Jun 2019 14:55:56 -0700
Subject: [PATCH 460/618] Version 20.2.4

---
 CHANGELOG.md | 5 +++++
 package.json | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 63bbb63486..d7e6010da5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,11 @@
 - []  ([#](https://github.com/airbnb/react-dates/pull/))
 -->
 
+## 20.2.4
+- [fix] Replace react-addons-shallow-compare with enzyme-shallow-equal (bf7e3347702f)
+- [fix] Optimize SVG assets ([#1690](https://github.com/airbnb/react-dates/pull/1690))
+- [fix] Update babel-preset-airbnb 3.2.1 -> 4.0.0 ([#1692](https://github.com/airbnb/react-dates/pull/1692))
+
 ## 20.2.3
 - [fix] Add guard for undefined objects in deleteModifier ([#1687](https://github.com/airbnb/react-dates/pull/1687))
 - [dev] Update Storybook from v4 to v5 ([@trotzig](https://github.com/trotzig) [#1673](https://github.com/airbnb/react-dates/pull/1673))
diff --git a/package.json b/package.json
index 151934abd0..4d25d8fe44 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "20.2.3",
+  "version": "20.2.4",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From c6debdc233cce15f733266a8384798ad6dd8114c Mon Sep 17 00:00:00 2001
From: Joe Lencioni <joe.lencioni@airbnb.com>
Date: Tue, 18 Jun 2019 16:41:59 -0700
Subject: [PATCH 461/618] Extract addModifier and deleteModifier to shared
 module

I noticed that these two beefy methods were identical in both of these
components, so I'm moving them out to shared code to reduce duplication.
---
 src/components/DayPickerRangeController.jsx   | 108 +---------------
 .../DayPickerSingleDateController.jsx         | 110 +----------------
 src/utils/modifiers.js                        | 116 ++++++++++++++++++
 3 files changed, 122 insertions(+), 212 deletions(-)
 create mode 100644 src/utils/modifiers.js

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 866446c20c..b4db0fd3e8 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -21,7 +21,7 @@ import isDayVisible from '../utils/isDayVisible';
 import getSelectedDateOffset from '../utils/getSelectedDateOffset';
 
 import toISODateString from '../utils/toISODateString';
-import toISOMonthString from '../utils/toISOMonthString';
+import { addModifier, deleteModifier } from '../utils/modifiers';
 
 import DisabledShape from '../shapes/DisabledShape';
 import FocusedInputShape from '../shapes/FocusedInputShape';
@@ -39,7 +39,6 @@ import {
 } from '../constants';
 
 import DayPicker from './DayPicker';
-import getPreviousMonthMemoLast from '../utils/getPreviousMonthMemoLast';
 import getPooledMoment from '../utils/getPooledMoment';
 
 const propTypes = forbidExtraProps({
@@ -984,58 +983,7 @@ export default class DayPickerRangeController extends React.PureComponent {
   }
 
   addModifier(updatedDays, day, modifier) {
-    const { numberOfMonths: numberOfVisibleMonths, enableOutsideDays, orientation } = this.props;
-    const { currentMonth: firstVisibleMonth, visibleDays } = this.state;
-
-    let currentMonth = firstVisibleMonth;
-    let numberOfMonths = numberOfVisibleMonths;
-    if (orientation === VERTICAL_SCROLLABLE) {
-      numberOfMonths = Object.keys(visibleDays).length;
-    } else {
-      currentMonth = getPreviousMonthMemoLast(currentMonth);
-      numberOfMonths += 2;
-    }
-    if (!day || !isDayVisible(day, currentMonth, numberOfMonths, enableOutsideDays)) {
-      return updatedDays;
-    }
-
-    const iso = toISODateString(day);
-
-    let updatedDaysAfterAddition = { ...updatedDays };
-    if (enableOutsideDays) {
-      const monthsToUpdate = Object.keys(visibleDays).filter(monthKey => (
-        Object.keys(visibleDays[monthKey]).indexOf(iso) > -1
-      ));
-
-      updatedDaysAfterAddition = monthsToUpdate.reduce((acc, monthIso) => {
-        const month = updatedDays[monthIso] || visibleDays[monthIso];
-
-        if (!month[iso] || !month[iso].has(modifier)) {
-          const modifiers = new Set(month[iso]);
-          modifiers.add(modifier);
-          acc[monthIso] = {
-            ...month,
-            [iso]: modifiers,
-          };
-        }
-
-        return acc;
-      }, updatedDaysAfterAddition);
-    } else {
-      const monthIso = toISOMonthString(day);
-      const month = updatedDays[monthIso] || visibleDays[monthIso] || {};
-
-      if (!month[iso] || !month[iso].has(modifier)) {
-        const modifiers = new Set(month[iso]);
-        modifiers.add(modifier);
-        updatedDaysAfterAddition[monthIso] = {
-          ...month,
-          [iso]: modifiers,
-        };
-      }
-    }
-
-    return updatedDaysAfterAddition;
+    return addModifier(updatedDays, day, modifier, this.props, this.state);
   }
 
   addModifierToRange(updatedDays, start, end, modifier) {
@@ -1051,57 +999,7 @@ export default class DayPickerRangeController extends React.PureComponent {
   }
 
   deleteModifier(updatedDays, day, modifier) {
-    const { numberOfMonths: numberOfVisibleMonths, enableOutsideDays, orientation } = this.props;
-    const { currentMonth: firstVisibleMonth, visibleDays } = this.state;
-    let currentMonth = firstVisibleMonth;
-    let numberOfMonths = numberOfVisibleMonths;
-    if (orientation === VERTICAL_SCROLLABLE) {
-      numberOfMonths = Object.keys(visibleDays).length;
-    } else {
-      currentMonth = getPreviousMonthMemoLast(currentMonth);
-      numberOfMonths += 2;
-    }
-    if (!day || !isDayVisible(day, currentMonth, numberOfMonths, enableOutsideDays)) {
-      return updatedDays;
-    }
-
-    const iso = toISODateString(day);
-
-    let updatedDaysAfterDeletion = { ...updatedDays };
-    if (enableOutsideDays) {
-      const monthsToUpdate = Object.keys(visibleDays).filter(monthKey => (
-        Object.keys(visibleDays[monthKey]).indexOf(iso) > -1
-      ));
-
-      updatedDaysAfterDeletion = monthsToUpdate.reduce((acc, monthIso) => {
-        const month = updatedDays[monthIso] || visibleDays[monthIso];
-
-        if (month[iso] && month[iso].has(modifier)) {
-          const modifiers = new Set(month[iso]);
-          modifiers.delete(modifier);
-          acc[monthIso] = {
-            ...month,
-            [iso]: modifiers,
-          };
-        }
-
-        return acc;
-      }, updatedDaysAfterDeletion);
-    } else {
-      const monthIso = toISOMonthString(day);
-      const month = updatedDays[monthIso] || visibleDays[monthIso] || {};
-
-      if (month[iso] && month[iso].has(modifier)) {
-        const modifiers = new Set(month[iso]);
-        modifiers.delete(modifier);
-        updatedDaysAfterDeletion[monthIso] = {
-          ...month,
-          [iso]: modifiers,
-        };
-      }
-    }
-
-    return updatedDaysAfterDeletion;
+    return deleteModifier(updatedDays, day, modifier, this.props, this.state);
   }
 
   deleteModifierFromRange(updatedDays, start, end, modifier) {
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index c0f939ca6f..6884fef2fe 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -13,10 +13,9 @@ import isSameDay from '../utils/isSameDay';
 import isAfterDay from '../utils/isAfterDay';
 
 import getVisibleDays from '../utils/getVisibleDays';
-import isDayVisible from '../utils/isDayVisible';
 
 import toISODateString from '../utils/toISODateString';
-import toISOMonthString from '../utils/toISOMonthString';
+import { addModifier, deleteModifier } from '../utils/modifiers';
 
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
@@ -30,7 +29,6 @@ import {
 } from '../constants';
 
 import DayPicker from './DayPicker';
-import getPreviousMonthMemoLast from '../utils/getPreviousMonthMemoLast';
 import getPooledMoment from '../utils/getPooledMoment';
 
 const propTypes = forbidExtraProps({
@@ -511,113 +509,11 @@ export default class DayPickerSingleDateController extends React.PureComponent {
   }
 
   addModifier(updatedDays, day, modifier) {
-    const { numberOfMonths: numberOfVisibleMonths, enableOutsideDays, orientation } = this.props;
-    const { currentMonth: firstVisibleMonth, visibleDays } = this.state;
-
-    let currentMonth = firstVisibleMonth;
-    let numberOfMonths = numberOfVisibleMonths;
-    if (orientation === VERTICAL_SCROLLABLE) {
-      numberOfMonths = Object.keys(visibleDays).length;
-    } else {
-      currentMonth = getPreviousMonthMemoLast(currentMonth);
-      numberOfMonths += 2;
-    }
-    if (!day || !isDayVisible(day, currentMonth, numberOfMonths, enableOutsideDays)) {
-      return updatedDays;
-    }
-
-    const iso = toISODateString(day);
-
-    let updatedDaysAfterAddition = { ...updatedDays };
-    if (enableOutsideDays) {
-      const monthsToUpdate = Object.keys(visibleDays).filter(monthKey => (
-        Object.keys(visibleDays[monthKey]).indexOf(iso) > -1
-      ));
-
-      updatedDaysAfterAddition = monthsToUpdate.reduce((acc, monthIso) => {
-        const month = updatedDays[monthIso] || visibleDays[monthIso];
-
-        if (!month[iso] || !month[iso].has(modifier)) {
-          const modifiers = new Set(month[iso]);
-          modifiers.add(modifier);
-          acc[monthIso] = {
-            ...month,
-            [iso]: modifiers,
-          };
-        }
-
-        return acc;
-      }, updatedDaysAfterAddition);
-    } else {
-      const monthIso = toISOMonthString(day);
-      const month = updatedDays[monthIso] || visibleDays[monthIso] || {};
-
-      if (!month[iso] || !month[iso].has(modifier)) {
-        const modifiers = new Set(month[iso]);
-        modifiers.add(modifier);
-        updatedDaysAfterAddition[monthIso] = {
-          ...month,
-          [iso]: modifiers,
-        };
-      }
-    }
-
-    return updatedDaysAfterAddition;
+    return addModifier(updatedDays, day, modifier, this.props, this.state);
   }
 
   deleteModifier(updatedDays, day, modifier) {
-    const { numberOfMonths: numberOfVisibleMonths, enableOutsideDays, orientation } = this.props;
-    const { currentMonth: firstVisibleMonth, visibleDays } = this.state;
-
-    let currentMonth = firstVisibleMonth;
-    let numberOfMonths = numberOfVisibleMonths;
-    if (orientation === VERTICAL_SCROLLABLE) {
-      numberOfMonths = Object.keys(visibleDays).length;
-    } else {
-      currentMonth = getPreviousMonthMemoLast(currentMonth);
-      numberOfMonths += 2;
-    }
-    if (!day || !isDayVisible(day, currentMonth, numberOfMonths, enableOutsideDays)) {
-      return updatedDays;
-    }
-
-    const iso = toISODateString(day);
-
-    let updatedDaysAfterDeletion = { ...updatedDays };
-    if (enableOutsideDays) {
-      const monthsToUpdate = Object.keys(visibleDays).filter(monthKey => (
-        Object.keys(visibleDays[monthKey]).indexOf(iso) > -1
-      ));
-
-      updatedDaysAfterDeletion = monthsToUpdate.reduce((acc, monthIso) => {
-        const month = updatedDays[monthIso] || visibleDays[monthIso];
-
-        if (month[iso] && month[iso].has(modifier)) {
-          const modifiers = new Set(month[iso]);
-          modifiers.delete(modifier);
-          acc[monthIso] = {
-            ...month,
-            [iso]: modifiers,
-          };
-        }
-
-        return acc;
-      }, updatedDaysAfterDeletion);
-    } else {
-      const monthIso = toISOMonthString(day);
-      const month = updatedDays[monthIso] || visibleDays[monthIso] || {};
-
-      if (month[iso] && month[iso].has(modifier)) {
-        const modifiers = new Set(month[iso]);
-        modifiers.delete(modifier);
-        updatedDaysAfterDeletion[monthIso] = {
-          ...month,
-          [iso]: modifiers,
-        };
-      }
-    }
-
-    return updatedDaysAfterDeletion;
+    return deleteModifier(updatedDays, day, modifier, this.props, this.state);
   }
 
   isBlocked(day) {
diff --git a/src/utils/modifiers.js b/src/utils/modifiers.js
new file mode 100644
index 0000000000..5f1dbb13fd
--- /dev/null
+++ b/src/utils/modifiers.js
@@ -0,0 +1,116 @@
+import isDayVisible from './isDayVisible';
+import toISODateString from './toISODateString';
+import toISOMonthString from './toISOMonthString';
+import getPreviousMonthMemoLast from './getPreviousMonthMemoLast';
+
+import { VERTICAL_SCROLLABLE } from '../constants';
+
+export function addModifier(updatedDays, day, modifier, props, state) {
+  const { numberOfMonths: numberOfVisibleMonths, enableOutsideDays, orientation } = props;
+  const { currentMonth: firstVisibleMonth, visibleDays } = state;
+
+  let currentMonth = firstVisibleMonth;
+  let numberOfMonths = numberOfVisibleMonths;
+  if (orientation === VERTICAL_SCROLLABLE) {
+    numberOfMonths = Object.keys(visibleDays).length;
+  } else {
+    currentMonth = getPreviousMonthMemoLast(currentMonth);
+    numberOfMonths += 2;
+  }
+  if (!day || !isDayVisible(day, currentMonth, numberOfMonths, enableOutsideDays)) {
+    return updatedDays;
+  }
+
+  const iso = toISODateString(day);
+
+  let updatedDaysAfterAddition = { ...updatedDays };
+  if (enableOutsideDays) {
+    const monthsToUpdate = Object.keys(visibleDays).filter(monthKey => (
+      Object.keys(visibleDays[monthKey]).indexOf(iso) > -1
+    ));
+
+    updatedDaysAfterAddition = monthsToUpdate.reduce((acc, monthIso) => {
+      const month = updatedDays[monthIso] || visibleDays[monthIso];
+
+      if (!month[iso] || !month[iso].has(modifier)) {
+        const modifiers = new Set(month[iso]);
+        modifiers.add(modifier);
+        acc[monthIso] = {
+          ...month,
+          [iso]: modifiers,
+        };
+      }
+
+      return acc;
+    }, updatedDaysAfterAddition);
+  } else {
+    const monthIso = toISOMonthString(day);
+    const month = updatedDays[monthIso] || visibleDays[monthIso] || {};
+
+    if (!month[iso] || !month[iso].has(modifier)) {
+      const modifiers = new Set(month[iso]);
+      modifiers.add(modifier);
+      updatedDaysAfterAddition[monthIso] = {
+        ...month,
+        [iso]: modifiers,
+      };
+    }
+  }
+
+  return updatedDaysAfterAddition;
+}
+
+export function deleteModifier(updatedDays, day, modifier, props, state) {
+  const { numberOfMonths: numberOfVisibleMonths, enableOutsideDays, orientation } = props;
+  const { currentMonth: firstVisibleMonth, visibleDays } = state;
+
+  let currentMonth = firstVisibleMonth;
+  let numberOfMonths = numberOfVisibleMonths;
+  if (orientation === VERTICAL_SCROLLABLE) {
+    numberOfMonths = Object.keys(visibleDays).length;
+  } else {
+    currentMonth = getPreviousMonthMemoLast(currentMonth);
+    numberOfMonths += 2;
+  }
+  if (!day || !isDayVisible(day, currentMonth, numberOfMonths, enableOutsideDays)) {
+    return updatedDays;
+  }
+
+  const iso = toISODateString(day);
+
+  let updatedDaysAfterDeletion = { ...updatedDays };
+  if (enableOutsideDays) {
+    const monthsToUpdate = Object.keys(visibleDays).filter(monthKey => (
+      Object.keys(visibleDays[monthKey]).indexOf(iso) > -1
+    ));
+
+    updatedDaysAfterDeletion = monthsToUpdate.reduce((acc, monthIso) => {
+      const month = updatedDays[monthIso] || visibleDays[monthIso];
+
+      if (month[iso] && month[iso].has(modifier)) {
+        const modifiers = new Set(month[iso]);
+        modifiers.delete(modifier);
+        acc[monthIso] = {
+          ...month,
+          [iso]: modifiers,
+        };
+      }
+
+      return acc;
+    }, updatedDaysAfterDeletion);
+  } else {
+    const monthIso = toISOMonthString(day);
+    const month = updatedDays[monthIso] || visibleDays[monthIso] || {};
+
+    if (month[iso] && month[iso].has(modifier)) {
+      const modifiers = new Set(month[iso]);
+      modifiers.delete(modifier);
+      updatedDaysAfterDeletion[monthIso] = {
+        ...month,
+        [iso]: modifiers,
+      };
+    }
+  }
+
+  return updatedDaysAfterDeletion;
+}

From 1babba998e4fe43aadeadcac4a917bc5ac1b2c5d Mon Sep 17 00:00:00 2001
From: Joe Lencioni <joe.lencioni@airbnb.com>
Date: Tue, 25 Jun 2019 15:27:24 -0700
Subject: [PATCH 462/618] Defer day focusing until next animation frame

At Airbnb we noticed a bug affecting only mobile devices or desktop with
mobile device emulation enabled. In months that span 5 weeks that are
followed by months that span 6 weeks (e.g. May 2019), the scroll
position of the calendar days was scrolled down some, causing the
numbers to awkwardly overlap with the days of the week and look broken.
This only happened when first opening the date picker, and once you go
to a different month it would fix itself.

After some sleuthing, I determined that this was caused by these
.focus() calls happening at a weird time, causing a parent container (I
think maybe the DayPicker transition container with overflow hidden) to
have a > 0 scrollTop.

It seems that we can prevent this from happening by deferring the focus
until the next animation frame. I think this could also help us avoid
some layout thrashing, which could give us a little performance boost
here.

I was entirely unable to reproduce this in react-dates storybook, but
testing this fix out in the Airbnb codebase seems to fix the issue.
---
 src/components/CalendarDay.jsx                 |  6 +++++-
 src/components/CustomizableCalendarDay.jsx     |  6 +++++-
 test/components/CalendarDay_spec.jsx           | 18 ++++++++++++++++++
 .../CustomizableCalendarDay_spec.jsx           | 18 ++++++++++++++++++
 4 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/src/components/CalendarDay.jsx b/src/components/CalendarDay.jsx
index 7256cd0710..f69f12fc2d 100644
--- a/src/components/CalendarDay.jsx
+++ b/src/components/CalendarDay.jsx
@@ -58,7 +58,11 @@ class CalendarDay extends React.PureComponent {
     const { isFocused, tabIndex } = this.props;
     if (tabIndex === 0) {
       if (isFocused || tabIndex !== prevProps.tabIndex) {
-        this.buttonRef.focus();
+        requestAnimationFrame(() => {
+          if (this.buttonRef) {
+            this.buttonRef.focus();
+          }
+        });
       }
     }
   }
diff --git a/src/components/CustomizableCalendarDay.jsx b/src/components/CustomizableCalendarDay.jsx
index 46c4bef564..b37590b74b 100644
--- a/src/components/CustomizableCalendarDay.jsx
+++ b/src/components/CustomizableCalendarDay.jsx
@@ -228,7 +228,11 @@ class CustomizableCalendarDay extends React.PureComponent {
     const { isFocused, tabIndex } = this.props;
     if (tabIndex === 0) {
       if (isFocused || tabIndex !== prevProps.tabIndex) {
-        this.buttonRef.focus();
+        requestAnimationFrame(() => {
+          if (this.buttonRef) {
+            this.buttonRef.focus();
+          }
+        });
       }
     }
   }
diff --git a/test/components/CalendarDay_spec.jsx b/test/components/CalendarDay_spec.jsx
index 4394e02655..6640c4e048 100644
--- a/test/components/CalendarDay_spec.jsx
+++ b/test/components/CalendarDay_spec.jsx
@@ -238,6 +238,24 @@ describe('CalendarDay', () => {
     });
   });
 
+  describe('#componentDidUpdate', () => {
+    it('focuses buttonRef after a delay when isFocused, tabIndex is 0, and tabIndex was not 0', () => {
+      const clock = sinon.useFakeTimers();
+      const originalRAF = global.requestAnimationFrame;
+      global.requestAnimationFrame = global.setTimeout;
+
+      const wrapper = shallow(<CalendarDay isFocused tabIndex={0} />).dive();
+      const focus = sinon.spy();
+      wrapper.instance().buttonRef = { focus };
+      wrapper.instance().componentDidUpdate({ isFocused: true, tabIndex: -1 });
+      expect(focus.callCount).to.eq(0);
+      clock.tick(16);
+      expect(focus.callCount).to.eq(1);
+      clock.restore();
+      global.requestAnimationFrame = originalRAF;
+    });
+  });
+
   describe('#onDayClick', () => {
     let onDayClickSpy;
     beforeEach(() => {
diff --git a/test/components/CustomizableCalendarDay_spec.jsx b/test/components/CustomizableCalendarDay_spec.jsx
index b75c4c759b..6910a7154d 100644
--- a/test/components/CustomizableCalendarDay_spec.jsx
+++ b/test/components/CustomizableCalendarDay_spec.jsx
@@ -189,6 +189,24 @@ describe('CustomizableCalendarDay', () => {
     });
   });
 
+  describe('#componentDidUpdate', () => {
+    it('focuses buttonRef after a delay when isFocused, tabIndex is 0, and tabIndex was not 0', () => {
+      const clock = sinon.useFakeTimers();
+      const originalRAF = global.requestAnimationFrame;
+      global.requestAnimationFrame = global.setTimeout;
+
+      const wrapper = shallow(<CustomizableCalendarDay isFocused tabIndex={0} />).dive();
+      const focus = sinon.spy();
+      wrapper.instance().buttonRef = { focus };
+      wrapper.instance().componentDidUpdate({ isFocused: true, tabIndex: -1 });
+      expect(focus.callCount).to.eq(0);
+      clock.tick(16);
+      expect(focus.callCount).to.eq(1);
+      clock.restore();
+      global.requestAnimationFrame = originalRAF;
+    });
+  });
+
   describe('#onKeyDown', () => {
     const day = moment('10/10/2017');
 

From 731b98877747e878fb87b00bdcee3331054ca33f Mon Sep 17 00:00:00 2001
From: Joe Lencioni <joe.lencioni@airbnb.com>
Date: Tue, 25 Jun 2019 16:35:26 -0700
Subject: [PATCH 463/618] Use raf instead of requestAnimationFrame

This helps maintain browser compatibility.
---
 package.json                                     |  1 +
 src/components/CalendarDay.jsx                   |  3 ++-
 src/components/CustomizableCalendarDay.jsx       |  3 ++-
 .../_helpers/registerReactWithStylesInterface.js |  9 +++++++++
 test/components/CalendarDay_spec.jsx             | 16 ++++++++--------
 test/components/CustomizableCalendarDay_spec.jsx | 16 ++++++++--------
 .../DayPickerKeyboardShortcuts_spec.jsx          |  2 +-
 7 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/package.json b/package.json
index 4d25d8fe44..ab04b10cd6 100644
--- a/package.json
+++ b/package.json
@@ -119,6 +119,7 @@
     "object.assign": "^4.1.0",
     "object.values": "^1.0.4",
     "prop-types": "^15.6.1",
+    "raf": "^3.4.1",
     "react-moment-proptypes": "^1.6.0",
     "react-outside-click-handler": "^1.2.0",
     "react-portal": "^4.1.5",
diff --git a/src/components/CalendarDay.jsx b/src/components/CalendarDay.jsx
index f69f12fc2d..7e630093bf 100644
--- a/src/components/CalendarDay.jsx
+++ b/src/components/CalendarDay.jsx
@@ -4,6 +4,7 @@ import momentPropTypes from 'react-moment-proptypes';
 import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 import moment from 'moment';
+import raf from 'raf';
 
 import { CalendarDayPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
@@ -58,7 +59,7 @@ class CalendarDay extends React.PureComponent {
     const { isFocused, tabIndex } = this.props;
     if (tabIndex === 0) {
       if (isFocused || tabIndex !== prevProps.tabIndex) {
-        requestAnimationFrame(() => {
+        raf(() => {
           if (this.buttonRef) {
             this.buttonRef.focus();
           }
diff --git a/src/components/CustomizableCalendarDay.jsx b/src/components/CustomizableCalendarDay.jsx
index b37590b74b..2a3ee15752 100644
--- a/src/components/CustomizableCalendarDay.jsx
+++ b/src/components/CustomizableCalendarDay.jsx
@@ -4,6 +4,7 @@ import momentPropTypes from 'react-moment-proptypes';
 import { forbidExtraProps, nonNegativeInteger, or } from 'airbnb-prop-types';
 import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 import moment from 'moment';
+import raf from 'raf';
 
 import { CalendarDayPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
@@ -228,7 +229,7 @@ class CustomizableCalendarDay extends React.PureComponent {
     const { isFocused, tabIndex } = this.props;
     if (tabIndex === 0) {
       if (isFocused || tabIndex !== prevProps.tabIndex) {
-        requestAnimationFrame(() => {
+        raf(() => {
           if (this.buttonRef) {
             this.buttonRef.focus();
           }
diff --git a/test/_helpers/registerReactWithStylesInterface.js b/test/_helpers/registerReactWithStylesInterface.js
index 5678bdb108..f0dc45750b 100644
--- a/test/_helpers/registerReactWithStylesInterface.js
+++ b/test/_helpers/registerReactWithStylesInterface.js
@@ -1,7 +1,16 @@
 import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
 import aphroditeInterface from 'react-with-styles-interface-aphrodite';
+import { StyleSheetTestUtils } from 'aphrodite';
 
 import DefaultTheme from '../../src/theme/DefaultTheme';
 
 ThemedStyleSheet.registerTheme(DefaultTheme);
 ThemedStyleSheet.registerInterface(aphroditeInterface);
+
+beforeEach(() => {
+  StyleSheetTestUtils.suppressStyleInjection();
+});
+
+afterEach(() => {
+  StyleSheetTestUtils.clearBufferAndResumeStyleInjection();
+});
diff --git a/test/components/CalendarDay_spec.jsx b/test/components/CalendarDay_spec.jsx
index 6640c4e048..c0a6281cef 100644
--- a/test/components/CalendarDay_spec.jsx
+++ b/test/components/CalendarDay_spec.jsx
@@ -3,6 +3,7 @@ import { expect } from 'chai';
 import sinon from 'sinon-sandbox';
 import { shallow } from 'enzyme';
 import moment from 'moment';
+import raf from 'raf';
 
 import { BLOCKED_MODIFIER } from '../../src/constants';
 import CalendarDay, { PureCalendarDay } from '../../src/components/CalendarDay';
@@ -240,19 +241,18 @@ describe('CalendarDay', () => {
 
   describe('#componentDidUpdate', () => {
     it('focuses buttonRef after a delay when isFocused, tabIndex is 0, and tabIndex was not 0', () => {
-      const clock = sinon.useFakeTimers();
-      const originalRAF = global.requestAnimationFrame;
-      global.requestAnimationFrame = global.setTimeout;
-
       const wrapper = shallow(<CalendarDay isFocused tabIndex={0} />).dive();
       const focus = sinon.spy();
       wrapper.instance().buttonRef = { focus };
       wrapper.instance().componentDidUpdate({ isFocused: true, tabIndex: -1 });
       expect(focus.callCount).to.eq(0);
-      clock.tick(16);
-      expect(focus.callCount).to.eq(1);
-      clock.restore();
-      global.requestAnimationFrame = originalRAF;
+
+      return new Promise((resolve) => {
+        raf(() => {
+          expect(focus.callCount).to.eq(1);
+          resolve();
+        });
+      });
     });
   });
 
diff --git a/test/components/CustomizableCalendarDay_spec.jsx b/test/components/CustomizableCalendarDay_spec.jsx
index 6910a7154d..a138b482e4 100644
--- a/test/components/CustomizableCalendarDay_spec.jsx
+++ b/test/components/CustomizableCalendarDay_spec.jsx
@@ -3,6 +3,7 @@ import { expect } from 'chai';
 import sinon from 'sinon-sandbox';
 import { shallow } from 'enzyme';
 import moment from 'moment';
+import raf from 'raf';
 
 import { BLOCKED_MODIFIER } from '../../src/constants';
 import CustomizableCalendarDay, { PureCustomizableCalendarDay } from '../../src/components/CustomizableCalendarDay';
@@ -191,19 +192,18 @@ describe('CustomizableCalendarDay', () => {
 
   describe('#componentDidUpdate', () => {
     it('focuses buttonRef after a delay when isFocused, tabIndex is 0, and tabIndex was not 0', () => {
-      const clock = sinon.useFakeTimers();
-      const originalRAF = global.requestAnimationFrame;
-      global.requestAnimationFrame = global.setTimeout;
-
       const wrapper = shallow(<CustomizableCalendarDay isFocused tabIndex={0} />).dive();
       const focus = sinon.spy();
       wrapper.instance().buttonRef = { focus };
       wrapper.instance().componentDidUpdate({ isFocused: true, tabIndex: -1 });
       expect(focus.callCount).to.eq(0);
-      clock.tick(16);
-      expect(focus.callCount).to.eq(1);
-      clock.restore();
-      global.requestAnimationFrame = originalRAF;
+
+      return new Promise((resolve) => {
+        raf(() => {
+          expect(focus.callCount).to.eq(1);
+          resolve();
+        });
+      });
     });
   });
 
diff --git a/test/components/DayPickerKeyboardShortcuts_spec.jsx b/test/components/DayPickerKeyboardShortcuts_spec.jsx
index bc4c786ace..5321a32fcf 100644
--- a/test/components/DayPickerKeyboardShortcuts_spec.jsx
+++ b/test/components/DayPickerKeyboardShortcuts_spec.jsx
@@ -54,7 +54,7 @@ describe('DayPickerKeyboardShortcuts', () => {
     const openKeyboardShortcutsPanelStub = sinon.stub();
     const showButtonFocusStub = sinon.stub();
 
-    before(() => {
+    beforeEach(() => {
       const wrapper = shallow(<DayPickerKeyboardShortcuts
         openKeyboardShortcutsPanel={openKeyboardShortcutsPanelStub}
       />).dive();

From bf28ba4db6e15f919498fe2b6ae1be07361fe319 Mon Sep 17 00:00:00 2001
From: Joe Lencioni <joe.lencioni@airbnb.com>
Date: Wed, 26 Jun 2019 10:17:34 -0700
Subject: [PATCH 464/618] =?UTF-8?q?Update=20eslint=20v5=20=E2=86=92=20v6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index ab04b10cd6..8970d7badc 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,7 @@
     "cross-env": "^5.2.0",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-helper": "^1.3.5",
-    "eslint": "^5.16.0",
+    "eslint": "^6.0.1",
     "eslint-config-airbnb": "^17.1.0",
     "eslint-plugin-import": "^2.17.3",
     "eslint-plugin-jsx-a11y": "^6.2.1",

From 9862d2898b2baa727a5d68ed0c0e63e66749405e Mon Sep 17 00:00:00 2001
From: Joe Lencioni <joe.lencioni@airbnb.com>
Date: Mon, 3 Jun 2019 09:14:57 -0700
Subject: [PATCH 465/618] npmignore .cache, .github, .lgtm, and _gh-pages

I don't think there is any value in distributing these files in the
package.
---
 .npmignore | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/.npmignore b/.npmignore
index bb95d36efb..f88e53c229 100644
--- a/.npmignore
+++ b/.npmignore
@@ -32,13 +32,17 @@ node_modules
 # Optional REPL history
 .node_repl_history
 
+.cache
+.github
+.lgtm
 .storybook
 .storybook-css
+_gh-pages
 examples
+MAINTAINERS
 public
 react-dates-demo.gif
 stories
 test
 css
 !lib/css
-

From 3b284c9619d7dde46d6adeb53f564c15b8ae5012 Mon Sep 17 00:00:00 2001
From: Ian Duvall <iduvall@umich.edu>
Date: Tue, 26 Mar 2019 11:43:13 -0500
Subject: [PATCH 466/618] Update blocked navigation (min/maxDate) stories

---
 stories/DayPickerRangeController.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
index 8ff8f15c2f..50aaec35f1 100644
--- a/stories/DayPickerRangeController.js
+++ b/stories/DayPickerRangeController.js
@@ -293,8 +293,8 @@ storiesOf('DayPickerRangeController', module)
   )))
   .add('with custom month navigation and blocked navigation (minDate and maxDate)', withInfo()(() => (
     <DayPickerRangeControllerWrapper
-      minDate={moment('2018-07-01')}
-      maxDate={moment('2018-10-20')}
+      minDate={moment().subtract(2, 'months').startOf('month')}
+      maxDate={moment().add(2, 'months').endOf('month')}
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
@@ -383,8 +383,8 @@ storiesOf('DayPickerRangeController', module)
   )))
   .add('with navigation blocked (minDate and maxDate)', withInfo()(() => (
     <DayPickerRangeControllerWrapper
-      minDate={moment('2018-07-01')}
-      maxDate={moment('2018-10-20')}
+      minDate={moment().subtract(2, 'months').startOf('month')}
+      maxDate={moment().add(2, 'months').endOf('month')}
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}

From 39fb2cb3a3e16bf00d20f27726aa4b12b1fa3c81 Mon Sep 17 00:00:00 2001
From: Doug MacKenzie <douglmackenzie@gmail.com>
Date: Thu, 7 Mar 2019 15:09:56 +1100
Subject: [PATCH 467/618] Add positioning to custom navigation in stories

---
 stories/DateRangePicker_calendar.js      | 8 ++++----
 stories/DayPicker.js                     | 6 ++++--
 stories/DayPickerRangeController.js      | 6 ++++++
 stories/DayPickerSingleDateController.js | 6 ++++++
 stories/SingleDatePicker_calendar.js     | 8 +++++++-
 5 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/stories/DateRangePicker_calendar.js b/stories/DateRangePicker_calendar.js
index c465937f70..23d250a5fc 100644
--- a/stories/DateRangePicker_calendar.js
+++ b/stories/DateRangePicker_calendar.js
@@ -19,8 +19,8 @@ function CustomMonthNav({ children, style }) {
         padding: '0 3px',
         position: 'absolute',
         marginTop: -2,
-        top: 30,
-        left: 26,
+        top: 19,
+        left: 13,
         outline: 'inherit',
         ...style,
       }}
@@ -131,7 +131,7 @@ storiesOf('DRP - Calendar Props', module)
   .add('with custom month navigation', withInfo()(() => (
     <DateRangePickerWrapper
       navPrev={<CustomMonthNav>&#8249;</CustomMonthNav>}
-      navNext={<CustomMonthNav style={{ left: 48 }}>&#8250;</CustomMonthNav>}
+      navNext={<CustomMonthNav style={{ left: 33 }}>&#8250;</CustomMonthNav>}
       numberOfMonths={1}
       autoFocus
     />
@@ -140,7 +140,7 @@ storiesOf('DRP - Calendar Props', module)
     <DateRangePickerWrapper
       orientation={VERTICAL_ORIENTATION}
       navPrev={<CustomMonthNav>&#8249;</CustomMonthNav>}
-      navNext={<CustomMonthNav style={{ left: 48 }}>&#8250;</CustomMonthNav>}
+      navNext={<CustomMonthNav style={{ left: 33 }}>&#8250;</CustomMonthNav>}
       autoFocus
     />
   )))
diff --git a/stories/DayPicker.js b/stories/DayPicker.js
index 11dde2f34c..c0c53b1ab0 100644
--- a/stories/DayPicker.js
+++ b/stories/DayPicker.js
@@ -15,9 +15,10 @@ const TestPrevIcon = () => (
       border: '1px solid #dce0e0',
       backgroundColor: '#fff',
       color: '#484848',
-      left: '24px',
+      left: '22px',
       padding: '3px',
       position: 'absolute',
+      top: '20px',
       width: '40px',
     }}
     tabindex="0"
@@ -34,7 +35,8 @@ const TestNextIcon = () => (
       color: '#484848',
       padding: '3px',
       position: 'absolute',
-      right: '24px',
+      right: '22px',
+      top: '20px',
       width: '40px',
     }}
     tabindex="0"
diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
index 50aaec35f1..cb1b984e64 100644
--- a/stories/DayPickerRangeController.js
+++ b/stories/DayPickerRangeController.js
@@ -36,7 +36,10 @@ const TestPrevIcon = () => (
       border: '1px solid #dce0e0',
       backgroundColor: '#fff',
       color: '#484848',
+      left: '22px',
       padding: '3px',
+      position: 'absolute',
+      top: '20px',
     }}
   >
     Prev
@@ -50,6 +53,9 @@ const TestNextIcon = () => (
       backgroundColor: '#fff',
       color: '#484848',
       padding: '3px',
+      position: 'absolute',
+      right: '22px',
+      top: '20px',
     }}
   >
     Next
diff --git a/stories/DayPickerSingleDateController.js b/stories/DayPickerSingleDateController.js
index 2c7e948e2e..a77bd72b61 100644
--- a/stories/DayPickerSingleDateController.js
+++ b/stories/DayPickerSingleDateController.js
@@ -37,7 +37,10 @@ const TestPrevIcon = () => (
       border: '1px solid #dce0e0',
       backgroundColor: '#fff',
       color: '#484848',
+      left: '22px',
       padding: '3px',
+      position: 'absolute',
+      top: '20px',
     }}
   >
     Prev
@@ -51,6 +54,9 @@ const TestNextIcon = () => (
       backgroundColor: '#fff',
       color: '#484848',
       padding: '3px',
+      position: 'absolute',
+      right: '22px',
+      top: '20px',
     }}
   >
     Next
diff --git a/stories/SingleDatePicker_calendar.js b/stories/SingleDatePicker_calendar.js
index 9e6d6aac47..cd85951872 100644
--- a/stories/SingleDatePicker_calendar.js
+++ b/stories/SingleDatePicker_calendar.js
@@ -13,7 +13,10 @@ const TestPrevIcon = () => (
       border: '1px solid #dce0e0',
       backgroundColor: '#fff',
       color: '#484848',
+      left: '22px',
       padding: '3px',
+      position: 'absolute',
+      top: '20px',
     }}
   >
     Prev
@@ -27,6 +30,9 @@ const TestNextIcon = () => (
       backgroundColor: '#fff',
       color: '#484848',
       padding: '3px',
+      position: 'absolute',
+      right: '22px',
+      top: '20px',
     }}
   >
     Next
@@ -149,7 +155,7 @@ storiesOf('SDP - Calendar Props', module)
   .add('with info panel default', withInfo()(() => (
     <SingleDatePickerWrapper
       renderCalendarInfo={() => (
-        <TestCustomInfoPanel borderPosition='borderBottom'/>
+        <TestCustomInfoPanel borderPosition='borderBottom' />
       )}
       autoFocus
     />

From 310205c04af8d2a1e66ab28c800389655f8fa596 Mon Sep 17 00:00:00 2001
From: Doug MacKenzie <douglmackenzie@gmail.com>
Date: Fri, 8 Mar 2019 10:46:16 +1100
Subject: [PATCH 468/618] Add tabindex=0 to other custom nav examples

---
 stories/DateRangePicker_calendar.js      |  6 +++---
 stories/DayPickerRangeController.js      | 10 ++++++----
 stories/DayPickerSingleDateController.js | 10 ++++++----
 stories/SingleDatePicker_calendar.js     | 10 ++++++----
 4 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/stories/DateRangePicker_calendar.js b/stories/DateRangePicker_calendar.js
index 23d250a5fc..478937e873 100644
--- a/stories/DateRangePicker_calendar.js
+++ b/stories/DateRangePicker_calendar.js
@@ -9,7 +9,7 @@ import DateRangePickerWrapper from '../examples/DateRangePickerWrapper';
 
 function CustomMonthNav({ children, style }) {
   return (
-    <span
+    <div
       style={{
         border: '1px solid #dce0e0',
         borderRadius: 2,
@@ -21,12 +21,12 @@ function CustomMonthNav({ children, style }) {
         marginTop: -2,
         top: 19,
         left: 13,
-        outline: 'inherit',
         ...style,
       }}
+      tabindex="0"
     >
       {children}
-    </span>
+    </div>
   );
 }
 
diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
index cb1b984e64..fa189f7ef4 100644
--- a/stories/DayPickerRangeController.js
+++ b/stories/DayPickerRangeController.js
@@ -31,7 +31,7 @@ const dayPickerRangeControllerInfo = `The ${monospace('DayPickerRangeController'
   implement your own inputs.`;
 
 const TestPrevIcon = () => (
-  <span
+  <div
     style={{
       border: '1px solid #dce0e0',
       backgroundColor: '#fff',
@@ -41,13 +41,14 @@ const TestPrevIcon = () => (
       position: 'absolute',
       top: '20px',
     }}
+    tabindex="0"
   >
     Prev
-  </span>
+  </div>
 );
 
 const TestNextIcon = () => (
-  <span
+  <div
     style={{
       border: '1px solid #dce0e0',
       backgroundColor: '#fff',
@@ -57,9 +58,10 @@ const TestNextIcon = () => (
       right: '22px',
       top: '20px',
     }}
+    tabindex="0"
   >
     Next
-  </span>
+  </div>
 );
 
 const TestCustomInfoPanel = () => (
diff --git a/stories/DayPickerSingleDateController.js b/stories/DayPickerSingleDateController.js
index a77bd72b61..f6375aa9bc 100644
--- a/stories/DayPickerSingleDateController.js
+++ b/stories/DayPickerSingleDateController.js
@@ -32,7 +32,7 @@ const dayPickerSingleDateControllerInfo = `The ${monospace('DayPickerSingleDateC
   implement your own input.`;
 
 const TestPrevIcon = () => (
-  <span
+  <div
     style={{
       border: '1px solid #dce0e0',
       backgroundColor: '#fff',
@@ -42,13 +42,14 @@ const TestPrevIcon = () => (
       position: 'absolute',
       top: '20px',
     }}
+    tabindex="0"
   >
     Prev
-  </span>
+  </div>
 );
 
 const TestNextIcon = () => (
-  <span
+  <div
     style={{
       border: '1px solid #dce0e0',
       backgroundColor: '#fff',
@@ -58,9 +59,10 @@ const TestNextIcon = () => (
       right: '22px',
       top: '20px',
     }}
+    tabindex="0"
   >
     Next
-  </span>
+  </div>
 );
 
 const TestCustomInfoPanel = () => (
diff --git a/stories/SingleDatePicker_calendar.js b/stories/SingleDatePicker_calendar.js
index cd85951872..13db3464c5 100644
--- a/stories/SingleDatePicker_calendar.js
+++ b/stories/SingleDatePicker_calendar.js
@@ -8,7 +8,7 @@ import SingleDatePickerWrapper from '../examples/SingleDatePickerWrapper';
 import { VERTICAL_ORIENTATION, ANCHOR_RIGHT, OPEN_UP } from '../src/constants';
 
 const TestPrevIcon = () => (
-  <span
+  <div
     style={{
       border: '1px solid #dce0e0',
       backgroundColor: '#fff',
@@ -18,13 +18,14 @@ const TestPrevIcon = () => (
       position: 'absolute',
       top: '20px',
     }}
+    tabindex="0"
   >
     Prev
-  </span>
+  </div>
 );
 
 const TestNextIcon = () => (
-  <span
+  <div
     style={{
       border: '1px solid #dce0e0',
       backgroundColor: '#fff',
@@ -34,9 +35,10 @@ const TestNextIcon = () => (
       right: '22px',
       top: '20px',
     }}
+    tabindex="0"
   >
     Next
-  </span>
+  </div>
 );
 
 const TestCustomInfoPanel = () => (

From bc476e945fe287b6ce264b49029cc7416026c38f Mon Sep 17 00:00:00 2001
From: alok <alok.takshak@gmail.com>
Date: Sat, 8 Jun 2019 11:29:37 +0530
Subject: [PATCH 469/618] fixed wrong props to SDP onClose

---
 src/components/SingleDatePicker.jsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index 850e63af46..94c513c01e 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -188,8 +188,7 @@ class SingleDatePicker extends React.PureComponent {
       focused,
       onFocusChange,
       onClose,
-      startDate,
-      endDate,
+      date,
       appendToBody,
     } = this.props;
 
@@ -203,7 +202,7 @@ class SingleDatePicker extends React.PureComponent {
     });
 
     onFocusChange({ focused: false });
-    onClose({ startDate, endDate });
+    onClose({ date});
   }
 
   onInputFocus({ focused }) {

From 2370d4cf9523f9c61dc752fb2b395dc64da0b024 Mon Sep 17 00:00:00 2001
From: alok <alok.takshak@gmail.com>
Date: Sat, 8 Jun 2019 11:51:14 +0530
Subject: [PATCH 470/618] resolved linting on props of onClose

---
 src/components/SingleDatePicker.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index 94c513c01e..c07a2a8092 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -202,7 +202,7 @@ class SingleDatePicker extends React.PureComponent {
     });
 
     onFocusChange({ focused: false });
-    onClose({ date});
+    onClose({ date });
   }
 
   onInputFocus({ focused }) {

From 754ac5d477afab66ad41279767d5f1e93fab9f60 Mon Sep 17 00:00:00 2001
From: alok <alok.takshak@gmail.com>
Date: Sat, 8 Jun 2019 14:19:26 +0530
Subject: [PATCH 471/618] test case for onClose of SDP

---
 test/components/SingleDatePicker_spec.jsx | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/test/components/SingleDatePicker_spec.jsx b/test/components/SingleDatePicker_spec.jsx
index 6d63f862d9..41352ef74a 100644
--- a/test/components/SingleDatePicker_spec.jsx
+++ b/test/components/SingleDatePicker_spec.jsx
@@ -460,6 +460,23 @@ describe('SingleDatePicker', () => {
         wrapper.instance().onOutsideClick();
         expect(onFocusChangeStub.getCall(0).args[0].focused).to.equal(false);
       });
+
+      it('calls props.onClose with { date: "08-06-2019" } as arg', () => {
+        const onFocusChangeStub = sinon.stub();
+        const onCloseStub = sinon.stub();
+        const wrapper = shallow((
+          <SingleDatePicker
+            id="date"
+            onClose={onCloseStub}
+            onDateChange={() => {}}
+            onFocusChange={onFocusChangeStub}
+            focused
+            date="08-06-2019"
+          />
+        )).dive();
+        wrapper.instance().onOutsideClick();
+        expect(onCloseStub.getCall(0).args[0].date).to.equal("08-06-2019");
+      });
     });
   });
 

From 3290bb4e9d9c741e283adcc7d74fb4875bc827ca Mon Sep 17 00:00:00 2001
From: alok <alok.takshak@gmail.com>
Date: Sat, 8 Jun 2019 14:45:55 +0530
Subject: [PATCH 472/618] resolved string linting in  test case

---
 test/components/SingleDatePicker_spec.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/components/SingleDatePicker_spec.jsx b/test/components/SingleDatePicker_spec.jsx
index 41352ef74a..3b05e5e421 100644
--- a/test/components/SingleDatePicker_spec.jsx
+++ b/test/components/SingleDatePicker_spec.jsx
@@ -475,7 +475,7 @@ describe('SingleDatePicker', () => {
           />
         )).dive();
         wrapper.instance().onOutsideClick();
-        expect(onCloseStub.getCall(0).args[0].date).to.equal("08-06-2019");
+        expect(onCloseStub.getCall(0).args[0].date).to.equal('08-06-2019');
       });
     });
   });

From 9cfd74e5070404823bcb2ac0c50101c917183cab Mon Sep 17 00:00:00 2001
From: Joe Lencioni <joe.lencioni@airbnb.com>
Date: Wed, 26 Jun 2019 11:50:02 -0700
Subject: [PATCH 473/618] =?UTF-8?q?Update=20karma=203=20=E2=86=92=204,=20m?=
 =?UTF-8?q?ocha=203=20=E2=86=92=206,=20nyc=2012=20=E2=86=92=2014,=20sinon?=
 =?UTF-8?q?=206=20=E2=86=92=207?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json    | 10 +++++-----
 test/mocha.opts |  3 ++-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 8970d7badc..1cfe5e66d2 100644
--- a/package.json
+++ b/package.json
@@ -83,18 +83,18 @@
     "git-directory-deploy": "^1.5.1",
     "imports-loader": "^0.8.0",
     "in-publish": "^2.0.0",
-    "karma": "^3.1.4",
+    "karma": "^4.1.0",
     "karma-chai": "^0.1.0",
     "karma-firefox-launcher": "^1.1.0",
     "karma-mocha": "^1.3.0",
     "karma-sinon": "^1.0.5",
-    "karma-webpack": "^4.0.0-rc.2",
-    "mocha": "^3.5.3",
+    "karma-webpack": "^4.0.2",
+    "mocha": "^6.1.4",
     "mocha-wrap": "^2.1.2",
     "moment": "^2.24.0",
     "moment-jalaali": "^0.7.4",
     "node-sass": "^4.12.0",
-    "nyc": "^12.0.2",
+    "nyc": "^14.1.1",
     "raw-loader": "^0.5.1",
     "react": "^0.14 || ^15.5.4 || ^16.1.1",
     "react-dom": "^0.14 || ^15.5.4 || ^16.1.1",
@@ -103,7 +103,7 @@
     "rimraf": "^2.6.3",
     "safe-publish-latest": "^1.1.2",
     "sass-loader": "^7.1.0",
-    "sinon": "^6.3.5",
+    "sinon": "^7.3.2",
     "sinon-sandbox": "^2.0.0",
     "style-loader": "^0.20.3",
     "webpack": "^4.31.0",
diff --git a/test/mocha.opts b/test/mocha.opts
index 670077bcd8..b2d2150ca3 100644
--- a/test/mocha.opts
+++ b/test/mocha.opts
@@ -1,4 +1,5 @@
+--extension js
+--extension jsx
 --require @babel/register
---compilers js:@babel/register,jsx:@babel/register
 --require airbnb-js-shims
 --recursive

From 13ee10730d6c0522891e47c206fe9aa1d60a5714 Mon Sep 17 00:00:00 2001
From: mapkeji <mapkeji26@gmail.com>
Date: Wed, 26 Jun 2019 11:31:58 +0300
Subject: [PATCH 474/618] Fix-Start-Date-Style

---
 src/components/DayPickerRangeController.jsx   |  2 +-
 .../DayPickerRangeController_spec.jsx         | 20 +++++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index b4db0fd3e8..169f05b85d 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -1085,7 +1085,7 @@ export default class DayPickerRangeController extends React.PureComponent {
 
   isInSelectedSpan(day) {
     const { startDate, endDate } = this.props;
-    return day.isBetween(startDate, endDate);
+    return day.isBetween(startDate, endDate, 'days');
   }
 
   isLastInRange(day) {
diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index c6c0435d2a..5e0506bd3a 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -4249,6 +4249,26 @@ describe('DayPickerRangeController', () => {
         expect(wrapper.instance().isInSelectedSpan(testDate)).to.equal(true);
       });
 
+      it('returns false if arg = props.startDate && arg < 12', () => {
+        const endDate = moment(today).add(5, 'days');
+        const wrapper = shallow(<DayPickerRangeController
+          startDate={today}
+          endDate={endDate}
+        />);
+        const testDate = moment(today.hours(10));
+        expect(wrapper.instance().isInSelectedSpan(testDate)).to.equal(false);
+      });
+
+      it('returns false if arg = props.startDate && arg > 12', () => {
+        const endDate = moment(today).add(5, 'days');
+        const wrapper = shallow(<DayPickerRangeController
+          startDate={today}
+          endDate={endDate}
+        />);
+        const testDate = moment(today.hours(16));
+        expect(wrapper.instance().isInSelectedSpan(testDate)).to.equal(false);
+      });
+
       it('returns false if arg < props.startDate', () => {
         const endDate = moment(today).add(5, 'days');
         const wrapper = shallow(<DayPickerRangeController

From 121fc443631efaea3e2dbee80a5695c0666599ea Mon Sep 17 00:00:00 2001
From: Joe Lencioni <joe.lencioni@airbnb.com>
Date: Wed, 26 Jun 2019 12:31:10 -0700
Subject: [PATCH 475/618] Version 20.2.5

---
 CHANGELOG.md | 8 ++++++++
 package.json | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d7e6010da5..9add23ac75 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,14 @@
 - []  ([#](https://github.com/airbnb/react-dates/pull/))
 -->
 
+## 20.2.5
+- [fix] Defer day focusing until next animation frame ([#1707](https://github.com/airbnb/react-dates/pull/1707))
+- [fix] Fix startDate style (@mmarkelov, [#1710](https://github.com/airbnb/react-dates/pull/1710))
+- [fix] Pass correct props to SingleDatePicker on close (@AlokTakshak, [#1678](https://github.com/airbnb/react-dates/pull/1678))
+- [dev] Update blocked navigation (min/maxDate) stories (@ianduvall, [#1598](https://github.com/airbnb/react-dates/pull/1598))
+- [dev] Add positioning to custom navigation in stories (@dougmacknz, [#1573](https://github.com/airbnb/react-dates/pull/1573))
+- [dev] Update karma 3 → 4, mocha 3 → 6, nyc 12 → 14, sinon 6 → 7, eslint 5 → 6 ([#1713](https://github.com/airbnb/react-dates/pull/1713), [#1712](https://github.com/airbnb/react-dates/pull/1713))
+
 ## 20.2.4
 - [fix] Replace react-addons-shallow-compare with enzyme-shallow-equal (bf7e3347702f)
 - [fix] Optimize SVG assets ([#1690](https://github.com/airbnb/react-dates/pull/1690))
diff --git a/package.json b/package.json
index 1cfe5e66d2..6f1527a29e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "20.2.4",
+  "version": "20.2.5",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From f19a6e74201df8c55a45ad570f4f7094456e93f2 Mon Sep 17 00:00:00 2001
From: Minh Nguyen <minhnguyenxx@gmail.com>
Date: Thu, 25 Jul 2019 12:45:29 +0100
Subject: [PATCH 476/618] Bump the dependency on react-with-styles to ^3.2.3

This closes #1198, closes #1493.
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 6f1527a29e..b44cd62133 100644
--- a/package.json
+++ b/package.json
@@ -124,7 +124,7 @@
     "react-outside-click-handler": "^1.2.0",
     "react-portal": "^4.1.5",
     "react-with-direction": "^1.3.0",
-    "react-with-styles": "^3.2.0",
+    "react-with-styles": "^3.2.3",
     "react-with-styles-interface-css": "^4.0.2"
   },
   "peerDependencies": {

From fd1595d18036b83212d7a61f5ea2d54c01a88848 Mon Sep 17 00:00:00 2001
From: mmarkelov <maks-markel@mail.ru>
Date: Sat, 27 Jul 2019 19:34:03 +0300
Subject: [PATCH 477/618] Optimize setState dayPickerContainerStyles in
 responsivizePickerPosition function

---
 src/components/DateRangePicker.jsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index fa9868cc5a..bdfb3274e4 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -318,7 +318,11 @@ class DateRangePicker extends React.PureComponent {
   responsivizePickerPosition() {
     // It's possible the portal props have been changed in response to window resizes
     // So let's ensure we reset this back to the base state each time
-    this.setState({ dayPickerContainerStyles: {} });
+    const { dayPickerContainerStyles } = this.state;
+
+    if (Object.keys(dayPickerContainerStyles).length > 0) {
+      this.setState({ dayPickerContainerStyles: {} });
+    }
 
     if (!this.isOpened()) {
       return;
@@ -332,7 +336,6 @@ class DateRangePicker extends React.PureComponent {
       withFullScreenPortal,
       appendToBody,
     } = this.props;
-    const { dayPickerContainerStyles } = this.state;
 
     const isAnchoredLeft = anchorDirection === ANCHOR_LEFT;
     if (!withPortal && !withFullScreenPortal) {

From 74447a744cafe5c4e0b0255936119465104b4339 Mon Sep 17 00:00:00 2001
From: edraitsev <ddrrai@gmail.com>
Date: Sat, 27 Jul 2019 21:17:37 +0200
Subject: [PATCH 478/618] fixup: Added tests for screenReaderMessage

---
 .../components/SingleDatePickerInput_spec.jsx | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/test/components/SingleDatePickerInput_spec.jsx b/test/components/SingleDatePickerInput_spec.jsx
index 7d4935c4ee..3914360c43 100644
--- a/test/components/SingleDatePickerInput_spec.jsx
+++ b/test/components/SingleDatePickerInput_spec.jsx
@@ -4,6 +4,8 @@ import { shallow } from 'enzyme';
 import sinon from 'sinon-sandbox';
 
 import SingleDatePickerInput from '../../src/components/SingleDatePickerInput';
+import DateInput from '../../src/components/DateInput';
+import { SingleDatePickerInputPhrases } from '../../src/defaultPhrases';
 
 describe('SingleDatePickerInput', () => {
   describe('render', () => {
@@ -95,4 +97,33 @@ describe('SingleDatePickerInput', () => {
       });
     });
   });
+
+  describe('screen reader message', () => {
+    describe('props.screenReaderMessage is falsy', () => {
+      it('default value is passed to DateInput', () => {
+        const wrapper = shallow(<SingleDatePickerInput id="date" />).dive();
+        const dateInput = wrapper.find(DateInput);
+        expect(dateInput).to.have.lengthOf(1);
+        expect(dateInput.props()).to.have.property(
+          'screenReaderMessage',
+          SingleDatePickerInputPhrases.keyboardForwardNavigationInstructions,
+        );
+      });
+    });
+
+    describe('props.screenReaderMessage is truthy', () => {
+      it('prop value is passed to DateInput', () => {
+        const message = 'test message';
+        const wrapper = shallow((
+          <SingleDatePickerInput
+            id="date"
+            screenReaderMessage={message}
+          />
+        )).dive();
+        const dateInput = wrapper.find(DateInput);
+        expect(dateInput).to.have.lengthOf(1);
+        expect(dateInput.props()).to.have.property('screenReaderMessage', message);
+      });
+    });
+  });
 });

From 9440e286b7e34a61bf4eb08595c701e3acbc3616 Mon Sep 17 00:00:00 2001
From: Rodolphe Courtier <rodolphe.courtier@airbnb.com>
Date: Thu, 8 Aug 2019 11:43:58 -0700
Subject: [PATCH 479/618] [a11y] Add `aria-roledescription`

As per the recommendation of the W3C, adding an `aria-roledescription`
to describe the role of the datepicker application. Since this is
supposed to be a human-readable and localized description of the element
it's passed in through the existing phrases prop, and a default value
was included.
---
 src/components/DayPicker.jsx | 1 +
 src/defaultPhrases.js        | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 8501e2863e..c954226a76 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -1027,6 +1027,7 @@ class DayPicker extends React.PureComponent {
     return (
       <div
         role="application"
+        aria-roledescription={phrases.roleDescription}
         aria-label={phrases.calendarLabel}
         {...css(
           styles.DayPicker,
diff --git a/src/defaultPhrases.js b/src/defaultPhrases.js
index 4c5acb441b..c1ea0734bf 100644
--- a/src/defaultPhrases.js
+++ b/src/defaultPhrases.js
@@ -1,4 +1,5 @@
 const calendarLabel = 'Calendar';
+const roleDescription = 'datepicker';
 const closeDatePicker = 'Close';
 const focusStartDate = 'Interact with the calendar and add the check-in date for your trip.';
 const clearDate = 'Clear Date';
@@ -35,6 +36,7 @@ const dateIsSelectedAsEndDate = ({ date }) => `Selected as end date. ${date}`;
 
 export default {
   calendarLabel,
+  roleDescription,
   closeDatePicker,
   focusStartDate,
   clearDate,
@@ -71,6 +73,7 @@ export default {
 
 export const DateRangePickerPhrases = {
   calendarLabel,
+  roleDescription,
   closeDatePicker,
   clearDates,
   focusStartDate,
@@ -112,6 +115,7 @@ export const DateRangePickerInputPhrases = {
 
 export const SingleDatePickerPhrases = {
   calendarLabel,
+  roleDescription,
   closeDatePicker,
   clearDate,
   jumpToPrevMonth,
@@ -148,6 +152,7 @@ export const SingleDatePickerInputPhrases = {
 
 export const DayPickerPhrases = {
   calendarLabel,
+  roleDescription,
   jumpToPrevMonth,
   jumpToNextMonth,
   keyboardShortcuts,

From 8c0ba9886a9f8410f65e65153e5a02e8c987ba08 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Thu, 15 Aug 2019 12:36:34 -0700
Subject: [PATCH 480/618] Version 20.3.0

---
 CHANGELOG.md | 5 +++++
 package.json | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9add23ac75..8d443c6a37 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,11 @@
 - []  ([#](https://github.com/airbnb/react-dates/pull/))
 -->
 
+## 20.3.0
+- [fix] Optimize setState dayPickerContainerStyles in responsivizePickerPosition ([#1735](https://github.com/airbnb/react-dates/pull/1735))
+- [fix] Stop calendar blinking on DateRangePickerInput focus switch (fixes #1523) ([#1553](https://github.com/airbnb/react-dates/pull/1553))
+- [new] [a11y] Add `aria-roledescription` ([#1746](https://github.com/airbnb/react-dates/pull/1746))
+
 ## 20.2.5
 - [fix] Defer day focusing until next animation frame ([#1707](https://github.com/airbnb/react-dates/pull/1707))
 - [fix] Fix startDate style (@mmarkelov, [#1710](https://github.com/airbnb/react-dates/pull/1710))
diff --git a/package.json b/package.json
index b44cd62133..0410862c50 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "20.2.5",
+  "version": "20.3.0",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 8a6d2207c0007649a7d91bfd605a2379af3285b5 Mon Sep 17 00:00:00 2001
From: Nora Tarano <nora.tarano@airbnb.com>
Date: Thu, 15 Aug 2019 16:56:08 -0700
Subject: [PATCH 481/618] Remove all direct imports of css in favor of injected
 prop

---
 examples/PresetDateRangePicker.jsx            | 4 ++--
 src/components/CalendarDay.jsx                | 3 ++-
 src/components/CalendarMonth.jsx              | 3 ++-
 src/components/CalendarMonthGrid.jsx          | 3 ++-
 src/components/CustomizableCalendarDay.jsx    | 3 ++-
 src/components/DateInput.jsx                  | 3 ++-
 src/components/DateRangePicker.jsx            | 4 +++-
 src/components/DateRangePickerInput.jsx       | 3 ++-
 src/components/DayPicker.jsx                  | 4 +++-
 src/components/DayPickerKeyboardShortcuts.jsx | 3 ++-
 src/components/DayPickerNavigation.jsx        | 3 ++-
 src/components/KeyboardShortcutRow.jsx        | 3 ++-
 src/components/SingleDatePicker.jsx           | 4 +++-
 src/components/SingleDatePickerInput.jsx      | 3 ++-
 14 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/examples/PresetDateRangePicker.jsx b/examples/PresetDateRangePicker.jsx
index ce8640a79b..c02ea3e123 100644
--- a/examples/PresetDateRangePicker.jsx
+++ b/examples/PresetDateRangePicker.jsx
@@ -4,7 +4,7 @@ import momentPropTypes from 'react-moment-proptypes';
 import moment from 'moment';
 import omit from 'lodash/omit';
 
-import { withStyles, withStylesPropTypes, css } from 'react-with-styles';
+import { withStyles, withStylesPropTypes } from 'react-with-styles';
 
 import DateRangePicker from '../src/components/DateRangePicker';
 
@@ -123,7 +123,7 @@ class DateRangePickerWrapper extends React.Component {
   }
 
   renderDatePresets() {
-    const { presets, styles } = this.props;
+    const { presets, styles, css } = this.props;
     const { startDate, endDate } = this.state;
 
     return (
diff --git a/src/components/CalendarDay.jsx b/src/components/CalendarDay.jsx
index 7e630093bf..836a26e0cf 100644
--- a/src/components/CalendarDay.jsx
+++ b/src/components/CalendarDay.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import momentPropTypes from 'react-moment-proptypes';
 import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
-import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
+import { withStyles, withStylesPropTypes } from 'react-with-styles';
 import moment from 'moment';
 import raf from 'raf';
 
@@ -107,6 +107,7 @@ class CalendarDay extends React.PureComponent {
       tabIndex,
       styles,
       phrases,
+      css,
     } = this.props;
 
     if (!day) return <td />;
diff --git a/src/components/CalendarMonth.jsx b/src/components/CalendarMonth.jsx
index 76e540a1c7..508ff8947e 100644
--- a/src/components/CalendarMonth.jsx
+++ b/src/components/CalendarMonth.jsx
@@ -4,7 +4,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import momentPropTypes from 'react-moment-proptypes';
 import { forbidExtraProps, mutuallyExclusiveProps, nonNegativeInteger } from 'airbnb-prop-types';
-import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
+import { withStyles, withStylesPropTypes } from 'react-with-styles';
 import moment from 'moment';
 
 import { CalendarDayPhrases } from '../defaultPhrases';
@@ -152,6 +152,7 @@ class CalendarMonth extends React.PureComponent {
 
   render() {
     const {
+      css,
       dayAriaLabelFormat,
       daySize,
       focusedDate,
diff --git a/src/components/CalendarMonthGrid.jsx b/src/components/CalendarMonthGrid.jsx
index 0954594bd9..b876e181aa 100644
--- a/src/components/CalendarMonthGrid.jsx
+++ b/src/components/CalendarMonthGrid.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import momentPropTypes from 'react-moment-proptypes';
 import { forbidExtraProps, mutuallyExclusiveProps, nonNegativeInteger } from 'airbnb-prop-types';
-import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
+import { withStyles, withStylesPropTypes } from 'react-with-styles';
 import moment from 'moment';
 import { addEventListener } from 'consolidated-events';
 
@@ -265,6 +265,7 @@ class CalendarMonthGrid extends React.PureComponent {
       transitionDuration,
       verticalBorderSpacing,
       setMonthTitleHeight,
+      css,
     } = this.props;
 
     const { months } = this.state;
diff --git a/src/components/CustomizableCalendarDay.jsx b/src/components/CustomizableCalendarDay.jsx
index 2a3ee15752..97b983af57 100644
--- a/src/components/CustomizableCalendarDay.jsx
+++ b/src/components/CustomizableCalendarDay.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import momentPropTypes from 'react-moment-proptypes';
 import { forbidExtraProps, nonNegativeInteger, or } from 'airbnb-prop-types';
-import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
+import { withStyles, withStylesPropTypes } from 'react-with-styles';
 import moment from 'moment';
 import raf from 'raf';
 
@@ -272,6 +272,7 @@ class CustomizableCalendarDay extends React.PureComponent {
 
   render() {
     const {
+      css,
       day,
       ariaLabelFormat,
       daySize,
diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
index d50ecd9411..a119ac91c2 100644
--- a/src/components/DateInput.jsx
+++ b/src/components/DateInput.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
-import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
+import { withStyles, withStylesPropTypes } from 'react-with-styles';
 import throttle from 'lodash/throttle';
 import isTouchDevice from 'is-touch-device';
 
@@ -190,6 +190,7 @@ class DateInput extends React.PureComponent {
       block,
       styles,
       theme: { reactDates },
+      css,
     } = this.props;
 
     const value = dateString || displayValue || '';
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index bdfb3274e4..3e2d69f409 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import moment from 'moment';
-import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
+import { withStyles, withStylesPropTypes } from 'react-with-styles';
 import { Portal } from 'react-portal';
 import { forbidExtraProps } from 'airbnb-prop-types';
 import { addEventListener } from 'consolidated-events';
@@ -392,6 +392,7 @@ class DateRangePicker extends React.PureComponent {
   renderDayPicker() {
     const {
       anchorDirection,
+      css,
       openDirection,
       isDayBlocked,
       isDayHighlighted,
@@ -542,6 +543,7 @@ class DateRangePicker extends React.PureComponent {
 
   render() {
     const {
+      css,
       startDate,
       startDateId,
       startDatePlaceholderText,
diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index 2389595852..5989b4f94f 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
-import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
+import { withStyles, withStylesPropTypes } from 'react-with-styles';
 
 import { DateRangePickerInputPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
@@ -132,6 +132,7 @@ const defaultProps = {
 
 function DateRangePickerInput({
   children,
+  css,
   startDate,
   startDateId,
   startDatePlaceholderText,
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index c954226a76..3f7e6b41fe 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { forbidExtraProps, mutuallyExclusiveProps, nonNegativeInteger } from 'airbnb-prop-types';
-import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
+import { withStyles, withStylesPropTypes } from 'react-with-styles';
 
 import moment from 'moment';
 import throttle from 'lodash/throttle';
@@ -856,6 +856,7 @@ class DayPicker extends React.PureComponent {
       orientation,
       weekDayFormat,
       styles,
+      css,
     } = this.props;
     const { calendarMonthWidth } = this.state;
     const verticalScrollable = orientation === VERTICAL_SCROLLABLE;
@@ -918,6 +919,7 @@ class DayPicker extends React.PureComponent {
     } = this.state;
 
     const {
+      css,
       enableOutsideDays,
       numberOfMonths,
       orientation,
diff --git a/src/components/DayPickerKeyboardShortcuts.jsx b/src/components/DayPickerKeyboardShortcuts.jsx
index ffb8e83a8f..e257e2097e 100644
--- a/src/components/DayPickerKeyboardShortcuts.jsx
+++ b/src/components/DayPickerKeyboardShortcuts.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { forbidExtraProps } from 'airbnb-prop-types';
-import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
+import { withStyles, withStylesPropTypes } from 'react-with-styles';
 
 import { DayPickerKeyboardShortcutsPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
@@ -162,6 +162,7 @@ class DayPickerKeyboardShortcuts extends React.PureComponent {
     const {
       block,
       buttonLocation,
+      css,
       showKeyboardShortcutsPanel,
       closeKeyboardShortcutsPanel,
       styles,
diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index 8f2f344604..689f3b019a 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { forbidExtraProps } from 'airbnb-prop-types';
-import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
+import { withStyles, withStylesPropTypes } from 'react-with-styles';
 
 import { DayPickerNavigationPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
@@ -51,6 +51,7 @@ const defaultProps = {
 };
 
 function DayPickerNavigation({
+  css,
   disablePrev,
   disableNext,
   navPrev,
diff --git a/src/components/KeyboardShortcutRow.jsx b/src/components/KeyboardShortcutRow.jsx
index 7e3d2401c4..fa719c07ac 100644
--- a/src/components/KeyboardShortcutRow.jsx
+++ b/src/components/KeyboardShortcutRow.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { forbidExtraProps } from 'airbnb-prop-types';
-import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
+import { withStyles, withStylesPropTypes } from 'react-with-styles';
 
 const propTypes = forbidExtraProps({
   ...withStylesPropTypes,
@@ -16,6 +16,7 @@ const defaultProps = {
 };
 
 function KeyboardShortcutRow({
+  css,
   unicode,
   label,
   action,
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index c07a2a8092..d636721551 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import moment from 'moment';
-import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
+import { withStyles, withStylesPropTypes } from 'react-with-styles';
 import { Portal } from 'react-portal';
 import { forbidExtraProps } from 'airbnb-prop-types';
 import { addEventListener } from 'consolidated-events';
@@ -384,6 +384,7 @@ class SingleDatePicker extends React.PureComponent {
   renderDayPicker() {
     const {
       anchorDirection,
+      css,
       openDirection,
       onDateChange,
       date,
@@ -519,6 +520,7 @@ class SingleDatePicker extends React.PureComponent {
 
   render() {
     const {
+      css,
       id,
       placeholder,
       ariaLabel,
diff --git a/src/components/SingleDatePickerInput.jsx b/src/components/SingleDatePickerInput.jsx
index af7b4d6731..88dbac23ff 100644
--- a/src/components/SingleDatePickerInput.jsx
+++ b/src/components/SingleDatePickerInput.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
-import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
+import { withStyles, withStylesPropTypes } from 'react-with-styles';
 
 import { SingleDatePickerInputPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
@@ -95,6 +95,7 @@ const defaultProps = {
 function SingleDatePickerInput({
   id,
   children,
+  css,
   placeholder,
   ariaLabel,
   displayValue,

From a9cee419fee7b5440f36ab5481052aa1bb57320e Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Tue, 13 Aug 2019 09:03:18 -0700
Subject: [PATCH 482/618] [Dev Deps] update `@babel/*`, `@storybook/*`,
 `babel-plugin-inline-svg`, `babel-plugin-istanbul`, `babel-preset-airbnb`,
 `eslint-config-airbnb` to v18 (plus peer deps), `eslint` to v6;
 `eslint-plugin-react-with-styles`, `karma`, `karma-firefox-launcher`,
 `mocha`, `safe-publish-latest`, `sass-loader`, `sinon`, `sinon-sandbox`,
 `coveralls`, `enzyme-adapter-react-helper`

---
 .eslintrc                                     | 23 +++++++-
 package.json                                  | 55 ++++++++++---------
 src/components/CalendarMonth.jsx              |  2 +-
 src/components/CalendarMonthGrid.jsx          |  2 +-
 src/components/DateRangePicker.jsx            |  2 +-
 .../DateRangePickerInputController.jsx        |  2 +-
 src/components/DayPickerRangeController.jsx   | 46 ++++++++--------
 .../DayPickerSingleDateController.jsx         | 30 +++++-----
 src/components/SingleDatePicker.jsx           |  2 +-
 .../SingleDatePickerInputController.jsx       |  2 +-
 src/utils/disableScroll.js                    |  2 +-
 src/utils/getSelectedDateOffset.js            |  2 +-
 src/utils/modifiers.js                        |  4 +-
 test/.eslintrc                                | 20 -------
 test/browser-main.js                          |  2 +-
 test/components/CalendarDay_spec.jsx          |  2 +-
 test/components/CalendarMonthGrid_spec.jsx    |  4 +-
 .../CustomizableCalendarDay_spec.jsx          |  2 +-
 .../DateRangePickerInputController_spec.jsx   |  4 +-
 test/components/DateRangePicker_spec.jsx      |  4 +-
 .../DayPickerRangeController_spec.jsx         | 50 ++++++++---------
 .../DayPickerSingleDateController_spec.jsx    |  2 +-
 test/utils/getCalendarMonthWeeks_spec.js      | 16 +++---
 test/utils/getPhrasePropTypes_spec.js         |  2 +-
 test/utils/getSelectedDateOffset_spec.js      |  8 +--
 test/utils/getVisibleDays_spec.js             |  2 +-
 26 files changed, 145 insertions(+), 147 deletions(-)
 delete mode 100644 test/.eslintrc

diff --git a/.eslintrc b/.eslintrc
index 7e07f00e93..cd5524f872 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -20,15 +20,32 @@
 
     "jsx-a11y/click-events-have-key-events": 1, // TODO: enable
 
-    "react/no-did-mount-set-state": 0, // necessary for server-rendering
-
     "react-with-styles/no-unused-styles": 2,
 
     "no-restricted-imports": 0, // TODO: enable with full RTL support
 
-    "react/jsx-one-expression-per-line": 1, // TODO: enable once fixed upstream
+    "react/jsx-props-no-spreading": 0, // TODO: re-evaluate
   },
 
+  "overrides": [
+    {
+      "files": "test/**/*",
+      "env": {
+        "mocha": true,
+      },
+      "extends": "airbnb",
+      "rules": {
+        "react/jsx-props-no-spreading": 0,
+        //"import/no-extraneous-dependencies": [2, {
+          //"devDependencies": true
+        //}],
+        "indent": [2, 2, {
+          "MemberExpression": "off"
+        }],
+      },
+    },
+  ],
+
   "settings": {
     "propWrapperFunctions": ["forbidExtraProps", "exact", "Object.freeze"],
   }
diff --git a/package.json b/package.json
index 0410862c50..d3560961c7 100644
--- a/package.json
+++ b/package.json
@@ -51,45 +51,45 @@
   },
   "homepage": "https://github.com/airbnb/react-dates#readme",
   "devDependencies": {
-    "@babel/cli": "^7.4.4",
-    "@babel/core": "^7.4.5",
-    "@babel/register": "^7.4.4",
-    "@storybook/addon-actions": "^5.1.1",
-    "@storybook/addon-info": "^5.1.1",
-    "@storybook/addon-links": "^5.1.1",
-    "@storybook/addon-options": "^5.1.1",
-    "@storybook/react": "^5.1.1",
-    "acorn": "^6.1.1",
+    "@babel/cli": "^7.5.5",
+    "@babel/core": "^7.5.5",
+    "@babel/register": "^7.5.5",
+    "@storybook/addon-actions": "^5.1.11",
+    "@storybook/addon-info": "^5.1.11",
+    "@storybook/addon-links": "^5.1.11",
+    "@storybook/addon-options": "^5.1.11",
+    "@storybook/react": "^5.1.11",
     "airbnb-js-shims": "^2.2.0",
     "aphrodite": "^2.3.1",
     "babel-loader": "^8.0.6",
     "babel-plugin-inline-react-svg": "^1.1.0",
-    "babel-plugin-inline-svg": "^1.0.0",
-    "babel-plugin-istanbul": "^5.1.4",
+    "babel-plugin-inline-svg": "^1.0.1",
+    "babel-plugin-istanbul": "^5.2.0",
     "babel-plugin-transform-replace-object-assign": "^2.0.0",
-    "babel-preset-airbnb": "^4.0.0",
+    "babel-preset-airbnb": "^4.0.1",
     "chai": "^4.2.0",
     "clean-css": "^4.2.1",
-    "coveralls": "^3.0.3",
+    "coveralls": "^3.0.6",
     "cross-env": "^5.2.0",
     "enzyme": "^3.10.0",
-    "enzyme-adapter-react-helper": "^1.3.5",
-    "eslint": "^6.0.1",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-plugin-import": "^2.17.3",
-    "eslint-plugin-jsx-a11y": "^6.2.1",
-    "eslint-plugin-react": "^7.13.0",
-    "eslint-plugin-react-with-styles": "^2.1.0",
+    "enzyme-adapter-react-helper": "^1.3.6",
+    "eslint": "^6.2.1",
+    "eslint-config-airbnb": "^18.0.1",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.14.3",
+    "eslint-plugin-react-hooks": "^1.7.0",
+    "eslint-plugin-react-with-styles": "^2.2.0",
     "git-directory-deploy": "^1.5.1",
     "imports-loader": "^0.8.0",
     "in-publish": "^2.0.0",
-    "karma": "^4.1.0",
+    "karma": "^4.2.0",
     "karma-chai": "^0.1.0",
-    "karma-firefox-launcher": "^1.1.0",
+    "karma-firefox-launcher": "^1.2.0",
     "karma-mocha": "^1.3.0",
     "karma-sinon": "^1.0.5",
     "karma-webpack": "^4.0.2",
-    "mocha": "^6.1.4",
+    "mocha": "^3.5.3",
     "mocha-wrap": "^2.1.2",
     "moment": "^2.24.0",
     "moment-jalaali": "^0.7.4",
@@ -101,11 +101,12 @@
     "react-with-styles-interface-aphrodite": "^5.0.1",
     "react-with-styles-interface-css-compiler": "^2.0.0",
     "rimraf": "^2.6.3",
-    "safe-publish-latest": "^1.1.2",
-    "sass-loader": "^7.1.0",
-    "sinon": "^7.3.2",
-    "sinon-sandbox": "^2.0.0",
+    "safe-publish-latest": "^1.1.3",
+    "sass-loader": "^7.2.0",
+    "sinon": "^7.4.1",
+    "sinon-sandbox": "^2.0.5",
     "style-loader": "^0.20.3",
+    "typescript": "*",
     "webpack": "^4.31.0",
     "why-did-you-update": "^1.0.6"
   },
diff --git a/src/components/CalendarMonth.jsx b/src/components/CalendarMonth.jsx
index 508ff8947e..910b963905 100644
--- a/src/components/CalendarMonth.jsx
+++ b/src/components/CalendarMonth.jsx
@@ -74,7 +74,7 @@ const defaultProps = {
   onMonthSelect() {},
   onYearSelect() {},
   renderMonthText: null,
-  renderCalendarDay: props => (<CalendarDay {...props} />),
+  renderCalendarDay: (props) => (<CalendarDay {...props} />),
   renderDayContents: null,
   renderMonthElement: null,
   firstDayOfWeek: null,
diff --git a/src/components/CalendarMonthGrid.jsx b/src/components/CalendarMonthGrid.jsx
index b876e181aa..7d23d972c1 100644
--- a/src/components/CalendarMonthGrid.jsx
+++ b/src/components/CalendarMonthGrid.jsx
@@ -173,7 +173,7 @@ class CalendarMonthGrid extends React.PureComponent {
     const momentLocale = moment.locale();
     if (this.locale !== momentLocale) {
       this.locale = momentLocale;
-      newMonths = newMonths.map(m => m.locale(this.locale));
+      newMonths = newMonths.map((m) => m.locale(this.locale));
     }
 
     this.setState({
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 3e2d69f409..d1af316264 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -112,7 +112,7 @@ const defaultProps = {
   minimumNights: 1,
   enableOutsideDays: false,
   isDayBlocked: () => false,
-  isOutsideRange: day => !isInclusivelyAfterDay(day, moment()),
+  isOutsideRange: (day) => !isInclusivelyAfterDay(day, moment()),
   isDayHighlighted: () => false,
 
   // internationalization
diff --git a/src/components/DateRangePickerInputController.jsx b/src/components/DateRangePickerInputController.jsx
index a504e3cc74..681beb2a48 100644
--- a/src/components/DateRangePickerInputController.jsx
+++ b/src/components/DateRangePickerInputController.jsx
@@ -117,7 +117,7 @@ const defaultProps = {
   reopenPickerOnClearDates: false,
   withFullScreenPortal: false,
   minimumNights: 1,
-  isOutsideRange: day => !isInclusivelyAfterDay(day, moment()),
+  isOutsideRange: (day) => !isInclusivelyAfterDay(day, moment()),
   displayFormat: () => moment.localeData().longDateFormat('L'),
 
   onFocusChange() {},
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 169f05b85d..42b0729e45 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -193,23 +193,23 @@ export default class DayPickerRangeController extends React.PureComponent {
     this.isTouchDevice = isTouchDevice();
     this.today = moment();
     this.modifiers = {
-      today: day => this.isToday(day),
-      blocked: day => this.isBlocked(day),
-      'blocked-calendar': day => props.isDayBlocked(day),
-      'blocked-out-of-range': day => props.isOutsideRange(day),
-      'highlighted-calendar': day => props.isDayHighlighted(day),
-      valid: day => !this.isBlocked(day),
-      'selected-start': day => this.isStartDate(day),
-      'selected-end': day => this.isEndDate(day),
-      'blocked-minimum-nights': day => this.doesNotMeetMinimumNights(day),
-      'selected-span': day => this.isInSelectedSpan(day),
-      'last-in-range': day => this.isLastInRange(day),
-      hovered: day => this.isHovered(day),
-      'hovered-span': day => this.isInHoveredSpan(day),
-      'hovered-offset': day => this.isInHoveredSpan(day),
-      'after-hovered-start': day => this.isDayAfterHoveredStartDate(day),
-      'first-day-of-week': day => this.isFirstDayOfWeek(day),
-      'last-day-of-week': day => this.isLastDayOfWeek(day),
+      today: (day) => this.isToday(day),
+      blocked: (day) => this.isBlocked(day),
+      'blocked-calendar': (day) => props.isDayBlocked(day),
+      'blocked-out-of-range': (day) => props.isOutsideRange(day),
+      'highlighted-calendar': (day) => props.isDayHighlighted(day),
+      valid: (day) => !this.isBlocked(day),
+      'selected-start': (day) => this.isStartDate(day),
+      'selected-end': (day) => this.isEndDate(day),
+      'blocked-minimum-nights': (day) => this.doesNotMeetMinimumNights(day),
+      'selected-span': (day) => this.isInSelectedSpan(day),
+      'last-in-range': (day) => this.isLastInRange(day),
+      hovered: (day) => this.isHovered(day),
+      'hovered-span': (day) => this.isInHoveredSpan(day),
+      'hovered-offset': (day) => this.isInHoveredSpan(day),
+      'after-hovered-start': (day) => this.isDayAfterHoveredStartDate(day),
+      'first-day-of-week': (day) => this.isFirstDayOfWeek(day),
+      'last-day-of-week': (day) => this.isLastDayOfWeek(day),
       'hovered-start-first-possible-end': (day, hoverDate) => this.isFirstPossibleEndDateForHoveredStartDate(day, hoverDate),
       'hovered-start-blocked-minimum-nights': (day, hoverDate) => this.doesNotMeetMinNightsForHoveredStartDate(day, hoverDate),
     };
@@ -281,17 +281,17 @@ export default class DayPickerRangeController extends React.PureComponent {
     let recomputeDayHighlighted = false;
 
     if (isOutsideRange !== prevIsOutsideRange) {
-      this.modifiers['blocked-out-of-range'] = day => isOutsideRange(day);
+      this.modifiers['blocked-out-of-range'] = (day) => isOutsideRange(day);
       recomputeOutsideRange = true;
     }
 
     if (isDayBlocked !== prevIsDayBlocked) {
-      this.modifiers['blocked-calendar'] = day => isDayBlocked(day);
+      this.modifiers['blocked-calendar'] = (day) => isDayBlocked(day);
       recomputeDayBlocked = true;
     }
 
     if (isDayHighlighted !== prevIsDayHighlighted) {
-      this.modifiers['highlighted-calendar'] = day => isDayHighlighted(day);
+      this.modifiers['highlighted-calendar'] = (day) => isDayHighlighted(day);
       recomputeDayHighlighted = true;
     }
 
@@ -619,7 +619,7 @@ export default class DayPickerRangeController extends React.PureComponent {
 
       if (hasOffset) {
         const start = getSelectedDateOffset(startDateOffset, day);
-        const end = getSelectedDateOffset(endDateOffset, day, rangeDay => rangeDay.add(1, 'day'));
+        const end = getSelectedDateOffset(endDateOffset, day, (rangeDay) => rangeDay.add(1, 'day'));
 
         nextDateOffset = {
           start,
@@ -923,7 +923,7 @@ export default class DayPickerRangeController extends React.PureComponent {
         days.push(currentDay);
       }
 
-      const viableDays = days.filter(day => !this.isBlocked(day));
+      const viableDays = days.filter((day) => !this.isBlocked(day));
 
       if (viableDays.length > 0) {
         ([focusedDate] = viableDays);
@@ -946,7 +946,7 @@ export default class DayPickerRangeController extends React.PureComponent {
   }
 
   getModifiersForDay(day) {
-    return new Set(Object.keys(this.modifiers).filter(modifier => this.modifiers[modifier](day)));
+    return new Set(Object.keys(this.modifiers).filter((modifier) => this.modifiers[modifier](day)));
   }
 
   getStateForNewMonth(nextProps) {
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 6884fef2fe..36b9dd512e 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -154,16 +154,16 @@ export default class DayPickerSingleDateController extends React.PureComponent {
     this.today = moment();
 
     this.modifiers = {
-      today: day => this.isToday(day),
-      blocked: day => this.isBlocked(day),
-      'blocked-calendar': day => props.isDayBlocked(day),
-      'blocked-out-of-range': day => props.isOutsideRange(day),
-      'highlighted-calendar': day => props.isDayHighlighted(day),
-      valid: day => !this.isBlocked(day),
-      hovered: day => this.isHovered(day),
-      selected: day => this.isSelected(day),
-      'first-day-of-week': day => this.isFirstDayOfWeek(day),
-      'last-day-of-week': day => this.isLastDayOfWeek(day),
+      today: (day) => this.isToday(day),
+      blocked: (day) => this.isBlocked(day),
+      'blocked-calendar': (day) => props.isDayBlocked(day),
+      'blocked-out-of-range': (day) => props.isOutsideRange(day),
+      'highlighted-calendar': (day) => props.isDayHighlighted(day),
+      valid: (day) => !this.isBlocked(day),
+      hovered: (day) => this.isHovered(day),
+      selected: (day) => this.isSelected(day),
+      'first-day-of-week': (day) => this.isFirstDayOfWeek(day),
+      'last-day-of-week': (day) => this.isLastDayOfWeek(day),
     };
 
     const { currentMonth, visibleDays } = this.getStateForNewMonth(props);
@@ -218,17 +218,17 @@ export default class DayPickerSingleDateController extends React.PureComponent {
     let recomputeDayHighlighted = false;
 
     if (isOutsideRange !== prevIsOutsideRange) {
-      this.modifiers['blocked-out-of-range'] = day => isOutsideRange(day);
+      this.modifiers['blocked-out-of-range'] = (day) => isOutsideRange(day);
       recomputeOutsideRange = true;
     }
 
     if (isDayBlocked !== prevIsDayBlocked) {
-      this.modifiers['blocked-calendar'] = day => isDayBlocked(day);
+      this.modifiers['blocked-calendar'] = (day) => isDayBlocked(day);
       recomputeDayBlocked = true;
     }
 
     if (isDayHighlighted !== prevIsDayHighlighted) {
-      this.modifiers['highlighted-calendar'] = day => isDayHighlighted(day);
+      this.modifiers['highlighted-calendar'] = (day) => isDayHighlighted(day);
       recomputeDayHighlighted = true;
     }
 
@@ -466,7 +466,7 @@ export default class DayPickerSingleDateController extends React.PureComponent {
         days.push(currentDay);
       }
 
-      const viableDays = days.filter(day => !this.isBlocked(day) && isAfterDay(day, focusedDate));
+      const viableDays = days.filter((day) => !this.isBlocked(day) && isAfterDay(day, focusedDate));
       if (viableDays.length > 0) {
         ([focusedDate] = viableDays);
       }
@@ -488,7 +488,7 @@ export default class DayPickerSingleDateController extends React.PureComponent {
   }
 
   getModifiersForDay(day) {
-    return new Set(Object.keys(this.modifiers).filter(modifier => this.modifiers[modifier](day)));
+    return new Set(Object.keys(this.modifiers).filter((modifier) => this.modifiers[modifier](day)));
   }
 
   getStateForNewMonth(nextProps) {
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index d636721551..6e4b40109f 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -105,7 +105,7 @@ const defaultProps = {
   renderMonthElement: null,
   enableOutsideDays: false,
   isDayBlocked: () => false,
-  isOutsideRange: day => !isInclusivelyAfterDay(day, moment()),
+  isOutsideRange: (day) => !isInclusivelyAfterDay(day, moment()),
   isDayHighlighted: () => {},
 
   // internationalization props
diff --git a/src/components/SingleDatePickerInputController.jsx b/src/components/SingleDatePickerInputController.jsx
index 5777068f1a..2da008ee16 100644
--- a/src/components/SingleDatePickerInputController.jsx
+++ b/src/components/SingleDatePickerInputController.jsx
@@ -97,7 +97,7 @@ const defaultProps = {
 
   keepOpenOnDateSelect: false,
   reopenPickerOnClearDate: false,
-  isOutsideRange: day => !isInclusivelyAfterDay(day, moment()),
+  isOutsideRange: (day) => !isInclusivelyAfterDay(day, moment()),
   displayFormat: () => moment.localeData().longDateFormat('L'),
 
   onClose() {},
diff --git a/src/utils/disableScroll.js b/src/utils/disableScroll.js
index e8c6d506ee..1cf026771a 100644
--- a/src/utils/disableScroll.js
+++ b/src/utils/disableScroll.js
@@ -56,7 +56,7 @@ export function getScrollAncestorsOverflowY(node, acc = new Map()) {
  */
 export default function disableScroll(node) {
   const scrollAncestorsOverflowY = getScrollAncestorsOverflowY(node);
-  const toggle = on => scrollAncestorsOverflowY.forEach((overflowY, ancestor) => {
+  const toggle = (on) => scrollAncestorsOverflowY.forEach((overflowY, ancestor) => {
     ancestor.style.setProperty('overflow-y', on ? 'hidden' : overflowY);
   });
 
diff --git a/src/utils/getSelectedDateOffset.js b/src/utils/getSelectedDateOffset.js
index 6200f9b65d..d5ed045920 100644
--- a/src/utils/getSelectedDateOffset.js
+++ b/src/utils/getSelectedDateOffset.js
@@ -1,4 +1,4 @@
-const defaultModifier = day => day;
+const defaultModifier = (day) => day;
 
 export default function getSelectedDateOffset(fn, day, modifier = defaultModifier) {
   if (!fn) return day;
diff --git a/src/utils/modifiers.js b/src/utils/modifiers.js
index 5f1dbb13fd..d76226bb9e 100644
--- a/src/utils/modifiers.js
+++ b/src/utils/modifiers.js
@@ -25,7 +25,7 @@ export function addModifier(updatedDays, day, modifier, props, state) {
 
   let updatedDaysAfterAddition = { ...updatedDays };
   if (enableOutsideDays) {
-    const monthsToUpdate = Object.keys(visibleDays).filter(monthKey => (
+    const monthsToUpdate = Object.keys(visibleDays).filter((monthKey) => (
       Object.keys(visibleDays[monthKey]).indexOf(iso) > -1
     ));
 
@@ -80,7 +80,7 @@ export function deleteModifier(updatedDays, day, modifier, props, state) {
 
   let updatedDaysAfterDeletion = { ...updatedDays };
   if (enableOutsideDays) {
-    const monthsToUpdate = Object.keys(visibleDays).filter(monthKey => (
+    const monthsToUpdate = Object.keys(visibleDays).filter((monthKey) => (
       Object.keys(visibleDays[monthKey]).indexOf(iso) > -1
     ));
 
diff --git a/test/.eslintrc b/test/.eslintrc
deleted file mode 100644
index 7b52873412..0000000000
--- a/test/.eslintrc
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "globals": {
-    "describe": true,
-    "context": true,
-    "it": true,
-    "before": true,
-    "after": true,
-    "beforeEach": true,
-    "afterEach": true
-  },
-  "extends": "airbnb",
-  "rules": {
-    "import/no-extraneous-dependencies": [2, {
-      "devDependencies": true
-    }],
-    "indent": [2, 2, {
-      "MemberExpression": "off"
-    }],
-  }
-}
diff --git a/test/browser-main.js b/test/browser-main.js
index 7cbfda934e..3f61c7d401 100644
--- a/test/browser-main.js
+++ b/test/browser-main.js
@@ -1,4 +1,4 @@
-const requireAll = requireContext => requireContext.keys().forEach(requireContext);
+const requireAll = (requireContext) => requireContext.keys().forEach(requireContext);
 
 if (typeof window !== 'undefined') {
   requireAll(require.context('./_helpers', true, /.jsx?$/));
diff --git a/test/components/CalendarDay_spec.jsx b/test/components/CalendarDay_spec.jsx
index c0a6281cef..bc968fc746 100644
--- a/test/components/CalendarDay_spec.jsx
+++ b/test/components/CalendarDay_spec.jsx
@@ -28,7 +28,7 @@ describe('CalendarDay', () => {
 
     it('contains arbitrary content if renderDay is provided', () => {
       const dayName = moment().format('dddd');
-      const renderDay = day => day.format('dddd');
+      const renderDay = (day) => day.format('dddd');
       const wrapper = shallow(<CalendarDay renderDayContents={renderDay} />).dive();
       expect(wrapper.text()).to.equal(dayName);
     });
diff --git a/test/components/CalendarMonthGrid_spec.jsx b/test/components/CalendarMonthGrid_spec.jsx
index f90832cbab..209d7a3d92 100644
--- a/test/components/CalendarMonthGrid_spec.jsx
+++ b/test/components/CalendarMonthGrid_spec.jsx
@@ -39,7 +39,7 @@ describe('CalendarMonthGrid', () => {
     const { months } = wrapper.state();
 
     const collisions = months
-      .map(m => m.format('YYYY-MM'))
+      .map((m) => m.format('YYYY-MM'))
       .reduce((acc, m) => ({ ...acc, [m]: true }), {});
 
     expect(Object.keys(collisions).length).to.equal(months.length);
@@ -60,7 +60,7 @@ describe('CalendarMonthGrid', () => {
     const { months } = wrapper.state();
 
     const collisions = months
-      .map(m => m.format('YYYY-MM'))
+      .map((m) => m.format('YYYY-MM'))
       .reduce((acc, m) => ({ ...acc, [m]: true }), {});
 
     expect(Object.keys(collisions).length).to.equal(months.length);
diff --git a/test/components/CustomizableCalendarDay_spec.jsx b/test/components/CustomizableCalendarDay_spec.jsx
index a138b482e4..9096e7129f 100644
--- a/test/components/CustomizableCalendarDay_spec.jsx
+++ b/test/components/CustomizableCalendarDay_spec.jsx
@@ -28,7 +28,7 @@ describe('CustomizableCalendarDay', () => {
 
     it('contains arbitrary content if renderDay is provided', () => {
       const dayName = moment().format('dddd');
-      const renderDay = day => day.format('dddd');
+      const renderDay = (day) => day.format('dddd');
       const wrapper = shallow(<CustomizableCalendarDay renderDayContents={renderDay} />).dive();
       expect(wrapper.text()).to.equal(dayName);
     });
diff --git a/test/components/DateRangePickerInputController_spec.jsx b/test/components/DateRangePickerInputController_spec.jsx
index 09bb1f84c1..779450d8ec 100644
--- a/test/components/DateRangePickerInputController_spec.jsx
+++ b/test/components/DateRangePickerInputController_spec.jsx
@@ -390,7 +390,7 @@ describe('DateRangePickerInputController', () => {
 
     describe('is outside range', () => {
       const futureDate = moment().add(7, 'day').toISOString();
-      const isOutsideRange = day => day >= moment().add(3, 'day');
+      const isOutsideRange = (day) => day >= moment().add(3, 'day');
 
       it('calls props.onDatesChange', () => {
         const onDatesChangeStub = sinon.stub();
@@ -721,7 +721,7 @@ describe('DateRangePickerInputController', () => {
 
     describe('is outside range', () => {
       const futureDate = moment().add(7, 'days').toISOString();
-      const isOutsideRange = day => day > moment().add(5, 'days');
+      const isOutsideRange = (day) => day > moment().add(5, 'days');
 
       it('calls props.onDatesChange', () => {
         const onDatesChangeStub = sinon.stub();
diff --git a/test/components/DateRangePicker_spec.jsx b/test/components/DateRangePicker_spec.jsx
index e573a0cf90..645b7e482a 100644
--- a/test/components/DateRangePicker_spec.jsx
+++ b/test/components/DateRangePicker_spec.jsx
@@ -708,7 +708,7 @@ describe('DateRangePicker', () => {
         const wrapper = shallow((
           <DateRangePicker
             {...requiredProps}
-            startDateOffset={date => date.subtract(5, 'days')}
+            startDateOffset={(date) => date.subtract(5, 'days')}
             onDatesChange={onDatesChangeStub}
             focusedInput={START_DATE}
           />
@@ -728,7 +728,7 @@ describe('DateRangePicker', () => {
         const wrapper = shallow((
           <DateRangePicker
             {...requiredProps}
-            endDateOffset={date => date.subtract(5, 'days')}
+            endDateOffset={(date) => date.subtract(5, 'days')}
             onDatesChange={onDatesChangeStub}
             focusedInput={START_DATE}
           />
diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index 5e0506bd3a..f12d496b7d 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -22,7 +22,7 @@ import { START_DATE, END_DATE, VERTICAL_SCROLLABLE } from '../../src/constants';
 const today = moment().startOf('day').hours(12);
 
 function getCallsByModifier(stub, modifier) {
-  return stub.getCalls().filter(call => call.args[call.args.length - 1] === modifier);
+  return stub.getCalls().filter((call) => call.args[call.args.length - 1] === modifier);
 }
 
 describe('DayPickerRangeController', () => {
@@ -1221,7 +1221,7 @@ describe('DayPickerRangeController', () => {
                 <DayPickerRangeController
                   {...props}
                   getMinNightsForHoverDate={getMinNightsForHoverDateStub}
-                  isDayBlocked={day => isSameDay(day, today)}
+                  isDayBlocked={(day) => isSameDay(day, today)}
                 />,
               );
               wrapper.setState({ hoverDate: today });
@@ -1293,7 +1293,7 @@ describe('DayPickerRangeController', () => {
                 <DayPickerRangeController
                   {...props}
                   getMinNightsForHoverDate={getMinNightsForHoverDateStub}
-                  isDayBlocked={day => isSameDay(day, today)}
+                  isDayBlocked={(day) => isSameDay(day, today)}
                 />,
               );
               wrapper.setState({ hoverDate: today });
@@ -1412,7 +1412,7 @@ describe('DayPickerRangeController', () => {
                 <DayPickerRangeController
                   {...props}
                   getMinNightsForHoverDate={getMinNightsForHoverDateStub}
-                  isDayBlocked={day => isSameDay(day, today)}
+                  isDayBlocked={(day) => isSameDay(day, today)}
                 />,
               );
               wrapper.setState({ hoverDate: today });
@@ -1483,7 +1483,7 @@ describe('DayPickerRangeController', () => {
                 <DayPickerRangeController
                   {...props}
                   getMinNightsForHoverDate={getMinNightsForHoverDateStub}
-                  isDayBlocked={day => isSameDay(day, today)}
+                  isDayBlocked={(day) => isSameDay(day, today)}
                 />,
               );
               wrapper.setState({ hoverDate: today });
@@ -1935,8 +1935,8 @@ describe('DayPickerRangeController', () => {
         const wrapper = shallow((
           <DayPickerRangeController
             onDatesChange={onDatesChangeStub}
-            startDateOffset={day => day.subtract(2, 'days')}
-            endDateOffset={day => day.add(4, 'days')}
+            startDateOffset={(day) => day.subtract(2, 'days')}
+            endDateOffset={(day) => day.add(4, 'days')}
           />
         ));
         wrapper.instance().onDayClick(clickDate);
@@ -1951,9 +1951,9 @@ describe('DayPickerRangeController', () => {
         const wrapper = shallow((
           <DayPickerRangeController
             onDatesChange={onDatesChangeStub}
-            startDateOffset={day => day.subtract(2, 'days')}
-            endDateOffset={day => day.add(4, 'days')}
-            isOutsideRange={day => day.isAfter(moment(today))}
+            startDateOffset={(day) => day.subtract(2, 'days')}
+            endDateOffset={(day) => day.add(4, 'days')}
+            isOutsideRange={(day) => day.isAfter(moment(today))}
           />
         ));
         wrapper.instance().onDayClick(clickDate);
@@ -1966,8 +1966,8 @@ describe('DayPickerRangeController', () => {
         const wrapper = shallow((
           <DayPickerRangeController
             onDatesChange={onDatesChangeStub}
-            endDateOffset={day => day.add(5, 'days')}
-            isOutsideRange={day => day.isAfter(moment(today).clone().add(1, 'days'))}
+            endDateOffset={(day) => day.add(5, 'days')}
+            isOutsideRange={(day) => day.isAfter(moment(today).clone().add(1, 'days'))}
           />
         ));
         wrapper.instance().onDayClick(clickDate);
@@ -1980,7 +1980,7 @@ describe('DayPickerRangeController', () => {
         const wrapper = shallow((
           <DayPickerRangeController
             onDatesChange={onDatesChangeStub}
-            startDateOffset={day => day.subtract(5, 'days')}
+            startDateOffset={(day) => day.subtract(5, 'days')}
           />
         ));
         wrapper.instance().onDayClick(clickDate);
@@ -1995,7 +1995,7 @@ describe('DayPickerRangeController', () => {
         const wrapper = shallow((
           <DayPickerRangeController
             onDatesChange={onDatesChangeStub}
-            endDateOffset={day => day.add(12, 'days')}
+            endDateOffset={(day) => day.add(12, 'days')}
           />
         ));
         wrapper.instance().onDayClick(clickDate);
@@ -2105,7 +2105,7 @@ describe('DayPickerRangeController', () => {
         const wrapper = shallow((
           <DayPickerRangeController
             onDatesChange={onDatesChangeStub}
-            startDateOffset={day => day.subtract(2, 'days')}
+            startDateOffset={(day) => day.subtract(2, 'days')}
           />
         ));
         wrapper.instance().onDayClick(clickDate);
@@ -2121,7 +2121,7 @@ describe('DayPickerRangeController', () => {
         const wrapper = shallow((
           <DayPickerRangeController
             onDatesChange={onDatesChangeStub}
-            endDateOffset={day => day.add(4, 'days')}
+            endDateOffset={(day) => day.add(4, 'days')}
           />
         ));
         wrapper.instance().onDayClick(clickDate);
@@ -2193,7 +2193,7 @@ describe('DayPickerRangeController', () => {
       const wrapper = shallow((
         <DayPickerRangeController
           focusedInput={START_DATE}
-          endDateOffset={day => day.add(2, 'days')}
+          endDateOffset={(day) => day.add(2, 'days')}
         />
       ));
       wrapper.instance().onDayMouseEnter(today);
@@ -2449,7 +2449,7 @@ describe('DayPickerRangeController', () => {
               onFocusChange={sinon.stub()}
               focusedInput={START_DATE}
               getMinNightsForHoverDate={getMinNightsForHoverDateStub}
-              isDayBlocked={day => isSameDay(day, hoverDate)}
+              isDayBlocked={(day) => isSameDay(day, hoverDate)}
             />);
             wrapper.setState({ hoverDate });
             wrapper.instance().onDayMouseEnter(today);
@@ -2496,7 +2496,7 @@ describe('DayPickerRangeController', () => {
               onFocusChange={sinon.stub()}
               focusedInput={START_DATE}
               getMinNightsForHoverDate={getMinNightsForHoverDateStub}
-              isDayBlocked={day => isSameDay(day, today)}
+              isDayBlocked={(day) => isSameDay(day, today)}
             />);
             wrapper.setState({ hoverDate });
             wrapper.instance().onDayMouseEnter(today);
@@ -2606,7 +2606,7 @@ describe('DayPickerRangeController', () => {
               onFocusChange={sinon.stub()}
               focusedInput={START_DATE}
               getMinNightsForHoverDate={getMinNightsForHoverDateStub}
-              isDayBlocked={day => isSameDay(day, hoverDate)}
+              isDayBlocked={(day) => isSameDay(day, hoverDate)}
             />);
             wrapper.setState({ hoverDate });
             wrapper.instance().onDayMouseEnter(today);
@@ -2654,7 +2654,7 @@ describe('DayPickerRangeController', () => {
               onFocusChange={sinon.stub()}
               focusedInput={START_DATE}
               getMinNightsForHoverDate={getMinNightsForHoverDateStub}
-              isDayBlocked={day => isSameDay(day, today)}
+              isDayBlocked={(day) => isSameDay(day, today)}
             />);
             wrapper.setState({ hoverDate });
             wrapper.instance().onDayMouseEnter(today);
@@ -2893,7 +2893,7 @@ describe('DayPickerRangeController', () => {
               onFocusChange={sinon.stub()}
               focusedInput={START_DATE}
               getMinNightsForHoverDate={getMinNightsForHoverDateStub}
-              isDayBlocked={day => isSameDay(day, today)}
+              isDayBlocked={(day) => isSameDay(day, today)}
             />);
             wrapper.setState({ hoverDate: today });
             wrapper.instance().onDayMouseLeave(today);
@@ -2962,7 +2962,7 @@ describe('DayPickerRangeController', () => {
               onFocusChange={sinon.stub()}
               focusedInput={START_DATE}
               getMinNightsForHoverDate={getMinNightsForHoverDateStub}
-              isDayBlocked={day => isSameDay(day, today)}
+              isDayBlocked={(day) => isSameDay(day, today)}
             />);
             wrapper.setState({ hoverDate: today });
             wrapper.instance().onDayMouseLeave(today);
@@ -4006,7 +4006,7 @@ describe('DayPickerRangeController', () => {
       describe('props.startDate === null', () => {
         describe('props.focusedInput === END_DATE', () => {
           it('returns true if arg - props.minimumNights is outside allowed range', () => {
-            const isOutsideRange = day => !isInclusivelyAfterDay(day, today);
+            const isOutsideRange = (day) => !isInclusivelyAfterDay(day, today);
             const testDate = moment(today).add(MIN_NIGHTS - 1, 'days');
             const wrapper = shallow(<DayPickerRangeController
               focusedInput={END_DATE}
@@ -4018,7 +4018,7 @@ describe('DayPickerRangeController', () => {
           });
 
           it('returns false if arg - props.minimumNights is inside allowed range', () => {
-            const isOutsideRange = day => !isInclusivelyAfterDay(day, today);
+            const isOutsideRange = (day) => !isInclusivelyAfterDay(day, today);
             const testDate = moment(today).add(MIN_NIGHTS, 'days');
             const wrapper = shallow(<DayPickerRangeController
               focusedInput={END_DATE}
diff --git a/test/components/DayPickerSingleDateController_spec.jsx b/test/components/DayPickerSingleDateController_spec.jsx
index 6d756cccb0..273eedd27e 100644
--- a/test/components/DayPickerSingleDateController_spec.jsx
+++ b/test/components/DayPickerSingleDateController_spec.jsx
@@ -18,7 +18,7 @@ import { VERTICAL_SCROLLABLE } from '../../src/constants';
 const today = moment().startOf('day').hours(12);
 
 function getCallsByModifier(stub, modifier) {
-  return stub.getCalls().filter(call => call.args[call.args.length - 1] === modifier);
+  return stub.getCalls().filter((call) => call.args[call.args.length - 1] === modifier);
 }
 
 describe('DayPickerSingleDateController', () => {
diff --git a/test/utils/getCalendarMonthWeeks_spec.js b/test/utils/getCalendarMonthWeeks_spec.js
index fc546ade41..c6163af117 100644
--- a/test/utils/getCalendarMonthWeeks_spec.js
+++ b/test/utils/getCalendarMonthWeeks_spec.js
@@ -121,19 +121,19 @@ describe('getCalendarMonthWeeks', () => {
   describe('enableOutsideDays arg is false', () => {
     it('first non-null element is first of the month', () => {
       const firstOfMonth = today.clone().startOf('month');
-      const firstNonNullDay = weeks[0].filter(day => day)[0];
+      const firstNonNullDay = weeks[0].filter((day) => day)[0];
       expect(firstOfMonth.isSame(firstNonNullDay, 'day')).to.equal(true);
     });
 
     it('last non-null element is last of the month', () => {
       const lastOfMonth = today.clone().endOf('month');
-      const lastWeek = weeks[weeks.length - 1].filter(day => day);
+      const lastWeek = weeks[weeks.length - 1].filter((day) => day);
       const lastNonNullDay = lastWeek[lastWeek.length - 1];
       expect(lastOfMonth.isSame(lastNonNullDay, 'day')).to.equal(true);
     });
 
     it('number of non-null elements is equal to number of days in month', () => {
-      const daysInCalendarMonthWeeks = weeks.reduce((a, b) => a + b.filter(day => day).length, 0);
+      const daysInCalendarMonthWeeks = weeks.reduce((a, b) => a + b.filter((day) => day).length, 0);
       expect(daysInCalendarMonthWeeks).to.equal(today.daysInMonth());
     });
   });
@@ -142,14 +142,14 @@ describe('getCalendarMonthWeeks', () => {
     it('contains first of the month', () => {
       const firstOfMonth = today.clone().startOf('month');
       const containsFirstOfMonth = weeksWithOutsideDays[0]
-        .filter(day => firstOfMonth.isSame(day, 'day')).length > 0;
+        .filter((day) => firstOfMonth.isSame(day, 'day')).length > 0;
       expect(containsFirstOfMonth).to.equal(true);
     });
 
     it('last week contains last of the month', () => {
       const lastOfMonth = today.clone().endOf('month');
       const containsLastOfMonth = weeks[weeksWithOutsideDays.length - 1]
-        .filter(day => lastOfMonth.isSame(day, 'day')).length > 0;
+        .filter((day) => lastOfMonth.isSame(day, 'day')).length > 0;
       expect(containsLastOfMonth).to.equal(true);
     });
 
@@ -158,7 +158,7 @@ describe('getCalendarMonthWeeks', () => {
       const lastOfMonth = december2016.clone().endOf('month');
       const weeksInDecember = getCalendarMonthWeeks(december2016);
       const containsLastOfMonth = weeksInDecember[weeksInDecember.length - 1]
-        .filter(day => lastOfMonth.isSame(day, 'day')).length > 0;
+        .filter((day) => lastOfMonth.isSame(day, 'day')).length > 0;
       expect(containsLastOfMonth).to.equal(true);
     });
 
@@ -168,7 +168,7 @@ describe('getCalendarMonthWeeks', () => {
       const lastOfMonth = april2017.clone().endOf('month');
       const weeksInApril = getCalendarMonthWeeks(april2017);
       const containsLastOfMonth = weeksInApril[weeksInApril.length - 1]
-        .filter(day => lastOfMonth.isSame(day, 'day')).length > 0;
+        .filter((day) => lastOfMonth.isSame(day, 'day')).length > 0;
       expect(containsLastOfMonth).to.equal(true);
     });
 
@@ -177,7 +177,7 @@ describe('getCalendarMonthWeeks', () => {
       const lastOfMonth = september2016.clone().endOf('month');
       const weeksInSeptember = getCalendarMonthWeeks(september2016);
       const containsLastOfMonth = weeksInSeptember[weeksInSeptember.length - 1]
-        .filter(day => lastOfMonth.isSame(day, 'day')).length > 0;
+        .filter((day) => lastOfMonth.isSame(day, 'day')).length > 0;
       expect(containsLastOfMonth).to.equal(true);
     });
 
diff --git a/test/utils/getPhrasePropTypes_spec.js b/test/utils/getPhrasePropTypes_spec.js
index 1b0ae5e4a1..0ba1d35dc1 100644
--- a/test/utils/getPhrasePropTypes_spec.js
+++ b/test/utils/getPhrasePropTypes_spec.js
@@ -12,7 +12,7 @@ describe('#getPhrasePropTypes', () => {
   it('contains each key from the original object', () => {
     const propTypes = getPhrasePropTypes(PhraseObject);
     Object.keys(PhraseObject).forEach((key) => {
-      expect(Object.keys(propTypes).filter(type => type === key).length).to.not.equal(0);
+      expect(Object.keys(propTypes).filter((type) => type === key).length).to.not.equal(0);
     });
   });
 });
diff --git a/test/utils/getSelectedDateOffset_spec.js b/test/utils/getSelectedDateOffset_spec.js
index dfaff4b2c7..f612e4aa24 100644
--- a/test/utils/getSelectedDateOffset_spec.js
+++ b/test/utils/getSelectedDateOffset_spec.js
@@ -7,7 +7,7 @@ const today = moment();
 
 describe('#getSelectedDateOffset', () => {
   it('returns a function modified moment object', () => {
-    const fn = day => day.add(2, 'days');
+    const fn = (day) => day.add(2, 'days');
     const modifiedDay = getSelectedDateOffset(fn, today);
     expect(modifiedDay.format()).to.equal(today.clone().add(2, 'days').format());
   });
@@ -18,14 +18,14 @@ describe('#getSelectedDateOffset', () => {
   });
 
   it('modifies the returned day using the modifier callback', () => {
-    const fn = day => day.add(2, 'days');
-    const modifier = day => day.subtract(2, 'days');
+    const fn = (day) => day.add(2, 'days');
+    const modifier = (day) => day.subtract(2, 'days');
     const modifiedDay = getSelectedDateOffset(fn, today, modifier);
     expect(modifiedDay.format()).to.equal(today.clone().format());
   });
 
   it('does not apply the modifier if function is undefined', () => {
-    const modifier = day => day.subtract(2, 'days');
+    const modifier = (day) => day.subtract(2, 'days');
     const modifiedDay = getSelectedDateOffset(undefined, today, modifier);
     expect(modifiedDay.format()).to.equal(today.format());
   });
diff --git a/test/utils/getVisibleDays_spec.js b/test/utils/getVisibleDays_spec.js
index ee91893554..2057835931 100644
--- a/test/utils/getVisibleDays_spec.js
+++ b/test/utils/getVisibleDays_spec.js
@@ -26,7 +26,7 @@ describe('getVisibleDays', () => {
   it('contains first arg day', () => {
     const visibleDays = getVisibleDays(today, 3, false);
     const containsToday = Object.values(visibleDays)
-      .filter(days => days.filter(day => isSameDay(day, today)).length > 0);
+      .filter((days) => days.filter((day) => isSameDay(day, today)).length > 0);
     expect(containsToday.length > 0).to.equal(true);
   });
 });

From 906b4c694b39f9151d15db2a7ce371789a123cd7 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Wed, 14 Aug 2019 12:27:57 -0700
Subject: [PATCH 483/618] [Deps] update `@babel/runtime`, `airbnb-prop-types`,
 `object.values`, `prop-types`, `react-outside-click-handler`, `react-portal`

---
 package.json | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index d3560961c7..693b1aea0d 100644
--- a/package.json
+++ b/package.json
@@ -111,22 +111,22 @@
     "why-did-you-update": "^1.0.6"
   },
   "dependencies": {
-    "@babel/runtime": "^7.4.5",
-    "airbnb-prop-types": "^2.10.0",
+    "@babel/runtime": "^7.5.5",
+    "airbnb-prop-types": "^2.15.0",
     "consolidated-events": "^1.1.1 || ^2.0.0",
     "enzyme-shallow-equal": "^1.0.0",
     "is-touch-device": "^1.0.1",
     "lodash": "^4.1.1",
     "object.assign": "^4.1.0",
-    "object.values": "^1.0.4",
-    "prop-types": "^15.6.1",
+    "object.values": "^1.1.0",
+    "prop-types": "^15.7.2",
     "raf": "^3.4.1",
     "react-moment-proptypes": "^1.6.0",
-    "react-outside-click-handler": "^1.2.0",
-    "react-portal": "^4.1.5",
+    "react-outside-click-handler": "^1.2.4",
+    "react-portal": "^4.2.0",
     "react-with-direction": "^1.3.0",
     "react-with-styles": "^3.2.3",
-    "react-with-styles-interface-css": "^4.0.2"
+    "react-with-styles-interface-css": "^4.0.3"
   },
   "peerDependencies": {
     "moment": "^2.18.1",

From 870534089c1366ffb42d0635a460812c9750fa94 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Tue, 13 Aug 2019 09:03:32 -0700
Subject: [PATCH 484/618] [Tests] on `node` `v12`

---
 .travis.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.travis.yml b/.travis.yml
index cb0705112c..c09a1f2747 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,5 +1,6 @@
 language: node_js
 node_js:
+  - "12"
   - "10"
   - "8"
   - "6"

From 965f395ad761fbebab9705af552c0a646155d53a Mon Sep 17 00:00:00 2001
From: "weiran.zsd" <weiran.zsd@alibaba-inc.com>
Date: Thu, 22 Aug 2019 09:37:38 +0800
Subject: [PATCH 485/618] build: fix linting (refs eslint/eslint#12119)

---
 .travis.yml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.travis.yml b/.travis.yml
index c09a1f2747..57583f8c53 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -16,6 +16,8 @@ script:
   - 'if [ "${TEST-}" = true ]; then npm run tests-only ; fi'
   - 'if [ -n "${KARMA-}" ]; then npm run tests-karma ; fi'
   - 'if [ -n "${COVERAGE-}" ] && [ "${TRAVIS_BRANCH-}" = "master" ]; then npm run cover; cat ./coverage/lcov.info | ./node_modules/.bin/coveralls ; fi'
+install:
+  - 'if [ -n "${LINT-}" ]; then npm install --legacy-bundling ; else npm install ; fi'
 env:
   global:
     - TEST=true

From bc69b89ea5e91e7766d554abb7f58bee60fe8d37 Mon Sep 17 00:00:00 2001
From: Nora Tarano <nora.tarano@airbnb.com>
Date: Thu, 22 Aug 2019 18:07:08 -0700
Subject: [PATCH 486/618] [storybook:css] Fix addons webpack loader

---
 .storybook-css/webpack.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.storybook-css/webpack.config.js b/.storybook-css/webpack.config.js
index 88fcdd2cf2..f4a9a10970 100644
--- a/.storybook-css/webpack.config.js
+++ b/.storybook-css/webpack.config.js
@@ -8,6 +8,7 @@ module.exports = {
         use: ['style-loader', 'raw-loader', 'sass-loader'],
         include: [
           path.resolve(__dirname, '../css/'),
+          /@storybook\/addon-info/,
         ],
       },
       {

From a7be6dfcc1305f8560155789c39bc6bc7eb97432 Mon Sep 17 00:00:00 2001
From: Nora Tarano <nora.tarano@airbnb.com>
Date: Mon, 26 Aug 2019 14:18:23 -0700
Subject: [PATCH 487/618] Fix moment date format

---
 test/utils/getCalendarDaySettings_spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/utils/getCalendarDaySettings_spec.js b/test/utils/getCalendarDaySettings_spec.js
index 63d6f752bb..6bd992725c 100644
--- a/test/utils/getCalendarDaySettings_spec.js
+++ b/test/utils/getCalendarDaySettings_spec.js
@@ -5,7 +5,7 @@ import sinon from 'sinon-sandbox';
 import getCalendarDaySettings from '../../src/utils/getCalendarDaySettings';
 import { BLOCKED_MODIFIER } from '../../src/constants';
 
-const testDay = moment('10/10/2017');
+const testDay = moment('10/10/2017', 'MM/DD/YYYY');
 const expectedFormattedDay = { date: 'Tuesday, October 10, 2017' };
 const testAriaLabelFormat = 'dddd, LL';
 const testDaySize = 39;

From f04dc59a1c4b8da28b96638370c096c61eb0665e Mon Sep 17 00:00:00 2001
From: Nora Tarano <nora.tarano@airbnb.com>
Date: Thu, 29 Aug 2019 02:02:12 -0400
Subject: [PATCH 488/618] Fix tests

---
 package.json    | 4 ++--
 test/mocha.opts | 4 +---
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 693b1aea0d..60137d0730 100644
--- a/package.json
+++ b/package.json
@@ -12,14 +12,14 @@
     "build:css": "node scripts/buildCSS.js",
     "clean": "rimraf lib esm",
     "precover": "rimraf coverage && npm run react",
-    "cover": "cross-env NODE_ENV=test node --max-old-space-size=4096 $(which nyc) npm run mocha test",
+    "cover": "cross-env NODE_ENV=test node --max-old-space-size=4096 $(which nyc) npm run mocha",
     "lint": "eslint --ext .js,.jsx src test",
     "mocha": "mocha ./test/_helpers",
     "storybook:uninstall": "npm uninstall --no-save @storybook/react && rimraf node_modules/@storybook node_modules/react-modal node_modules/react-dom-factories",
     "react": "enzyme-adapter-react-install 16",
     "pretest": "npm run --silent lint",
     "pretests-only": "npm run react",
-    "tests-only": "npm run mocha --silent test",
+    "tests-only": "npm run mocha --silent",
     "pretests-karma": "npm run react",
     "tests-karma": "karma start",
     "test": "npm run build && npm run tests-only",
diff --git a/test/mocha.opts b/test/mocha.opts
index b2d2150ca3..6f1ab8e673 100644
--- a/test/mocha.opts
+++ b/test/mocha.opts
@@ -1,5 +1,3 @@
---extension js
---extension jsx
 --require @babel/register
 --require airbnb-js-shims
---recursive
+test/**/*.{js,jsx}

From 760a72a3006ceee277011dbdb04a869c10880cb6 Mon Sep 17 00:00:00 2001
From: Nora Tarano <nora.tarano@airbnb.com>
Date: Thu, 29 Aug 2019 02:29:20 -0400
Subject: [PATCH 489/618] Fix moment formats

---
 test/components/CalendarDay_spec.jsx             | 6 +++---
 test/components/CustomizableCalendarDay_spec.jsx | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/test/components/CalendarDay_spec.jsx b/test/components/CalendarDay_spec.jsx
index bc968fc746..79730d377b 100644
--- a/test/components/CalendarDay_spec.jsx
+++ b/test/components/CalendarDay_spec.jsx
@@ -56,7 +56,7 @@ describe('CalendarDay', () => {
 
     describe('aria-label', () => {
       const phrases = {};
-      const day = moment('10/10/2017');
+      const day = moment('10/10/2017', 'MM/DD/YYYY');
 
       beforeEach(() => {
         phrases.chooseAvailableDate = sinon.stub().returns('chooseAvailableDate text');
@@ -166,7 +166,7 @@ describe('CalendarDay', () => {
     });
 
     describe('event handlers', () => {
-      const day = moment('10/10/2017');
+      const day = moment('10/10/2017', 'MM/DD/YYYY');
 
       let wrapper;
       beforeEach(() => {
@@ -204,7 +204,7 @@ describe('CalendarDay', () => {
   });
 
   describe('#onKeyDown', () => {
-    const day = moment('10/10/2017');
+    const day = moment('10/10/2017', 'MM/DD/YYYY');
 
     let onDayClick;
     let wrapper;
diff --git a/test/components/CustomizableCalendarDay_spec.jsx b/test/components/CustomizableCalendarDay_spec.jsx
index 9096e7129f..0870c97783 100644
--- a/test/components/CustomizableCalendarDay_spec.jsx
+++ b/test/components/CustomizableCalendarDay_spec.jsx
@@ -57,7 +57,7 @@ describe('CustomizableCalendarDay', () => {
 
     describe('aria-label', () => {
       const phrases = {};
-      const day = moment('10/10/2017');
+      const day = moment('10/10/2017', 'MM/DD/YYYY');
 
       beforeEach(() => {
         phrases.chooseAvailableDate = sinon.stub().returns('chooseAvailableDate text');
@@ -153,7 +153,7 @@ describe('CustomizableCalendarDay', () => {
     });
 
     describe('event handlers', () => {
-      const day = moment('10/10/2017');
+      const day = moment('10/10/2017', 'MM/DD/YYYY');
 
       let wrapper;
       beforeEach(() => {
@@ -208,7 +208,7 @@ describe('CustomizableCalendarDay', () => {
   });
 
   describe('#onKeyDown', () => {
-    const day = moment('10/10/2017');
+    const day = moment('10/10/2017', 'MM/DD/YYYY');
 
     let onDayClick;
     let wrapper;

From 962d5bf537e2440ea7a6acf3e99426450b7e01e9 Mon Sep 17 00:00:00 2001
From: mmarkelov <maks-markel@mail.ru>
Date: Thu, 29 Aug 2019 19:31:14 +0300
Subject: [PATCH 490/618] [New] `DayPickerSingleDateController`: Add
 onMultiplyScrollableMonths

---
 .../DayPickerSingleDateController.jsx         | 22 ++++++++++++++++-
 .../DayPickerSingleDateController_spec.jsx    | 24 +++++++++++++++++++
 2 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 36b9dd512e..6e004bb824 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -182,7 +182,7 @@ export default class DayPickerSingleDateController extends React.PureComponent {
     this.onNextMonthClick = this.onNextMonthClick.bind(this);
     this.onMonthChange = this.onMonthChange.bind(this);
     this.onYearChange = this.onYearChange.bind(this);
-
+    this.onMultiplyScrollableMonths = this.onMultiplyScrollableMonths.bind(this);
     this.getFirstFocusableDay = this.getFirstFocusableDay.bind(this);
   }
 
@@ -449,6 +449,22 @@ export default class DayPickerSingleDateController extends React.PureComponent {
     });
   }
 
+  onMultiplyScrollableMonths() {
+    const { numberOfMonths, enableOutsideDays } = this.props;
+    const { currentMonth, visibleDays } = this.state;
+
+    const numberOfVisibleMonths = Object.keys(visibleDays).length;
+    const nextMonth = currentMonth.clone().add(numberOfVisibleMonths, 'month');
+    const newVisibleDays = getVisibleDays(nextMonth, numberOfMonths, enableOutsideDays, true);
+
+    this.setState({
+      visibleDays: {
+        ...visibleDays,
+        ...this.getModifiers(newVisibleDays),
+      },
+    });
+  }
+
   getFirstFocusableDay(newMonth) {
     const { date, numberOfMonths } = this.props;
 
@@ -496,14 +512,17 @@ export default class DayPickerSingleDateController extends React.PureComponent {
       initialVisibleMonth,
       date,
       numberOfMonths,
+      orientation,
       enableOutsideDays,
     } = nextProps;
     const initialVisibleMonthThunk = initialVisibleMonth || (date ? () => date : () => this.today);
     const currentMonth = initialVisibleMonthThunk();
+    const withoutTransitionMonths = orientation === VERTICAL_SCROLLABLE;
     const visibleDays = this.getModifiers(getVisibleDays(
       currentMonth,
       numberOfMonths,
       enableOutsideDays,
+      withoutTransitionMonths,
     ));
     return { currentMonth, visibleDays };
   }
@@ -596,6 +615,7 @@ export default class DayPickerSingleDateController extends React.PureComponent {
         onNextMonthClick={this.onNextMonthClick}
         onMonthChange={this.onMonthChange}
         onYearChange={this.onYearChange}
+        onMultiplyScrollableMonths={this.onMultiplyScrollableMonths}
         monthFormat={monthFormat}
         withPortal={withPortal}
         hidden={!focused}
diff --git a/test/components/DayPickerSingleDateController_spec.jsx b/test/components/DayPickerSingleDateController_spec.jsx
index 273eedd27e..6cd614a91c 100644
--- a/test/components/DayPickerSingleDateController_spec.jsx
+++ b/test/components/DayPickerSingleDateController_spec.jsx
@@ -1177,6 +1177,30 @@ describe('DayPickerSingleDateController', () => {
       const modifiers = wrapper.instance().addModifier(updatedDays, nextMonth, modifierToAdd);
       expect(Array.from(modifiers[nextMonthISO][nextMonthDayISO])).to.contain(modifierToAdd);
     });
+
+    it('return value now has modifier arg for day after multiplying number of months', () => {
+      const modifierToAdd = 'foo';
+      const numberOfMonths = 2;
+      const nextMonth = today.clone().add(numberOfMonths, 'month');
+      const nextMonthISO = toISOMonthString(nextMonth);
+      const nextMonthDayISO = toISODateString(nextMonth);
+      const updatedDays = {
+        [nextMonthISO]: { [nextMonthDayISO]: new Set(['bar', 'baz']) },
+      };
+      const wrapper = shallow((
+        <DayPickerSingleDateController
+          onDatesChange={sinon.stub()}
+          onFocusChange={sinon.stub()}
+          numberOfMonths={numberOfMonths}
+          orientation={VERTICAL_SCROLLABLE}
+        />
+      )).instance();
+      let modifiers = wrapper.addModifier(updatedDays, nextMonth, modifierToAdd);
+      expect(Array.from(modifiers[nextMonthISO][nextMonthDayISO])).to.not.contain(modifierToAdd);
+      wrapper.onMultiplyScrollableMonths();
+      modifiers = wrapper.addModifier(updatedDays, nextMonth, modifierToAdd);
+      expect(Array.from(modifiers[nextMonthISO][nextMonthDayISO])).to.contain(modifierToAdd);
+    });
   });
 
   describe('#deleteModifier', () => {

From 038bc761a6276f6fba460cdbb3dc52f57f8df153 Mon Sep 17 00:00:00 2001
From: Nora Tarano <nora.tarano@airbnb.com>
Date: Thu, 5 Sep 2019 16:52:39 -0700
Subject: [PATCH 491/618] [new][deps] Update dependencies related to
 react-with-styles

To enable the react-with-styles upgrade to version 4 in isolation.
---
 package.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 60137d0730..7351bcd90c 100644
--- a/package.json
+++ b/package.json
@@ -98,8 +98,8 @@
     "raw-loader": "^0.5.1",
     "react": "^0.14 || ^15.5.4 || ^16.1.1",
     "react-dom": "^0.14 || ^15.5.4 || ^16.1.1",
-    "react-with-styles-interface-aphrodite": "^5.0.1",
-    "react-with-styles-interface-css-compiler": "^2.0.0",
+    "react-with-styles-interface-aphrodite": "^6.0.0",
+    "react-with-styles-interface-css-compiler": "^2.1.0",
     "rimraf": "^2.6.3",
     "safe-publish-latest": "^1.1.3",
     "sass-loader": "^7.2.0",
@@ -124,9 +124,9 @@
     "react-moment-proptypes": "^1.6.0",
     "react-outside-click-handler": "^1.2.4",
     "react-portal": "^4.2.0",
-    "react-with-direction": "^1.3.0",
+    "react-with-direction": "^1.3.1",
     "react-with-styles": "^3.2.3",
-    "react-with-styles-interface-css": "^4.0.3"
+    "react-with-styles-interface-css": "^5.0.0"
   },
   "peerDependencies": {
     "moment": "^2.18.1",

From 48b523d083937e7c55fee8ea46d3751f2e3e23d2 Mon Sep 17 00:00:00 2001
From: Nora Tarano <nora.tarano@airbnb.com>
Date: Thu, 29 Aug 2019 20:29:51 -0400
Subject: [PATCH 492/618] [breaking][deps] Update all dependencies

- Drop support for node < 6
- Update: @storybook, webpack, react-with-styles, react-with-direction,
  react-with-styles-interface-aphrodite,
  react-with-styles-interface-css,
  react-with-styles-interface-css-compiler
---
 .storybook/config.js |  5 +++--
 package.json         | 11 ++++++-----
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/.storybook/config.js b/.storybook/config.js
index 84d2cd28e9..3882b60251 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -1,7 +1,8 @@
 import React from 'react';
+
 if (process.env.NODE_ENV !== 'production') {
-  const { whyDidYouUpdate } = require('why-did-you-update');
-  whyDidYouUpdate(React);
+  const whyDidYouRender = require('@welldone-software/why-did-you-render');
+  whyDidYouRender(React);
 }
 
 import moment from 'moment';
diff --git a/package.json b/package.json
index 7351bcd90c..f3d30ce2fc 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,9 @@
     "@storybook/addon-info": "^5.1.11",
     "@storybook/addon-links": "^5.1.11",
     "@storybook/addon-options": "^5.1.11",
+    "@storybook/addons": "^5.1.11",
     "@storybook/react": "^5.1.11",
+    "@welldone-software/why-did-you-render": "^3.3.1",
     "airbnb-js-shims": "^2.2.0",
     "aphrodite": "^2.3.1",
     "babel-loader": "^8.0.6",
@@ -99,7 +101,7 @@
     "react": "^0.14 || ^15.5.4 || ^16.1.1",
     "react-dom": "^0.14 || ^15.5.4 || ^16.1.1",
     "react-with-styles-interface-aphrodite": "^6.0.0",
-    "react-with-styles-interface-css-compiler": "^2.1.0",
+    "react-with-styles-interface-css-compiler": "^2.2.0",
     "rimraf": "^2.6.3",
     "safe-publish-latest": "^1.1.3",
     "sass-loader": "^7.2.0",
@@ -107,8 +109,7 @@
     "sinon-sandbox": "^2.0.5",
     "style-loader": "^0.20.3",
     "typescript": "*",
-    "webpack": "^4.31.0",
-    "why-did-you-update": "^1.0.6"
+    "webpack": "^4.31.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.5.5",
@@ -125,8 +126,8 @@
     "react-outside-click-handler": "^1.2.4",
     "react-portal": "^4.2.0",
     "react-with-direction": "^1.3.1",
-    "react-with-styles": "^3.2.3",
-    "react-with-styles-interface-css": "^5.0.0"
+    "react-with-styles": "^4.0.0",
+    "react-with-styles-interface-css": "^6.0.0"
   },
   "peerDependencies": {
     "moment": "^2.18.1",

From a22b2981eb8e2aed58aca9dd2d615b6c0eac7b21 Mon Sep 17 00:00:00 2001
From: Nora Tarano <nora.tarano@airbnb.com>
Date: Wed, 4 Sep 2019 16:14:49 -0700
Subject: [PATCH 493/618] [breaking] Set peer dep react-with-direction ^1.3.0
 -> ^1.3.1

This is required to use react-with-styles@4.0.0
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f3d30ce2fc..4f9a11e3e2 100644
--- a/package.json
+++ b/package.json
@@ -133,7 +133,7 @@
     "moment": "^2.18.1",
     "react": "^0.14 || ^15.5.4 || ^16.1.1",
     "react-dom": "^0.14 || ^15.5.4 || ^16.1.1",
-    "react-with-direction": "^1.3.0"
+    "react-with-direction": "^1.3.1"
   },
   "greenkeeper": {
     "ignore": [

From 9782a08b53617e2c22da66732340065279b3c241 Mon Sep 17 00:00:00 2001
From: Nora Tarano <nora.tarano@airbnb.com>
Date: Mon, 9 Sep 2019 16:40:53 -0700
Subject: [PATCH 494/618] [breaking][deps] Move @babel/runtime to peer deps

---
 package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4f9a11e3e2..d50fbdaa4b 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
     "@babel/cli": "^7.5.5",
     "@babel/core": "^7.5.5",
     "@babel/register": "^7.5.5",
+    "@babel/runtime": "^7.0.0",
     "@storybook/addon-actions": "^5.1.11",
     "@storybook/addon-info": "^5.1.11",
     "@storybook/addon-links": "^5.1.11",
@@ -112,7 +113,6 @@
     "webpack": "^4.31.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.5.5",
     "airbnb-prop-types": "^2.15.0",
     "consolidated-events": "^1.1.1 || ^2.0.0",
     "enzyme-shallow-equal": "^1.0.0",
@@ -130,6 +130,7 @@
     "react-with-styles-interface-css": "^6.0.0"
   },
   "peerDependencies": {
+    "@babel/runtime": "^7.0.0",
     "moment": "^2.18.1",
     "react": "^0.14 || ^15.5.4 || ^16.1.1",
     "react-dom": "^0.14 || ^15.5.4 || ^16.1.1",

From 43086e2fabce47d56d1ed66d8de324ec866d1c25 Mon Sep 17 00:00:00 2001
From: Nora Tarano <nora.tarano@airbnb.com>
Date: Mon, 9 Sep 2019 16:41:22 -0700
Subject: [PATCH 495/618] [dev] Fix linting

---
 .eslintrc    | 2 ++
 package.json | 1 +
 2 files changed, 3 insertions(+)

diff --git a/.eslintrc b/.eslintrc
index cd5524f872..454e2a80d0 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -15,6 +15,8 @@
     "node": true
   },
 
+  "parser": "babel-eslint",
+
   "rules": {
     "react/forbid-foreign-prop-types": 2, // For babel-plugin-transform-react-remove-prop-types
 
diff --git a/package.json b/package.json
index d50fbdaa4b..d7c4724721 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
     "@welldone-software/why-did-you-render": "^3.3.1",
     "airbnb-js-shims": "^2.2.0",
     "aphrodite": "^2.3.1",
+    "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.6",
     "babel-plugin-inline-react-svg": "^1.1.0",
     "babel-plugin-inline-svg": "^1.0.1",

From db4e194b65736d36d8baa7c1610596bae030bfee Mon Sep 17 00:00:00 2001
From: Nora Tarano <nora.tarano@airbnb.com>
Date: Mon, 9 Sep 2019 16:42:00 -0700
Subject: [PATCH 496/618] [fix][compile] Ensure root component is always
 present

---
 scripts/buildCSS.js             | 6 ++++++
 scripts/renderAllComponents.jsx | 7 +++++++
 2 files changed, 13 insertions(+)

diff --git a/scripts/buildCSS.js b/scripts/buildCSS.js
index ef3ab0a769..fc77611196 100644
--- a/scripts/buildCSS.js
+++ b/scripts/buildCSS.js
@@ -20,6 +20,12 @@ registerCSSInterfaceWithDefaultTheme();
 const path = './scripts/renderAllComponents.jsx';
 const CSS = compileCSS(path);
 
+if (CSS === '') {
+  throw new Error('Failed to compile CSS');
+} else {
+  console.log('CSS compilation complete.');
+}
+
 const format = new CleanCSS({
   level: optimizeForProduction ? 2 : 0,
   format: 'beautify',
diff --git a/scripts/renderAllComponents.jsx b/scripts/renderAllComponents.jsx
index a93b079b95..4da9dedba6 100644
--- a/scripts/renderAllComponents.jsx
+++ b/scripts/renderAllComponents.jsx
@@ -5,6 +5,13 @@ import DateRangePickerWrapper from '../examples/DateRangePickerWrapper';
 import SingleDatePickerWrapper from '../examples/SingleDatePickerWrapper';
 import PresetDateRangePickerWrapper from '../examples/PresetDateRangePicker';
 
+if (!document.getElementById('root')) {
+  // Make sure the #root element is defined
+  const root = document.createElement('div');
+  root.id = 'root';
+  document.body.appendChild(root);
+}
+
 function App() {
   return (
     <div>

From e365eb3542f04517a3b069f9de7edfe967f2c158 Mon Sep 17 00:00:00 2001
From: Nora Tarano <nora.tarano@airbnb.com>
Date: Mon, 9 Sep 2019 17:44:16 -0700
Subject: [PATCH 497/618] Version 21.0.0

---
 CHANGELOG.md | 14 ++++++++++++++
 package.json |  2 +-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8d443c6a37..a9d88ab127 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,20 @@
 - []  ([#](https://github.com/airbnb/react-dates/pull/))
 -->
 
+## Unreleased
+
+## 21.0.0
+
+- [breaking] [deps] Update react-with-styles and other deps ([#1761](https://github.com/airbnb/react-dates/pull/1761)
+- [new] [deps] Update dependencies related to react-with-styles ([#1775](https://github.com/airbnb/react-dates/pull/1775))
+- [new] `DayPickerSingleDateController`: Add onMultiplyScrollableMonths ([#1770](https://github.com/airbnb/react-dates/pull/1770))
+- [dev] Fix moment date formats ([#1767](https://github.com/airbnb/react-dates/pull/1767))
+- [dev] Fix addons webpack loader, Fix tests ([#1764](https://github.com/airbnb/react-dates/pull/1764))
+- [dev] build: fix linting (refs eslint/eslint#12119)
+- [new] [deps] update `@babel/runtime`, `airbnb-prop-types`, `object.values`, `prop-types`, `react-outside-click-handler`, `react-portal`
+- [dev] [deps] update `@babel/*`, `@storybook/*`, `babel-plugin-inline-svg`, `babel-plugin-istanbul`, `babel-preset-airbnb`, `eslint-config-airbnb` to v18 (plus peer deps), `eslint` to v6; `eslint-plugin-react-with-styles`, `karma`, `karma-firefox-launcher`, `mocha`, `safe-publish-latest`, `sass-loader`, `sinon`, `sinon-sandbox`, `coveralls`, `enzyme-adapter-react-helper`
+- [fix] Remove all direct imports of css in favor of injected prop ([#1758](https://github.com/airbnb/react-dates/pull/1758))
+
 ## 20.3.0
 - [fix] Optimize setState dayPickerContainerStyles in responsivizePickerPosition ([#1735](https://github.com/airbnb/react-dates/pull/1735))
 - [fix] Stop calendar blinking on DateRangePickerInput focus switch (fixes #1523) ([#1553](https://github.com/airbnb/react-dates/pull/1553))
diff --git a/package.json b/package.json
index d7c4724721..6db4f3d781 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "20.3.0",
+  "version": "21.0.0",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 47ca2f943ab80cf679200045562af68a8e3a6645 Mon Sep 17 00:00:00 2001
From: Conor Fischer <conor.fischer@gmail.com>
Date: Mon, 26 Aug 2019 13:50:35 -0500
Subject: [PATCH 498/618] Move FontWeight style in DateInput to DefaultTheme

---
 src/components/DateInput.jsx | 2 +-
 src/theme/DefaultTheme.js    | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
index a119ac91c2..59d0acef95 100644
--- a/src/components/DateInput.jsx
+++ b/src/components/DateInput.jsx
@@ -305,7 +305,7 @@ export default withStyles(({
   },
 
   DateInput_input: {
-    fontWeight: 200,
+    fontWeight: font.input.weight,
     fontSize: font.input.size,
     lineHeight: font.input.lineHeight,
     color: color.text,
diff --git a/src/theme/DefaultTheme.js b/src/theme/DefaultTheme.js
index d5071efd6e..d839391497 100644
--- a/src/theme/DefaultTheme.js
+++ b/src/theme/DefaultTheme.js
@@ -184,6 +184,7 @@ export default {
       captionSize: 18,
       input: {
         size: 19,
+        weight: 200,
         lineHeight: '24px',
         size_small: 15,
         lineHeight_small: '18px',

From e6ced9d5a55c6eedf95baeb2707f0945eb0117ed Mon Sep 17 00:00:00 2001
From: Andrew Huth <andrew.huth@airbnb.com>
Date: Mon, 16 Sep 2019 10:16:38 -0700
Subject: [PATCH 499/618] Combine labelled DayPicker container elements

This is to fix an issue [1] where TalkBack (the screen reader for Android devices) reads out the entire contents of the calendar when focused. This includes every single day in the displayed calendar, which is super painful for users using TalkBack.

What's happening is that there is a wrapping div with a tabindex of -1 and no label or title that the screen reader can read. Because there's no label, TalkBack reads out its content, which happens to be all of the calendar days. VoiceOver on iOS doesn't have this problem because it can't (currently) focus on div containers that have children with content.

To fix, I've moved the current accessibility labelling, which was on a wrapping div higher up the DOM tree, onto the "focusable" wrapping div. VoiceOver on iOS still won't focus on and read it, but TalkBack on Android will read it correctly.

There is one downside to this, however. When Talkback reads out the labe, it ends with "double tap to activate". That doesn't do anything, though.

1. https://jira.airbnb.biz/browse/PRODUCT-94500
---
 src/components/DayPicker.jsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 24f8a53298..1b7e3fae3d 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -1036,9 +1036,6 @@ class DayPicker extends React.PureComponent {
 
     return (
       <div
-        role="application"
-        aria-roledescription={phrases.roleDescription}
-        aria-label={phrases.calendarLabel}
         {...css(
           styles.DayPicker,
           isHorizontal && styles.DayPicker__horizontal,
@@ -1077,8 +1074,10 @@ class DayPicker extends React.PureComponent {
               onClick={(e) => { e.stopPropagation(); }}
               onKeyDown={this.onKeyDown}
               onMouseUp={() => { this.setState({ withMouseInteractions: true }); }}
-              role="region"
               tabIndex={-1}
+              role="application"
+              aria-roledescription={phrases.roleDescription}
+              aria-label={phrases.calendarLabel}
             >
               {!verticalScrollable && this.renderNavigation()}
 

From 21ec280f7714ee836a8d81482e6a9569c76b1e3c Mon Sep 17 00:00:00 2001
From: casey_klimkowsky <casey.klimkowsky@airbnb.com>
Date: Tue, 17 Sep 2019 12:32:13 -0700
Subject: [PATCH 500/618] Add a render function for customizable week header
 text

---
 src/components/DateRangePicker.jsx              |  3 +++
 src/components/DayPicker.jsx                    |  8 +++++++-
 src/components/DayPickerRangeController.jsx     |  4 ++++
 .../DayPickerSingleDateController.jsx           |  4 ++++
 src/components/SingleDatePicker.jsx             |  3 +++
 src/shapes/DateRangePickerShape.js              |  1 +
 src/shapes/SingleDatePickerShape.js             |  1 +
 stories/DayPicker.js                            |  7 +++++++
 test/components/DayPicker_spec.jsx              | 17 +++++++++++++++++
 9 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index d1af316264..1f3bd61b6e 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -73,6 +73,7 @@ const defaultProps = {
 
   // calendar presentation and interaction related props
   renderMonthText: null,
+  renderWeekHeaderElement: null,
   orientation: HORIZONTAL_ORIENTATION,
   anchorDirection: ANCHOR_LEFT,
   openDirection: OPEN_DOWN,
@@ -401,6 +402,7 @@ class DateRangePicker extends React.PureComponent {
       orientation,
       monthFormat,
       renderMonthText,
+      renderWeekHeaderElement,
       navPrev,
       navNext,
       onPrevMonthClick,
@@ -497,6 +499,7 @@ class DateRangePicker extends React.PureComponent {
           endDateOffset={endDateOffset}
           monthFormat={monthFormat}
           renderMonthText={renderMonthText}
+          renderWeekHeaderElement={renderWeekHeaderElement}
           withPortal={withAnyPortal}
           daySize={daySize}
           initialVisibleMonth={initialVisibleMonthThunk}
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 1b7e3fae3d..55c13507d9 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -88,6 +88,7 @@ const propTypes = forbidExtraProps({
   // month props
   renderMonthText: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'),
   renderMonthElement: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'),
+  renderWeekHeaderElement: PropTypes.func,
 
   // day props
   modifiers: PropTypes.objectOf(PropTypes.objectOf(ModifiersShape)),
@@ -149,6 +150,7 @@ export const defaultProps = {
   // month props
   renderMonthText: null,
   renderMonthElement: null,
+  renderWeekHeaderElement: null,
 
   // day props
   modifiers: {},
@@ -867,11 +869,15 @@ class DayPicker extends React.PureComponent {
       daySize,
       horizontalMonthPadding,
       orientation,
+      renderWeekHeaderElement,
       styles,
       css,
     } = this.props;
+
     const { calendarMonthWidth } = this.state;
+
     const verticalScrollable = orientation === VERTICAL_SCROLLABLE;
+
     const horizontalStyle = {
       left: index * calendarMonthWidth,
     };
@@ -889,7 +895,7 @@ class DayPicker extends React.PureComponent {
     const weekHeaders = this.getWeekHeaders();
     const header = weekHeaders.map((day) => (
       <li key={day} {...css(styles.DayPicker_weekHeader_li, { width: daySize })}>
-        <small>{day}</small>
+        {renderWeekHeaderElement ? renderWeekHeaderElement(day) : <small>{day}</small>}
       </li>
     ));
 
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 42b0729e45..3e6f1cd2f2 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -65,6 +65,7 @@ const propTypes = forbidExtraProps({
   // DayPicker props
   renderMonthText: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'),
   renderMonthElement: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'),
+  renderWeekHeaderElement: PropTypes.func,
   enableOutsideDays: PropTypes.bool,
   numberOfMonths: PropTypes.number,
   orientation: ScrollableOrientationShape,
@@ -131,6 +132,7 @@ const defaultProps = {
 
   // DayPicker props
   renderMonthText: null,
+  renderWeekHeaderElement: null,
   enableOutsideDays: false,
   numberOfMonths: 1,
   orientation: HORIZONTAL_ORIENTATION,
@@ -1131,6 +1133,7 @@ export default class DayPickerRangeController extends React.PureComponent {
       orientation,
       monthFormat,
       renderMonthText,
+      renderWeekHeaderElement,
       navPrev,
       navNext,
       noNavButtons,
@@ -1188,6 +1191,7 @@ export default class DayPickerRangeController extends React.PureComponent {
         onMultiplyScrollableMonths={this.onMultiplyScrollableMonths}
         monthFormat={monthFormat}
         renderMonthText={renderMonthText}
+        renderWeekHeaderElement={renderWeekHeaderElement}
         withPortal={withPortal}
         hidden={!focusedInput}
         initialVisibleMonth={() => currentMonth}
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 6e004bb824..8d7f6b2c0c 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -47,6 +47,7 @@ const propTypes = forbidExtraProps({
   // DayPicker props
   renderMonthText: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'),
   renderMonthElement: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'),
+  renderWeekHeaderElement: PropTypes.func,
   enableOutsideDays: PropTypes.bool,
   numberOfMonths: PropTypes.number,
   orientation: ScrollableOrientationShape,
@@ -103,6 +104,7 @@ const defaultProps = {
 
   // DayPicker props
   renderMonthText: null,
+  renderWeekHeaderElement: null,
   enableOutsideDays: false,
   numberOfMonths: 1,
   orientation: HORIZONTAL_ORIENTATION,
@@ -570,6 +572,7 @@ export default class DayPickerSingleDateController extends React.PureComponent {
       orientation,
       monthFormat,
       renderMonthText,
+      renderWeekHeaderElement,
       navPrev,
       navNext,
       onOutsideClick,
@@ -626,6 +629,7 @@ export default class DayPickerSingleDateController extends React.PureComponent {
         navPrev={navPrev}
         navNext={navNext}
         renderMonthText={renderMonthText}
+        renderWeekHeaderElement={renderWeekHeaderElement}
         renderCalendarDay={renderCalendarDay}
         renderDayContents={renderDayContents}
         renderCalendarInfo={renderCalendarInfo}
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index 6e4b40109f..6de560edb4 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -98,6 +98,7 @@ const defaultProps = {
 
   // month presentation and interaction related props
   renderMonthText: null,
+  renderWeekHeaderElement: null,
 
   // day presentation and interaction related props
   renderCalendarDay: undefined,
@@ -404,6 +405,7 @@ class SingleDatePicker extends React.PureComponent {
       keepOpenOnDateSelect,
       initialVisibleMonth,
       renderMonthText,
+      renderWeekHeaderElement,
       renderCalendarDay,
       renderDayContents,
       renderCalendarInfo,
@@ -480,6 +482,7 @@ class SingleDatePicker extends React.PureComponent {
           onNextMonthClick={onNextMonthClick}
           onClose={onClose}
           renderMonthText={renderMonthText}
+          renderWeekHeaderElement={renderWeekHeaderElement}
           renderCalendarDay={renderCalendarDay}
           renderDayContents={renderDayContents}
           renderCalendarInfo={renderCalendarInfo}
diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js
index c35f3db742..16787084ad 100644
--- a/src/shapes/DateRangePickerShape.js
+++ b/src/shapes/DateRangePickerShape.js
@@ -53,6 +53,7 @@ export default {
   // calendar presentation and interaction related props
   renderMonthText: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'),
   renderMonthElement: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'),
+  renderWeekHeaderElement: PropTypes.func,
   orientation: OrientationShape,
   anchorDirection: anchorDirectionShape,
   openDirection: openDirectionShape,
diff --git a/src/shapes/SingleDatePickerShape.js b/src/shapes/SingleDatePickerShape.js
index e90fb2e9f1..181f56b301 100644
--- a/src/shapes/SingleDatePickerShape.js
+++ b/src/shapes/SingleDatePickerShape.js
@@ -43,6 +43,7 @@ export default {
   // calendar presentation and interaction related props
   renderMonthText: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'),
   renderMonthElement: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'),
+  renderWeekHeaderElement: PropTypes.func,
   orientation: OrientationShape,
   anchorDirection: anchorDirectionShape,
   openDirection: openDirectionShape,
diff --git a/stories/DayPicker.js b/stories/DayPicker.js
index c0c53b1ab0..4cf84eaa26 100644
--- a/stories/DayPicker.js
+++ b/stories/DayPicker.js
@@ -153,6 +153,13 @@ storiesOf('DayPicker', module)
       )}
     />
   )))
+  .add('with custom week header text', withInfo()(() => (
+    <DayPicker
+      renderWeekHeaderElement={day => (
+        <strong style={{ color: '#FE01E5' }}><small>{day.toUpperCase()}</small></strong>
+      )}
+    />
+  )))
   .add('with custom week day format', withInfo()(() => (
     <DayPicker
       weekDayFormat="ddd"
diff --git a/test/components/DayPicker_spec.jsx b/test/components/DayPicker_spec.jsx
index c8ecc768ab..675fbd3d2c 100644
--- a/test/components/DayPicker_spec.jsx
+++ b/test/components/DayPicker_spec.jsx
@@ -39,6 +39,23 @@ describe('DayPicker', () => {
         });
       });
 
+      describe('props.renderWeekHeaderElement', () => {
+        it('there are 7 custom elements on each .DayPicker__week-header class', () => {
+          const testWeekHeaderClassName = 'test-week-header';
+          const wrapper = shallow(
+            <DayPicker
+              renderWeekHeaderElement={
+                (day) => (<strong className={testWeekHeaderClassName}>{day}</strong>)
+              }
+            />,
+          ).dive();
+          const weekHeaders = wrapper.find('.DayPicker__week-header');
+          weekHeaders.forEach((weekHeader) => {
+            expect(weekHeader.find(`.${testWeekHeaderClassName}`)).to.have.lengthOf(7);
+          });
+        });
+      });
+
       describe('props.orientation === HORIZONTAL_ORIENTATION', () => {
         it('props.numberOfMonths ul (week header) elements exists', () => {
           const NUM_OF_MONTHS = 3;

From c297469ddc69ae1313dc13dbbedf46665d6b05a7 Mon Sep 17 00:00:00 2001
From: Andrew Huth <andrew.huth@airbnb.com>
Date: Wed, 18 Sep 2019 11:39:49 -0700
Subject: [PATCH 501/618] Version 21.1.0

---
 CHANGELOG.md | 6 ++++++
 package.json | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 937e26553e..ddd64c4789 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,12 @@
 
 ## Unreleased
 
+## 21.1.0
+
+- [fix] `DayPicker`: week headers: use the passed-in moment object’s instance, to support localy ([#1577](https://github.com/airbnb/react-dates/pull/1577))
+- [fix] Combine labelled DayPicker container elements ([#1783](https://github.com/airbnb/react-dates/pull/1783))
+- [new] Add a render function for customizable week header text ([#1787](https://github.com/airbnb/react-dates/pull/1787))
+
 ## 21.0.1
 
 - [fix] [deps] Update react-with-styles ^4.0.0 -> ^4.0.1 ([#1781](https://github.com/airbnb/react-dates/pull/1781))
diff --git a/package.json b/package.json
index d5c606043d..9cafa75eeb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "21.0.1",
+  "version": "21.1.0",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From b8456dca9f249978fd825f014f56ef416900bfa0 Mon Sep 17 00:00:00 2001
From: v47 <victor.verg@hotmail.com>
Date: Thu, 19 Sep 2019 02:22:56 +0200
Subject: [PATCH 502/618] Add minDate and maxDate props to DateRangePicker

---
 README.md                          | 2 ++
 src/components/DateRangePicker.jsx | 6 ++++++
 src/shapes/DateRangePickerShape.js | 2 ++
 stories/DateRangePicker.js         | 7 +++++++
 4 files changed, 17 insertions(+)

diff --git a/README.md b/README.md
index c79b204f1e..524783951e 100644
--- a/README.md
+++ b/README.md
@@ -188,6 +188,8 @@ transitionDuration: nonNegativeInteger, // milliseconds
 renderCalendarDay: PropTypes.func,
 renderDayContents: PropTypes.func,
 minimumNights: PropTypes.number,
+minDate: momentPropTypes.momentObj,
+maxDate: momentPropTypes.momentObj,
 enableOutsideDays: PropTypes.bool,
 isDayBlocked: PropTypes.func,
 isOutsideRange: PropTypes.func,
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 1f3bd61b6e..f76ea5463c 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -115,6 +115,8 @@ const defaultProps = {
   isDayBlocked: () => false,
   isOutsideRange: (day) => !isInclusivelyAfterDay(day, moment()),
   isDayHighlighted: () => false,
+  minDate: undefined,
+  maxDate: undefined,
 
   // internationalization
   displayFormat: () => moment.localeData().longDateFormat('L'),
@@ -418,6 +420,8 @@ class DateRangePicker extends React.PureComponent {
       startDateOffset,
       endDate,
       endDateOffset,
+      minDate,
+      maxDate,
       minimumNights,
       keepOpenOnDateSelect,
       renderCalendarDay,
@@ -497,6 +501,8 @@ class DateRangePicker extends React.PureComponent {
           startDateOffset={startDateOffset}
           endDate={endDate}
           endDateOffset={endDateOffset}
+          minDate={minDate}
+          maxDate={maxDate}
           monthFormat={monthFormat}
           renderMonthText={renderMonthText}
           renderWeekHeaderElement={renderWeekHeaderElement}
diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js
index 16787084ad..69eb5ad780 100644
--- a/src/shapes/DateRangePickerShape.js
+++ b/src/shapes/DateRangePickerShape.js
@@ -87,6 +87,8 @@ export default {
   renderCalendarDay: PropTypes.func,
   renderDayContents: PropTypes.func,
   minimumNights: PropTypes.number,
+  minDate: momentPropTypes.momentObj,
+  maxDate: momentPropTypes.momentObj,
   enableOutsideDays: PropTypes.bool,
   isDayBlocked: PropTypes.func,
   isOutsideRange: PropTypes.func,
diff --git a/stories/DateRangePicker.js b/stories/DateRangePicker.js
index 732320f66a..0353260f59 100644
--- a/stories/DateRangePicker.js
+++ b/stories/DateRangePicker.js
@@ -117,4 +117,11 @@ storiesOf('DateRangePicker (DRP)', module)
       orientation={VERTICAL_ORIENTATION}
       verticalHeight={568}
     />
+  )))
+  .add('with navigation blocked (minDate and maxDate)', withInfo()(() => (
+    <DateRangePickerWrapper
+      minDate={moment().subtract(2, 'months').startOf('month')}
+      maxDate={moment().add(2, 'months').endOf('month')}
+      numberOfMonths={2}
+    />
   )));

From 4c29575b093081bf31c957579846e0b7b97a5867 Mon Sep 17 00:00:00 2001
From: v47 <victor.verg@hotmail.com>
Date: Thu, 19 Sep 2019 23:08:50 +0200
Subject: [PATCH 503/618] Add tests for minDate and maxDate props in
 DateRangePicker

---
 test/components/DateRangePicker_spec.jsx | 30 ++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/test/components/DateRangePicker_spec.jsx b/test/components/DateRangePicker_spec.jsx
index 645b7e482a..deadee3453 100644
--- a/test/components/DateRangePicker_spec.jsx
+++ b/test/components/DateRangePicker_spec.jsx
@@ -741,4 +741,34 @@ describe('DateRangePicker', () => {
       });
     });
   });
+
+  describe('minDate and maxDate props', () => {
+    describe('minDate is passed in', () => {
+      it('Should pass minDate to DayPickerRangeController', () => {
+        const minDate = moment('2018-10-19');
+        const wrapper = shallow((
+          <DateRangePicker
+            {...requiredProps}
+            focusedInput={START_DATE}
+            minDate={minDate}
+          />
+        )).dive();
+        expect(wrapper.find(DayPickerRangeController).props().minDate).to.equal(minDate);
+      });
+    });
+
+    describe('maxDate is passed in', () => {
+      it('Should pass maxDate to DayPickerRangeController', () => {
+        const maxDate = moment('2018-12-19');
+        const wrapper = shallow((
+          <DateRangePicker
+            {...requiredProps}
+            focusedInput={START_DATE}
+            maxDate={maxDate}
+          />
+        )).dive();
+        expect(wrapper.find(DayPickerRangeController).props().maxDate).to.equal(maxDate);
+      });
+    });
+  });
 });

From 5e569b52870fdeb6d511cdf253736e2f3288ec91 Mon Sep 17 00:00:00 2001
From: v47 <victor.verg@hotmail.com>
Date: Fri, 20 Sep 2019 15:48:04 +0200
Subject: [PATCH 504/618] fix for getWeekHeaders(), prevents it from changing
 state.currentMonth

---
 src/components/DayPicker.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 55c13507d9..8c295390bc 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -591,7 +591,7 @@ class DayPicker extends React.PureComponent {
 
     const weekHeaders = [];
     for (let i = 0; i < 7; i += 1) {
-      weekHeaders.push(currentMonth.day((i + firstDayOfWeek) % 7).format(weekDayFormat));
+      weekHeaders.push(currentMonth.clone().day((i + firstDayOfWeek) % 7).format(weekDayFormat));
     }
 
     return weekHeaders;

From 5584f822fdcc3fa266deff62756ac887b4c0d2af Mon Sep 17 00:00:00 2001
From: v47 <victor.verg@hotmail.com>
Date: Mon, 23 Sep 2019 12:06:36 +0200
Subject: [PATCH 505/618] [Tests] `DayPicker`: unit test for getWeekHeaders()

---
 test/components/DayPicker_spec.jsx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/test/components/DayPicker_spec.jsx b/test/components/DayPicker_spec.jsx
index 63fb8e506c..f3df0e776b 100644
--- a/test/components/DayPicker_spec.jsx
+++ b/test/components/DayPicker_spec.jsx
@@ -3,6 +3,7 @@ import moment from 'moment/min/moment-with-locales';
 import { expect } from 'chai';
 import sinon from 'sinon-sandbox';
 import { mount, shallow } from 'enzyme';
+import { cloneDeep } from 'lodash';
 
 import * as isDayVisible from '../../src/utils/isDayVisible';
 
@@ -871,6 +872,23 @@ describe('DayPicker', () => {
     });
   });
 
+  describe('#getWeekHeaders', () => {
+    it('returns unmutated weekday headers for currentMonth in a future', () => {
+      sinon.stub(PureDayPicker.prototype, 'render');
+
+      const getWeekHeadersSpy = sinon.spy(PureDayPicker.prototype, 'getWeekHeaders');
+      const INITIAL_MONTH = moment().add(2, 'Months').week(3).weekday(3);
+      const wrapper = shallow(<DayPicker initialVisibleMonth={() => INITIAL_MONTH} />).dive();
+      const instance = wrapper.instance();
+      const state = cloneDeep(wrapper.state());
+
+      expect(instance.getWeekHeaders()).to.be.eql(INITIAL_MONTH.localeData().weekdaysMin());
+      expect(instance.state).not.to.equal(state);
+      expect(instance.state).to.eql(state);
+      expect(getWeekHeadersSpy).to.have.property('callCount', 1);
+    });
+  });
+
   describe.skip('life cycle methods', () => {
     let adjustDayPickerHeightSpy;
     beforeEach(() => {

From 465818267162952794e30e4745955ca174de3b54 Mon Sep 17 00:00:00 2001
From: casey_klimkowsky <casey.klimkowsky@airbnb.com>
Date: Tue, 17 Sep 2019 13:05:58 -0700
Subject: [PATCH 506/618] Add a render function for keyboard shortcuts panel

---
 examples/DayPickerRangeControllerWrapper.jsx  |   9 +-
 src/components/DayPicker.jsx                  |   4 +
 src/components/DayPickerKeyboardShortcuts.jsx |  96 +++++++-------
 src/components/DayPickerRangeController.jsx   |   4 +
 stories/DayPickerRangeController.js           | 118 +++++++++++++++---
 .../DayPickerKeyboardShortcuts_spec.jsx       |  11 ++
 6 files changed, 180 insertions(+), 62 deletions(-)

diff --git a/examples/DayPickerRangeControllerWrapper.jsx b/examples/DayPickerRangeControllerWrapper.jsx
index 340f419201..fdf16ce9cf 100644
--- a/examples/DayPickerRangeControllerWrapper.jsx
+++ b/examples/DayPickerRangeControllerWrapper.jsx
@@ -50,6 +50,7 @@ const propTypes = forbidExtraProps({
   renderCalendarDay: PropTypes.func,
   renderDayContents: PropTypes.func,
   renderKeyboardShortcutsButton: PropTypes.func,
+  renderKeyboardShortcutsPanel: PropTypes.func,
 
   // i18n
   monthFormat: PropTypes.string,
@@ -73,7 +74,7 @@ const defaultProps = {
   renderDayContents: null,
   minimumNights: 1,
   isDayBlocked: () => false,
-  isOutsideRange: day => !isInclusivelyAfterDay(day, moment()),
+  isOutsideRange: (day) => !isInclusivelyAfterDay(day, moment()),
   isDayHighlighted: () => false,
   enableOutsideDays: false,
 
@@ -90,6 +91,7 @@ const defaultProps = {
   renderMonthText: null,
   renderMonthElement: null,
   renderKeyboardShortcutsButton: undefined,
+  renderKeyboardShortcutsPanel: undefined,
 
   // navigation related props
   navPrev: null,
@@ -143,12 +145,13 @@ class DayPickerRangeControllerWrapper extends React.Component {
 
     return (
       <div style={{ height: '100%' }}>
-        {showInputs &&
+        {showInputs
+          && (
           <div style={{ marginBottom: 16 }}>
             <input type="text" name="start date" value={startDateString} readOnly />
             <input type="text" name="end date" value={endDateString} readOnly />
           </div>
-        }
+          )}
 
         <DayPickerRangeController
           {...props}
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 8c295390bc..df2777d14a 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -72,6 +72,7 @@ const propTypes = forbidExtraProps({
   verticalBorderSpacing: nonNegativeInteger,
   horizontalMonthPadding: nonNegativeInteger,
   renderKeyboardShortcutsButton: PropTypes.func,
+  renderKeyboardShortcutsPanel: PropTypes.func,
 
   // navigation props
   disablePrev: PropTypes.bool,
@@ -134,6 +135,7 @@ export const defaultProps = {
   verticalBorderSpacing: undefined,
   horizontalMonthPadding: 13,
   renderKeyboardShortcutsButton: undefined,
+  renderKeyboardShortcutsPanel: undefined,
 
   // navigation props
   disablePrev: false,
@@ -949,6 +951,7 @@ class DayPicker extends React.PureComponent {
       renderCalendarInfo,
       renderMonthElement,
       renderKeyboardShortcutsButton,
+      renderKeyboardShortcutsPanel,
       calendarInfoPosition,
       hideKeyboardShortcutsPanel,
       onOutsideClick,
@@ -1141,6 +1144,7 @@ class DayPicker extends React.PureComponent {
                   closeKeyboardShortcutsPanel={this.closeKeyboardShortcutsPanel}
                   phrases={phrases}
                   renderKeyboardShortcutsButton={renderKeyboardShortcutsButton}
+                  renderKeyboardShortcutsPanel={renderKeyboardShortcutsPanel}
                 />
               )}
             </div>
diff --git a/src/components/DayPickerKeyboardShortcuts.jsx b/src/components/DayPickerKeyboardShortcuts.jsx
index e257e2097e..cbef8297f7 100644
--- a/src/components/DayPickerKeyboardShortcuts.jsx
+++ b/src/components/DayPickerKeyboardShortcuts.jsx
@@ -23,6 +23,7 @@ const propTypes = forbidExtraProps({
   closeKeyboardShortcutsPanel: PropTypes.func,
   phrases: PropTypes.shape(getPhrasePropTypes(DayPickerKeyboardShortcutsPhrases)),
   renderKeyboardShortcutsButton: PropTypes.func,
+  renderKeyboardShortcutsPanel: PropTypes.func,
 });
 
 const defaultProps = {
@@ -33,6 +34,7 @@ const defaultProps = {
   closeKeyboardShortcutsPanel() {},
   phrases: DayPickerKeyboardShortcutsPhrases,
   renderKeyboardShortcutsButton: undefined,
+  renderKeyboardShortcutsPanel: undefined,
 };
 
 function getKeyboardShortcuts(phrases) {
@@ -168,6 +170,7 @@ class DayPickerKeyboardShortcuts extends React.PureComponent {
       styles,
       phrases,
       renderKeyboardShortcutsButton,
+      renderKeyboardShortcutsPanel,
     } = this.props;
 
     const toggleButtonText = showKeyboardShortcutsPanel
@@ -216,51 +219,60 @@ class DayPickerKeyboardShortcuts extends React.PureComponent {
             </span>
           </button>
         )}
-        {showKeyboardShortcutsPanel && (
-          <div
-            {...css(styles.DayPickerKeyboardShortcuts_panel)}
-            role="dialog"
-            aria-labelledby="DayPickerKeyboardShortcuts_title"
-            aria-describedby="DayPickerKeyboardShortcuts_description"
-          >
+        {showKeyboardShortcutsPanel
+          && (renderKeyboardShortcutsPanel ? (
+            renderKeyboardShortcutsPanel({
+              closeButtonAriaLabel: phrases.hideKeyboardShortcutsPanel,
+              keyboardShortcuts: this.keyboardShortcuts,
+              onCloseButtonClick: closeKeyboardShortcutsPanel,
+              onKeyDown: this.onKeyDown,
+              title: phrases.keyboardShortcuts,
+            })
+          ) : (
             <div
-              {...css(styles.DayPickerKeyboardShortcuts_title)}
-              id="DayPickerKeyboardShortcuts_title"
+              {...css(styles.DayPickerKeyboardShortcuts_panel)}
+              role="dialog"
+              aria-labelledby="DayPickerKeyboardShortcuts_title"
+              aria-describedby="DayPickerKeyboardShortcuts_description"
             >
-              {phrases.keyboardShortcuts}
+              <div
+                {...css(styles.DayPickerKeyboardShortcuts_title)}
+                id="DayPickerKeyboardShortcuts_title"
+              >
+                {phrases.keyboardShortcuts}
+              </div>
+
+              <button
+                ref={this.setHideKeyboardShortcutsButtonRef}
+                {...css(
+                  styles.DayPickerKeyboardShortcuts_buttonReset,
+                  styles.DayPickerKeyboardShortcuts_close,
+                )}
+                type="button"
+                tabIndex="0"
+                aria-label={phrases.hideKeyboardShortcutsPanel}
+                onClick={closeKeyboardShortcutsPanel}
+                onKeyDown={this.onKeyDown}
+              >
+                <CloseButton {...css(styles.DayPickerKeyboardShortcuts_closeSvg)} />
+              </button>
+
+              <ul
+                {...css(styles.DayPickerKeyboardShortcuts_list)}
+                id="DayPickerKeyboardShortcuts_description"
+              >
+                {this.keyboardShortcuts.map(({ unicode, label, action }) => (
+                  <KeyboardShortcutRow
+                    key={label}
+                    unicode={unicode}
+                    label={label}
+                    action={action}
+                    block={block}
+                  />
+                ))}
+              </ul>
             </div>
-
-            <button
-              ref={this.setHideKeyboardShortcutsButtonRef}
-              {...css(
-                styles.DayPickerKeyboardShortcuts_buttonReset,
-                styles.DayPickerKeyboardShortcuts_close,
-              )}
-              type="button"
-              tabIndex="0"
-              aria-label={phrases.hideKeyboardShortcutsPanel}
-              onClick={closeKeyboardShortcutsPanel}
-              onKeyDown={this.onKeyDown}
-            >
-              <CloseButton {...css(styles.DayPickerKeyboardShortcuts_closeSvg)} />
-            </button>
-
-            <ul
-              {...css(styles.DayPickerKeyboardShortcuts_list)}
-              id="DayPickerKeyboardShortcuts_description"
-            >
-              {this.keyboardShortcuts.map(({ unicode, label, action }) => (
-                <KeyboardShortcutRow
-                  key={label}
-                  unicode={unicode}
-                  label={label}
-                  action={action}
-                  block={block}
-                />
-              ))}
-            </ul>
-          </div>
-        )}
+          ))}
       </div>
     );
   }
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 3e6f1cd2f2..483358c6dd 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -88,6 +88,7 @@ const propTypes = forbidExtraProps({
   renderDayContents: PropTypes.func,
   renderCalendarInfo: PropTypes.func,
   renderKeyboardShortcutsButton: PropTypes.func,
+  renderKeyboardShortcutsPanel: PropTypes.func,
   calendarInfoPosition: CalendarInfoPositionShape,
   firstDayOfWeek: DayOfWeekShape,
   verticalHeight: nonNegativeInteger,
@@ -154,6 +155,7 @@ const defaultProps = {
   renderCalendarInfo: null,
   renderMonthElement: null,
   renderKeyboardShortcutsButton: undefined,
+  renderKeyboardShortcutsPanel: undefined,
   calendarInfoPosition: INFO_POSITION_BOTTOM,
   firstDayOfWeek: null,
   verticalHeight: null,
@@ -1142,6 +1144,7 @@ export default class DayPickerRangeController extends React.PureComponent {
       enableOutsideDays,
       firstDayOfWeek,
       renderKeyboardShortcutsButton,
+      renderKeyboardShortcutsPanel,
       hideKeyboardShortcutsPanel,
       daySize,
       focusedInput,
@@ -1207,6 +1210,7 @@ export default class DayPickerRangeController extends React.PureComponent {
         renderCalendarInfo={renderCalendarInfo}
         renderMonthElement={renderMonthElement}
         renderKeyboardShortcutsButton={renderKeyboardShortcutsButton}
+        renderKeyboardShortcutsPanel={renderKeyboardShortcutsPanel}
         calendarInfoPosition={calendarInfoPosition}
         firstDayOfWeek={firstDayOfWeek}
         hideKeyboardShortcutsPanel={hideKeyboardShortcutsPanel}
diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
index fa189f7ef4..1aa35dcb81 100644
--- a/stories/DayPickerRangeController.js
+++ b/stories/DayPickerRangeController.js
@@ -9,6 +9,9 @@ import InfoPanelDecorator, { monospace } from './InfoPanelDecorator';
 import isSameDay from '../src/utils/isSameDay';
 import isInclusivelyAfterDay from '../src/utils/isInclusivelyAfterDay';
 
+import CloseButton from '../src/components/CloseButton';
+import KeyboardShortcutRow from '../src/components/KeyboardShortcutRow';
+
 import { VERTICAL_ORIENTATION, VERTICAL_SCROLLABLE } from '../src/constants';
 
 import DayPickerRangeControllerWrapper from '../examples/DayPickerRangeControllerWrapper';
@@ -41,7 +44,7 @@ const TestPrevIcon = () => (
       position: 'absolute',
       top: '20px',
     }}
-    tabindex="0"
+    tabIndex="0"
   >
     Prev
   </div>
@@ -58,7 +61,7 @@ const TestNextIcon = () => (
       right: '22px',
       top: '20px',
     }}
-    tabindex="0"
+    tabIndex="0"
   >
     Next
   </div>
@@ -119,6 +122,80 @@ function renderKeyboardShortcutsButton(buttonProps) {
   );
 }
 
+function renderKeyboardShortcutsPanel(panelProps) {
+  const {
+    closeButtonAriaLabel,
+    keyboardShortcuts,
+    onCloseButtonClick,
+    onKeyDown,
+    title,
+  } = panelProps;
+
+  const PANEL_PADDING_PX = 50;
+
+  return (
+    <div style={{
+      position: 'fixed',
+      width: '100%',
+      height: '100%',
+      top: 0,
+      left: 0,
+      zIndex: 2,
+    }}
+    >
+      <div style={{
+        backgroundColor: '#000000',
+        opacity: 0.5,
+        width: '100%',
+        height: '100%',
+      }}
+      />
+      <div style={{
+        backgroundColor: '#ffffff',
+        padding: PANEL_PADDING_PX,
+        width: '50%',
+        height: '50%',
+        position: 'absolute',
+        top: '25%',
+        left: '25%',
+      }}
+      >
+        <button
+          aria-label={closeButtonAriaLabel}
+          onClick={onCloseButtonClick}
+          onKeyDown={onKeyDown}
+          style={{
+            height: 25,
+            width: 25,
+            position: 'absolute',
+            top: PANEL_PADDING_PX,
+            right: PANEL_PADDING_PX,
+          }}
+          type="button"
+        >
+          <CloseButton />
+        </button>
+        <div style={{
+          fontSize: 16,
+          fontWeight: 'bold',
+          marginBottom: 16,
+        }}
+        >
+          {title}
+        </div>
+        {keyboardShortcuts.map(({ action: keyboardShortcutAction, label, unicode }) => (
+          <KeyboardShortcutRow
+            action={keyboardShortcutAction}
+            key={label}
+            label={label}
+            unicode={unicode}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
 const datesList = [
   moment(),
   moment().add(1, 'days'),
@@ -144,8 +221,8 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      startDateOffset={day => day.subtract(3, 'days')}
-      endDateOffset={day => day.add(3, 'days')}
+      startDateOffset={(day) => day.subtract(3, 'days')}
+      endDateOffset={(day) => day.add(3, 'days')}
     />
   )))
   .add('with 45 days range selection', withInfo()(() => (
@@ -153,8 +230,8 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      startDateOffset={day => day.subtract(22, 'days')}
-      endDateOffset={day => day.add(22, 'days')}
+      startDateOffset={(day) => day.subtract(22, 'days')}
+      endDateOffset={(day) => day.add(22, 'days')}
     />
   )))
   .add('with 4 days after today range selection', withInfo()(() => (
@@ -162,7 +239,7 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      endDateOffset={day => day.add(4, 'days')}
+      endDateOffset={(day) => day.add(4, 'days')}
     />
   )))
   .add('with current week range selection', withInfo()(() => (
@@ -170,8 +247,8 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      startDateOffset={day => day.startOf('week')}
-      endDateOffset={day => day.endOf('week')}
+      startDateOffset={(day) => day.startOf('week')}
+      endDateOffset={(day) => day.endOf('week')}
     />
   )))
   .add('with custom inputs', withInfo()(() => (
@@ -360,9 +437,8 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      isOutsideRange={day => !isInclusivelyAfterDay(day, moment())
-        || isInclusivelyAfterDay(day, moment().add(2, 'weeks'))
-      }
+      isOutsideRange={(day) => !isInclusivelyAfterDay(day, moment())
+        || isInclusivelyAfterDay(day, moment().add(2, 'weeks'))}
     />
   )))
   .add('with some blocked dates', withInfo()(() => (
@@ -370,7 +446,7 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      isDayBlocked={day1 => datesList.some(day2 => isSameDay(day1, day2))}
+      isDayBlocked={(day1) => datesList.some((day2) => isSameDay(day1, day2))}
     />
   )))
   .add('with some highlighted dates', withInfo()(() => (
@@ -378,7 +454,7 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      isDayHighlighted={day1 => datesList.some(day2 => isSameDay(day1, day2))}
+      isDayHighlighted={(day1) => datesList.some((day2) => isSameDay(day1, day2))}
     />
   )))
   .add('blocks fridays', withInfo()(() => (
@@ -386,7 +462,7 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      isDayBlocked={day => moment.weekdays(day.weekday()) === 'Friday'}
+      isDayBlocked={(day) => moment.weekdays(day.weekday()) === 'Friday'}
     />
   )))
   .add('with navigation blocked (minDate and maxDate)', withInfo()(() => (
@@ -403,7 +479,7 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      renderDayContents={day => day.format('ddd')}
+      renderDayContents={(day) => day.format('ddd')}
     />
   )))
   .add('with info panel', withInfo()(() => (
@@ -465,7 +541,7 @@ storiesOf('DayPickerRangeController', module)
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
       getMinNightsForHoverDate={() => 2}
-      isDayBlocked={day1 => datesList.some(day2 => isSameDay(day1, day2))}
+      isDayBlocked={(day1) => datesList.some((day2) => isSameDay(day1, day2))}
     />
   )))
   .add('with custom keyboard shortcuts button', withInfo()(() => (
@@ -475,4 +551,12 @@ storiesOf('DayPickerRangeController', module)
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
       renderKeyboardShortcutsButton={renderKeyboardShortcutsButton}
     />
+  )))
+  .add('with custom keyboard shortcuts panel', withInfo()(() => (
+    <DayPickerRangeControllerWrapper
+      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
+      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
+      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
+      renderKeyboardShortcutsPanel={renderKeyboardShortcutsPanel}
+    />
   )));
diff --git a/test/components/DayPickerKeyboardShortcuts_spec.jsx b/test/components/DayPickerKeyboardShortcuts_spec.jsx
index 5321a32fcf..c68822dadb 100644
--- a/test/components/DayPickerKeyboardShortcuts_spec.jsx
+++ b/test/components/DayPickerKeyboardShortcuts_spec.jsx
@@ -146,6 +146,17 @@ describe('DayPickerKeyboardShortcuts', () => {
           expect(wrapper.children().find(Button)).to.have.lengthOf(1);
         });
       });
+
+      describe('renderKeyboardShortcutsPanel', () => {
+        it('renders the provided keyboard shortcuts panel', () => {
+          const props = {
+            renderKeyboardShortcutsPanel: () => (<div>Keyboard shortcuts here!</div>),
+            showKeyboardShortcutsPanel: true,
+          };
+          const wrapper = shallow(<DayPickerKeyboardShortcuts {...props} />).dive();
+          expect(wrapper.children().contains('Keyboard shortcuts here!'));
+        });
+      });
     });
 
     describe('#DayPickerKeyboardShortcuts_panel', () => {

From 6784598d45419ed9e33b8c0a3f6301de166b198d Mon Sep 17 00:00:00 2001
From: casey_klimkowsky <casey.klimkowsky@airbnb.com>
Date: Wed, 18 Sep 2019 13:55:47 -0700
Subject: [PATCH 507/618] Fix ESLint auto-fixes and add tests

---
 examples/DayPickerRangeControllerWrapper.jsx  |  7 +++----
 src/components/DayPickerKeyboardShortcuts.jsx |  7 ++++---
 stories/DayPickerRangeController.js           | 20 +++++++++----------
 .../DayPickerRangeController_spec.jsx         | 16 +++++++++++++++
 test/components/DayPicker_spec.jsx            | 12 +++++++++++
 5 files changed, 45 insertions(+), 17 deletions(-)

diff --git a/examples/DayPickerRangeControllerWrapper.jsx b/examples/DayPickerRangeControllerWrapper.jsx
index fdf16ce9cf..08c5547f03 100644
--- a/examples/DayPickerRangeControllerWrapper.jsx
+++ b/examples/DayPickerRangeControllerWrapper.jsx
@@ -74,7 +74,7 @@ const defaultProps = {
   renderDayContents: null,
   minimumNights: 1,
   isDayBlocked: () => false,
-  isOutsideRange: (day) => !isInclusivelyAfterDay(day, moment()),
+  isOutsideRange: day => !isInclusivelyAfterDay(day, moment()),
   isDayHighlighted: () => false,
   enableOutsideDays: false,
 
@@ -145,13 +145,12 @@ class DayPickerRangeControllerWrapper extends React.Component {
 
     return (
       <div style={{ height: '100%' }}>
-        {showInputs
-          && (
+        {showInputs && (
           <div style={{ marginBottom: 16 }}>
             <input type="text" name="start date" value={startDateString} readOnly />
             <input type="text" name="end date" value={endDateString} readOnly />
           </div>
-          )}
+        )}
 
         <DayPickerRangeController
           {...props}
diff --git a/src/components/DayPickerKeyboardShortcuts.jsx b/src/components/DayPickerKeyboardShortcuts.jsx
index cbef8297f7..f06028b73b 100644
--- a/src/components/DayPickerKeyboardShortcuts.jsx
+++ b/src/components/DayPickerKeyboardShortcuts.jsx
@@ -219,8 +219,8 @@ class DayPickerKeyboardShortcuts extends React.PureComponent {
             </span>
           </button>
         )}
-        {showKeyboardShortcutsPanel
-          && (renderKeyboardShortcutsPanel ? (
+        {showKeyboardShortcutsPanel && (
+          renderKeyboardShortcutsPanel ? (
             renderKeyboardShortcutsPanel({
               closeButtonAriaLabel: phrases.hideKeyboardShortcutsPanel,
               keyboardShortcuts: this.keyboardShortcuts,
@@ -272,7 +272,8 @@ class DayPickerKeyboardShortcuts extends React.PureComponent {
                 ))}
               </ul>
             </div>
-          ))}
+          )
+        )}
       </div>
     );
   }
diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
index 1aa35dcb81..970e2c01f1 100644
--- a/stories/DayPickerRangeController.js
+++ b/stories/DayPickerRangeController.js
@@ -221,8 +221,8 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      startDateOffset={(day) => day.subtract(3, 'days')}
-      endDateOffset={(day) => day.add(3, 'days')}
+      startDateOffset={day => day.subtract(3, 'days')}
+      endDateOffset={day => day.add(3, 'days')}
     />
   )))
   .add('with 45 days range selection', withInfo()(() => (
@@ -230,8 +230,8 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      startDateOffset={(day) => day.subtract(22, 'days')}
-      endDateOffset={(day) => day.add(22, 'days')}
+      startDateOffset={day => day.subtract(22, 'days')}
+      endDateOffset={day => day.add(22, 'days')}
     />
   )))
   .add('with 4 days after today range selection', withInfo()(() => (
@@ -239,7 +239,7 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      endDateOffset={(day) => day.add(4, 'days')}
+      endDateOffset={day => day.add(4, 'days')}
     />
   )))
   .add('with current week range selection', withInfo()(() => (
@@ -247,8 +247,8 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      startDateOffset={(day) => day.startOf('week')}
-      endDateOffset={(day) => day.endOf('week')}
+      startDateOffset={day => day.startOf('week')}
+      endDateOffset={day => day.endOf('week')}
     />
   )))
   .add('with custom inputs', withInfo()(() => (
@@ -437,7 +437,7 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      isOutsideRange={(day) => !isInclusivelyAfterDay(day, moment())
+      isOutsideRange={day => !isInclusivelyAfterDay(day, moment())
         || isInclusivelyAfterDay(day, moment().add(2, 'weeks'))}
     />
   )))
@@ -462,7 +462,7 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      isDayBlocked={(day) => moment.weekdays(day.weekday()) === 'Friday'}
+      isDayBlocked={day => moment.weekdays(day.weekday()) === 'Friday'}
     />
   )))
   .add('with navigation blocked (minDate and maxDate)', withInfo()(() => (
@@ -479,7 +479,7 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      renderDayContents={(day) => day.format('ddd')}
+      renderDayContents={day => day.format('ddd')}
     />
   )))
   .add('with info panel', withInfo()(() => (
diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index f12d496b7d..d8432f3655 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -4491,5 +4491,21 @@ describe('DayPickerRangeController', () => {
           .eql(testRenderKeyboardShortcutsButton);
       });
     });
+
+    describe.only('renderKeyboardShortcutsPanel prop', () => {
+      it('passes down custom panel render function', () => {
+        const testRenderKeyboardShortcutsPanel = () => {};
+        const wrapper = shallow(
+          <DayPickerRangeController
+            renderKeyboardShortcutsPanel={testRenderKeyboardShortcutsPanel}
+          />,
+        );
+        const dayPicker = wrapper.find(DayPicker);
+        expect(dayPicker).to.have.lengthOf(1);
+        expect(dayPicker.prop('renderKeyboardShortcutsPanel'))
+          .to
+          .eql(testRenderKeyboardShortcutsPanel);
+      });
+    });
   });
 });
diff --git a/test/components/DayPicker_spec.jsx b/test/components/DayPicker_spec.jsx
index 675fbd3d2c..2a2b670ac7 100644
--- a/test/components/DayPicker_spec.jsx
+++ b/test/components/DayPicker_spec.jsx
@@ -135,6 +135,18 @@ describe('DayPicker', () => {
           .to
           .eql(testRenderKeyboardShortcutsButton);
       });
+
+      it('component exists with custom panel render function if renderKeyboardShortcutsPanel is passed down', () => {
+        const testRenderKeyboardShortcutsPanel = () => {};
+        const wrapper = shallow(
+          <DayPicker renderKeyboardShortcutsPanel={testRenderKeyboardShortcutsPanel} />,
+        ).dive();
+        const dayPickerKeyboardShortcuts = wrapper.find(DayPickerKeyboardShortcuts);
+        expect(dayPickerKeyboardShortcuts).to.have.lengthOf(1);
+        expect(dayPickerKeyboardShortcuts.prop('renderKeyboardShortcutsPanel'))
+          .to
+          .eql(testRenderKeyboardShortcutsPanel);
+      });
     });
   });
 

From 0444bcf50b4170cc5609111e850d905b53b50a09 Mon Sep 17 00:00:00 2001
From: casey_klimkowsky <casey.klimkowsky@airbnb.com>
Date: Wed, 18 Sep 2019 13:58:23 -0700
Subject: [PATCH 508/618] Undo more ESLint auto-fixes

---
 stories/DayPickerRangeController.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
index 970e2c01f1..7f61e84d34 100644
--- a/stories/DayPickerRangeController.js
+++ b/stories/DayPickerRangeController.js
@@ -438,7 +438,8 @@ storiesOf('DayPickerRangeController', module)
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
       isOutsideRange={day => !isInclusivelyAfterDay(day, moment())
-        || isInclusivelyAfterDay(day, moment().add(2, 'weeks'))}
+        || isInclusivelyAfterDay(day, moment().add(2, 'weeks'))
+      }
     />
   )))
   .add('with some blocked dates', withInfo()(() => (
@@ -446,7 +447,7 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      isDayBlocked={(day1) => datesList.some((day2) => isSameDay(day1, day2))}
+      isDayBlocked={day1 => datesList.some(day2 => isSameDay(day1, day2))}
     />
   )))
   .add('with some highlighted dates', withInfo()(() => (
@@ -454,7 +455,7 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      isDayHighlighted={(day1) => datesList.some((day2) => isSameDay(day1, day2))}
+      isDayHighlighted={day1 => datesList.some(day2 => isSameDay(day1, day2))}
     />
   )))
   .add('blocks fridays', withInfo()(() => (
@@ -541,7 +542,7 @@ storiesOf('DayPickerRangeController', module)
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
       getMinNightsForHoverDate={() => 2}
-      isDayBlocked={(day1) => datesList.some((day2) => isSameDay(day1, day2))}
+      isDayBlocked={day1 => datesList.some(day2 => isSameDay(day1, day2))}
     />
   )))
   .add('with custom keyboard shortcuts button', withInfo()(() => (

From a10e1424d780638f4786e2b2bdada0adc71660fc Mon Sep 17 00:00:00 2001
From: casey_klimkowsky <casey.klimkowsky@airbnb.com>
Date: Mon, 16 Sep 2019 13:40:52 -0700
Subject: [PATCH 509/618] Add support for positioning month navigation under
 the calendar

---
 src/components/DateRangePicker.jsx            |  2 +
 src/components/DayPicker.jsx                  | 12 ++-
 src/components/DayPickerNavigation.jsx        | 25 ++++++
 src/components/DayPickerRangeController.jsx   |  6 ++
 .../DayPickerSingleDateController.jsx         |  6 ++
 src/components/SingleDatePicker.jsx           |  4 +
 src/constants.js                              |  3 +
 src/shapes/DateRangePickerShape.js            |  2 +
 src/shapes/NavPositionShape.js                |  8 ++
 src/shapes/SingleDatePickerShape.js           |  2 +
 stories/DayPickerRangeController.js           | 79 +++++++++++++++----
 11 files changed, 132 insertions(+), 17 deletions(-)
 create mode 100644 src/shapes/NavPositionShape.js

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index f76ea5463c..25ab572983 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -35,6 +35,7 @@ import {
   INFO_POSITION_BOTTOM,
   FANG_HEIGHT_PX,
   DEFAULT_VERTICAL_SPACING,
+  NAV_POSITION_TOP,
 } from '../constants';
 
 const propTypes = forbidExtraProps({
@@ -98,6 +99,7 @@ const defaultProps = {
   horizontalMonthPadding: undefined,
 
   // navigation related props
+  navPosition: NAV_POSITION_TOP,
   navPrev: null,
   navNext: null,
 
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index df2777d14a..888cd39b87 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -27,6 +27,7 @@ import getActiveElement from '../utils/getActiveElement';
 import isDayVisible from '../utils/isDayVisible';
 
 import ModifiersShape from '../shapes/ModifiersShape';
+import NavPositionShape from '../shapes/NavPositionShape';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
 import CalendarInfoPositionShape from '../shapes/CalendarInfoPositionShape';
@@ -41,6 +42,8 @@ import {
   INFO_POSITION_BEFORE,
   INFO_POSITION_AFTER,
   MODIFIER_KEY_NAMES,
+  NAV_POSITION_TOP,
+  NAV_POSITION_BOTTOM,
 } from '../constants';
 
 const MONTH_PADDING = 23;
@@ -77,6 +80,7 @@ const propTypes = forbidExtraProps({
   // navigation props
   disablePrev: PropTypes.bool,
   disableNext: PropTypes.bool,
+  navPosition: NavPositionShape,
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
   noNavButtons: PropTypes.bool,
@@ -140,6 +144,7 @@ export const defaultProps = {
   // navigation props
   disablePrev: false,
   disableNext: false,
+  navPosition: NAV_POSITION_TOP,
   navPrev: null,
   navNext: null,
   noNavButtons: false,
@@ -835,6 +840,7 @@ class DayPicker extends React.PureComponent {
     const {
       disablePrev,
       disableNext,
+      navPosition,
       navPrev,
       navNext,
       noNavButtons,
@@ -857,6 +863,7 @@ class DayPicker extends React.PureComponent {
         disableNext={disableNext}
         onPrevMonthClick={this.onPrevMonthClick}
         onNextMonthClick={onNextMonthClick}
+        navPosition={navPosition}
         navPrev={navPrev}
         navNext={navNext}
         orientation={orientation}
@@ -968,6 +975,7 @@ class DayPicker extends React.PureComponent {
       transitionDuration,
       verticalBorderSpacing,
       horizontalMonthPadding,
+      navPosition,
     } = this.props;
 
     const { reactDates: { spacing: { dayPickerHorizontalPadding } } } = theme;
@@ -1088,7 +1096,7 @@ class DayPicker extends React.PureComponent {
               aria-roledescription={phrases.roleDescription}
               aria-label={phrases.calendarLabel}
             >
-              {!verticalScrollable && this.renderNavigation()}
+              {!verticalScrollable && navPosition === NAV_POSITION_TOP && this.renderNavigation()}
 
               <div
                 {...css(
@@ -1135,6 +1143,8 @@ class DayPicker extends React.PureComponent {
                 {verticalScrollable && this.renderNavigation()}
               </div>
 
+              {!verticalScrollable && navPosition === NAV_POSITION_BOTTOM && this.renderNavigation()}
+
               {!isTouch && !hideKeyboardShortcutsPanel && (
                 <DayPickerKeyboardShortcuts
                   block={this.isVertical() && !withPortal}
diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index 689f3b019a..c175efa360 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -11,10 +11,13 @@ import LeftArrow from './LeftArrow';
 import RightArrow from './RightArrow';
 import ChevronUp from './ChevronUp';
 import ChevronDown from './ChevronDown';
+import NavPositionShape from '../shapes/NavPositionShape';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 
 import {
   HORIZONTAL_ORIENTATION,
+  NAV_POSITION_BOTTOM,
+  NAV_POSITION_TOP,
   VERTICAL_SCROLLABLE,
 } from '../constants';
 
@@ -22,6 +25,7 @@ const propTypes = forbidExtraProps({
   ...withStylesPropTypes,
   disablePrev: PropTypes.bool,
   disableNext: PropTypes.bool,
+  navPosition: NavPositionShape,
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
   orientation: ScrollableOrientationShape,
@@ -38,6 +42,7 @@ const propTypes = forbidExtraProps({
 const defaultProps = {
   disablePrev: false,
   disableNext: false,
+  navPosition: NAV_POSITION_TOP,
   navPrev: null,
   navNext: null,
   orientation: HORIZONTAL_ORIENTATION,
@@ -54,6 +59,7 @@ function DayPickerNavigation({
   css,
   disablePrev,
   disableNext,
+  navPosition,
   navPrev,
   navNext,
   onPrevMonthClick,
@@ -66,6 +72,7 @@ function DayPickerNavigation({
   const isHorizontal = orientation === HORIZONTAL_ORIENTATION;
   const isVertical = orientation !== HORIZONTAL_ORIENTATION;
   const isVerticalScrollable = orientation === VERTICAL_SCROLLABLE;
+  const isBottomNavPosition = navPosition === NAV_POSITION_BOTTOM;
 
   let navPrevIcon = navPrev;
   let navNextIcon = navNext;
@@ -73,6 +80,7 @@ function DayPickerNavigation({
   let isDefaultNavNext = false;
   let navPrevTabIndex = {};
   let navNextTabIndex = {};
+
   if (!navPrevIcon) {
     navPrevTabIndex = { tabIndex: '0' };
     isDefaultNavPrev = true;
@@ -118,6 +126,7 @@ function DayPickerNavigation({
       {...css(
         styles.DayPickerNavigation,
         isHorizontal && styles.DayPickerNavigation__horizontal,
+        isBottomNavPosition && styles.DayPickerNavigation__bottom,
         ...(isVertical ? [
           styles.DayPickerNavigation__vertical,
           isDefaultNav && styles.DayPickerNavigation__verticalDefault,
@@ -140,6 +149,7 @@ function DayPickerNavigation({
               styles.DayPickerNavigation_button__horizontal,
               ...(isDefaultNavPrev ? [
                 styles.DayPickerNavigation_button__horizontalDefault,
+                isBottomNavPosition && styles.DayPickerNavigation_bottomButton__horizontalDefault,
                 !isRTL && styles.DayPickerNavigation_leftButton__horizontalDefault,
                 isRTL && styles.DayPickerNavigation_rightButton__horizontalDefault,
               ] : []),
@@ -178,6 +188,7 @@ function DayPickerNavigation({
             styles.DayPickerNavigation_button__horizontal,
             ...(isDefaultNavNext ? [
               styles.DayPickerNavigation_button__horizontalDefault,
+              isBottomNavPosition && styles.DayPickerNavigation_bottomButton__horizontalDefault,
               isRTL && styles.DayPickerNavigation_leftButton__horizontalDefault,
               !isRTL && styles.DayPickerNavigation_rightButton__horizontalDefault,
             ] : []),
@@ -219,6 +230,12 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     zIndex: zIndex + 2,
   },
 
+  DayPickerNavigation__bottom: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    height: 'auto',
+  },
+
   DayPickerNavigation__horizontal: {
     height: 0,
   },
@@ -292,6 +309,14 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     padding: '6px 9px',
   },
 
+  DayPickerNavigation_bottomButton__horizontalDefault: {
+    position: 'static',
+    marginLeft: 22,
+    marginRight: 22,
+    marginBottom: 30,
+    marginTop: -10,
+  },
+
   DayPickerNavigation_leftButton__horizontalDefault: {
     left: noflip(22),
   },
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 483358c6dd..2c01721365 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -28,6 +28,7 @@ import FocusedInputShape from '../shapes/FocusedInputShape';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
 import CalendarInfoPositionShape from '../shapes/CalendarInfoPositionShape';
+import NavPositionShape from '../shapes/NavPositionShape';
 
 import {
   START_DATE,
@@ -36,6 +37,7 @@ import {
   VERTICAL_SCROLLABLE,
   DAY_SIZE,
   INFO_POSITION_BOTTOM,
+  NAV_POSITION_TOP,
 } from '../constants';
 
 import DayPicker from './DayPicker';
@@ -77,6 +79,7 @@ const propTypes = forbidExtraProps({
   verticalBorderSpacing: nonNegativeInteger,
   horizontalMonthPadding: nonNegativeInteger,
 
+  navPosition: NavPositionShape,
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
   noNavButtons: PropTypes.bool,
@@ -142,6 +145,7 @@ const defaultProps = {
   initialVisibleMonth: null,
   daySize: DAY_SIZE,
 
+  navPosition: NAV_POSITION_TOP,
   navPrev: null,
   navNext: null,
   noNavButtons: false,
@@ -1136,6 +1140,7 @@ export default class DayPickerRangeController extends React.PureComponent {
       monthFormat,
       renderMonthText,
       renderWeekHeaderElement,
+      navPosition,
       navPrev,
       navNext,
       noNavButtons,
@@ -1202,6 +1207,7 @@ export default class DayPickerRangeController extends React.PureComponent {
         onOutsideClick={onOutsideClick}
         disablePrev={disablePrev}
         disableNext={disableNext}
+        navPosition={navPosition}
         navPrev={navPrev}
         navNext={navNext}
         noNavButtons={noNavButtons}
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 8d7f6b2c0c..2fae39a0f1 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -20,12 +20,14 @@ import { addModifier, deleteModifier } from '../utils/modifiers';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
 import CalendarInfoPositionShape from '../shapes/CalendarInfoPositionShape';
+import NavPositionShape from '../shapes/NavPositionShape';
 
 import {
   HORIZONTAL_ORIENTATION,
   VERTICAL_SCROLLABLE,
   DAY_SIZE,
   INFO_POSITION_BOTTOM,
+  NAV_POSITION_TOP,
 } from '../constants';
 
 import DayPicker from './DayPicker';
@@ -62,6 +64,7 @@ const propTypes = forbidExtraProps({
   transitionDuration: nonNegativeInteger,
   horizontalMonthPadding: nonNegativeInteger,
 
+  navPosition: NavPositionShape,
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
 
@@ -119,6 +122,7 @@ const defaultProps = {
   transitionDuration: undefined,
   horizontalMonthPadding: 13,
 
+  navPosition: NAV_POSITION_TOP,
   navPrev: null,
   navNext: null,
 
@@ -573,6 +577,7 @@ export default class DayPickerSingleDateController extends React.PureComponent {
       monthFormat,
       renderMonthText,
       renderWeekHeaderElement,
+      navPosition,
       navPrev,
       navNext,
       onOutsideClick,
@@ -626,6 +631,7 @@ export default class DayPickerSingleDateController extends React.PureComponent {
         initialVisibleMonth={() => currentMonth}
         firstDayOfWeek={firstDayOfWeek}
         onOutsideClick={onOutsideClick}
+        navPosition={navPosition}
         navPrev={navPrev}
         navNext={navNext}
         renderMonthText={renderMonthText}
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index 6de560edb4..8fc0c346d4 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -33,6 +33,7 @@ import {
   INFO_POSITION_BOTTOM,
   FANG_HEIGHT_PX,
   DEFAULT_VERTICAL_SPACING,
+  NAV_POSITION_TOP,
 } from '../constants';
 
 const propTypes = forbidExtraProps({
@@ -89,6 +90,7 @@ const defaultProps = {
   horizontalMonthPadding: 13,
 
   // navigation related props
+  navPosition: NAV_POSITION_TOP,
   navPrev: null,
   navNext: null,
 
@@ -395,6 +397,7 @@ class SingleDatePicker extends React.PureComponent {
       numberOfMonths,
       orientation,
       monthFormat,
+      navPosition,
       navPrev,
       navNext,
       onPrevMonthClick,
@@ -476,6 +479,7 @@ class SingleDatePicker extends React.PureComponent {
           keepOpenOnDateSelect={keepOpenOnDateSelect}
           hideKeyboardShortcutsPanel={hideKeyboardShortcutsPanel}
           initialVisibleMonth={initialVisibleMonth}
+          navPosition={navPosition}
           navPrev={navPrev}
           navNext={navNext}
           onPrevMonthClick={onPrevMonthClick}
diff --git a/src/constants.js b/src/constants.js
index 31eec9a200..f79893b6b2 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -9,6 +9,9 @@ export const HORIZONTAL_ORIENTATION = 'horizontal';
 export const VERTICAL_ORIENTATION = 'vertical';
 export const VERTICAL_SCROLLABLE = 'verticalScrollable';
 
+export const NAV_POSITION_BOTTOM = 'navPositionBottom';
+export const NAV_POSITION_TOP = 'navPositionTop';
+
 export const ICON_BEFORE_POSITION = 'before';
 export const ICON_AFTER_POSITION = 'after';
 
diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js
index 69eb5ad780..666cf7148b 100644
--- a/src/shapes/DateRangePickerShape.js
+++ b/src/shapes/DateRangePickerShape.js
@@ -13,6 +13,7 @@ import anchorDirectionShape from './AnchorDirectionShape';
 import openDirectionShape from './OpenDirectionShape';
 import DayOfWeekShape from './DayOfWeekShape';
 import CalendarInfoPositionShape from './CalendarInfoPositionShape';
+import NavPositionShape from './NavPositionShape';
 
 export default {
   // required props for a functional interactive DateRangePicker
@@ -78,6 +79,7 @@ export default {
   horizontalMonthPadding: nonNegativeInteger,
 
   // navigation related props
+  navPosition: NavPositionShape,
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
   onPrevMonthClick: PropTypes.func,
diff --git a/src/shapes/NavPositionShape.js b/src/shapes/NavPositionShape.js
new file mode 100644
index 0000000000..6596cd94c7
--- /dev/null
+++ b/src/shapes/NavPositionShape.js
@@ -0,0 +1,8 @@
+import PropTypes from 'prop-types';
+
+import {
+  NAV_POSITION_BOTTOM,
+  NAV_POSITION_TOP,
+} from '../constants';
+
+export default PropTypes.oneOf([NAV_POSITION_BOTTOM, NAV_POSITION_TOP]);
diff --git a/src/shapes/SingleDatePickerShape.js b/src/shapes/SingleDatePickerShape.js
index 181f56b301..d2e296d1d4 100644
--- a/src/shapes/SingleDatePickerShape.js
+++ b/src/shapes/SingleDatePickerShape.js
@@ -11,6 +11,7 @@ import anchorDirectionShape from './AnchorDirectionShape';
 import openDirectionShape from './OpenDirectionShape';
 import DayOfWeekShape from './DayOfWeekShape';
 import CalendarInfoPositionShape from './CalendarInfoPositionShape';
+import NavPositionShape from './NavPositionShape';
 
 export default {
   // required props for a functional interactive SingleDatePicker
@@ -67,6 +68,7 @@ export default {
   horizontalMonthPadding: nonNegativeInteger,
 
   // navigation related props
+  navPosition: NavPositionShape,
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
 
diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
index 7f61e84d34..34f3a7fd02 100644
--- a/stories/DayPickerRangeController.js
+++ b/stories/DayPickerRangeController.js
@@ -12,7 +12,7 @@ import isInclusivelyAfterDay from '../src/utils/isInclusivelyAfterDay';
 import CloseButton from '../src/components/CloseButton';
 import KeyboardShortcutRow from '../src/components/KeyboardShortcutRow';
 
-import { VERTICAL_ORIENTATION, VERTICAL_SCROLLABLE } from '../src/constants';
+import { NAV_POSITION_BOTTOM, VERTICAL_ORIENTATION, VERTICAL_SCROLLABLE } from '../src/constants';
 
 import DayPickerRangeControllerWrapper from '../examples/DayPickerRangeControllerWrapper';
 
@@ -67,6 +67,36 @@ const TestNextIcon = () => (
   </div>
 );
 
+const TestBottomPrevIcon = () => (
+  <div
+    style={{
+      border: '1px solid #dce0e0',
+      backgroundColor: '#fff',
+      color: '#484848',
+      padding: '3px',
+      margin: '-10px 22px 30px',
+    }}
+    tabIndex="0"
+  >
+    Prev
+  </div>
+);
+
+const TestBottomNextIcon = () => (
+  <div
+    style={{
+      border: '1px solid #dce0e0',
+      backgroundColor: '#fff',
+      color: '#484848',
+      padding: '3px',
+      margin: '-10px 22px 30px',
+    }}
+    tabIndex="0"
+  >
+    Next
+  </div>
+);
+
 const TestCustomInfoPanel = () => (
   <div
     style={{
@@ -221,8 +251,8 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      startDateOffset={day => day.subtract(3, 'days')}
-      endDateOffset={day => day.add(3, 'days')}
+      startDateOffset={(day) => day.subtract(3, 'days')}
+      endDateOffset={(day) => day.add(3, 'days')}
     />
   )))
   .add('with 45 days range selection', withInfo()(() => (
@@ -230,8 +260,8 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      startDateOffset={day => day.subtract(22, 'days')}
-      endDateOffset={day => day.add(22, 'days')}
+      startDateOffset={(day) => day.subtract(22, 'days')}
+      endDateOffset={(day) => day.add(22, 'days')}
     />
   )))
   .add('with 4 days after today range selection', withInfo()(() => (
@@ -239,7 +269,7 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      endDateOffset={day => day.add(4, 'days')}
+      endDateOffset={(day) => day.add(4, 'days')}
     />
   )))
   .add('with current week range selection', withInfo()(() => (
@@ -247,8 +277,8 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      startDateOffset={day => day.startOf('week')}
-      endDateOffset={day => day.endOf('week')}
+      startDateOffset={(day) => day.startOf('week')}
+      endDateOffset={(day) => day.endOf('week')}
     />
   )))
   .add('with custom inputs', withInfo()(() => (
@@ -367,6 +397,24 @@ storiesOf('DayPickerRangeController', module)
       />
     </div>
   )))
+  .add('with month navigation positioned at the bottom', withInfo()(() => (
+    <DayPickerRangeControllerWrapper
+      navPosition={NAV_POSITION_BOTTOM}
+      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
+      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
+      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
+    />
+  )))
+  .add('with custom month navigation positioned at the bottom', withInfo()(() => (
+    <DayPickerRangeControllerWrapper
+      navPosition={NAV_POSITION_BOTTOM}
+      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
+      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
+      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
+      navPrev={<TestBottomPrevIcon />}
+      navNext={<TestBottomNextIcon />}
+    />
+  )))
   .add('with custom month navigation', withInfo()(() => (
     <DayPickerRangeControllerWrapper
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
@@ -437,9 +485,8 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      isOutsideRange={day => !isInclusivelyAfterDay(day, moment())
-        || isInclusivelyAfterDay(day, moment().add(2, 'weeks'))
-      }
+      isOutsideRange={(day) => !isInclusivelyAfterDay(day, moment())
+        || isInclusivelyAfterDay(day, moment().add(2, 'weeks'))}
     />
   )))
   .add('with some blocked dates', withInfo()(() => (
@@ -447,7 +494,7 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      isDayBlocked={day1 => datesList.some(day2 => isSameDay(day1, day2))}
+      isDayBlocked={(day1) => datesList.some((day2) => isSameDay(day1, day2))}
     />
   )))
   .add('with some highlighted dates', withInfo()(() => (
@@ -455,7 +502,7 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      isDayHighlighted={day1 => datesList.some(day2 => isSameDay(day1, day2))}
+      isDayHighlighted={(day1) => datesList.some((day2) => isSameDay(day1, day2))}
     />
   )))
   .add('blocks fridays', withInfo()(() => (
@@ -463,7 +510,7 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      isDayBlocked={day => moment.weekdays(day.weekday()) === 'Friday'}
+      isDayBlocked={(day) => moment.weekdays(day.weekday()) === 'Friday'}
     />
   )))
   .add('with navigation blocked (minDate and maxDate)', withInfo()(() => (
@@ -480,7 +527,7 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      renderDayContents={day => day.format('ddd')}
+      renderDayContents={(day) => day.format('ddd')}
     />
   )))
   .add('with info panel', withInfo()(() => (
@@ -542,7 +589,7 @@ storiesOf('DayPickerRangeController', module)
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
       getMinNightsForHoverDate={() => 2}
-      isDayBlocked={day1 => datesList.some(day2 => isSameDay(day1, day2))}
+      isDayBlocked={(day1) => datesList.some((day2) => isSameDay(day1, day2))}
     />
   )))
   .add('with custom keyboard shortcuts button', withInfo()(() => (

From 544ff7415a792eb4e89856154a3f881ee813f5d0 Mon Sep 17 00:00:00 2001
From: casey_klimkowsky <casey.klimkowsky@airbnb.com>
Date: Mon, 16 Sep 2019 16:39:31 -0700
Subject: [PATCH 510/618] Fix lint errors

---
 .vscode/settings.json               |  2 +
 stories/DayPickerRangeController.js | 61 +++++++++++++++--------------
 2 files changed, 33 insertions(+), 30 deletions(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000000..7a73a41bfd
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,2 @@
+{
+}
\ No newline at end of file
diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
index 34f3a7fd02..0fa1185237 100644
--- a/stories/DayPickerRangeController.js
+++ b/stories/DayPickerRangeController.js
@@ -44,7 +44,7 @@ const TestPrevIcon = () => (
       position: 'absolute',
       top: '20px',
     }}
-    tabIndex="0"
+    tabindex="0"
   >
     Prev
   </div>
@@ -61,7 +61,7 @@ const TestNextIcon = () => (
       right: '22px',
       top: '20px',
     }}
-    tabIndex="0"
+    tabindex="0"
   >
     Next
   </div>
@@ -251,8 +251,8 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      startDateOffset={(day) => day.subtract(3, 'days')}
-      endDateOffset={(day) => day.add(3, 'days')}
+      startDateOffset={day => day.subtract(3, 'days')}
+      endDateOffset={day => day.add(3, 'days')}
     />
   )))
   .add('with 45 days range selection', withInfo()(() => (
@@ -260,8 +260,8 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      startDateOffset={(day) => day.subtract(22, 'days')}
-      endDateOffset={(day) => day.add(22, 'days')}
+      startDateOffset={day => day.subtract(22, 'days')}
+      endDateOffset={day => day.add(22, 'days')}
     />
   )))
   .add('with 4 days after today range selection', withInfo()(() => (
@@ -269,7 +269,7 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      endDateOffset={(day) => day.add(4, 'days')}
+      endDateOffset={day => day.add(4, 'days')}
     />
   )))
   .add('with current week range selection', withInfo()(() => (
@@ -277,8 +277,8 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      startDateOffset={(day) => day.startOf('week')}
-      endDateOffset={(day) => day.endOf('week')}
+      startDateOffset={day => day.startOf('week')}
+      endDateOffset={day => day.endOf('week')}
     />
   )))
   .add('with custom inputs', withInfo()(() => (
@@ -397,42 +397,42 @@ storiesOf('DayPickerRangeController', module)
       />
     </div>
   )))
-  .add('with month navigation positioned at the bottom', withInfo()(() => (
+  .add('with custom month navigation', withInfo()(() => (
     <DayPickerRangeControllerWrapper
-      navPosition={NAV_POSITION_BOTTOM}
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
+      navPrev={<TestPrevIcon />}
+      navNext={<TestNextIcon />}
     />
   )))
-  .add('with custom month navigation positioned at the bottom', withInfo()(() => (
+  .add('with custom month navigation and blocked navigation (minDate and maxDate)', withInfo()(() => (
     <DayPickerRangeControllerWrapper
-      navPosition={NAV_POSITION_BOTTOM}
+      minDate={moment().subtract(2, 'months').startOf('month')}
+      maxDate={moment().add(2, 'months').endOf('month')}
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      navPrev={<TestBottomPrevIcon />}
-      navNext={<TestBottomNextIcon />}
+      navPrev={<TestPrevIcon />}
+      navNext={<TestNextIcon />}
     />
   )))
-  .add('with custom month navigation', withInfo()(() => (
+  .add('with month navigation positioned at the bottom', withInfo()(() => (
     <DayPickerRangeControllerWrapper
+      navPosition={NAV_POSITION_BOTTOM}
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      navPrev={<TestPrevIcon />}
-      navNext={<TestNextIcon />}
     />
   )))
-  .add('with custom month navigation and blocked navigation (minDate and maxDate)', withInfo()(() => (
+  .add('with custom month navigation positioned at the bottom', withInfo()(() => (
     <DayPickerRangeControllerWrapper
-      minDate={moment().subtract(2, 'months').startOf('month')}
-      maxDate={moment().add(2, 'months').endOf('month')}
+      navPosition={NAV_POSITION_BOTTOM}
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      navPrev={<TestPrevIcon />}
-      navNext={<TestNextIcon />}
+      navPrev={<TestBottomPrevIcon />}
+      navNext={<TestBottomNextIcon />}
     />
   )))
   .add('with outside days enabled', withInfo()(() => (
@@ -485,8 +485,9 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      isOutsideRange={(day) => !isInclusivelyAfterDay(day, moment())
-        || isInclusivelyAfterDay(day, moment().add(2, 'weeks'))}
+      isOutsideRange={day => !isInclusivelyAfterDay(day, moment())
+        || isInclusivelyAfterDay(day, moment().add(2, 'weeks'))
+      }
     />
   )))
   .add('with some blocked dates', withInfo()(() => (
@@ -494,7 +495,7 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      isDayBlocked={(day1) => datesList.some((day2) => isSameDay(day1, day2))}
+      isDayBlocked={day1 => datesList.some(day2 => isSameDay(day1, day2))}
     />
   )))
   .add('with some highlighted dates', withInfo()(() => (
@@ -502,7 +503,7 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      isDayHighlighted={(day1) => datesList.some((day2) => isSameDay(day1, day2))}
+      isDayHighlighted={day1 => datesList.some(day2 => isSameDay(day1, day2))}
     />
   )))
   .add('blocks fridays', withInfo()(() => (
@@ -510,7 +511,7 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      isDayBlocked={(day) => moment.weekdays(day.weekday()) === 'Friday'}
+      isDayBlocked={day => moment.weekdays(day.weekday()) === 'Friday'}
     />
   )))
   .add('with navigation blocked (minDate and maxDate)', withInfo()(() => (
@@ -527,7 +528,7 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      renderDayContents={(day) => day.format('ddd')}
+      renderDayContents={day => day.format('ddd')}
     />
   )))
   .add('with info panel', withInfo()(() => (
@@ -589,7 +590,7 @@ storiesOf('DayPickerRangeController', module)
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
       getMinNightsForHoverDate={() => 2}
-      isDayBlocked={(day1) => datesList.some((day2) => isSameDay(day1, day2))}
+      isDayBlocked={day1 => datesList.some(day2 => isSameDay(day1, day2))}
     />
   )))
   .add('with custom keyboard shortcuts button', withInfo()(() => (

From 85ca643d5bec08a5b702665280362f7057441e37 Mon Sep 17 00:00:00 2001
From: casey_klimkowsky <casey.klimkowsky@airbnb.com>
Date: Mon, 16 Sep 2019 16:43:44 -0700
Subject: [PATCH 511/618] Remove .vscode/settings.json

---
 .vscode/settings.json | 2 --
 1 file changed, 2 deletions(-)
 delete mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index 7a73a41bfd..0000000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,2 +0,0 @@
-{
-}
\ No newline at end of file

From 43b1c05a87cc924168650390fde69be0911f7d63 Mon Sep 17 00:00:00 2001
From: casey_klimkowsky <casey.klimkowsky@airbnb.com>
Date: Tue, 17 Sep 2019 09:51:40 -0700
Subject: [PATCH 512/618] Fix lint error and add more Storybook variations

---
 examples/DateRangePickerWrapper.jsx      |  9 ++++++++-
 src/components/DateRangePicker.jsx       |  2 ++
 src/components/DayPicker.jsx             |  3 ++-
 stories/DateRangePicker_calendar.js      |  9 ++++++++-
 stories/DayPickerSingleDateController.js | 10 +++++++++-
 5 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/examples/DateRangePickerWrapper.jsx b/examples/DateRangePickerWrapper.jsx
index ce78bb9bee..620a286cdd 100644
--- a/examples/DateRangePickerWrapper.jsx
+++ b/examples/DateRangePickerWrapper.jsx
@@ -8,7 +8,13 @@ import DateRangePicker from '../src/components/DateRangePicker';
 
 import { DateRangePickerPhrases } from '../src/defaultPhrases';
 import DateRangePickerShape from '../src/shapes/DateRangePickerShape';
-import { START_DATE, END_DATE, HORIZONTAL_ORIENTATION, ANCHOR_LEFT } from '../src/constants';
+import {
+  START_DATE,
+  END_DATE,
+  HORIZONTAL_ORIENTATION,
+  ANCHOR_LEFT,
+  NAV_POSITION_TOP,
+} from '../src/constants';
 import isInclusivelyAfterDay from '../src/utils/isInclusivelyAfterDay';
 
 const propTypes = {
@@ -66,6 +72,7 @@ const defaultProps = {
   isRTL: false,
 
   // navigation related props
+  navPosition: NAV_POSITION_TOP,
   navPrev: null,
   navNext: null,
   onPrevMonthClick() {},
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 25ab572983..138783a29a 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -407,6 +407,7 @@ class DateRangePicker extends React.PureComponent {
       monthFormat,
       renderMonthText,
       renderWeekHeaderElement,
+      navPosition,
       navPrev,
       navNext,
       onPrevMonthClick,
@@ -512,6 +513,7 @@ class DateRangePicker extends React.PureComponent {
           daySize={daySize}
           initialVisibleMonth={initialVisibleMonthThunk}
           hideKeyboardShortcutsPanel={hideKeyboardShortcutsPanel}
+          navPosition={navPosition}
           navPrev={navPrev}
           navNext={navNext}
           minimumNights={minimumNights}
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 888cd39b87..b6236e6d50 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -1143,7 +1143,8 @@ class DayPicker extends React.PureComponent {
                 {verticalScrollable && this.renderNavigation()}
               </div>
 
-              {!verticalScrollable && navPosition === NAV_POSITION_BOTTOM && this.renderNavigation()}
+              {!verticalScrollable
+                && navPosition === NAV_POSITION_BOTTOM && this.renderNavigation()}
 
               {!isTouch && !hideKeyboardShortcutsPanel && (
                 <DayPickerKeyboardShortcuts
diff --git a/stories/DateRangePicker_calendar.js b/stories/DateRangePicker_calendar.js
index 478937e873..bb869a944e 100644
--- a/stories/DateRangePicker_calendar.js
+++ b/stories/DateRangePicker_calendar.js
@@ -3,7 +3,7 @@ import moment from 'moment';
 import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
 
-import { VERTICAL_ORIENTATION, ANCHOR_RIGHT, OPEN_UP } from '../src/constants';
+import { VERTICAL_ORIENTATION, ANCHOR_RIGHT, OPEN_UP, NAV_POSITION_BOTTOM } from '../src/constants';
 
 import DateRangePickerWrapper from '../examples/DateRangePickerWrapper';
 
@@ -144,6 +144,13 @@ storiesOf('DRP - Calendar Props', module)
       autoFocus
     />
   )))
+  .add('with month navigation positioned at the bottom', withInfo()(() => (
+    <DateRangePickerWrapper
+      navPosition={NAV_POSITION_BOTTOM}
+      numberOfMonths={1}
+      autoFocus
+    />
+  )))
   .add('with outside days enabled', withInfo()(() => (
     <DateRangePickerWrapper
       numberOfMonths={1}
diff --git a/stories/DayPickerSingleDateController.js b/stories/DayPickerSingleDateController.js
index f6375aa9bc..ab141e105f 100644
--- a/stories/DayPickerSingleDateController.js
+++ b/stories/DayPickerSingleDateController.js
@@ -10,7 +10,7 @@ import isSameDay from '../src/utils/isSameDay';
 import isInclusivelyAfterDay from '../src/utils/isInclusivelyAfterDay';
 import CustomizableCalendarDay, { defaultStyles, selectedStyles } from '../src/components/CustomizableCalendarDay';
 
-import { VERTICAL_ORIENTATION } from '../src/constants';
+import { NAV_POSITION_BOTTOM, VERTICAL_ORIENTATION } from '../src/constants';
 
 import DayPickerSingleDateControllerWrapper from '../examples/DayPickerSingleDateControllerWrapper';
 
@@ -181,6 +181,14 @@ storiesOf('DayPickerSingleDateController', module)
       navNext={<TestNextIcon />}
     />
   )))
+  .add('with month navigation positioned at the bottom', withInfo()(() => (
+    <DayPickerSingleDateControllerWrapper
+      navPosition={NAV_POSITION_BOTTOM}
+      onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
+      onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
+      onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
+    />
+  )))
   .add('with outside days enabled', withInfo()(() => (
     <DayPickerSingleDateControllerWrapper
       onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}

From 2202789b10c38a7259501be6926a0b6d1b34fec9 Mon Sep 17 00:00:00 2001
From: casey_klimkowsky <casey.klimkowsky@airbnb.com>
Date: Tue, 17 Sep 2019 11:23:31 -0700
Subject: [PATCH 513/618] Add unit tests and add support for
 customDayPickerNavigationStyles

---
 src/components/DateRangePicker.jsx            |  3 +++
 src/components/DayPicker.jsx                  |  7 ++++-
 src/components/DayPickerNavigation.jsx        | 26 +++++++++++++-----
 src/components/DayPickerRangeController.jsx   |  4 +++
 .../DayPickerSingleDateController.jsx         |  4 +++
 src/components/SingleDatePicker.jsx           |  3 +++
 src/shapes/DateRangePickerShape.js            |  1 +
 src/shapes/SingleDatePickerShape.js           |  1 +
 stories/DayPickerRangeController.js           |  4 +++
 test/components/DayPicker_spec.jsx            | 27 +++++++++++++++++++
 10 files changed, 72 insertions(+), 8 deletions(-)

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 138783a29a..36e43648b2 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -99,6 +99,7 @@ const defaultProps = {
   horizontalMonthPadding: undefined,
 
   // navigation related props
+  customDayPickerNavigationStyles: null,
   navPosition: NAV_POSITION_TOP,
   navPrev: null,
   navNext: null,
@@ -407,6 +408,7 @@ class DateRangePicker extends React.PureComponent {
       monthFormat,
       renderMonthText,
       renderWeekHeaderElement,
+      customDayPickerNavigationStyles,
       navPosition,
       navPrev,
       navNext,
@@ -513,6 +515,7 @@ class DateRangePicker extends React.PureComponent {
           daySize={daySize}
           initialVisibleMonth={initialVisibleMonthThunk}
           hideKeyboardShortcutsPanel={hideKeyboardShortcutsPanel}
+          customDayPickerNavigationStyles={customDayPickerNavigationStyles}
           navPosition={navPosition}
           navPrev={navPrev}
           navNext={navNext}
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index b6236e6d50..c58c698fec 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -78,6 +78,7 @@ const propTypes = forbidExtraProps({
   renderKeyboardShortcutsPanel: PropTypes.func,
 
   // navigation props
+  customDayPickerNavigationStyles: PropTypes.object,
   disablePrev: PropTypes.bool,
   disableNext: PropTypes.bool,
   navPosition: NavPositionShape,
@@ -142,6 +143,7 @@ export const defaultProps = {
   renderKeyboardShortcutsPanel: undefined,
 
   // navigation props
+  customDayPickerNavigationStyles: null,
   disablePrev: false,
   disableNext: false,
   navPosition: NAV_POSITION_TOP,
@@ -838,6 +840,7 @@ class DayPicker extends React.PureComponent {
 
   renderNavigation() {
     const {
+      customDayPickerNavigationStyles,
       disablePrev,
       disableNext,
       navPosition,
@@ -859,6 +862,7 @@ class DayPicker extends React.PureComponent {
 
     return (
       <DayPickerNavigation
+        customStyles={customDayPickerNavigationStyles}
         disablePrev={disablePrev}
         disableNext={disableNext}
         onPrevMonthClick={this.onPrevMonthClick}
@@ -1144,7 +1148,8 @@ class DayPicker extends React.PureComponent {
               </div>
 
               {!verticalScrollable
-                && navPosition === NAV_POSITION_BOTTOM && this.renderNavigation()}
+                && navPosition === NAV_POSITION_BOTTOM
+                && this.renderNavigation()}
 
               {!isTouch && !hideKeyboardShortcutsPanel && (
                 <DayPickerKeyboardShortcuts
diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index c175efa360..79fa5164da 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -36,6 +36,7 @@ const propTypes = forbidExtraProps({
   // internationalization
   phrases: PropTypes.shape(getPhrasePropTypes(DayPickerNavigationPhrases)),
 
+  customStyles: PropTypes.object,
   isRTL: PropTypes.bool,
 });
 
@@ -52,11 +53,14 @@ const defaultProps = {
 
   // internationalization
   phrases: DayPickerNavigationPhrases,
+
+  customStyles: null,
   isRTL: false,
 };
 
 function DayPickerNavigation({
   css,
+  customStyles,
   disablePrev,
   disableNext,
   navPosition,
@@ -73,6 +77,7 @@ function DayPickerNavigation({
   const isVertical = orientation !== HORIZONTAL_ORIENTATION;
   const isVerticalScrollable = orientation === VERTICAL_SCROLLABLE;
   const isBottomNavPosition = navPosition === NAV_POSITION_BOTTOM;
+  const hasCustomStyles = !!customStyles;
 
   let navPrevIcon = navPrev;
   let navNextIcon = navNext;
@@ -126,7 +131,6 @@ function DayPickerNavigation({
       {...css(
         styles.DayPickerNavigation,
         isHorizontal && styles.DayPickerNavigation__horizontal,
-        isBottomNavPosition && styles.DayPickerNavigation__bottom,
         ...(isVertical ? [
           styles.DayPickerNavigation__vertical,
           isDefaultNav && styles.DayPickerNavigation__verticalDefault,
@@ -135,6 +139,11 @@ function DayPickerNavigation({
           styles.DayPickerNavigation__verticalScrollable,
           isDefaultNav && styles.DayPickerNavigation__verticalScrollableDefault,
         ] : []),
+        ...(isBottomNavPosition ? [
+          styles.DayPickerNavigation__bottom,
+          isDefaultNav && styles.DayPickerNavigation__bottomDefault,
+        ] : []),
+        hasCustomStyles && customStyles,
       )}
     >
       {!isVerticalScrollable && (
@@ -230,12 +239,6 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     zIndex: zIndex + 2,
   },
 
-  DayPickerNavigation__bottom: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    height: 'auto',
-  },
-
   DayPickerNavigation__horizontal: {
     height: 0,
   },
@@ -255,6 +258,15 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     position: 'relative',
   },
 
+  DayPickerNavigation__bottom: {
+    height: 'auto',
+  },
+
+  DayPickerNavigation__bottomDefault: {
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
+
   DayPickerNavigation_button: {
     cursor: 'pointer',
     userSelect: 'none',
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 2c01721365..ff845d8b20 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -79,6 +79,7 @@ const propTypes = forbidExtraProps({
   verticalBorderSpacing: nonNegativeInteger,
   horizontalMonthPadding: nonNegativeInteger,
 
+  customDayPickerNavigationStyles: PropTypes.object,
   navPosition: NavPositionShape,
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
@@ -145,6 +146,7 @@ const defaultProps = {
   initialVisibleMonth: null,
   daySize: DAY_SIZE,
 
+  customDayPickerNavigationStyles: null,
   navPosition: NAV_POSITION_TOP,
   navPrev: null,
   navNext: null,
@@ -1140,6 +1142,7 @@ export default class DayPickerRangeController extends React.PureComponent {
       monthFormat,
       renderMonthText,
       renderWeekHeaderElement,
+      customDayPickerNavigationStyles,
       navPosition,
       navPrev,
       navNext,
@@ -1207,6 +1210,7 @@ export default class DayPickerRangeController extends React.PureComponent {
         onOutsideClick={onOutsideClick}
         disablePrev={disablePrev}
         disableNext={disableNext}
+        customDayPickerNavigationStyles={customDayPickerNavigationStyles}
         navPosition={navPosition}
         navPrev={navPrev}
         navNext={navNext}
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 2fae39a0f1..7699df0327 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -64,6 +64,7 @@ const propTypes = forbidExtraProps({
   transitionDuration: nonNegativeInteger,
   horizontalMonthPadding: nonNegativeInteger,
 
+  customDayPickerNavigationStyles: PropTypes.object,
   navPosition: NavPositionShape,
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
@@ -122,6 +123,7 @@ const defaultProps = {
   transitionDuration: undefined,
   horizontalMonthPadding: 13,
 
+  customDayPickerNavigationStyles: null,
   navPosition: NAV_POSITION_TOP,
   navPrev: null,
   navNext: null,
@@ -577,6 +579,7 @@ export default class DayPickerSingleDateController extends React.PureComponent {
       monthFormat,
       renderMonthText,
       renderWeekHeaderElement,
+      customDayPickerNavigationStyles,
       navPosition,
       navPrev,
       navNext,
@@ -631,6 +634,7 @@ export default class DayPickerSingleDateController extends React.PureComponent {
         initialVisibleMonth={() => currentMonth}
         firstDayOfWeek={firstDayOfWeek}
         onOutsideClick={onOutsideClick}
+        customDayPickerNavigationStyles={customDayPickerNavigationStyles}
         navPosition={navPosition}
         navPrev={navPrev}
         navNext={navNext}
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index 8fc0c346d4..abb3c5686f 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -90,6 +90,7 @@ const defaultProps = {
   horizontalMonthPadding: 13,
 
   // navigation related props
+  customDayPickerNavigationStyles: null,
   navPosition: NAV_POSITION_TOP,
   navPrev: null,
   navNext: null,
@@ -397,6 +398,7 @@ class SingleDatePicker extends React.PureComponent {
       numberOfMonths,
       orientation,
       monthFormat,
+      customDayPickerNavigationStyles,
       navPosition,
       navPrev,
       navNext,
@@ -479,6 +481,7 @@ class SingleDatePicker extends React.PureComponent {
           keepOpenOnDateSelect={keepOpenOnDateSelect}
           hideKeyboardShortcutsPanel={hideKeyboardShortcutsPanel}
           initialVisibleMonth={initialVisibleMonth}
+          customDayPickerNavigationStyles={customDayPickerNavigationStyles}
           navPosition={navPosition}
           navPrev={navPrev}
           navNext={navNext}
diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js
index 666cf7148b..f83dabaca7 100644
--- a/src/shapes/DateRangePickerShape.js
+++ b/src/shapes/DateRangePickerShape.js
@@ -79,6 +79,7 @@ export default {
   horizontalMonthPadding: nonNegativeInteger,
 
   // navigation related props
+  customDayPickerNavigationStyles: PropTypes.object,
   navPosition: NavPositionShape,
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
diff --git a/src/shapes/SingleDatePickerShape.js b/src/shapes/SingleDatePickerShape.js
index d2e296d1d4..7144edc661 100644
--- a/src/shapes/SingleDatePickerShape.js
+++ b/src/shapes/SingleDatePickerShape.js
@@ -68,6 +68,7 @@ export default {
   horizontalMonthPadding: nonNegativeInteger,
 
   // navigation related props
+  customDayPickerNavigationStyles: PropTypes.object,
   navPosition: NavPositionShape,
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
index 0fa1185237..f1b01abdb7 100644
--- a/stories/DayPickerRangeController.js
+++ b/stories/DayPickerRangeController.js
@@ -433,6 +433,10 @@ storiesOf('DayPickerRangeController', module)
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
       navPrev={<TestBottomPrevIcon />}
       navNext={<TestBottomNextIcon />}
+      customDayPickerNavigationStyles={{
+        display: 'flex',
+        justifyContent: 'space-between',
+      }}
     />
   )))
   .add('with outside days enabled', withInfo()(() => (
diff --git a/test/components/DayPicker_spec.jsx b/test/components/DayPicker_spec.jsx
index 2a2b670ac7..63fb8e506c 100644
--- a/test/components/DayPicker_spec.jsx
+++ b/test/components/DayPicker_spec.jsx
@@ -14,6 +14,7 @@ import {
   HORIZONTAL_ORIENTATION,
   VERTICAL_ORIENTATION,
   VERTICAL_SCROLLABLE,
+  NAV_POSITION_BOTTOM,
 } from '../../src/constants';
 
 
@@ -106,6 +107,32 @@ describe('DayPicker', () => {
       });
     });
 
+    describe('DayPickerNavigation', () => {
+      it('is rendered before CalendarMonthGrid in DayPicker_focusRegion', () => {
+        const wrapper = shallow(<DayPicker />).dive();
+        expect(wrapper.find(DayPickerNavigation)).to.have.lengthOf(1);
+        expect(
+          wrapper
+            .find('[className^="DayPicker_focusRegion"]')
+            .childAt(0)
+            .type(),
+        ).to.equal(DayPickerNavigation);
+      });
+
+      describe('navPosition === NAV_POSITION_BOTTOM', () => {
+        it('is rendered after CalendarMonthGrid in DayPicker_focusRegion', () => {
+          const wrapper = shallow(<DayPicker navPosition={NAV_POSITION_BOTTOM} />).dive();
+          expect(wrapper.find(DayPickerNavigation)).to.have.lengthOf(1);
+          expect(
+            wrapper
+              .find('[className^="DayPicker_focusRegion"]')
+              .childAt(1)
+              .type(),
+          ).to.equal(DayPickerNavigation);
+        });
+      });
+    });
+
     describe('DayPickerKeyboardShortcuts', () => {
       it('component exists if state.isTouchDevice is false and hideKeyboardShortcutsPanel is false', () => {
         const wrapper = shallow(<DayPicker hideKeyboardShortcutsPanel={false} />).dive();

From e986d8ab80dee785c6e8df348c8ef147b0d2834a Mon Sep 17 00:00:00 2001
From: casey_klimkowsky <casey.klimkowsky@airbnb.com>
Date: Thu, 19 Sep 2019 14:01:36 -0700
Subject: [PATCH 514/618] Rename customStyles to inlineStyles

---
 src/components/DateRangePicker.jsx               |  6 +++---
 src/components/DayPicker.jsx                     |  8 ++++----
 src/components/DayPickerNavigation.jsx           | 10 +++++-----
 src/components/DayPickerRangeController.jsx      |  8 ++++----
 src/components/DayPickerSingleDateController.jsx |  8 ++++----
 src/components/SingleDatePicker.jsx              |  6 +++---
 src/shapes/DateRangePickerShape.js               |  2 +-
 src/shapes/SingleDatePickerShape.js              |  2 +-
 stories/DayPickerRangeController.js              |  6 +++---
 9 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 36e43648b2..e30827306e 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -99,7 +99,7 @@ const defaultProps = {
   horizontalMonthPadding: undefined,
 
   // navigation related props
-  customDayPickerNavigationStyles: null,
+  dayPickerNavigationInlineStyles: null,
   navPosition: NAV_POSITION_TOP,
   navPrev: null,
   navNext: null,
@@ -408,7 +408,7 @@ class DateRangePicker extends React.PureComponent {
       monthFormat,
       renderMonthText,
       renderWeekHeaderElement,
-      customDayPickerNavigationStyles,
+      dayPickerNavigationInlineStyles,
       navPosition,
       navPrev,
       navNext,
@@ -515,7 +515,7 @@ class DateRangePicker extends React.PureComponent {
           daySize={daySize}
           initialVisibleMonth={initialVisibleMonthThunk}
           hideKeyboardShortcutsPanel={hideKeyboardShortcutsPanel}
-          customDayPickerNavigationStyles={customDayPickerNavigationStyles}
+          dayPickerNavigationInlineStyles={dayPickerNavigationInlineStyles}
           navPosition={navPosition}
           navPrev={navPrev}
           navNext={navNext}
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index c58c698fec..4c0b1f9543 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -78,7 +78,7 @@ const propTypes = forbidExtraProps({
   renderKeyboardShortcutsPanel: PropTypes.func,
 
   // navigation props
-  customDayPickerNavigationStyles: PropTypes.object,
+  dayPickerNavigationInlineStyles: PropTypes.object,
   disablePrev: PropTypes.bool,
   disableNext: PropTypes.bool,
   navPosition: NavPositionShape,
@@ -143,7 +143,7 @@ export const defaultProps = {
   renderKeyboardShortcutsPanel: undefined,
 
   // navigation props
-  customDayPickerNavigationStyles: null,
+  dayPickerNavigationInlineStyles: null,
   disablePrev: false,
   disableNext: false,
   navPosition: NAV_POSITION_TOP,
@@ -840,7 +840,7 @@ class DayPicker extends React.PureComponent {
 
   renderNavigation() {
     const {
-      customDayPickerNavigationStyles,
+      dayPickerNavigationInlineStyles,
       disablePrev,
       disableNext,
       navPosition,
@@ -862,9 +862,9 @@ class DayPicker extends React.PureComponent {
 
     return (
       <DayPickerNavigation
-        customStyles={customDayPickerNavigationStyles}
         disablePrev={disablePrev}
         disableNext={disableNext}
+        inlineStyles={dayPickerNavigationInlineStyles}
         onPrevMonthClick={this.onPrevMonthClick}
         onNextMonthClick={onNextMonthClick}
         navPosition={navPosition}
diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index 79fa5164da..61a8b9ea33 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -36,7 +36,7 @@ const propTypes = forbidExtraProps({
   // internationalization
   phrases: PropTypes.shape(getPhrasePropTypes(DayPickerNavigationPhrases)),
 
-  customStyles: PropTypes.object,
+  inlineStyles: PropTypes.object,
   isRTL: PropTypes.bool,
 });
 
@@ -54,13 +54,13 @@ const defaultProps = {
   // internationalization
   phrases: DayPickerNavigationPhrases,
 
-  customStyles: null,
+  inlineStyles: null,
   isRTL: false,
 };
 
 function DayPickerNavigation({
   css,
-  customStyles,
+  inlineStyles,
   disablePrev,
   disableNext,
   navPosition,
@@ -77,7 +77,7 @@ function DayPickerNavigation({
   const isVertical = orientation !== HORIZONTAL_ORIENTATION;
   const isVerticalScrollable = orientation === VERTICAL_SCROLLABLE;
   const isBottomNavPosition = navPosition === NAV_POSITION_BOTTOM;
-  const hasCustomStyles = !!customStyles;
+  const hasInlineStyles = !!inlineStyles;
 
   let navPrevIcon = navPrev;
   let navNextIcon = navNext;
@@ -143,7 +143,7 @@ function DayPickerNavigation({
           styles.DayPickerNavigation__bottom,
           isDefaultNav && styles.DayPickerNavigation__bottomDefault,
         ] : []),
-        hasCustomStyles && customStyles,
+        hasInlineStyles && inlineStyles,
       )}
     >
       {!isVerticalScrollable && (
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index ff845d8b20..b96230f127 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -79,7 +79,7 @@ const propTypes = forbidExtraProps({
   verticalBorderSpacing: nonNegativeInteger,
   horizontalMonthPadding: nonNegativeInteger,
 
-  customDayPickerNavigationStyles: PropTypes.object,
+  dayPickerNavigationInlineStyles: PropTypes.object,
   navPosition: NavPositionShape,
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
@@ -146,7 +146,7 @@ const defaultProps = {
   initialVisibleMonth: null,
   daySize: DAY_SIZE,
 
-  customDayPickerNavigationStyles: null,
+  dayPickerNavigationInlineStyles: null,
   navPosition: NAV_POSITION_TOP,
   navPrev: null,
   navNext: null,
@@ -1142,7 +1142,7 @@ export default class DayPickerRangeController extends React.PureComponent {
       monthFormat,
       renderMonthText,
       renderWeekHeaderElement,
-      customDayPickerNavigationStyles,
+      dayPickerNavigationInlineStyles,
       navPosition,
       navPrev,
       navNext,
@@ -1210,7 +1210,7 @@ export default class DayPickerRangeController extends React.PureComponent {
         onOutsideClick={onOutsideClick}
         disablePrev={disablePrev}
         disableNext={disableNext}
-        customDayPickerNavigationStyles={customDayPickerNavigationStyles}
+        dayPickerNavigationInlineStyles={dayPickerNavigationInlineStyles}
         navPosition={navPosition}
         navPrev={navPrev}
         navNext={navNext}
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 7699df0327..f9b9e1be4e 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -64,7 +64,7 @@ const propTypes = forbidExtraProps({
   transitionDuration: nonNegativeInteger,
   horizontalMonthPadding: nonNegativeInteger,
 
-  customDayPickerNavigationStyles: PropTypes.object,
+  dayPickerNavigationInlineStyles: PropTypes.object,
   navPosition: NavPositionShape,
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
@@ -123,7 +123,7 @@ const defaultProps = {
   transitionDuration: undefined,
   horizontalMonthPadding: 13,
 
-  customDayPickerNavigationStyles: null,
+  dayPickerNavigationInlineStyles: null,
   navPosition: NAV_POSITION_TOP,
   navPrev: null,
   navNext: null,
@@ -579,7 +579,7 @@ export default class DayPickerSingleDateController extends React.PureComponent {
       monthFormat,
       renderMonthText,
       renderWeekHeaderElement,
-      customDayPickerNavigationStyles,
+      dayPickerNavigationInlineStyles,
       navPosition,
       navPrev,
       navNext,
@@ -634,7 +634,7 @@ export default class DayPickerSingleDateController extends React.PureComponent {
         initialVisibleMonth={() => currentMonth}
         firstDayOfWeek={firstDayOfWeek}
         onOutsideClick={onOutsideClick}
-        customDayPickerNavigationStyles={customDayPickerNavigationStyles}
+        dayPickerNavigationInlineStyles={dayPickerNavigationInlineStyles}
         navPosition={navPosition}
         navPrev={navPrev}
         navNext={navNext}
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index abb3c5686f..bbdb9d0127 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -90,7 +90,7 @@ const defaultProps = {
   horizontalMonthPadding: 13,
 
   // navigation related props
-  customDayPickerNavigationStyles: null,
+  dayPickerNavigationInlineStyles: null,
   navPosition: NAV_POSITION_TOP,
   navPrev: null,
   navNext: null,
@@ -398,7 +398,7 @@ class SingleDatePicker extends React.PureComponent {
       numberOfMonths,
       orientation,
       monthFormat,
-      customDayPickerNavigationStyles,
+      dayPickerNavigationInlineStyles,
       navPosition,
       navPrev,
       navNext,
@@ -481,7 +481,7 @@ class SingleDatePicker extends React.PureComponent {
           keepOpenOnDateSelect={keepOpenOnDateSelect}
           hideKeyboardShortcutsPanel={hideKeyboardShortcutsPanel}
           initialVisibleMonth={initialVisibleMonth}
-          customDayPickerNavigationStyles={customDayPickerNavigationStyles}
+          dayPickerNavigationInlineStyles={dayPickerNavigationInlineStyles}
           navPosition={navPosition}
           navPrev={navPrev}
           navNext={navNext}
diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js
index f83dabaca7..24efb386b3 100644
--- a/src/shapes/DateRangePickerShape.js
+++ b/src/shapes/DateRangePickerShape.js
@@ -79,7 +79,7 @@ export default {
   horizontalMonthPadding: nonNegativeInteger,
 
   // navigation related props
-  customDayPickerNavigationStyles: PropTypes.object,
+  dayPickerNavigationInlineStyles: PropTypes.object,
   navPosition: NavPositionShape,
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
diff --git a/src/shapes/SingleDatePickerShape.js b/src/shapes/SingleDatePickerShape.js
index 7144edc661..b477375ccb 100644
--- a/src/shapes/SingleDatePickerShape.js
+++ b/src/shapes/SingleDatePickerShape.js
@@ -68,7 +68,7 @@ export default {
   horizontalMonthPadding: nonNegativeInteger,
 
   // navigation related props
-  customDayPickerNavigationStyles: PropTypes.object,
+  dayPickerNavigationInlineStyles: PropTypes.object,
   navPosition: NavPositionShape,
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
index f1b01abdb7..cc2de68c20 100644
--- a/stories/DayPickerRangeController.js
+++ b/stories/DayPickerRangeController.js
@@ -44,7 +44,7 @@ const TestPrevIcon = () => (
       position: 'absolute',
       top: '20px',
     }}
-    tabindex="0"
+    tabIndex="0"
   >
     Prev
   </div>
@@ -61,7 +61,7 @@ const TestNextIcon = () => (
       right: '22px',
       top: '20px',
     }}
-    tabindex="0"
+    tabIndex="0"
   >
     Next
   </div>
@@ -433,7 +433,7 @@ storiesOf('DayPickerRangeController', module)
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
       navPrev={<TestBottomPrevIcon />}
       navNext={<TestBottomNextIcon />}
-      customDayPickerNavigationStyles={{
+      dayPickerNavigationInlineStyles={{
         display: 'flex',
         justifyContent: 'space-between',
       }}

From c82f9b06e5b721f7057d22f9d0e04ee8faae5bf0 Mon Sep 17 00:00:00 2001
From: casey_klimkowsky <casey.klimkowsky@airbnb.com>
Date: Thu, 26 Sep 2019 09:41:19 -0700
Subject: [PATCH 515/618] Add more test coverage

---
 test/components/DayPickerNavigation_spec.jsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/test/components/DayPickerNavigation_spec.jsx b/test/components/DayPickerNavigation_spec.jsx
index f3ad841b95..8698161c84 100644
--- a/test/components/DayPickerNavigation_spec.jsx
+++ b/test/components/DayPickerNavigation_spec.jsx
@@ -5,6 +5,8 @@ import { shallow } from 'enzyme';
 
 import DayPickerNavigation from '../../src/components/DayPickerNavigation';
 import { VERTICAL_SCROLLABLE } from '../../src/constants';
+import RightArrow from '../../src/components/RightArrow';
+import LeftArrow from '../../src/components/LeftArrow';
 
 describe('DayPickerNavigation', () => {
   describe('#render', () => {
@@ -46,6 +48,16 @@ describe('DayPickerNavigation', () => {
       expect(prevMonthButton.prop('tabIndex')).to.equal('0');
       expect(nextMonthButton.prop('tabIndex')).to.equal('0');
     });
+
+    it('uses RightArrow as the default prev icon for RTL', () => {
+      const wrapper = shallow(<DayPickerNavigation isRTL />).dive();
+      expect(wrapper.childAt(0).find(RightArrow)).to.have.lengthOf(1);
+    });
+
+    it('uses LeftArrow as the default next icon for RTL', () => {
+      const wrapper = shallow(<DayPickerNavigation isRTL />).dive();
+      expect(wrapper.childAt(1).find(LeftArrow)).to.have.lengthOf(1);
+    });
   });
 
   describe('interactions', () => {

From 08e9079e3cb74cb4fe1c4c772b5a5ae15d09c1d0 Mon Sep 17 00:00:00 2001
From: Nora Tarano <nora.tarano@airbnb.com>
Date: Mon, 30 Sep 2019 23:17:36 -0700
Subject: [PATCH 516/618] Revert "Merge pull request #1758 from
 airbnb/nora--remove-direct-imports-of-css"

This reverts commit 3e66eba4ba5d0d95bc704e01a32a579e2b1ea5d1, reversing
changes made to 8c0ba9886a9f8410f65e65153e5a02e8c987ba08.
---
 examples/PresetDateRangePicker.jsx            | 4 ++--
 src/components/CalendarDay.jsx                | 3 +--
 src/components/CalendarMonth.jsx              | 3 +--
 src/components/CalendarMonthGrid.jsx          | 3 +--
 src/components/CustomizableCalendarDay.jsx    | 3 +--
 src/components/DateInput.jsx                  | 3 +--
 src/components/DateRangePicker.jsx            | 4 +---
 src/components/DateRangePickerInput.jsx       | 3 +--
 src/components/DayPicker.jsx                  | 4 +---
 src/components/DayPickerKeyboardShortcuts.jsx | 3 +--
 src/components/DayPickerNavigation.jsx        | 3 +--
 src/components/KeyboardShortcutRow.jsx        | 3 +--
 src/components/SingleDatePicker.jsx           | 4 +---
 src/components/SingleDatePickerInput.jsx      | 3 +--
 14 files changed, 15 insertions(+), 31 deletions(-)

diff --git a/examples/PresetDateRangePicker.jsx b/examples/PresetDateRangePicker.jsx
index c02ea3e123..ce8640a79b 100644
--- a/examples/PresetDateRangePicker.jsx
+++ b/examples/PresetDateRangePicker.jsx
@@ -4,7 +4,7 @@ import momentPropTypes from 'react-moment-proptypes';
 import moment from 'moment';
 import omit from 'lodash/omit';
 
-import { withStyles, withStylesPropTypes } from 'react-with-styles';
+import { withStyles, withStylesPropTypes, css } from 'react-with-styles';
 
 import DateRangePicker from '../src/components/DateRangePicker';
 
@@ -123,7 +123,7 @@ class DateRangePickerWrapper extends React.Component {
   }
 
   renderDatePresets() {
-    const { presets, styles, css } = this.props;
+    const { presets, styles } = this.props;
     const { startDate, endDate } = this.state;
 
     return (
diff --git a/src/components/CalendarDay.jsx b/src/components/CalendarDay.jsx
index 836a26e0cf..7e630093bf 100644
--- a/src/components/CalendarDay.jsx
+++ b/src/components/CalendarDay.jsx
@@ -2,7 +2,7 @@ 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 { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 import moment from 'moment';
 import raf from 'raf';
 
@@ -107,7 +107,6 @@ class CalendarDay extends React.PureComponent {
       tabIndex,
       styles,
       phrases,
-      css,
     } = this.props;
 
     if (!day) return <td />;
diff --git a/src/components/CalendarMonth.jsx b/src/components/CalendarMonth.jsx
index 910b963905..226918b433 100644
--- a/src/components/CalendarMonth.jsx
+++ b/src/components/CalendarMonth.jsx
@@ -4,7 +4,7 @@ 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 { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 import moment from 'moment';
 
 import { CalendarDayPhrases } from '../defaultPhrases';
@@ -152,7 +152,6 @@ class CalendarMonth extends React.PureComponent {
 
   render() {
     const {
-      css,
       dayAriaLabelFormat,
       daySize,
       focusedDate,
diff --git a/src/components/CalendarMonthGrid.jsx b/src/components/CalendarMonthGrid.jsx
index 7d23d972c1..bb43f01309 100644
--- a/src/components/CalendarMonthGrid.jsx
+++ b/src/components/CalendarMonthGrid.jsx
@@ -2,7 +2,7 @@ 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 { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 import moment from 'moment';
 import { addEventListener } from 'consolidated-events';
 
@@ -265,7 +265,6 @@ class CalendarMonthGrid extends React.PureComponent {
       transitionDuration,
       verticalBorderSpacing,
       setMonthTitleHeight,
-      css,
     } = this.props;
 
     const { months } = this.state;
diff --git a/src/components/CustomizableCalendarDay.jsx b/src/components/CustomizableCalendarDay.jsx
index 97b983af57..2a3ee15752 100644
--- a/src/components/CustomizableCalendarDay.jsx
+++ b/src/components/CustomizableCalendarDay.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import momentPropTypes from 'react-moment-proptypes';
 import { forbidExtraProps, nonNegativeInteger, or } from 'airbnb-prop-types';
-import { withStyles, withStylesPropTypes } from 'react-with-styles';
+import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 import moment from 'moment';
 import raf from 'raf';
 
@@ -272,7 +272,6 @@ class CustomizableCalendarDay extends React.PureComponent {
 
   render() {
     const {
-      css,
       day,
       ariaLabelFormat,
       daySize,
diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
index a119ac91c2..d50ecd9411 100644
--- a/src/components/DateInput.jsx
+++ b/src/components/DateInput.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
-import { withStyles, withStylesPropTypes } from 'react-with-styles';
+import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 import throttle from 'lodash/throttle';
 import isTouchDevice from 'is-touch-device';
 
@@ -190,7 +190,6 @@ class DateInput extends React.PureComponent {
       block,
       styles,
       theme: { reactDates },
-      css,
     } = this.props;
 
     const value = dateString || displayValue || '';
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index e30827306e..c1b18b09ca 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import moment from 'moment';
-import { withStyles, withStylesPropTypes } from 'react-with-styles';
+import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 import { Portal } from 'react-portal';
 import { forbidExtraProps } from 'airbnb-prop-types';
 import { addEventListener } from 'consolidated-events';
@@ -398,7 +398,6 @@ class DateRangePicker extends React.PureComponent {
   renderDayPicker() {
     const {
       anchorDirection,
-      css,
       openDirection,
       isDayBlocked,
       isDayHighlighted,
@@ -559,7 +558,6 @@ class DateRangePicker extends React.PureComponent {
 
   render() {
     const {
-      css,
       startDate,
       startDateId,
       startDatePlaceholderText,
diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index 5989b4f94f..2389595852 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
-import { withStyles, withStylesPropTypes } from 'react-with-styles';
+import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 
 import { DateRangePickerInputPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
@@ -132,7 +132,6 @@ const defaultProps = {
 
 function DateRangePickerInput({
   children,
-  css,
   startDate,
   startDateId,
   startDatePlaceholderText,
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 4c0b1f9543..fc1cc7a726 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { forbidExtraProps, mutuallyExclusiveProps, nonNegativeInteger } from 'airbnb-prop-types';
-import { withStyles, withStylesPropTypes } from 'react-with-styles';
+import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 
 import moment from 'moment';
 import throttle from 'lodash/throttle';
@@ -884,7 +884,6 @@ class DayPicker extends React.PureComponent {
       orientation,
       renderWeekHeaderElement,
       styles,
-      css,
     } = this.props;
 
     const { calendarMonthWidth } = this.state;
@@ -946,7 +945,6 @@ class DayPicker extends React.PureComponent {
     } = this.state;
 
     const {
-      css,
       enableOutsideDays,
       numberOfMonths,
       orientation,
diff --git a/src/components/DayPickerKeyboardShortcuts.jsx b/src/components/DayPickerKeyboardShortcuts.jsx
index f06028b73b..2861d3eda5 100644
--- a/src/components/DayPickerKeyboardShortcuts.jsx
+++ b/src/components/DayPickerKeyboardShortcuts.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { forbidExtraProps } from 'airbnb-prop-types';
-import { withStyles, withStylesPropTypes } from 'react-with-styles';
+import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 
 import { DayPickerKeyboardShortcutsPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
@@ -164,7 +164,6 @@ class DayPickerKeyboardShortcuts extends React.PureComponent {
     const {
       block,
       buttonLocation,
-      css,
       showKeyboardShortcutsPanel,
       closeKeyboardShortcutsPanel,
       styles,
diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index 61a8b9ea33..ee4f367503 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { forbidExtraProps } from 'airbnb-prop-types';
-import { withStyles, withStylesPropTypes } from 'react-with-styles';
+import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 
 import { DayPickerNavigationPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
@@ -59,7 +59,6 @@ const defaultProps = {
 };
 
 function DayPickerNavigation({
-  css,
   inlineStyles,
   disablePrev,
   disableNext,
diff --git a/src/components/KeyboardShortcutRow.jsx b/src/components/KeyboardShortcutRow.jsx
index fa719c07ac..7e3d2401c4 100644
--- a/src/components/KeyboardShortcutRow.jsx
+++ b/src/components/KeyboardShortcutRow.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { forbidExtraProps } from 'airbnb-prop-types';
-import { withStyles, withStylesPropTypes } from 'react-with-styles';
+import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 
 const propTypes = forbidExtraProps({
   ...withStylesPropTypes,
@@ -16,7 +16,6 @@ const defaultProps = {
 };
 
 function KeyboardShortcutRow({
-  css,
   unicode,
   label,
   action,
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index bbdb9d0127..7fb43c0dbc 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import moment from 'moment';
-import { withStyles, withStylesPropTypes } from 'react-with-styles';
+import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 import { Portal } from 'react-portal';
 import { forbidExtraProps } from 'airbnb-prop-types';
 import { addEventListener } from 'consolidated-events';
@@ -388,7 +388,6 @@ class SingleDatePicker extends React.PureComponent {
   renderDayPicker() {
     const {
       anchorDirection,
-      css,
       openDirection,
       onDateChange,
       date,
@@ -530,7 +529,6 @@ class SingleDatePicker extends React.PureComponent {
 
   render() {
     const {
-      css,
       id,
       placeholder,
       ariaLabel,
diff --git a/src/components/SingleDatePickerInput.jsx b/src/components/SingleDatePickerInput.jsx
index 88dbac23ff..af7b4d6731 100644
--- a/src/components/SingleDatePickerInput.jsx
+++ b/src/components/SingleDatePickerInput.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
-import { withStyles, withStylesPropTypes } from 'react-with-styles';
+import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
 
 import { SingleDatePickerInputPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
@@ -95,7 +95,6 @@ const defaultProps = {
 function SingleDatePickerInput({
   id,
   children,
-  css,
   placeholder,
   ariaLabel,
   displayValue,

From d5f747ece8fbd2710f4ee1b780e6bb8fd674defd Mon Sep 17 00:00:00 2001
From: Nora Tarano <nora.tarano@airbnb.com>
Date: Tue, 1 Oct 2019 11:28:57 -0700
Subject: [PATCH 517/618] Version 21.2.0

---
 CHANGELOG.md | 7 ++++++-
 package.json | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ddd64c4789..b35c61fff6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,7 +4,12 @@
 - []  ([#](https://github.com/airbnb/react-dates/pull/))
 -->
 
-## Unreleased
+## 21.2.0
+
+- [fix] Revert "Merge pull request [#1758](https://github.com/airbnb/react-dates/pull/1758): Remove all direct imports of css in favor of injected prop" ([#1818](https://github.com/airbnb/react-dates/pull/1818))
+- [fix] Fix for getWeekHeaders(), prevents it from changing state.currentMonth ([#1796](https://github.com/airbnb/react-dates/pull/1796))
+- [new] Add support for positioning month navigation under the calendar ([#1784](https://github.com/airbnb/react-dates/pull/1784))
+- [new] Add minDate and maxDate props to DateRangePicker ([#1793](https://github.com/airbnb/react-dates/pull/1793), [#1794](https://github.com/airbnb/react-dates/pull/1794))
 
 ## 21.1.0
 
diff --git a/package.json b/package.json
index 9cafa75eeb..b0dc9ee181 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "21.1.0",
+  "version": "21.2.0",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From defb7fd680cab4154d12e9416c9f28e4a47e9e5b Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Fri, 11 Oct 2019 20:16:34 -0700
Subject: [PATCH 518/618] Revert "[Tests] `DayPicker`: unit test for
 getWeekHeaders()"

This reverts commit 5584f822fdcc3fa266deff62756ac887b4c0d2af.
---
 test/components/DayPicker_spec.jsx | 18 ------------------
 1 file changed, 18 deletions(-)

diff --git a/test/components/DayPicker_spec.jsx b/test/components/DayPicker_spec.jsx
index f3df0e776b..63fb8e506c 100644
--- a/test/components/DayPicker_spec.jsx
+++ b/test/components/DayPicker_spec.jsx
@@ -3,7 +3,6 @@ import moment from 'moment/min/moment-with-locales';
 import { expect } from 'chai';
 import sinon from 'sinon-sandbox';
 import { mount, shallow } from 'enzyme';
-import { cloneDeep } from 'lodash';
 
 import * as isDayVisible from '../../src/utils/isDayVisible';
 
@@ -872,23 +871,6 @@ describe('DayPicker', () => {
     });
   });
 
-  describe('#getWeekHeaders', () => {
-    it('returns unmutated weekday headers for currentMonth in a future', () => {
-      sinon.stub(PureDayPicker.prototype, 'render');
-
-      const getWeekHeadersSpy = sinon.spy(PureDayPicker.prototype, 'getWeekHeaders');
-      const INITIAL_MONTH = moment().add(2, 'Months').week(3).weekday(3);
-      const wrapper = shallow(<DayPicker initialVisibleMonth={() => INITIAL_MONTH} />).dive();
-      const instance = wrapper.instance();
-      const state = cloneDeep(wrapper.state());
-
-      expect(instance.getWeekHeaders()).to.be.eql(INITIAL_MONTH.localeData().weekdaysMin());
-      expect(instance.state).not.to.equal(state);
-      expect(instance.state).to.eql(state);
-      expect(getWeekHeadersSpy).to.have.property('callCount', 1);
-    });
-  });
-
   describe.skip('life cycle methods', () => {
     let adjustDayPickerHeightSpy;
     beforeEach(() => {

From a449b9af9c5539a445bd361f8afede68ce9286c0 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Fri, 11 Oct 2019 19:50:18 -0700
Subject: [PATCH 519/618] Remove erroneous .only and turn off
 react/no-deprecated rule

---
 .eslintrc                                         | 2 ++
 test/components/DayPickerRangeController_spec.jsx | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/.eslintrc b/.eslintrc
index 454e2a80d0..bcb6102a29 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -27,6 +27,8 @@
     "no-restricted-imports": 0, // TODO: enable with full RTL support
 
     "react/jsx-props-no-spreading": 0, // TODO: re-evaluate
+
+    "react/no-deprecated": 1, // TODO: update to UNSAFE_componentWillReceiveProps
   },
 
   "overrides": [
diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index d8432f3655..ef57e6d461 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -4492,7 +4492,7 @@ describe('DayPickerRangeController', () => {
       });
     });
 
-    describe.only('renderKeyboardShortcutsPanel prop', () => {
+    describe('renderKeyboardShortcutsPanel prop', () => {
       it('passes down custom panel render function', () => {
         const testRenderKeyboardShortcutsPanel = () => {};
         const wrapper = shallow(

From 862c99f7d346e0e02e77c79bbc90bf202c64c002 Mon Sep 17 00:00:00 2001
From: casey_klimkowsky <casey.klimkowsky@airbnb.com>
Date: Fri, 11 Oct 2019 16:50:53 -0700
Subject: [PATCH 520/618] Call getStateForNewMonth when date/startDate/endDate
 is set to a date that is not visible

---
 src/components/DayPickerRangeController.jsx   | 20 +++-
 .../DayPickerSingleDateController.jsx         | 19 ++--
 .../DayPickerRangeController_spec.jsx         | 99 ++++++++++++++-----
 .../DayPickerSingleDateController_spec.jsx    | 24 +++++
 4 files changed, 127 insertions(+), 35 deletions(-)

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index b96230f127..c665c6afbb 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -18,6 +18,7 @@ import isBeforeDay from '../utils/isBeforeDay';
 import getVisibleDays from '../utils/getVisibleDays';
 import isDayVisible from '../utils/isDayVisible';
 
+import getPooledMoment from '../utils/getPooledMoment';
 import getSelectedDateOffset from '../utils/getSelectedDateOffset';
 
 import toISODateString from '../utils/toISODateString';
@@ -41,7 +42,6 @@ import {
 } from '../constants';
 
 import DayPicker from './DayPicker';
-import getPooledMoment from '../utils/getPooledMoment';
 
 const propTypes = forbidExtraProps({
   startDate: momentPropTypes.momentObj,
@@ -284,6 +284,8 @@ export default class DayPickerRangeController extends React.PureComponent {
     } = this.props;
 
     const { hoverDate } = this.state;
+
+    let { currentMonth } = this.state;
     let { visibleDays } = this.state;
 
     let recomputeOutsideRange = false;
@@ -313,6 +315,18 @@ export default class DayPickerRangeController extends React.PureComponent {
     const didEndDateChange = endDate !== prevEndDate;
     const didFocusChange = focusedInput !== prevFocusedInput;
 
+    let isDateVisible = true;
+
+    if (didStartDateChange || didEndDateChange) {
+      if (didStartDateChange) {
+        isDateVisible = isDayVisible(startDate, currentMonth, numberOfMonths, enableOutsideDays);
+      }
+
+      if (didEndDateChange) {
+        isDateVisible = isDayVisible(endDate, currentMonth, numberOfMonths, enableOutsideDays);
+      }
+    }
+
     if (
       numberOfMonths !== prevNumberOfMonths
       || enableOutsideDays !== prevEnableOutsideDays
@@ -321,10 +335,10 @@ export default class DayPickerRangeController extends React.PureComponent {
         && !prevFocusedInput
         && didFocusChange
       )
+      || !isDateVisible
     ) {
       const newMonthState = this.getStateForNewMonth(nextProps);
-      const { currentMonth } = newMonthState;
-      ({ visibleDays } = newMonthState);
+      ({ currentMonth, visibleDays } = newMonthState);
       this.setState({
         currentMonth,
         visibleDays,
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index f9b9e1be4e..4c65c66707 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -13,6 +13,7 @@ import isSameDay from '../utils/isSameDay';
 import isAfterDay from '../utils/isAfterDay';
 
 import getVisibleDays from '../utils/getVisibleDays';
+import isDayVisible from '../utils/isDayVisible';
 
 import toISODateString from '../utils/toISODateString';
 import { addModifier, deleteModifier } from '../utils/modifiers';
@@ -219,6 +220,7 @@ export default class DayPickerSingleDateController extends React.PureComponent {
       focused: prevFocused,
       date: prevDate,
     } = this.props;
+    let { currentMonth } = this.state;
     let { visibleDays } = this.state;
 
     let recomputeOutsideRange = false;
@@ -244,6 +246,15 @@ export default class DayPickerSingleDateController extends React.PureComponent {
       recomputeOutsideRange || recomputeDayBlocked || recomputeDayHighlighted
     );
 
+    const didDateChange = date !== prevDate;
+    const didFocusChange = focused !== prevFocused;
+
+    let isDateVisible = true;
+
+    if (didDateChange) {
+      isDateVisible = isDayVisible(date, currentMonth, numberOfMonths, enableOutsideDays);
+    }
+
     if (
       numberOfMonths !== prevNumberOfMonths
       || enableOutsideDays !== prevEnableOutsideDays
@@ -251,20 +262,16 @@ export default class DayPickerSingleDateController extends React.PureComponent {
         initialVisibleMonth !== prevInitialVisibleMonth
         && !prevFocused
         && focused
-      )
+      ) || !isDateVisible
     ) {
       const newMonthState = this.getStateForNewMonth(nextProps);
-      const { currentMonth } = newMonthState;
-      ({ visibleDays } = newMonthState);
+      ({ currentMonth, visibleDays } = newMonthState);
       this.setState({
         currentMonth,
         visibleDays,
       });
     }
 
-    const didDateChange = date !== prevDate;
-    const didFocusChange = focused !== prevFocused;
-
     let modifiers = {};
 
     if (didDateChange) {
diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index ef57e6d461..462380e9eb 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -297,33 +297,80 @@ describe('DayPickerRangeController', () => {
           });
           expect(wrapper.instance().state.visibleDays).to.equal(visibleDays);
         });
-        describe('startDate changed from one date to another', () => {
-          it('removes previous `after-hovered-start` range', () => {
-            const minimumNights = 5;
-            const startDate = moment().add(7, 'days');
-            const dayAfterStartDate = startDate.clone().add(1, 'day');
-            const firstAvailableDate = startDate.clone().add(minimumNights + 1, 'days');
-            const deleteModifierFromRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifierFromRange');
-            const nextStartDate = moment().add(4, 'days');
-            const wrapper = shallow((
-              <DayPickerRangeController
-                onDatesChange={sinon.stub()}
-                onFocusChange={sinon.stub()}
-                startDate={startDate}
-                focusedInput={START_DATE}
-                minimumNights={minimumNights}
-              />
-            ));
-            deleteModifierFromRangeSpy.resetHistory();
-            wrapper.instance().componentWillReceiveProps({
-              ...props,
-              startDate: nextStartDate,
-            });
-            const afterHoverStartCalls = getCallsByModifier(deleteModifierFromRangeSpy, 'after-hovered-start');
-            expect(afterHoverStartCalls.length).to.equal(1);
-            expect(isSameDay(afterHoverStartCalls[0].args[1], dayAfterStartDate)).to.equal(true);
-            expect(isSameDay(afterHoverStartCalls[0].args[2], firstAvailableDate)).to.equal(true);
+      });
+
+      describe('startDate changed from one date to another', () => {
+        it('removes previous `after-hovered-start` range', () => {
+          const minimumNights = 5;
+          const startDate = moment().add(7, 'days');
+          const dayAfterStartDate = startDate.clone().add(1, 'day');
+          const firstAvailableDate = startDate.clone().add(minimumNights + 1, 'days');
+          const deleteModifierFromRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifierFromRange');
+          const nextStartDate = moment().add(4, 'days');
+          const wrapper = shallow((
+            <DayPickerRangeController
+              onDatesChange={sinon.stub()}
+              onFocusChange={sinon.stub()}
+              startDate={startDate}
+              focusedInput={START_DATE}
+              minimumNights={minimumNights}
+            />
+          ));
+          deleteModifierFromRangeSpy.resetHistory();
+          wrapper.instance().componentWillReceiveProps({
+            ...props,
+            startDate: nextStartDate,
           });
+          const afterHoverStartCalls = getCallsByModifier(deleteModifierFromRangeSpy, 'after-hovered-start');
+          expect(afterHoverStartCalls.length).to.equal(1);
+          expect(isSameDay(afterHoverStartCalls[0].args[1], dayAfterStartDate)).to.equal(true);
+          expect(isSameDay(afterHoverStartCalls[0].args[2], firstAvailableDate)).to.equal(true);
+        });
+
+        it('calls getStateForNewMonth with nextProps when date is not visible', () => {
+          const getStateForNewMonthSpy = sinon.spy(
+            DayPickerRangeController.prototype,
+            'getStateForNewMonth',
+          );
+          const startDate = moment();
+          const nextStartDate = startDate.clone().add(2, 'months');
+
+          const wrapper = shallow((
+            <DayPickerRangeController {...props} startDate={startDate} />
+          ));
+
+          getStateForNewMonthSpy.resetHistory();
+
+          wrapper.instance().componentWillReceiveProps({
+            ...props,
+            startDate: nextStartDate,
+          });
+
+          expect(getStateForNewMonthSpy.callCount).to.equal(1);
+        });
+      });
+
+      describe('endDate changed from one date to another', () => {
+        it('calls getStateForNewMonth with nextProps when date is not visible', () => {
+          const getStateForNewMonthSpy = sinon.spy(
+            DayPickerRangeController.prototype,
+            'getStateForNewMonth',
+          );
+          const endDate = moment();
+          const nextEndDate = endDate.clone().add(2, 'months');
+
+          const wrapper = shallow((
+            <DayPickerRangeController {...props} endDate={endDate} />
+          ));
+
+          getStateForNewMonthSpy.resetHistory();
+
+          wrapper.instance().componentWillReceiveProps({
+            ...props,
+            endDate: nextEndDate,
+          });
+
+          expect(getStateForNewMonthSpy.callCount).to.equal(1);
         });
       });
     });
diff --git a/test/components/DayPickerSingleDateController_spec.jsx b/test/components/DayPickerSingleDateController_spec.jsx
index 6cd614a91c..e7154ccef8 100644
--- a/test/components/DayPickerSingleDateController_spec.jsx
+++ b/test/components/DayPickerSingleDateController_spec.jsx
@@ -46,6 +46,30 @@ describe('DayPickerSingleDateController', () => {
       onFocusChange() {},
     };
 
+    describe('date changed from one date to another', () => {
+      it('calls getStateForNewMonth with nextProps when date is not visible', () => {
+        const getStateForNewMonthSpy = sinon.spy(
+          DayPickerSingleDateController.prototype,
+          'getStateForNewMonth',
+        );
+        const date = moment();
+        const nextDate = date.clone().add(2, 'months');
+
+        const wrapper = shallow((
+          <DayPickerSingleDateController {...props} date={date} />
+        ));
+
+        getStateForNewMonthSpy.resetHistory();
+
+        wrapper.instance().componentWillReceiveProps({
+          ...props,
+          date: nextDate,
+        });
+
+        expect(getStateForNewMonthSpy.callCount).to.equal(1);
+      });
+    });
+
     describe('modifiers', () => {
       describe('selected modifier', () => {
         describe('props.date did not change', () => {

From c262f67fb32148e26d858733fb9a550da580b0ef Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Fri, 11 Oct 2019 20:50:47 -0700
Subject: [PATCH 521/618] Version 21.2.1

---
 CHANGELOG.md | 4 ++++
 package.json | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b35c61fff6..0ec4332b3c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,10 @@
 - []  ([#](https://github.com/airbnb/react-dates/pull/))
 -->
 
+## 21.2.1
+
+- [fix] Call getStateForNewMonth when date/startDate/endDate is set to a date that is not visible ([#1834](https://github.com/airbnb/react-dates/pull/1834))
+
 ## 21.2.0
 
 - [fix] Revert "Merge pull request [#1758](https://github.com/airbnb/react-dates/pull/1758): Remove all direct imports of css in favor of injected prop" ([#1818](https://github.com/airbnb/react-dates/pull/1818))
diff --git a/package.json b/package.json
index b0dc9ee181..a07fc5348b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "21.2.0",
+  "version": "21.2.1",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From efaf200acb0cda403754d3fdf37448670ce3514d Mon Sep 17 00:00:00 2001
From: Nora Tarano <nora.tarano@airbnb.com>
Date: Fri, 18 Oct 2019 17:11:43 -0700
Subject: [PATCH 522/618] Update react-with-styles 4.0.1 -> 4.1.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a07fc5348b..80137cb9d3 100644
--- a/package.json
+++ b/package.json
@@ -127,7 +127,7 @@
     "react-outside-click-handler": "^1.2.4",
     "react-portal": "^4.2.0",
     "react-with-direction": "^1.3.1",
-    "react-with-styles": "^4.0.1",
+    "react-with-styles": "^4.1.0-alpha.1",
     "react-with-styles-interface-css": "^6.0.0"
   },
   "peerDependencies": {

From e80c45e340d00830575156f6af1e2c9de11e6d35 Mon Sep 17 00:00:00 2001
From: Kris Salvador <kriss@spotify.com>
Date: Mon, 21 Oct 2019 11:56:38 -0400
Subject: [PATCH 523/618] Fix tests

---
 src/components/DayPickerRangeController.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index ff4153be68..734f87cfa6 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -223,11 +223,11 @@ export default class DayPickerRangeController extends React.PureComponent {
       'last-day-of-week': (day) => this.isLastDayOfWeek(day),
       'hovered-start-first-possible-end': (day, hoverDate) => this.isFirstPossibleEndDateForHoveredStartDate(day, hoverDate),
       'hovered-start-blocked-minimum-nights': (day, hoverDate) => this.doesNotMeetMinNightsForHoveredStartDate(day, hoverDate),
-      'before-hovered-end': day => this.isDayBeforeHoveredEndDate(day),
-      'no-selected-start-before-selected-end': day => this.beforeSelectedEnd(day) && !props.startDate,
+      'before-hovered-end': (day) => this.isDayBeforeHoveredEndDate(day),
+      'no-selected-start-before-selected-end': (day) => this.beforeSelectedEnd(day) && !props.startDate,
       'selected-start-in-hovered-span': (day, hoverDate) => this.isStartDate(day) && isAfterDay(hoverDate, day),
-      'selected-start-no-selected-end': day => this.isStartDate(day) && !props.endDate,
-      'selected-end-no-selected-start': day => this.isEndDate(day) && !props.startDate,
+      'selected-start-no-selected-end': (day) => this.isStartDate(day) && !props.endDate,
+      'selected-end-no-selected-start': (day) => this.isEndDate(day) && !props.startDate,
     };
 
     const { currentMonth, visibleDays } = this.getStateForNewMonth(props);

From d3ad5ce1d12cd5a3ec113ff834d5ceb0ff1d9366 Mon Sep 17 00:00:00 2001
From: Nora Tarano <nora.tarano@airbnb.com>
Date: Mon, 21 Oct 2019 17:54:29 -0700
Subject: [PATCH 524/618] Version 21.3.0

---
 CHANGELOG.md | 5 +++++
 package.json | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0ec4332b3c..1a2aff8675 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,11 @@
 - []  ([#](https://github.com/airbnb/react-dates/pull/))
 -->
 
+## 21.3.0
+
+- [new] Update react-with-styles 4.0.1 -> 4.1.0 ([#1843](https://github.com/airbnb/react-dates/pull/1843))
+- [new] Add Input Font-Weight to Default Theme ([#1765](https://github.com/airbnb/react-dates/pull/#1765))
+
 ## 21.2.1
 
 - [fix] Call getStateForNewMonth when date/startDate/endDate is set to a date that is not visible ([#1834](https://github.com/airbnb/react-dates/pull/1834))
diff --git a/package.json b/package.json
index 80137cb9d3..65f2f826d3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "21.2.1",
+  "version": "21.3.0",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From bcd1a09e76c65479156a7e78e8ed6f8853ea2f41 Mon Sep 17 00:00:00 2001
From: Nora Tarano <nora.tarano@airbnb.com>
Date: Mon, 21 Oct 2019 18:00:24 -0700
Subject: [PATCH 525/618] Update react-with-styles version to non-alpha release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 65f2f826d3..0dddc47a72 100644
--- a/package.json
+++ b/package.json
@@ -127,7 +127,7 @@
     "react-outside-click-handler": "^1.2.4",
     "react-portal": "^4.2.0",
     "react-with-direction": "^1.3.1",
-    "react-with-styles": "^4.1.0-alpha.1",
+    "react-with-styles": "^4.1.0",
     "react-with-styles-interface-css": "^6.0.0"
   },
   "peerDependencies": {

From 0362c92889fe517ebd559fccd2ad85e76a8b3e85 Mon Sep 17 00:00:00 2001
From: Nora Tarano <nora.tarano@airbnb.com>
Date: Mon, 21 Oct 2019 18:04:19 -0700
Subject: [PATCH 526/618] Version 21.3.1

---
 CHANGELOG.md | 4 ++++
 package.json | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1a2aff8675..433a704764 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,10 @@
 - []  ([#](https://github.com/airbnb/react-dates/pull/))
 -->
 
+## 21.3.1
+
+- [fix] Update react-with-styles 4.1.0-alpha.1 -> 4.1.0
+
 ## 21.3.0
 
 - [new] Update react-with-styles 4.0.1 -> 4.1.0 ([#1843](https://github.com/airbnb/react-dates/pull/1843))
diff --git a/package.json b/package.json
index 0dddc47a72..21c74736d5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "21.3.0",
+  "version": "21.3.1",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From f07dbfae22f8c879c1b44127b374932f0c689d2e Mon Sep 17 00:00:00 2001
From: Kris Salvador <kriss@spotify.com>
Date: Mon, 21 Oct 2019 17:38:34 -0400
Subject: [PATCH 527/618] Add tests for modifiers

---
 src/components/DayPickerRangeController.jsx   |   9 +-
 .../DayPickerRangeController_spec.jsx         | 375 +++++++++++++++++-
 2 files changed, 373 insertions(+), 11 deletions(-)

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 734f87cfa6..b932092af2 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -385,7 +385,7 @@ export default class DayPickerRangeController extends React.PureComponent {
       modifiers = this.addModifier(modifiers, endDate, 'selected-end');
 
       if (prevEndDate && (!startDate || !prevStartDate)) {
-        modifiers = this.deleteModifier(modifiers, prevEndDate, 'selected-end-no-start-date');
+        modifiers = this.deleteModifier(modifiers, prevEndDate, 'selected-end-no-selected-start');
       }
     }
 
@@ -756,11 +756,10 @@ export default class DayPickerRangeController extends React.PureComponent {
 
           if (isSameDay(day, endDate)) {
             const newStartSpan = endDate.clone().subtract(minimumNights, 'days');
-            const newEndSpan = endDate.clone();
             modifiers = this.addModifierToRange(
               modifiers,
               newStartSpan,
-              newEndSpan,
+              endDate,
               'before-hovered-end',
             );
           }
@@ -823,6 +822,7 @@ export default class DayPickerRangeController extends React.PureComponent {
       minimumNights,
     } = this.props;
     const { hoverDate, visibleDays, dateOffset } = this.state;
+
     if (this.isTouchDevice || !hoverDate) return;
 
     let modifiers = {};
@@ -861,8 +861,7 @@ export default class DayPickerRangeController extends React.PureComponent {
 
     if (endDate && isSameDay(day, endDate)) {
       const startSpan = endDate.clone().subtract(minimumNights, 'days');
-      const endSpan = endDate.clone();
-      modifiers = this.deleteModifierFromRange(modifiers, startSpan, endSpan, 'before-hovered-end');
+      modifiers = this.deleteModifierFromRange(modifiers, startSpan, endDate, 'before-hovered-end');
     }
 
     if (!this.isBlocked(hoverDate)) {
diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index 1b77d7a9d6..37c2ca33cc 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -13,6 +13,7 @@ import toISODateString from '../../src/utils/toISODateString';
 import toISOMonthString from '../../src/utils/toISOMonthString';
 import isInclusivelyAfterDay from '../../src/utils/isInclusivelyAfterDay';
 import isSameDay from '../../src/utils/isSameDay';
+import isBeforeDay from '../../src/utils/isBeforeDay';
 import * as isDayVisible from '../../src/utils/isDayVisible';
 import getVisibleDays from '../../src/utils/getVisibleDays';
 
@@ -40,8 +41,8 @@ describe('DayPickerRangeController', () => {
   describe('#componentDidMount', () => {
     const props = {
       ...DayPickerRangeController.defaultProps,
-      onDatesChange() { },
-      onFocusChange() { },
+      onDatesChange() {},
+      onFocusChange() {},
     };
 
     describe('phrases', () => {
@@ -98,8 +99,8 @@ describe('DayPickerRangeController', () => {
   describe('#componentWillReceiveProps', () => {
     const props = {
       ...DayPickerRangeController.defaultProps,
-      onDatesChange() { },
-      onFocusChange() { },
+      onDatesChange() {},
+      onFocusChange() {},
     };
 
     describe('rebuilding currentMonth/visibleDays', () => {
@@ -351,6 +352,36 @@ describe('DayPickerRangeController', () => {
       });
 
       describe('endDate changed from one date to another', () => {
+        it('removes previous `selected-end-no-start-date` when no start date selected', () => {
+          const minimumNights = 5;
+          const endDate = moment().add(7, 'days');
+          const deleteModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifier');
+          const addModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifier');
+          const nextEndDate = moment().add(4, 'days');
+          const wrapper = shallow((
+            <DayPickerRangeController
+              onDatesChange={sinon.stub()}
+              onFocusChange={sinon.stub()}
+              endDate={endDate}
+              focusedInput={END_DATE}
+              minimumNights={minimumNights}
+            />
+          ));
+          deleteModifierSpy.resetHistory();
+          addModifierSpy.resetHistory();
+          wrapper.instance().componentWillReceiveProps({
+            ...props,
+            endDate: nextEndDate,
+          });
+          const selectedEndNoStartDateDelete = getCallsByModifier(deleteModifierSpy, 'selected-end-no-selected-start');
+          expect(selectedEndNoStartDateDelete.length).to.equal(1);
+          expect(isSameDay(selectedEndNoStartDateDelete[0].args[1], endDate)).to.equal(true);
+
+          const selectedEndNoStartDateAdd = getCallsByModifier(addModifierSpy, 'selected-end-no-selected-start');
+          expect(selectedEndNoStartDateAdd.length).to.equal(1);
+          expect(isSameDay(selectedEndNoStartDateAdd[0].args[1], nextEndDate)).to.equal(true);
+        });
+
         it('calls getStateForNewMonth with nextProps when date is not visible', () => {
           const getStateForNewMonthSpy = sinon.spy(
             DayPickerRangeController.prototype,
@@ -1576,6 +1607,100 @@ describe('DayPickerRangeController', () => {
           });
         });
       });
+
+      describe('no-selected-start-before-selected-end', () => {
+        describe('start date has changed, start date is falsey, and end date is truthy', () => {
+          it('calls addModifier with `no-selected-start-before-selected-end` if day is before selected end date', () => {
+            const addModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifier');
+            const startDate = moment().add(1, 'days');
+            const endDate = startDate.clone().add(1, 'days');
+            const wrapper = shallow(<DayPickerRangeController {...props} startDate={startDate} endDate={endDate} />);
+            const newEndDate = endDate.clone().add(1, 'days');
+            wrapper.instance().componentWillReceiveProps({ ...props, startDate: null, endDate: newEndDate });
+            const noSelectedStartBeforeSelectedEndCalls = getCallsByModifier(addModifierSpy, 'no-selected-start-before-selected-end');
+            noSelectedStartBeforeSelectedEndCalls.forEach((eachCall) => {
+              const day = eachCall.args[1];
+
+              expect(isBeforeDay(day, newEndDate)).to.equal(true);
+            });
+          });
+        });
+      });
+
+      describe('selected-start-no-selected-end', () => {
+        describe('start date is truthy, and end date is falsey', () => {
+          it('calls addModifier with `selected-start-no-selected-end`', () => {
+            const addModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifier');
+            const wrapper = shallow(<DayPickerRangeController {...props} />);
+            const startDate = moment();
+            wrapper.instance().componentWillReceiveProps({ ...props, startDate });
+            const selectedStartNoSelectedEndCalls = getCallsByModifier(addModifierSpy, 'selected-start-no-selected-end');
+            expect(selectedStartNoSelectedEndCalls.length).to.equal(1);
+            expect(selectedStartNoSelectedEndCalls[0].args[1]).to.equal(startDate);
+          });
+        });
+
+
+        describe('start date has changed, and end date or previous end date are falsey', () => {
+          it('calls deleteModifier with `selected-start-no-selected-end`', () => {
+            const deleteModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifier');
+            const startDate = moment();
+            const wrapper = shallow(<DayPickerRangeController {...props} startDate={startDate} />);
+            const newStartDate = startDate.clone().add(1, 'days');
+            wrapper.instance().componentWillReceiveProps({ ...props, startDate: newStartDate });
+            const selectedStartNoSelectedEndCalls = getCallsByModifier(deleteModifierSpy, 'selected-start-no-selected-end');
+            expect(selectedStartNoSelectedEndCalls.length).to.equal(1);
+            expect(selectedStartNoSelectedEndCalls[0].args[1]).to.equal(startDate);
+          });
+        });
+      });
+
+      describe('selected-end-no-selected-start', () => {
+        describe('end date is truthy, and start date is falsey', () => {
+          it('calls addModifier with `selected-end-no-selected-start`', () => {
+            const addModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifier');
+            const wrapper = shallow(<DayPickerRangeController {...props} />);
+            const endDate = moment();
+            wrapper.instance().componentWillReceiveProps({ ...props, endDate });
+            const selectedStartNoSelectedEndCalls = getCallsByModifier(addModifierSpy, 'selected-end-no-selected-start');
+            expect(selectedStartNoSelectedEndCalls.length).to.equal(1);
+            expect(selectedStartNoSelectedEndCalls[0].args[1]).to.equal(endDate);
+          });
+        });
+
+        describe('end date has changed, and start date and previous start date are falsey', () => {
+          it('calls deleteModifier with `selected-end-no-selected-start`', () => {
+            const deleteModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifier');
+            const startDate = moment();
+            const wrapper = shallow(<DayPickerRangeController {...props} startDate={startDate} />);
+            const newStartDate = startDate.clone().add(1, 'days');
+            wrapper.instance().componentWillReceiveProps({ ...props, startDate: newStartDate });
+            const selectedStartNoSelectedEndCalls = getCallsByModifier(deleteModifierSpy, 'selected-end-no-selected-start');
+            expect(selectedStartNoSelectedEndCalls.length).to.equal(1);
+            expect(selectedStartNoSelectedEndCalls[0].args[1]).to.equal(startDate);
+          });
+        });
+      });
+
+      describe('before-hovered-end', () => {
+        describe('end date changed, end date is truthy and start date is falsey', () => {
+          it('calls addModifierToRange with `before-hovered-end`', () => {
+            const minimumNights = 1;
+            const addModifierToRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifierToRange');
+            const endDate = moment();
+            const wrapper = shallow(<DayPickerRangeController {...props} minimumNights={minimumNights} endDate={endDate} />);
+            const newEndDate = endDate.clone().add(1, 'days');
+            addModifierToRangeSpy.resetHistory();
+            wrapper.instance().componentWillReceiveProps({ ...props, endDate: newEndDate });
+            const beforeHoveredEndCalls = getCallsByModifier(addModifierToRangeSpy, 'before-hovered-end');
+            expect(beforeHoveredEndCalls.length).to.equal(1);
+            expect(toISODateString(beforeHoveredEndCalls[0].args[1])).to.equal(toISODateString(newEndDate.clone().subtract(minimumNights, 'days')));
+            expect(toISODateString(beforeHoveredEndCalls[0].args[2])).to.equal(toISODateString(newEndDate));
+          });
+        });
+      });
+
+
     });
 
     describe('phrases', () => {
@@ -2770,6 +2895,124 @@ describe('DayPickerRangeController', () => {
           });
         });
       });
+
+      describe('selected-start-in-hovered-span modifier', () => {
+        describe('end date is falsey and focusedInput === `END_DATE`', () => {
+          describe('day is start date or before start date', () => {
+            it('calls deleteModifier with `selected-start-in-hovered-span` on start date', () => {
+              const deleteModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifier');
+              const startDate = today;
+              const wrapper = shallow(<DayPickerRangeController
+                focusedInput={END_DATE}
+                startDate={startDate}
+              />);
+              const yesterday = today.clone().subtract(1, 'days');
+              deleteModifierSpy.resetHistory();
+              wrapper.instance().onDayMouseEnter(yesterday);
+              const deleteModifierCalls = getCallsByModifier(deleteModifierSpy, 'selected-start-in-hovered-span');
+              expect(deleteModifierCalls.length).to.equal(1);
+              expect(deleteModifierCalls[0].args[1]).to.equal(startDate);
+            });
+          });
+
+          describe('day is not blocked, and is after the start date', () => {
+            it('calls addModifier with `selected-start-in-hovered-span` on start date', () => {
+              const addModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifier');
+              const startDate = today;
+              const wrapper = shallow(<DayPickerRangeController
+                focusedInput={END_DATE}
+                startDate={startDate}
+              />);
+              const tomorrow = today.clone().add(1, 'days');
+              addModifierSpy.resetHistory();
+              wrapper.instance().onDayMouseEnter(tomorrow);
+              const addModifierCalls = getCallsByModifier(addModifierSpy, 'selected-start-in-hovered-span');
+              expect(addModifierCalls.length).to.equal(1);
+              expect(addModifierCalls[0].args[1]).to.equal(startDate);
+            });
+          });
+        });
+      });
+
+      describe('selected-end-in-hovered-span modifier', () => {
+        describe('start date is falsey and focusedInput === `START_DATE`', () => {
+          describe('day is end date or after start date', () => {
+            it('calls deleteModifier with `selected-end-in-hovered-span` on end date', () => {
+              const deleteModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifier');
+              const endDate = today;
+              const wrapper = shallow(<DayPickerRangeController
+                focusedInput={START_DATE}
+                endDate={endDate}
+              />);
+              const tomorrow = today.clone().add(1, 'days');
+              deleteModifierSpy.resetHistory();
+              wrapper.instance().onDayMouseEnter(tomorrow);
+              const deleteModifierCalls = getCallsByModifier(deleteModifierSpy, 'selected-end-in-hovered-span');
+              expect(deleteModifierCalls.length).to.equal(1);
+              expect(deleteModifierCalls[0].args[1]).to.equal(endDate);
+            });
+          });
+
+          describe('day is not blocked, and is before the end date', () => {
+            it('calls addModifier with `selected-end-in-hovered-span`', () => {
+              const addModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifier');
+              const endDate = today;
+              const wrapper = shallow(<DayPickerRangeController
+                focusedInput={START_DATE}
+                endDate={endDate}
+              />);
+              const yesterday = today.clone().subtract(1, 'days');
+              addModifierSpy.resetHistory();
+              wrapper.instance().onDayMouseEnter(yesterday);
+              const addModifierCalls = getCallsByModifier(addModifierSpy, 'selected-end-in-hovered-span');
+              expect(addModifierCalls.length).to.equal(1);
+              expect(addModifierCalls[0].args[1]).to.equal(today);
+            });
+          });
+        });
+      });
+
+      describe('before-hovered-end modifier', () => {
+        describe('end date is truthy and focusedInput is truthy', () => {
+          it('calls deleteModifierFromRange with `before-hovered-end` on minimum nights days before end date', () => {
+            const deleteModifierFromRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifierFromRange');
+            const endDate = today;
+            const minimumNights = 5;
+            const wrapper = shallow(<DayPickerRangeController
+              focusedInput={START_DATE}
+              minimumNights={minimumNights}
+              endDate={endDate}
+            />);
+            const minimumNightStartSpan = endDate.clone().subtract(minimumNights, 'days');
+            deleteModifierFromRangeSpy.resetHistory();
+            wrapper.instance().onDayMouseEnter(today);
+            const deleteModifierFromRangeCalls = getCallsByModifier(deleteModifierFromRangeSpy, 'before-hovered-end');
+            expect(deleteModifierFromRangeCalls.length).to.equal(1);
+            expect(toISODateString(deleteModifierFromRangeCalls[0].args[1])).to.equal(toISODateString(minimumNightStartSpan));
+            expect(deleteModifierFromRangeCalls[0].args[2]).to.equal(endDate);
+          });
+        });
+
+        describe('day is equal to end date', () => {
+          it('calls addModifierToRange with `before-hovered-end`', () => {
+            const addModifierFromRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifierToRange');
+            const endDate = today;
+            const minimumNights = 5;
+            const wrapper = shallow(<DayPickerRangeController
+              focusedInput={START_DATE}
+              minimumNights={minimumNights}
+              endDate={endDate}
+            />);
+            const minimumNightStartSpan = endDate.clone().subtract(minimumNights, 'days');
+            addModifierFromRangeSpy.resetHistory();
+            wrapper.instance().onDayMouseEnter(today);
+            const addModifierFromRangeCalls = getCallsByModifier(addModifierFromRangeSpy, 'before-hovered-end');
+            expect(addModifierFromRangeCalls.length).to.equal(1);
+            expect(toISODateString(addModifierFromRangeCalls[0].args[1])).to.equal(toISODateString(minimumNightStartSpan));
+            expect(addModifierFromRangeCalls[0].args[2]).to.equal(endDate);
+          });
+        });
+      });
     });
   });
 
@@ -3004,7 +3247,7 @@ describe('DayPickerRangeController', () => {
             expect(isSameDay(hoveredStartBlockedMinNightsCalls[0].args[2], today.clone().add(2, 'days'))).to.equal(true);
           });
 
-          it('does not call deleteModifier with `hovered-start-blocked-minimum-nights` if the hovered date is blocked', () => {
+          it('does not call deleteModifierFromRange with `hovered-start-blocked-minimum-nights` if the hovered date is blocked', () => {
             const deleteModifierFromRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifierFromRange');
             const getMinNightsForHoverDateStub = sinon.stub().returns(2);
             const wrapper = shallow(<DayPickerRangeController
@@ -3053,6 +3296,84 @@ describe('DayPickerRangeController', () => {
           });
         });
       });
+
+      describe('selected-start-in-hovered-span modifier', () => {
+        describe('start date is truthy, end date is falsey and day is after start date', () => {
+          it('calls deleteModifier with `selected-start-in-hovered-span` on start date', () => {
+            const startDate = today;
+            const dayAfterStartDate = startDate.clone().add(1, 'day');
+            const hoverDate = today.clone().add(5, 'days');
+            const deleteModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifier');
+            const wrapper = shallow((
+              <DayPickerRangeController
+                startDate={startDate}
+                endDate={null}
+                onDatesChange={sinon.stub()}
+                onFocusChange={sinon.stub()}
+              />
+            ));
+            wrapper.setState({ hoverDate });
+            deleteModifierSpy.resetHistory();
+            wrapper.instance().onDayMouseLeave(dayAfterStartDate);
+            const deleteModifierCalls = getCallsByModifier(deleteModifierSpy, 'selected-start-in-hovered-span');
+            expect(deleteModifierCalls.length).to.equal(1);
+            expect(deleteModifierCalls[0].args[1]).to.equal(startDate);
+          });
+        })
+      });
+
+      describe('selected-end-in-hovered-span modifier', () => {
+        describe('end date is truthy, start date is falsey and day is before end date', () => {
+          it('calls deleteModifier with `selected-end-in-hovered-span` on end date', () => {
+            const endDate = today;
+            const dayBeforeEndDate = endDate.clone().subtract(1, 'day');
+            const hoverDate = today.clone().add(5, 'days');
+            const deleteModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifier');
+            const wrapper = shallow((
+              <DayPickerRangeController
+                startDate={null}
+                endDate={endDate}
+                onDatesChange={sinon.stub()}
+                onFocusChange={sinon.stub()}
+              />
+            ));
+            wrapper.setState({ hoverDate });
+            deleteModifierSpy.resetHistory();
+            wrapper.instance().onDayMouseLeave(dayBeforeEndDate);
+            const deleteModifierCalls = getCallsByModifier(deleteModifierSpy, 'selected-end-in-hovered-span');
+            expect(deleteModifierCalls.length).to.equal(1);
+            expect(deleteModifierCalls[0].args[1]).to.equal(endDate);
+          });
+        })
+      });
+
+      describe('before-hovered-end modifier', () => {
+        describe('end date is truthy and day is end date', () => {
+          it('calls deleteModifierFromRange with `before-hovered-end` on span of end date to end date minus minimum nights', () => {
+            const endDate = today;
+            const hoverDate = today.clone().subtract(5, 'days');
+            const deleteModifierFromRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifierFromRange');
+            const minimumNights = 5;
+            const minimumNightStartSpan = endDate.clone().subtract(minimumNights, 'days');
+            const wrapper = shallow((
+              <DayPickerRangeController
+                startDate={null}
+                minimumNights={minimumNights}
+                endDate={endDate}
+                onDatesChange={sinon.stub()}
+                onFocusChange={sinon.stub()}
+              />
+            ));
+            deleteModifierFromRangeSpy.resetHistory();
+            wrapper.setState({ hoverDate });
+            wrapper.instance().onDayMouseLeave(endDate);
+            const deleteModifierFromRangeCalls = getCallsByModifier(deleteModifierFromRangeSpy, 'before-hovered-end');
+            expect(deleteModifierFromRangeCalls.length).to.equal(1);
+            expect(toISODateString(deleteModifierFromRangeCalls[0].args[1])).to.equal(toISODateString(minimumNightStartSpan));
+            expect(deleteModifierFromRangeCalls[0].args[2]).to.equal(endDate);
+          });
+        })
+      });
     });
   });
 
@@ -4514,6 +4835,48 @@ describe('DayPickerRangeController', () => {
       });
     });
 
+    describe('#beforeSelectedEnd', () => {
+      it('returns true if day is before end date', () => {
+        const endDate = today;
+        const dayBeforeEndDate = endDate.clone().subtract(1, 'days');
+        const wrapper = shallow(<DayPickerRangeController
+          endDate={endDate}
+        />);
+        expect(wrapper.instance().beforeSelectedEnd(dayBeforeEndDate)).to.equal(true);
+      });
+
+      it('returns false if day is after or equal to end date', () => {
+        const endDate = today;
+        const dayAfterEndDate = endDate.clone().add(1, 'days');
+        const wrapper = shallow(<DayPickerRangeController
+          endDate={endDate}
+        />);
+        expect(wrapper.instance().beforeSelectedEnd(dayAfterEndDate)).to.equal(false);
+      });
+    });
+
+    describe('#isDayBeforeHoveredEndDate', () => {
+      it('returns false if day is after hovered end date', () => {
+        const endDate = today;
+        const dayAfterEndDate = endDate.clone().add(1, 'days');
+        const wrapper = shallow(<DayPickerRangeController
+          endDate={endDate}
+        />);
+        wrapper.setState({ hoverDate: endDate });
+        expect(wrapper.instance().isDayBeforeHoveredEndDate(dayAfterEndDate)).to.equal(false);
+      });
+
+      it('returns true if day is before hovered end date', () => {
+        const endDate = today;
+        const dayBeforeEndDate = endDate.clone().subtract(1, 'days');
+        const wrapper = shallow(<DayPickerRangeController
+          endDate={endDate}
+        />);
+        wrapper.setState({ hoverDate: endDate });
+        expect(wrapper.instance().isDayBeforeHoveredEndDate(dayBeforeEndDate)).to.equal(true);
+      });
+    });
+
     describe('noNavButtons prop', () => {
       it('renders navigation button', () => {
         const wrapper = shallow(<DayPickerRangeController />).dive().dive();
@@ -4528,7 +4891,7 @@ describe('DayPickerRangeController', () => {
 
     describe('renderKeyboardShortcutsButton prop', () => {
       it('pass down custom button render function', () => {
-        const testRenderKeyboardShortcutsButton = () => { };
+        const testRenderKeyboardShortcutsButton = () => {};
         const wrapper = shallow(
           <DayPickerRangeController
             renderKeyboardShortcutsButton={testRenderKeyboardShortcutsButton}

From 71dc4d756cbdd1a4d3682ba32d464d0e141d8fda Mon Sep 17 00:00:00 2001
From: Kris Salvador <kriss@spotify.com>
Date: Tue, 22 Oct 2019 11:50:03 -0400
Subject: [PATCH 528/618] Fix tests + linting

---
 .../DayPickerRangeController_spec.jsx         | 69 +++++++++++++------
 1 file changed, 48 insertions(+), 21 deletions(-)

diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index 37c2ca33cc..cd6dde73b8 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -352,7 +352,7 @@ describe('DayPickerRangeController', () => {
       });
 
       describe('endDate changed from one date to another', () => {
-        it('removes previous `selected-end-no-start-date` when no start date selected', () => {
+        it('removes previous `selected-end-no-selected-start` when no start date selected', () => {
           const minimumNights = 5;
           const endDate = moment().add(7, 'days');
           const deleteModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifier');
@@ -1614,9 +1614,19 @@ describe('DayPickerRangeController', () => {
             const addModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifier');
             const startDate = moment().add(1, 'days');
             const endDate = startDate.clone().add(1, 'days');
-            const wrapper = shallow(<DayPickerRangeController {...props} startDate={startDate} endDate={endDate} />);
+            const wrapper = shallow(
+              <DayPickerRangeController
+                {...props}
+                startDate={startDate}
+                endDate={endDate}
+              />,
+            );
             const newEndDate = endDate.clone().add(1, 'days');
-            wrapper.instance().componentWillReceiveProps({ ...props, startDate: null, endDate: newEndDate });
+            wrapper.instance().componentWillReceiveProps({
+              ...props,
+              startDate: null,
+              endDate: newEndDate,
+            });
             const noSelectedStartBeforeSelectedEndCalls = getCallsByModifier(addModifierSpy, 'no-selected-start-before-selected-end');
             noSelectedStartBeforeSelectedEndCalls.forEach((eachCall) => {
               const day = eachCall.args[1];
@@ -1668,16 +1678,16 @@ describe('DayPickerRangeController', () => {
           });
         });
 
-        describe('end date has changed, and start date and previous start date are falsey', () => {
+        describe('end date has changed, and start date or previous start date are falsey', () => {
           it('calls deleteModifier with `selected-end-no-selected-start`', () => {
             const deleteModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifier');
-            const startDate = moment();
-            const wrapper = shallow(<DayPickerRangeController {...props} startDate={startDate} />);
-            const newStartDate = startDate.clone().add(1, 'days');
-            wrapper.instance().componentWillReceiveProps({ ...props, startDate: newStartDate });
+            const endDate = moment();
+            const wrapper = shallow(<DayPickerRangeController {...props} endDate={endDate} />);
+            const newEndDate = endDate.clone().add(1, 'days');
+            wrapper.instance().componentWillReceiveProps({ ...props, endDate: newEndDate });
             const selectedStartNoSelectedEndCalls = getCallsByModifier(deleteModifierSpy, 'selected-end-no-selected-start');
             expect(selectedStartNoSelectedEndCalls.length).to.equal(1);
-            expect(selectedStartNoSelectedEndCalls[0].args[1]).to.equal(startDate);
+            expect(selectedStartNoSelectedEndCalls[0].args[1]).to.equal(endDate);
           });
         });
       });
@@ -1688,19 +1698,27 @@ describe('DayPickerRangeController', () => {
             const minimumNights = 1;
             const addModifierToRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifierToRange');
             const endDate = moment();
-            const wrapper = shallow(<DayPickerRangeController {...props} minimumNights={minimumNights} endDate={endDate} />);
+            const wrapper = shallow(
+              <DayPickerRangeController
+                {...props}
+                minimumNights={minimumNights}
+                endDate={endDate}
+              />,
+            );
             const newEndDate = endDate.clone().add(1, 'days');
             addModifierToRangeSpy.resetHistory();
             wrapper.instance().componentWillReceiveProps({ ...props, endDate: newEndDate });
             const beforeHoveredEndCalls = getCallsByModifier(addModifierToRangeSpy, 'before-hovered-end');
             expect(beforeHoveredEndCalls.length).to.equal(1);
-            expect(toISODateString(beforeHoveredEndCalls[0].args[1])).to.equal(toISODateString(newEndDate.clone().subtract(minimumNights, 'days')));
-            expect(toISODateString(beforeHoveredEndCalls[0].args[2])).to.equal(toISODateString(newEndDate));
+            expect(toISODateString(beforeHoveredEndCalls[0].args[1])).to.equal(
+              toISODateString(newEndDate.clone().subtract(minimumNights, 'days')),
+            );
+            expect(toISODateString(beforeHoveredEndCalls[0].args[2])).to.equal(
+              toISODateString(newEndDate),
+            );
           });
         });
       });
-
-
     });
 
     describe('phrases', () => {
@@ -2986,9 +3004,14 @@ describe('DayPickerRangeController', () => {
             const minimumNightStartSpan = endDate.clone().subtract(minimumNights, 'days');
             deleteModifierFromRangeSpy.resetHistory();
             wrapper.instance().onDayMouseEnter(today);
-            const deleteModifierFromRangeCalls = getCallsByModifier(deleteModifierFromRangeSpy, 'before-hovered-end');
+            const deleteModifierFromRangeCalls = getCallsByModifier(
+              deleteModifierFromRangeSpy,
+              'before-hovered-end',
+            );
             expect(deleteModifierFromRangeCalls.length).to.equal(1);
-            expect(toISODateString(deleteModifierFromRangeCalls[0].args[1])).to.equal(toISODateString(minimumNightStartSpan));
+            expect(toISODateString(deleteModifierFromRangeCalls[0].args[1])).to.equal(
+              toISODateString(minimumNightStartSpan),
+            );
             expect(deleteModifierFromRangeCalls[0].args[2]).to.equal(endDate);
           });
         });
@@ -3008,7 +3031,9 @@ describe('DayPickerRangeController', () => {
             wrapper.instance().onDayMouseEnter(today);
             const addModifierFromRangeCalls = getCallsByModifier(addModifierFromRangeSpy, 'before-hovered-end');
             expect(addModifierFromRangeCalls.length).to.equal(1);
-            expect(toISODateString(addModifierFromRangeCalls[0].args[1])).to.equal(toISODateString(minimumNightStartSpan));
+            expect(toISODateString(addModifierFromRangeCalls[0].args[1])).to.equal(
+              toISODateString(minimumNightStartSpan),
+            );
             expect(addModifierFromRangeCalls[0].args[2]).to.equal(endDate);
           });
         });
@@ -3319,7 +3344,7 @@ describe('DayPickerRangeController', () => {
             expect(deleteModifierCalls.length).to.equal(1);
             expect(deleteModifierCalls[0].args[1]).to.equal(startDate);
           });
-        })
+        });
       });
 
       describe('selected-end-in-hovered-span modifier', () => {
@@ -3344,7 +3369,7 @@ describe('DayPickerRangeController', () => {
             expect(deleteModifierCalls.length).to.equal(1);
             expect(deleteModifierCalls[0].args[1]).to.equal(endDate);
           });
-        })
+        });
       });
 
       describe('before-hovered-end modifier', () => {
@@ -3369,10 +3394,12 @@ describe('DayPickerRangeController', () => {
             wrapper.instance().onDayMouseLeave(endDate);
             const deleteModifierFromRangeCalls = getCallsByModifier(deleteModifierFromRangeSpy, 'before-hovered-end');
             expect(deleteModifierFromRangeCalls.length).to.equal(1);
-            expect(toISODateString(deleteModifierFromRangeCalls[0].args[1])).to.equal(toISODateString(minimumNightStartSpan));
+            expect(toISODateString(deleteModifierFromRangeCalls[0].args[1])).to.equal(
+              toISODateString(minimumNightStartSpan),
+            );
             expect(deleteModifierFromRangeCalls[0].args[2]).to.equal(endDate);
           });
-        })
+        });
       });
     });
   });

From b8fab118abbe5885e5ef370d0dc81d175a7c2b17 Mon Sep 17 00:00:00 2001
From: Kris Salvador <kriss@spotify.com>
Date: Tue, 29 Oct 2019 16:47:45 -0400
Subject: [PATCH 529/618] Update logic and tests for modifiers

---
 src/components/DayPickerRangeController.jsx   | 30 +++++---
 .../DayPickerRangeController_spec.jsx         | 72 +++++++++++++++++--
 2 files changed, 88 insertions(+), 14 deletions(-)

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index b932092af2..c32a7cb48c 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -365,18 +365,18 @@ export default class DayPickerRangeController extends React.PureComponent {
         if (!endDate || !prevEndDate) {
           modifiers = this.deleteModifier(modifiers, prevStartDate, 'selected-start-no-selected-end');
         }
+      }
 
-        if (!startDate && endDate) {
-          values(visibleDays).forEach((days) => {
-            Object.keys(days).forEach((day) => {
-              const momentObj = moment(day);
+      if (!prevStartDate && endDate && startDate) {
+        modifiers = this.deleteModifier(modifiers, endDate, 'selected-end-no-selected-start');
+        modifiers = this.deleteModifier(modifiers, endDate, 'selected-end-in-hovered-span');
 
-              if (isBeforeDay(momentObj, endDate)) {
-                modifiers = this.addModifier(modifiers, momentObj, 'no-selected-start-before-selected-end');
-              }
-            });
+        values(visibleDays).forEach((days) => {
+          Object.keys(days).forEach((day) => {
+            const momentObj = moment(day);
+            modifiers = this.deleteModifier(modifiers, momentObj, 'no-selected-start-before-selected-end');
           });
-        }
+        });
       }
     }
 
@@ -422,6 +422,18 @@ export default class DayPickerRangeController extends React.PureComponent {
       if (endDate && !startDate) {
         modifiers = this.addModifier(modifiers, endDate, 'selected-end-no-selected-start');
       }
+
+      if (!startDate && endDate) {
+        values(visibleDays).forEach((days) => {
+          Object.keys(days).forEach((day) => {
+            const momentObj = moment(day);
+
+            if (isBeforeDay(momentObj, endDate)) {
+              modifiers = this.addModifier(modifiers, momentObj, 'no-selected-start-before-selected-end');
+            }
+          });
+        });
+      }
     }
 
     if (!this.isTouchDevice && didStartDateChange && startDate && !endDate) {
diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index cd6dde73b8..9b375dfae0 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -1609,22 +1609,20 @@ describe('DayPickerRangeController', () => {
       });
 
       describe('no-selected-start-before-selected-end', () => {
-        describe('start date has changed, start date is falsey, and end date is truthy', () => {
+        describe('start or end date has changed, start date is falsey, and end date is truthy', () => {
           it('calls addModifier with `no-selected-start-before-selected-end` if day is before selected end date', () => {
             const addModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifier');
-            const startDate = moment().add(1, 'days');
-            const endDate = startDate.clone().add(1, 'days');
+            const endDate = today.clone();
             const wrapper = shallow(
               <DayPickerRangeController
                 {...props}
-                startDate={startDate}
+                startDate={null}
                 endDate={endDate}
               />,
             );
             const newEndDate = endDate.clone().add(1, 'days');
             wrapper.instance().componentWillReceiveProps({
               ...props,
-              startDate: null,
               endDate: newEndDate,
             });
             const noSelectedStartBeforeSelectedEndCalls = getCallsByModifier(addModifierSpy, 'no-selected-start-before-selected-end');
@@ -1635,6 +1633,29 @@ describe('DayPickerRangeController', () => {
             });
           });
         });
+
+        describe('start date has changed, previous start date is falsey, start and end date is truthy', () => {
+          it('calls deleteModifier with `no-selected-start-before-selected-end` if day is before selected end date', () => {
+            const deleteModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifier');
+            const endDate = moment('1993-10-27');
+            const wrapper = shallow(
+              <DayPickerRangeController
+                {...props}
+                startDate={null}
+                endDate={endDate}
+              />,
+            );
+            const newStartDate = endDate.clone().subtract(10, 'days');
+            const numberVisibleDays = 91;
+            wrapper.instance().componentWillReceiveProps({
+              ...props,
+              endDate,
+              startDate: newStartDate,
+            });
+            const noSelectedStartBeforeSelectedEndCalls = getCallsByModifier(deleteModifierSpy, 'no-selected-start-before-selected-end');
+            expect(noSelectedStartBeforeSelectedEndCalls.length).to.equal(numberVisibleDays);
+          });
+        });
       });
 
       describe('selected-start-no-selected-end', () => {
@@ -1690,6 +1711,19 @@ describe('DayPickerRangeController', () => {
             expect(selectedStartNoSelectedEndCalls[0].args[1]).to.equal(endDate);
           });
         });
+
+        describe('start date has changed, and start date is truthy, and previous start date was falsey', () => {
+          it('calls deleteModifier with `selected-end-no-selected-start`', () => {
+            const deleteModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifier');
+            const endDate = moment();
+            const wrapper = shallow(<DayPickerRangeController {...props} endDate={endDate} />);
+            const newStartDate = endDate.clone().subtract(1, 'days');
+            wrapper.instance().componentWillReceiveProps({ ...props, startDate: newStartDate });
+            const selectedStartNoSelectedEndCalls = getCallsByModifier(deleteModifierSpy, 'selected-end-no-selected-start');
+            expect(selectedStartNoSelectedEndCalls.length).to.equal(1);
+            expect(selectedStartNoSelectedEndCalls[0].args[1]).to.equal(endDate);
+          });
+        });
       });
 
       describe('before-hovered-end', () => {
@@ -1719,6 +1753,34 @@ describe('DayPickerRangeController', () => {
           });
         });
       });
+
+      describe('selected-end-in-hovered-span', () => {
+        describe('start date has changed', () => {
+          describe('start and end date are truthy, and previous start date is falsey', () => {
+            it('calls deleteModifier with `selected-end-in-hovered-span`', () => {
+              const deleteModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifier');
+              const endDate = today;
+              const startDate = endDate.clone().subtract(1, 'days');
+              const wrapper = shallow(
+                <DayPickerRangeController
+                  {...props}
+                  endDate={endDate}
+                />,
+              );
+              const newStartDate = endDate.clone().subtract(3, 'days');
+              deleteModifierSpy.resetHistory();
+              wrapper.instance().componentWillReceiveProps({
+                ...props,
+                endDate,
+                startDate: newStartDate,
+              });
+              const deleteModifierCalls = getCallsByModifier(deleteModifierSpy, 'selected-end-in-hovered-span');
+              expect(deleteModifierCalls.length).to.equal(1);
+              expect(deleteModifierCalls[0].args[1]).to.equal(endDate);
+            });
+          });
+        });
+      });
     });
 
     describe('phrases', () => {

From 37803f4429d19fc92ab5296be5f022aae4fa3b53 Mon Sep 17 00:00:00 2001
From: Casey Klimkowsky <cklimkowsky@gmail.com>
Date: Wed, 30 Oct 2019 12:51:06 -0700
Subject: [PATCH 530/618] Revert "Call getStateForNewMonth when
 date/startDate/endDate is set to a date that is not visible"

---
 src/components/DayPickerRangeController.jsx   | 20 +---
 .../DayPickerSingleDateController.jsx         | 19 ++--
 .../DayPickerRangeController_spec.jsx         | 99 +++++--------------
 .../DayPickerSingleDateController_spec.jsx    | 24 -----
 4 files changed, 35 insertions(+), 127 deletions(-)

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index c665c6afbb..b96230f127 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -18,7 +18,6 @@ import isBeforeDay from '../utils/isBeforeDay';
 import getVisibleDays from '../utils/getVisibleDays';
 import isDayVisible from '../utils/isDayVisible';
 
-import getPooledMoment from '../utils/getPooledMoment';
 import getSelectedDateOffset from '../utils/getSelectedDateOffset';
 
 import toISODateString from '../utils/toISODateString';
@@ -42,6 +41,7 @@ import {
 } from '../constants';
 
 import DayPicker from './DayPicker';
+import getPooledMoment from '../utils/getPooledMoment';
 
 const propTypes = forbidExtraProps({
   startDate: momentPropTypes.momentObj,
@@ -284,8 +284,6 @@ export default class DayPickerRangeController extends React.PureComponent {
     } = this.props;
 
     const { hoverDate } = this.state;
-
-    let { currentMonth } = this.state;
     let { visibleDays } = this.state;
 
     let recomputeOutsideRange = false;
@@ -315,18 +313,6 @@ export default class DayPickerRangeController extends React.PureComponent {
     const didEndDateChange = endDate !== prevEndDate;
     const didFocusChange = focusedInput !== prevFocusedInput;
 
-    let isDateVisible = true;
-
-    if (didStartDateChange || didEndDateChange) {
-      if (didStartDateChange) {
-        isDateVisible = isDayVisible(startDate, currentMonth, numberOfMonths, enableOutsideDays);
-      }
-
-      if (didEndDateChange) {
-        isDateVisible = isDayVisible(endDate, currentMonth, numberOfMonths, enableOutsideDays);
-      }
-    }
-
     if (
       numberOfMonths !== prevNumberOfMonths
       || enableOutsideDays !== prevEnableOutsideDays
@@ -335,10 +321,10 @@ export default class DayPickerRangeController extends React.PureComponent {
         && !prevFocusedInput
         && didFocusChange
       )
-      || !isDateVisible
     ) {
       const newMonthState = this.getStateForNewMonth(nextProps);
-      ({ currentMonth, visibleDays } = newMonthState);
+      const { currentMonth } = newMonthState;
+      ({ visibleDays } = newMonthState);
       this.setState({
         currentMonth,
         visibleDays,
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 4c65c66707..f9b9e1be4e 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -13,7 +13,6 @@ import isSameDay from '../utils/isSameDay';
 import isAfterDay from '../utils/isAfterDay';
 
 import getVisibleDays from '../utils/getVisibleDays';
-import isDayVisible from '../utils/isDayVisible';
 
 import toISODateString from '../utils/toISODateString';
 import { addModifier, deleteModifier } from '../utils/modifiers';
@@ -220,7 +219,6 @@ export default class DayPickerSingleDateController extends React.PureComponent {
       focused: prevFocused,
       date: prevDate,
     } = this.props;
-    let { currentMonth } = this.state;
     let { visibleDays } = this.state;
 
     let recomputeOutsideRange = false;
@@ -246,15 +244,6 @@ export default class DayPickerSingleDateController extends React.PureComponent {
       recomputeOutsideRange || recomputeDayBlocked || recomputeDayHighlighted
     );
 
-    const didDateChange = date !== prevDate;
-    const didFocusChange = focused !== prevFocused;
-
-    let isDateVisible = true;
-
-    if (didDateChange) {
-      isDateVisible = isDayVisible(date, currentMonth, numberOfMonths, enableOutsideDays);
-    }
-
     if (
       numberOfMonths !== prevNumberOfMonths
       || enableOutsideDays !== prevEnableOutsideDays
@@ -262,16 +251,20 @@ export default class DayPickerSingleDateController extends React.PureComponent {
         initialVisibleMonth !== prevInitialVisibleMonth
         && !prevFocused
         && focused
-      ) || !isDateVisible
+      )
     ) {
       const newMonthState = this.getStateForNewMonth(nextProps);
-      ({ currentMonth, visibleDays } = newMonthState);
+      const { currentMonth } = newMonthState;
+      ({ visibleDays } = newMonthState);
       this.setState({
         currentMonth,
         visibleDays,
       });
     }
 
+    const didDateChange = date !== prevDate;
+    const didFocusChange = focused !== prevFocused;
+
     let modifiers = {};
 
     if (didDateChange) {
diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index 462380e9eb..ef57e6d461 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -297,80 +297,33 @@ describe('DayPickerRangeController', () => {
           });
           expect(wrapper.instance().state.visibleDays).to.equal(visibleDays);
         });
-      });
-
-      describe('startDate changed from one date to another', () => {
-        it('removes previous `after-hovered-start` range', () => {
-          const minimumNights = 5;
-          const startDate = moment().add(7, 'days');
-          const dayAfterStartDate = startDate.clone().add(1, 'day');
-          const firstAvailableDate = startDate.clone().add(minimumNights + 1, 'days');
-          const deleteModifierFromRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifierFromRange');
-          const nextStartDate = moment().add(4, 'days');
-          const wrapper = shallow((
-            <DayPickerRangeController
-              onDatesChange={sinon.stub()}
-              onFocusChange={sinon.stub()}
-              startDate={startDate}
-              focusedInput={START_DATE}
-              minimumNights={minimumNights}
-            />
-          ));
-          deleteModifierFromRangeSpy.resetHistory();
-          wrapper.instance().componentWillReceiveProps({
-            ...props,
-            startDate: nextStartDate,
-          });
-          const afterHoverStartCalls = getCallsByModifier(deleteModifierFromRangeSpy, 'after-hovered-start');
-          expect(afterHoverStartCalls.length).to.equal(1);
-          expect(isSameDay(afterHoverStartCalls[0].args[1], dayAfterStartDate)).to.equal(true);
-          expect(isSameDay(afterHoverStartCalls[0].args[2], firstAvailableDate)).to.equal(true);
-        });
-
-        it('calls getStateForNewMonth with nextProps when date is not visible', () => {
-          const getStateForNewMonthSpy = sinon.spy(
-            DayPickerRangeController.prototype,
-            'getStateForNewMonth',
-          );
-          const startDate = moment();
-          const nextStartDate = startDate.clone().add(2, 'months');
-
-          const wrapper = shallow((
-            <DayPickerRangeController {...props} startDate={startDate} />
-          ));
-
-          getStateForNewMonthSpy.resetHistory();
-
-          wrapper.instance().componentWillReceiveProps({
-            ...props,
-            startDate: nextStartDate,
-          });
-
-          expect(getStateForNewMonthSpy.callCount).to.equal(1);
-        });
-      });
-
-      describe('endDate changed from one date to another', () => {
-        it('calls getStateForNewMonth with nextProps when date is not visible', () => {
-          const getStateForNewMonthSpy = sinon.spy(
-            DayPickerRangeController.prototype,
-            'getStateForNewMonth',
-          );
-          const endDate = moment();
-          const nextEndDate = endDate.clone().add(2, 'months');
-
-          const wrapper = shallow((
-            <DayPickerRangeController {...props} endDate={endDate} />
-          ));
-
-          getStateForNewMonthSpy.resetHistory();
-
-          wrapper.instance().componentWillReceiveProps({
-            ...props,
-            endDate: nextEndDate,
+        describe('startDate changed from one date to another', () => {
+          it('removes previous `after-hovered-start` range', () => {
+            const minimumNights = 5;
+            const startDate = moment().add(7, 'days');
+            const dayAfterStartDate = startDate.clone().add(1, 'day');
+            const firstAvailableDate = startDate.clone().add(minimumNights + 1, 'days');
+            const deleteModifierFromRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifierFromRange');
+            const nextStartDate = moment().add(4, 'days');
+            const wrapper = shallow((
+              <DayPickerRangeController
+                onDatesChange={sinon.stub()}
+                onFocusChange={sinon.stub()}
+                startDate={startDate}
+                focusedInput={START_DATE}
+                minimumNights={minimumNights}
+              />
+            ));
+            deleteModifierFromRangeSpy.resetHistory();
+            wrapper.instance().componentWillReceiveProps({
+              ...props,
+              startDate: nextStartDate,
+            });
+            const afterHoverStartCalls = getCallsByModifier(deleteModifierFromRangeSpy, 'after-hovered-start');
+            expect(afterHoverStartCalls.length).to.equal(1);
+            expect(isSameDay(afterHoverStartCalls[0].args[1], dayAfterStartDate)).to.equal(true);
+            expect(isSameDay(afterHoverStartCalls[0].args[2], firstAvailableDate)).to.equal(true);
           });
-
-          expect(getStateForNewMonthSpy.callCount).to.equal(1);
         });
       });
     });
diff --git a/test/components/DayPickerSingleDateController_spec.jsx b/test/components/DayPickerSingleDateController_spec.jsx
index e7154ccef8..6cd614a91c 100644
--- a/test/components/DayPickerSingleDateController_spec.jsx
+++ b/test/components/DayPickerSingleDateController_spec.jsx
@@ -46,30 +46,6 @@ describe('DayPickerSingleDateController', () => {
       onFocusChange() {},
     };
 
-    describe('date changed from one date to another', () => {
-      it('calls getStateForNewMonth with nextProps when date is not visible', () => {
-        const getStateForNewMonthSpy = sinon.spy(
-          DayPickerSingleDateController.prototype,
-          'getStateForNewMonth',
-        );
-        const date = moment();
-        const nextDate = date.clone().add(2, 'months');
-
-        const wrapper = shallow((
-          <DayPickerSingleDateController {...props} date={date} />
-        ));
-
-        getStateForNewMonthSpy.resetHistory();
-
-        wrapper.instance().componentWillReceiveProps({
-          ...props,
-          date: nextDate,
-        });
-
-        expect(getStateForNewMonthSpy.callCount).to.equal(1);
-      });
-    });
-
     describe('modifiers', () => {
       describe('selected modifier', () => {
         describe('props.date did not change', () => {

From 928d74c5da337d0fe74515eed4eb1f9c497dec0b Mon Sep 17 00:00:00 2001
From: Nora Tarano <nora.tarano@airbnb.com>
Date: Wed, 30 Oct 2019 14:27:35 -0700
Subject: [PATCH 531/618] Version 21.3.2

---
 CHANGELOG.md | 4 ++++
 package.json | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 433a704764..e60a67f279 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,10 @@
 - []  ([#](https://github.com/airbnb/react-dates/pull/))
 -->
 
+## 21.3.2
+
+- [fix] Revert "Call getStateForNewMonth when date/startDate/endDate is set to a date that is not visible" ([#1851](https://github.com/airbnb/react-dates/pull/1851))
+
 ## 21.3.1
 
 - [fix] Update react-with-styles 4.1.0-alpha.1 -> 4.1.0
diff --git a/package.json b/package.json
index 21c74736d5..65e411fe49 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "21.3.1",
+  "version": "21.3.2",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From e4427f38d3085f2998c17614ba511170833eeb83 Mon Sep 17 00:00:00 2001
From: Kris Salvador <kriss@spotify.com>
Date: Wed, 30 Oct 2019 17:38:58 -0400
Subject: [PATCH 532/618] Remove unused variable

---
 test/components/DayPickerRangeController_spec.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index 9b375dfae0..0d8bd8d1ee 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -1760,7 +1760,6 @@ describe('DayPickerRangeController', () => {
             it('calls deleteModifier with `selected-end-in-hovered-span`', () => {
               const deleteModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifier');
               const endDate = today;
-              const startDate = endDate.clone().subtract(1, 'days');
               const wrapper = shallow(
                 <DayPickerRangeController
                   {...props}

From 406c9da37e138b177fe7daa2511b38de9f390253 Mon Sep 17 00:00:00 2001
From: krissalvador27 <krissalvador27@gmail.com>
Date: Sun, 3 Nov 2019 23:48:30 -0500
Subject: [PATCH 533/618] Update flakey test for
 no-selected-start-before-selected-end

---
 test/components/DayPickerRangeController_spec.jsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index 7b1b795914..402691db39 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -1613,7 +1613,7 @@ describe('DayPickerRangeController', () => {
         describe('start date has changed, previous start date is falsey, start and end date is truthy', () => {
           it('calls deleteModifier with `no-selected-start-before-selected-end` if day is before selected end date', () => {
             const deleteModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifier');
-            const endDate = moment('1993-10-27');
+            const endDate = today.clone().add(10, 'days');
             const wrapper = shallow(
               <DayPickerRangeController
                 {...props}
@@ -1621,15 +1621,18 @@ describe('DayPickerRangeController', () => {
                 endDate={endDate}
               />,
             );
-            const newStartDate = endDate.clone().subtract(10, 'days');
-            const numberVisibleDays = 91;
+            const newStartDate = today;
+            const visibleDays = wrapper.instance().state.visibleDays;
+            const numberOfVisibleDays = Object.values(visibleDays).reduce((total, visibleDayArray) => {
+              return total + Object.keys(visibleDayArray).length;
+            }, 0);
             wrapper.instance().componentWillReceiveProps({
               ...props,
               endDate,
               startDate: newStartDate,
             });
             const noSelectedStartBeforeSelectedEndCalls = getCallsByModifier(deleteModifierSpy, 'no-selected-start-before-selected-end');
-            expect(noSelectedStartBeforeSelectedEndCalls.length).to.equal(numberVisibleDays);
+            expect(noSelectedStartBeforeSelectedEndCalls.length).to.equal(numberOfVisibleDays);
           });
         });
       });

From 933b545c97fe6527be96e84907cfe157db0847a3 Mon Sep 17 00:00:00 2001
From: krissalvador27 <krissalvador27@gmail.com>
Date: Mon, 4 Nov 2019 00:34:03 -0500
Subject: [PATCH 534/618] Eslint

---
 test/components/DayPickerRangeController_spec.jsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index 402691db39..6904f62e2b 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -1622,10 +1622,11 @@ describe('DayPickerRangeController', () => {
               />,
             );
             const newStartDate = today;
-            const visibleDays = wrapper.instance().state.visibleDays;
-            const numberOfVisibleDays = Object.values(visibleDays).reduce((total, visibleDayArray) => {
-              return total + Object.keys(visibleDayArray).length;
-            }, 0);
+            const { visibleDays } = wrapper.instance().state;
+            const numberOfVisibleDays = Object.values(visibleDays).reduce(
+              (total, visibleDayArray) => total + Object.keys(visibleDayArray).length,
+              0,
+            );
             wrapper.instance().componentWillReceiveProps({
               ...props,
               endDate,

From 73e001a3f68acec8bfbd6fe28638cf2d3917b51c Mon Sep 17 00:00:00 2001
From: Kevin Pan <kevin.pan@airbnb.com>
Date: Tue, 5 Nov 2019 16:55:38 -0800
Subject: [PATCH 535/618] relaxing propTypes for CalendarWeek

---
 src/components/CalendarWeek.jsx       | 8 +++-----
 test/components/CalendarWeek_spec.jsx | 9 +++++++++
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/CalendarWeek.jsx b/src/components/CalendarWeek.jsx
index ef691ac45f..037098a3fa 100644
--- a/src/components/CalendarWeek.jsx
+++ b/src/components/CalendarWeek.jsx
@@ -1,11 +1,9 @@
 import React from 'react';
-import { forbidExtraProps, or, childrenOfType } from 'airbnb-prop-types';
-
-import CalendarDay from './CalendarDay';
-import CustomizableCalendarDay from './CustomizableCalendarDay';
+import PropTypes from 'prop-types';
+import { forbidExtraProps } from 'airbnb-prop-types';
 
 const propTypes = forbidExtraProps({
-  children: or([childrenOfType(CalendarDay), childrenOfType(CustomizableCalendarDay)]).isRequired,
+  children: PropTypes.node.isRequired,
 });
 
 export default function CalendarWeek({ children }) {
diff --git a/test/components/CalendarWeek_spec.jsx b/test/components/CalendarWeek_spec.jsx
index 91117cbf6d..c78b1a7b76 100644
--- a/test/components/CalendarWeek_spec.jsx
+++ b/test/components/CalendarWeek_spec.jsx
@@ -15,4 +15,13 @@ describe('CalendarWeek', () => {
     ));
     expect(wrapper.is('tr')).to.equal(true);
   });
+  it('accepts a React node', () => {
+    const wrapper = shallow((
+      <CalendarWeek>
+        <></>
+      </CalendarWeek>
+    ));
+    expect(wrapper.is('tr')).to.equal(true);
+    expect(wrapper).to.not.throw();
+  });
 });

From 6c9dcca370a6bb200e0037eb3f95252ef69dcf08 Mon Sep 17 00:00:00 2001
From: Kevin Pan <kevin.pan@airbnb.com>
Date: Tue, 5 Nov 2019 17:13:25 -0800
Subject: [PATCH 536/618] test fix

---
 test/components/CalendarWeek_spec.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/components/CalendarWeek_spec.jsx b/test/components/CalendarWeek_spec.jsx
index c78b1a7b76..11a2422fe0 100644
--- a/test/components/CalendarWeek_spec.jsx
+++ b/test/components/CalendarWeek_spec.jsx
@@ -15,10 +15,10 @@ describe('CalendarWeek', () => {
     ));
     expect(wrapper.is('tr')).to.equal(true);
   });
-  it('accepts a React node', () => {
+  it('accepts a node', () => {
     const wrapper = shallow((
       <CalendarWeek>
-        <></>
+        <div />
       </CalendarWeek>
     ));
     expect(wrapper.is('tr')).to.equal(true);

From cb3edf170ee29da4c7ceaca16f1c38fc3f3fed4f Mon Sep 17 00:00:00 2001
From: Kevin Pan <kevin.pan@airbnb.com>
Date: Tue, 5 Nov 2019 17:34:39 -0800
Subject: [PATCH 537/618] removing test

---
 test/components/CalendarWeek_spec.jsx | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/test/components/CalendarWeek_spec.jsx b/test/components/CalendarWeek_spec.jsx
index 11a2422fe0..91117cbf6d 100644
--- a/test/components/CalendarWeek_spec.jsx
+++ b/test/components/CalendarWeek_spec.jsx
@@ -15,13 +15,4 @@ describe('CalendarWeek', () => {
     ));
     expect(wrapper.is('tr')).to.equal(true);
   });
-  it('accepts a node', () => {
-    const wrapper = shallow((
-      <CalendarWeek>
-        <div />
-      </CalendarWeek>
-    ));
-    expect(wrapper.is('tr')).to.equal(true);
-    expect(wrapper).to.not.throw();
-  });
 });

From d349515c2f290fc52d0812106dd3bcf9281fb296 Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Tue, 12 Nov 2019 15:58:36 -0800
Subject: [PATCH 538/618] Version 21.4.0

---
 CHANGELOG.md | 5 +++++
 package.json | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e60a67f279..7a25502c3f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,11 @@
 - []  ([#](https://github.com/airbnb/react-dates/pull/))
 -->
 
+## 21.4.0
+
+- [new] Expose 'after-hovered-start' modifier and add 'before-hovered-end', 'no-selected-start-before-selected-end', 'selected-start-in-hovered-span', 'selected-end-in-hovered-span', 'selected-start-no-selected-end', and 'selected-end-no-selected-start' modifiers [#1608](https://github.com/airbnb/react-dates/pull/1608)
+- [fix] Loosen up CustomizeableCalendarDay restriction on children  ([#1857](https://github.com/airbnb/react-dates/pull/1857))
+
 ## 21.3.2
 
 - [fix] Revert "Call getStateForNewMonth when date/startDate/endDate is set to a date that is not visible" ([#1851](https://github.com/airbnb/react-dates/pull/1851))
diff --git a/package.json b/package.json
index 65e411fe49..8f191c41d6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "21.3.2",
+  "version": "21.4.0",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 35effaac4f1f9d8c59c5614a196320198226686a Mon Sep 17 00:00:00 2001
From: casey_klimkowsky <casey.klimkowsky@airbnb.com>
Date: Tue, 12 Nov 2019 17:12:54 -0800
Subject: [PATCH 539/618] Allow for custom month navigation buttons

---
 examples/DayPickerRangeControllerWrapper.jsx  |   4 +
 .../DayPickerSingleDateControllerWrapper.jsx  |   8 +-
 src/components/DateRangePicker.jsx            |  12 +-
 src/components/DayPicker.jsx                  |   8 +
 src/components/DayPickerNavigation.jsx        | 154 +++++++++++-------
 src/components/DayPickerRangeController.jsx   |   8 +
 .../DayPickerSingleDateController.jsx         |   8 +
 src/components/SingleDatePicker.jsx           |  12 +-
 src/shapes/DateRangePickerShape.js            |   2 +
 src/shapes/SingleDatePickerShape.js           |   2 +
 stories/DayPicker.js                          |  62 ++++++-
 stories/DayPickerRangeController.js           |  88 ++++++++--
 stories/DayPickerSingleDateController.js      |  79 +++++++--
 test/components/DayPickerNavigation_spec.jsx  |  90 ++++++++++
 14 files changed, 440 insertions(+), 97 deletions(-)

diff --git a/examples/DayPickerRangeControllerWrapper.jsx b/examples/DayPickerRangeControllerWrapper.jsx
index 08c5547f03..1975c098e8 100644
--- a/examples/DayPickerRangeControllerWrapper.jsx
+++ b/examples/DayPickerRangeControllerWrapper.jsx
@@ -43,6 +43,8 @@ const propTypes = forbidExtraProps({
 
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
+  renderNavPrevButton: PropTypes.func,
+  renderNavNextButton: PropTypes.func,
 
   onPrevMonthClick: PropTypes.func,
   onNextMonthClick: PropTypes.func,
@@ -96,6 +98,8 @@ const defaultProps = {
   // navigation related props
   navPrev: null,
   navNext: null,
+  renderNavPrevButton: null,
+  renderNavNextButton: null,
   onPrevMonthClick() {},
   onNextMonthClick() {},
 
diff --git a/examples/DayPickerSingleDateControllerWrapper.jsx b/examples/DayPickerSingleDateControllerWrapper.jsx
index d9d703c19f..02d94e931b 100644
--- a/examples/DayPickerSingleDateControllerWrapper.jsx
+++ b/examples/DayPickerSingleDateControllerWrapper.jsx
@@ -34,6 +34,8 @@ const propTypes = forbidExtraProps({
 
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
+  renderNavPrevButton: PropTypes.func,
+  renderNavNextButton: PropTypes.func,
 
   onPrevMonthClick: PropTypes.func,
   onNextMonthClick: PropTypes.func,
@@ -74,6 +76,8 @@ const defaultProps = {
   // navigation related props
   navPrev: null,
   navNext: null,
+  renderNavPrevButton: null,
+  renderNavNextButton: null,
   onPrevMonthClick() {},
   onNextMonthClick() {},
 
@@ -117,11 +121,11 @@ class DayPickerSingleDateControllerWrapper extends React.Component {
 
     return (
       <div>
-        {showInput &&
+        {showInput && (
           <div style={{ marginBottom: 16 }}>
             <input type="text" name="start date" value={dateString || ''} readOnly />
           </div>
-        }
+        )}
 
         <DayPickerSingleDateController
           {...props}
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index c1b18b09ca..212e7f1196 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -103,6 +103,8 @@ const defaultProps = {
   navPosition: NAV_POSITION_TOP,
   navPrev: null,
   navNext: null,
+  renderNavPrevButton: null,
+  renderNavNextButton: null,
 
   onPrevMonthClick() {},
   onNextMonthClick() {},
@@ -411,6 +413,8 @@ class DateRangePicker extends React.PureComponent {
       navPosition,
       navPrev,
       navNext,
+      renderNavPrevButton,
+      renderNavNextButton,
       onPrevMonthClick,
       onNextMonthClick,
       onDatesChange,
@@ -469,8 +473,10 @@ class DateRangePicker extends React.PureComponent {
 
     const withAnyPortal = withPortal || withFullScreenPortal;
 
+    /* eslint-disable jsx-a11y/no-static-element-interactions */
+    /* eslint-disable jsx-a11y/click-events-have-key-events */
     return (
-      <div // eslint-disable-line jsx-a11y/no-static-element-interactions
+      <div
         ref={this.setDayPickerContainerRef}
         {...css(
           styles.DateRangePicker_picker,
@@ -518,6 +524,8 @@ class DateRangePicker extends React.PureComponent {
           navPosition={navPosition}
           navPrev={navPrev}
           navNext={navNext}
+          renderNavPrevButton={renderNavPrevButton}
+          renderNavNextButton={renderNavNextButton}
           minimumNights={minimumNights}
           isOutsideRange={isOutsideRange}
           isDayHighlighted={isDayHighlighted}
@@ -554,6 +562,8 @@ class DateRangePicker extends React.PureComponent {
         )}
       </div>
     );
+    /* eslint-enable jsx-a11y/no-static-element-interactions */
+    /* eslint-enable jsx-a11y/click-events-have-key-events */
   }
 
   render() {
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index fc1cc7a726..0f5b2f7162 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -84,6 +84,8 @@ const propTypes = forbidExtraProps({
   navPosition: NavPositionShape,
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
+  renderNavPrevButton: PropTypes.func,
+  renderNavNextButton: PropTypes.func,
   noNavButtons: PropTypes.bool,
   onPrevMonthClick: PropTypes.func,
   onNextMonthClick: PropTypes.func,
@@ -149,6 +151,8 @@ export const defaultProps = {
   navPosition: NAV_POSITION_TOP,
   navPrev: null,
   navNext: null,
+  renderNavPrevButton: null,
+  renderNavNextButton: null,
   noNavButtons: false,
   onPrevMonthClick() {},
   onNextMonthClick() {},
@@ -849,6 +853,8 @@ class DayPicker extends React.PureComponent {
       noNavButtons,
       orientation,
       phrases,
+      renderNavPrevButton,
+      renderNavNextButton,
       isRTL,
     } = this.props;
 
@@ -870,6 +876,8 @@ class DayPicker extends React.PureComponent {
         navPosition={navPosition}
         navPrev={navPrev}
         navNext={navNext}
+        renderNavPrevButton={renderNavPrevButton}
+        renderNavNextButton={renderNavNextButton}
         orientation={orientation}
         phrases={phrases}
         isRTL={isRTL}
diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index ee4f367503..a0103173ca 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -25,6 +25,8 @@ const propTypes = forbidExtraProps({
   ...withStylesPropTypes,
   disablePrev: PropTypes.bool,
   disableNext: PropTypes.bool,
+  inlineStyles: PropTypes.object,
+  isRTL: PropTypes.bool,
   navPosition: NavPositionShape,
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
@@ -36,13 +38,15 @@ const propTypes = forbidExtraProps({
   // internationalization
   phrases: PropTypes.shape(getPhrasePropTypes(DayPickerNavigationPhrases)),
 
-  inlineStyles: PropTypes.object,
-  isRTL: PropTypes.bool,
+  renderNavPrevButton: PropTypes.func,
+  renderNavNextButton: PropTypes.func,
 });
 
 const defaultProps = {
   disablePrev: false,
   disableNext: false,
+  inlineStyles: null,
+  isRTL: false,
   navPosition: NAV_POSITION_TOP,
   navPrev: null,
   navNext: null,
@@ -54,12 +58,13 @@ const defaultProps = {
   // internationalization
   phrases: DayPickerNavigationPhrases,
 
-  inlineStyles: null,
-  isRTL: false,
+  renderNavPrevButton: null,
+  renderNavNextButton: null,
 };
 
 function DayPickerNavigation({
   inlineStyles,
+  isRTL,
   disablePrev,
   disableNext,
   navPosition,
@@ -69,7 +74,8 @@ function DayPickerNavigation({
   onNextMonthClick,
   orientation,
   phrases,
-  isRTL,
+  renderNavPrevButton,
+  renderNavNextButton,
   styles,
 }) {
   const isHorizontal = orientation === HORIZONTAL_ORIENTATION;
@@ -146,85 +152,111 @@ function DayPickerNavigation({
       )}
     >
       {!isVerticalScrollable && (
+        renderNavPrevButton ? renderNavPrevButton({
+          ariaLabel: phrases.jumpToPrevMonth,
+          disabled: disablePrev,
+          onClick: disablePrev ? undefined : onPrevMonthClick,
+          onKeyUp: disablePrev ? undefined : (e) => {
+            const { key } = e;
+            if (key === 'Enter' || key === ' ') onPrevMonthClick(e);
+          },
+          onMouseUp: disablePrev ? undefined : (e) => {
+            e.currentTarget.blur();
+          },
+        }) : (
+          <div // eslint-disable-line jsx-a11y/interactive-supports-focus
+            role="button"
+            {...navPrevTabIndex}
+            {...css(
+              styles.DayPickerNavigation_button,
+              isDefaultNavPrev && styles.DayPickerNavigation_button__default,
+              disablePrev && styles.DayPickerNavigation_button__disabled,
+              ...(isHorizontal ? [
+                styles.DayPickerNavigation_button__horizontal,
+                ...(isDefaultNavPrev ? [
+                  styles.DayPickerNavigation_button__horizontalDefault,
+                  isBottomNavPosition && styles.DayPickerNavigation_bottomButton__horizontalDefault,
+                  !isRTL && styles.DayPickerNavigation_leftButton__horizontalDefault,
+                  isRTL && styles.DayPickerNavigation_rightButton__horizontalDefault,
+                ] : []),
+              ] : []),
+              ...(isVertical ? [
+                styles.DayPickerNavigation_button__vertical,
+                ...(isDefaultNavPrev ? [
+                  styles.DayPickerNavigation_button__verticalDefault,
+                  styles.DayPickerNavigation_prevButton__verticalDefault,
+                ] : []),
+              ] : []),
+            )}
+            aria-disabled={disablePrev ? true : undefined}
+            aria-label={phrases.jumpToPrevMonth}
+            onClick={disablePrev ? undefined : onPrevMonthClick}
+            onKeyUp={disablePrev ? undefined : (e) => {
+              const { key } = e;
+              if (key === 'Enter' || key === ' ') onPrevMonthClick(e);
+            }}
+            onMouseUp={disablePrev ? undefined : (e) => {
+              e.currentTarget.blur();
+            }}
+          >
+            {navPrevIcon}
+          </div>
+        )
+      )}
+
+      {renderNavNextButton ? renderNavNextButton({
+        ariaLabel: phrases.jumpToNextMonth,
+        disabled: disableNext,
+        onClick: disableNext ? undefined : onNextMonthClick,
+        onKeyUp: disableNext ? undefined : (e) => {
+          const { key } = e;
+          if (key === 'Enter' || key === ' ') onNextMonthClick(e);
+        },
+        onMouseUp: disableNext ? undefined : (e) => {
+          e.currentTarget.blur();
+        },
+      }) : (
         <div // eslint-disable-line jsx-a11y/interactive-supports-focus
           role="button"
-          {...navPrevTabIndex}
+          {...navNextTabIndex}
           {...css(
             styles.DayPickerNavigation_button,
-            isDefaultNavPrev && styles.DayPickerNavigation_button__default,
-            disablePrev && styles.DayPickerNavigation_button__disabled,
+            isDefaultNavNext && styles.DayPickerNavigation_button__default,
+            disableNext && styles.DayPickerNavigation_button__disabled,
             ...(isHorizontal ? [
               styles.DayPickerNavigation_button__horizontal,
-              ...(isDefaultNavPrev ? [
+              ...(isDefaultNavNext ? [
                 styles.DayPickerNavigation_button__horizontalDefault,
                 isBottomNavPosition && styles.DayPickerNavigation_bottomButton__horizontalDefault,
-                !isRTL && styles.DayPickerNavigation_leftButton__horizontalDefault,
-                isRTL && styles.DayPickerNavigation_rightButton__horizontalDefault,
+                isRTL && styles.DayPickerNavigation_leftButton__horizontalDefault,
+                !isRTL && styles.DayPickerNavigation_rightButton__horizontalDefault,
               ] : []),
             ] : []),
             ...(isVertical ? [
               styles.DayPickerNavigation_button__vertical,
-              ...(isDefaultNavPrev ? [
+              styles.DayPickerNavigation_nextButton__vertical,
+              ...(isDefaultNavNext ? [
                 styles.DayPickerNavigation_button__verticalDefault,
-                styles.DayPickerNavigation_prevButton__verticalDefault,
+                styles.DayPickerNavigation_nextButton__verticalDefault,
+                isVerticalScrollable
+                && styles.DayPickerNavigation_nextButton__verticalScrollableDefault,
               ] : []),
             ] : []),
           )}
-          aria-disabled={disablePrev ? true : undefined}
-          aria-label={phrases.jumpToPrevMonth}
-          onClick={disablePrev ? undefined : onPrevMonthClick}
-          onKeyUp={disablePrev ? undefined : (e) => {
+          aria-disabled={disableNext ? true : undefined}
+          aria-label={phrases.jumpToNextMonth}
+          onClick={disableNext ? undefined : onNextMonthClick}
+          onKeyUp={disableNext ? undefined : (e) => {
             const { key } = e;
-            if (key === 'Enter' || key === ' ') onPrevMonthClick(e);
+            if (key === 'Enter' || key === ' ') onNextMonthClick(e);
           }}
-          onMouseUp={disablePrev ? undefined : (e) => {
+          onMouseUp={disableNext ? undefined : (e) => {
             e.currentTarget.blur();
           }}
         >
-          {navPrevIcon}
+          {navNextIcon}
         </div>
       )}
-
-      <div // eslint-disable-line jsx-a11y/interactive-supports-focus
-        role="button"
-        {...navNextTabIndex}
-        {...css(
-          styles.DayPickerNavigation_button,
-          isDefaultNavNext && styles.DayPickerNavigation_button__default,
-          disableNext && styles.DayPickerNavigation_button__disabled,
-          ...(isHorizontal ? [
-            styles.DayPickerNavigation_button__horizontal,
-            ...(isDefaultNavNext ? [
-              styles.DayPickerNavigation_button__horizontalDefault,
-              isBottomNavPosition && styles.DayPickerNavigation_bottomButton__horizontalDefault,
-              isRTL && styles.DayPickerNavigation_leftButton__horizontalDefault,
-              !isRTL && styles.DayPickerNavigation_rightButton__horizontalDefault,
-            ] : []),
-          ] : []),
-          ...(isVertical ? [
-            styles.DayPickerNavigation_button__vertical,
-            styles.DayPickerNavigation_nextButton__vertical,
-            ...(isDefaultNavNext ? [
-              styles.DayPickerNavigation_button__verticalDefault,
-              styles.DayPickerNavigation_nextButton__verticalDefault,
-              isVerticalScrollable
-                && styles.DayPickerNavigation_nextButton__verticalScrollableDefault,
-            ] : []),
-          ] : []),
-        )}
-        aria-disabled={disableNext ? true : undefined}
-        aria-label={phrases.jumpToNextMonth}
-        onClick={disableNext ? undefined : onNextMonthClick}
-        onKeyUp={disableNext ? undefined : (e) => {
-          const { key } = e;
-          if (key === 'Enter' || key === ' ') onNextMonthClick(e);
-        }}
-        onMouseUp={disableNext ? undefined : (e) => {
-          e.currentTarget.blur();
-        }}
-      >
-        {navNextIcon}
-      </div>
     </div>
   );
 }
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 690e903aea..37a8dc250d 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -84,6 +84,8 @@ const propTypes = forbidExtraProps({
   navPosition: NavPositionShape,
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
+  renderNavPrevButton: PropTypes.func,
+  renderNavNextButton: PropTypes.func,
   noNavButtons: PropTypes.bool,
 
   onPrevMonthClick: PropTypes.func,
@@ -151,6 +153,8 @@ const defaultProps = {
   navPosition: NAV_POSITION_TOP,
   navPrev: null,
   navNext: null,
+  renderNavPrevButton: null,
+  renderNavNextButton: null,
   noNavButtons: false,
 
   onPrevMonthClick() {},
@@ -1258,6 +1262,8 @@ export default class DayPickerRangeController extends React.PureComponent {
       navPosition,
       navPrev,
       navNext,
+      renderNavPrevButton,
+      renderNavNextButton,
       noNavButtons,
       onOutsideClick,
       withPortal,
@@ -1326,6 +1332,8 @@ export default class DayPickerRangeController extends React.PureComponent {
         navPosition={navPosition}
         navPrev={navPrev}
         navNext={navNext}
+        renderNavPrevButton={renderNavPrevButton}
+        renderNavNextButton={renderNavNextButton}
         noNavButtons={noNavButtons}
         renderCalendarDay={renderCalendarDay}
         renderDayContents={renderDayContents}
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index f9b9e1be4e..2ff010b60e 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -68,6 +68,8 @@ const propTypes = forbidExtraProps({
   navPosition: NavPositionShape,
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
+  renderNavPrevButton: PropTypes.func,
+  renderNavNextButton: PropTypes.func,
 
   onPrevMonthClick: PropTypes.func,
   onNextMonthClick: PropTypes.func,
@@ -127,6 +129,8 @@ const defaultProps = {
   navPosition: NAV_POSITION_TOP,
   navPrev: null,
   navNext: null,
+  renderNavPrevButton: null,
+  renderNavNextButton: null,
 
   onPrevMonthClick() {},
   onNextMonthClick() {},
@@ -583,6 +587,8 @@ export default class DayPickerSingleDateController extends React.PureComponent {
       navPosition,
       navPrev,
       navNext,
+      renderNavPrevButton,
+      renderNavNextButton,
       onOutsideClick,
       onShiftTab,
       onTab,
@@ -638,6 +644,8 @@ export default class DayPickerSingleDateController extends React.PureComponent {
         navPosition={navPosition}
         navPrev={navPrev}
         navNext={navNext}
+        renderNavPrevButton={renderNavPrevButton}
+        renderNavNextButton={renderNavNextButton}
         renderMonthText={renderMonthText}
         renderWeekHeaderElement={renderWeekHeaderElement}
         renderCalendarDay={renderCalendarDay}
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index 7fb43c0dbc..275736d1c9 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -94,6 +94,8 @@ const defaultProps = {
   navPosition: NAV_POSITION_TOP,
   navPrev: null,
   navNext: null,
+  renderNavPrevButton: null,
+  renderNavNextButton: null,
 
   onPrevMonthClick() {},
   onNextMonthClick() {},
@@ -401,6 +403,8 @@ class SingleDatePicker extends React.PureComponent {
       navPosition,
       navPrev,
       navNext,
+      renderNavPrevButton,
+      renderNavNextButton,
       onPrevMonthClick,
       onNextMonthClick,
       onClose,
@@ -443,8 +447,10 @@ class SingleDatePicker extends React.PureComponent {
 
     const withAnyPortal = withPortal || withFullScreenPortal;
 
+    /* eslint-disable jsx-a11y/no-static-element-interactions */
+    /* eslint-disable jsx-a11y/click-events-have-key-events */
     return (
-      <div // eslint-disable-line jsx-a11y/no-static-element-interactions
+      <div
         ref={this.setDayPickerContainerRef}
         {...css(
           styles.SingleDatePicker_picker,
@@ -484,6 +490,8 @@ class SingleDatePicker extends React.PureComponent {
           navPosition={navPosition}
           navPrev={navPrev}
           navNext={navNext}
+          renderNavPrevButton={renderNavPrevButton}
+          renderNavNextButton={renderNavNextButton}
           onPrevMonthClick={onPrevMonthClick}
           onNextMonthClick={onNextMonthClick}
           onClose={onClose}
@@ -525,6 +533,8 @@ class SingleDatePicker extends React.PureComponent {
         )}
       </div>
     );
+    /* eslint-enable jsx-a11y/no-static-element-interactions */
+    /* eslint-enable jsx-a11y/click-events-have-key-events */
   }
 
   render() {
diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js
index 24efb386b3..99aca7ca06 100644
--- a/src/shapes/DateRangePickerShape.js
+++ b/src/shapes/DateRangePickerShape.js
@@ -83,6 +83,8 @@ export default {
   navPosition: NavPositionShape,
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
+  renderNavPrevButton: PropTypes.func,
+  renderNavNextButton: PropTypes.func,
   onPrevMonthClick: PropTypes.func,
   onNextMonthClick: PropTypes.func,
 
diff --git a/src/shapes/SingleDatePickerShape.js b/src/shapes/SingleDatePickerShape.js
index b477375ccb..70a13f6e97 100644
--- a/src/shapes/SingleDatePickerShape.js
+++ b/src/shapes/SingleDatePickerShape.js
@@ -72,6 +72,8 @@ export default {
   navPosition: NavPositionShape,
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
+  renderNavPrevButton: PropTypes.func,
+  renderNavNextButton: PropTypes.func,
 
   onPrevMonthClick: PropTypes.func,
   onNextMonthClick: PropTypes.func,
diff --git a/stories/DayPicker.js b/stories/DayPicker.js
index 4cf84eaa26..fe564feb03 100644
--- a/stories/DayPicker.js
+++ b/stories/DayPicker.js
@@ -21,7 +21,7 @@ const TestPrevIcon = () => (
       top: '20px',
       width: '40px',
     }}
-    tabindex="0"
+    tabIndex="0"
   >
     Prev
   </div>
@@ -39,7 +39,7 @@ const TestNextIcon = () => (
       top: '20px',
       width: '40px',
     }}
-    tabindex="0"
+    tabIndex="0"
   >
     Next
   </div>
@@ -57,6 +57,54 @@ const TestCustomInfoPanel = () => (
   </div>
 );
 
+function renderNavPrevButton(buttonProps) {
+  const {
+    ariaLabel,
+    disabled,
+    onClick,
+    onKeyUp,
+    onMouseUp,
+  } = buttonProps;
+
+  return (
+    <button
+      aria-label={ariaLabel}
+      disabled={disabled}
+      onClick={onClick}
+      onKeyUp={onKeyUp}
+      onMouseUp={onMouseUp}
+      style={{ position: 'absolute', top: 23, left: 22 }}
+      type="button"
+    >
+    &lsaquo; Prev
+    </button>
+  );
+}
+
+function renderNavNextButton(buttonProps) {
+  const {
+    ariaLabel,
+    disabled,
+    onClick,
+    onKeyUp,
+    onMouseUp,
+  } = buttonProps;
+
+  return (
+    <button
+      aria-label={ariaLabel}
+      disabled={disabled}
+      onClick={onClick}
+      onKeyUp={onKeyUp}
+      onMouseUp={onMouseUp}
+      style={{ position: 'absolute', top: 23, right: 22 }}
+      type="button"
+    >
+          Next &rsaquo;
+    </button>
+  );
+}
+
 storiesOf('DayPicker', module)
   .add('default', withInfo()(() => (
     <DayPicker />
@@ -133,9 +181,15 @@ storiesOf('DayPicker', module)
       navNext={<TestNextIcon />}
     />
   )))
+  .add('with custom navigation buttons', withInfo()(() => (
+    <DayPicker
+      renderNavPrevButton={renderNavPrevButton}
+      renderNavNextButton={renderNavNextButton}
+    />
+  )))
   .add('with custom details', withInfo()(() => (
     <DayPicker
-      renderDayContents={day => (day.day() % 6 === 5 ? '😻' : day.format('D'))}
+      renderDayContents={(day) => (day.day() % 6 === 5 ? '😻' : day.format('D'))}
     />
   )))
   .add('vertical with fixed-width container', withInfo()(() => (
@@ -155,7 +209,7 @@ storiesOf('DayPicker', module)
   )))
   .add('with custom week header text', withInfo()(() => (
     <DayPicker
-      renderWeekHeaderElement={day => (
+      renderWeekHeaderElement={(day) => (
         <strong style={{ color: '#FE01E5' }}><small>{day.toUpperCase()}</small></strong>
       )}
     />
diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
index cc2de68c20..62c3567940 100644
--- a/stories/DayPickerRangeController.js
+++ b/stories/DayPickerRangeController.js
@@ -109,6 +109,54 @@ const TestCustomInfoPanel = () => (
   </div>
 );
 
+function renderNavPrevButton(buttonProps) {
+  const {
+    ariaLabel,
+    disabled,
+    onClick,
+    onKeyUp,
+    onMouseUp,
+  } = buttonProps;
+
+  return (
+    <button
+      aria-label={ariaLabel}
+      disabled={disabled}
+      onClick={onClick}
+      onKeyUp={onKeyUp}
+      onMouseUp={onMouseUp}
+      style={{ position: 'absolute', top: 23, left: 22 }}
+      type="button"
+    >
+      &lsaquo; Prev
+    </button>
+  );
+}
+
+function renderNavNextButton(buttonProps) {
+  const {
+    ariaLabel,
+    disabled,
+    onClick,
+    onKeyUp,
+    onMouseUp,
+  } = buttonProps;
+
+  return (
+    <button
+      aria-label={ariaLabel}
+      disabled={disabled}
+      onClick={onClick}
+      onKeyUp={onKeyUp}
+      onMouseUp={onMouseUp}
+      style={{ position: 'absolute', top: 23, right: 22 }}
+      type="button"
+    >
+      Next &rsaquo;
+    </button>
+  );
+}
+
 function renderKeyboardShortcutsButton(buttonProps) {
   const { ref, onClick, ariaLabel } = buttonProps;
 
@@ -251,8 +299,8 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      startDateOffset={day => day.subtract(3, 'days')}
-      endDateOffset={day => day.add(3, 'days')}
+      startDateOffset={(day) => day.subtract(3, 'days')}
+      endDateOffset={(day) => day.add(3, 'days')}
     />
   )))
   .add('with 45 days range selection', withInfo()(() => (
@@ -260,8 +308,8 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      startDateOffset={day => day.subtract(22, 'days')}
-      endDateOffset={day => day.add(22, 'days')}
+      startDateOffset={(day) => day.subtract(22, 'days')}
+      endDateOffset={(day) => day.add(22, 'days')}
     />
   )))
   .add('with 4 days after today range selection', withInfo()(() => (
@@ -269,7 +317,7 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      endDateOffset={day => day.add(4, 'days')}
+      endDateOffset={(day) => day.add(4, 'days')}
     />
   )))
   .add('with current week range selection', withInfo()(() => (
@@ -277,8 +325,8 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      startDateOffset={day => day.startOf('week')}
-      endDateOffset={day => day.endOf('week')}
+      startDateOffset={(day) => day.startOf('week')}
+      endDateOffset={(day) => day.endOf('week')}
     />
   )))
   .add('with custom inputs', withInfo()(() => (
@@ -397,7 +445,7 @@ storiesOf('DayPickerRangeController', module)
       />
     </div>
   )))
-  .add('with custom month navigation', withInfo()(() => (
+  .add('with custom month navigation icons', withInfo()(() => (
     <DayPickerRangeControllerWrapper
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
@@ -406,6 +454,15 @@ storiesOf('DayPickerRangeController', module)
       navNext={<TestNextIcon />}
     />
   )))
+  .add('with custom month navigation buttons', withInfo()(() => (
+    <DayPickerRangeControllerWrapper
+      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
+      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
+      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
+      renderNavPrevButton={renderNavPrevButton}
+      renderNavNextButton={renderNavNextButton}
+    />
+  )))
   .add('with custom month navigation and blocked navigation (minDate and maxDate)', withInfo()(() => (
     <DayPickerRangeControllerWrapper
       minDate={moment().subtract(2, 'months').startOf('month')}
@@ -489,9 +546,8 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      isOutsideRange={day => !isInclusivelyAfterDay(day, moment())
-        || isInclusivelyAfterDay(day, moment().add(2, 'weeks'))
-      }
+      isOutsideRange={(day) => !isInclusivelyAfterDay(day, moment())
+        || isInclusivelyAfterDay(day, moment().add(2, 'weeks'))}
     />
   )))
   .add('with some blocked dates', withInfo()(() => (
@@ -499,7 +555,7 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      isDayBlocked={day1 => datesList.some(day2 => isSameDay(day1, day2))}
+      isDayBlocked={(day1) => datesList.some((day2) => isSameDay(day1, day2))}
     />
   )))
   .add('with some highlighted dates', withInfo()(() => (
@@ -507,7 +563,7 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      isDayHighlighted={day1 => datesList.some(day2 => isSameDay(day1, day2))}
+      isDayHighlighted={(day1) => datesList.some((day2) => isSameDay(day1, day2))}
     />
   )))
   .add('blocks fridays', withInfo()(() => (
@@ -515,7 +571,7 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      isDayBlocked={day => moment.weekdays(day.weekday()) === 'Friday'}
+      isDayBlocked={(day) => moment.weekdays(day.weekday()) === 'Friday'}
     />
   )))
   .add('with navigation blocked (minDate and maxDate)', withInfo()(() => (
@@ -532,7 +588,7 @@ storiesOf('DayPickerRangeController', module)
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
-      renderDayContents={day => day.format('ddd')}
+      renderDayContents={(day) => day.format('ddd')}
     />
   )))
   .add('with info panel', withInfo()(() => (
@@ -594,7 +650,7 @@ storiesOf('DayPickerRangeController', module)
       onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
       getMinNightsForHoverDate={() => 2}
-      isDayBlocked={day1 => datesList.some(day2 => isSameDay(day1, day2))}
+      isDayBlocked={(day1) => datesList.some((day2) => isSameDay(day1, day2))}
     />
   )))
   .add('with custom keyboard shortcuts button', withInfo()(() => (
diff --git a/stories/DayPickerSingleDateController.js b/stories/DayPickerSingleDateController.js
index ab141e105f..5752fef190 100644
--- a/stories/DayPickerSingleDateController.js
+++ b/stories/DayPickerSingleDateController.js
@@ -42,7 +42,7 @@ const TestPrevIcon = () => (
       position: 'absolute',
       top: '20px',
     }}
-    tabindex="0"
+    tabIndex="0"
   >
     Prev
   </div>
@@ -59,7 +59,7 @@ const TestNextIcon = () => (
       right: '22px',
       top: '20px',
     }}
-    tabindex="0"
+    tabIndex="0"
   >
     Next
   </div>
@@ -77,6 +77,54 @@ const TestCustomInfoPanel = () => (
   </div>
 );
 
+function renderNavPrevButton(buttonProps) {
+  const {
+    ariaLabel,
+    disabled,
+    onClick,
+    onKeyUp,
+    onMouseUp,
+  } = buttonProps;
+
+  return (
+    <button
+      aria-label={ariaLabel}
+      disabled={disabled}
+      onClick={onClick}
+      onKeyUp={onKeyUp}
+      onMouseUp={onMouseUp}
+      style={{ position: 'absolute', top: 23, left: 22 }}
+      type="button"
+    >
+    &lsaquo; Prev
+    </button>
+  );
+}
+
+function renderNavNextButton(buttonProps) {
+  const {
+    ariaLabel,
+    disabled,
+    onClick,
+    onKeyUp,
+    onMouseUp,
+  } = buttonProps;
+
+  return (
+    <button
+      aria-label={ariaLabel}
+      disabled={disabled}
+      onClick={onClick}
+      onKeyUp={onKeyUp}
+      onMouseUp={onMouseUp}
+      style={{ position: 'absolute', top: 23, right: 22 }}
+      type="button"
+    >
+          Next &rsaquo;
+    </button>
+  );
+}
+
 const datesList = [
   moment(),
   moment().add(1, 'days'),
@@ -172,7 +220,7 @@ storiesOf('DayPickerSingleDateController', module)
       orientation={VERTICAL_ORIENTATION}
     />
   )))
-  .add('with custom month navigation', withInfo()(() => (
+  .add('with custom month navigation icons', withInfo()(() => (
     <DayPickerSingleDateControllerWrapper
       onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
@@ -181,6 +229,15 @@ storiesOf('DayPickerSingleDateController', module)
       navNext={<TestNextIcon />}
     />
   )))
+  .add('with custom month navigation buttons', withInfo()(() => (
+    <DayPickerSingleDateControllerWrapper
+      onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
+      onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
+      onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
+      renderNavPrevButton={renderNavPrevButton}
+      renderNavNextButton={renderNavNextButton}
+    />
+  )))
   .add('with month navigation positioned at the bottom', withInfo()(() => (
     <DayPickerSingleDateControllerWrapper
       navPosition={NAV_POSITION_BOTTOM}
@@ -219,10 +276,8 @@ storiesOf('DayPickerSingleDateController', module)
       onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
-      isOutsideRange={day =>
-        !isInclusivelyAfterDay(day, moment()) ||
-        isInclusivelyAfterDay(day, moment().add(2, 'weeks'))
-      }
+      isOutsideRange={(day) => !isInclusivelyAfterDay(day, moment())
+        || isInclusivelyAfterDay(day, moment().add(2, 'weeks'))}
     />
   )))
   .add('with some blocked dates', withInfo()(() => (
@@ -230,7 +285,7 @@ storiesOf('DayPickerSingleDateController', module)
       onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
-      isDayBlocked={day1 => datesList.some(day2 => isSameDay(day1, day2))}
+      isDayBlocked={(day1) => datesList.some((day2) => isSameDay(day1, day2))}
     />
   )))
   .add('with some highlighted dates', withInfo()(() => (
@@ -238,7 +293,7 @@ storiesOf('DayPickerSingleDateController', module)
       onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
-      isDayHighlighted={day1 => datesList.some(day2 => isSameDay(day1, day2))}
+      isDayHighlighted={(day1) => datesList.some((day2) => isSameDay(day1, day2))}
     />
   )))
   .add('blocks fridays', withInfo()(() => (
@@ -246,7 +301,7 @@ storiesOf('DayPickerSingleDateController', module)
       onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
-      isDayBlocked={day => moment.weekdays(day.weekday()) === 'Friday'}
+      isDayBlocked={(day) => moment.weekdays(day.weekday()) === 'Friday'}
     />
   )))
   .add('with custom daily details', withInfo()(() => (
@@ -254,7 +309,7 @@ storiesOf('DayPickerSingleDateController', module)
       onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
       onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
       onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
-      renderDayContents={day => day.format('ddd')}
+      renderDayContents={(day) => day.format('ddd')}
     />
   )))
   .add('with custom day styles', withInfo()(() => {
@@ -274,7 +329,7 @@ storiesOf('DayPickerSingleDateController', module)
         onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
         onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
         onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
-        renderCalendarDay={props => (
+        renderCalendarDay={(props) => (
           <CustomizableCalendarDay
             {...props}
             {...customDayStyles}
diff --git a/test/components/DayPickerNavigation_spec.jsx b/test/components/DayPickerNavigation_spec.jsx
index 8698161c84..f61e5ff109 100644
--- a/test/components/DayPickerNavigation_spec.jsx
+++ b/test/components/DayPickerNavigation_spec.jsx
@@ -58,6 +58,28 @@ describe('DayPickerNavigation', () => {
       const wrapper = shallow(<DayPickerNavigation isRTL />).dive();
       expect(wrapper.childAt(1).find(LeftArrow)).to.have.lengthOf(1);
     });
+
+    it('calls renderNavPrevButton when custom prev button is used', () => {
+      const renderNavPrevButtonStub = sinon.stub().returns(<button type="button">Prev</button>);
+      const wrapper = shallow(
+        <DayPickerNavigation
+          renderNavPrevButton={renderNavPrevButtonStub}
+        />,
+      ).dive();
+      expect(wrapper.childAt(0).find('div[role="button"]')).to.have.lengthOf(0);
+      expect(renderNavPrevButtonStub).to.have.property('callCount', 1);
+    });
+
+    it('calls renderNavNextButton when custom next button is used', () => {
+      const renderNavNextButtonStub = sinon.stub().returns(<button type="button">Next</button>);
+      const wrapper = shallow(
+        <DayPickerNavigation
+          renderNavNextButton={renderNavNextButtonStub}
+        />,
+      ).dive();
+      expect(wrapper.childAt(1).find('div[role="button"]')).to.have.lengthOf(0);
+      expect(renderNavNextButtonStub).to.have.property('callCount', 1);
+    });
   });
 
   describe('interactions', () => {
@@ -98,5 +120,73 @@ describe('DayPickerNavigation', () => {
       nextMonthButton.simulate('click');
       expect(onNextMonthStub).to.have.property('callCount', 0);
     });
+
+    it('props.onPrevMonthClick is triggered by prev month button key up', () => {
+      const onPrevMonthStub = sinon.stub();
+      const prevMonthButton = shallow(<DayPickerNavigation
+        onPrevMonthClick={onPrevMonthStub}
+      />).dive().find('[role="button"]').at(0);
+      prevMonthButton.simulate('keyup', { key: 'Enter' });
+      expect(onPrevMonthStub).to.have.property('callCount', 1);
+      prevMonthButton.simulate('keyup', { key: ' ' });
+      expect(onPrevMonthStub).to.have.property('callCount', 2);
+    });
+
+    it('props.onNextMonthClick is triggered by next month button key up', () => {
+      const onNextMonthStub = sinon.stub();
+      const nextMonthButton = shallow(<DayPickerNavigation
+        onNextMonthClick={onNextMonthStub}
+      />).dive().find('[role="button"]').at(1);
+      nextMonthButton.simulate('keyup', { key: 'Enter' });
+      expect(onNextMonthStub).to.have.property('callCount', 1);
+      nextMonthButton.simulate('keyup', { key: ' ' });
+      expect(onNextMonthStub).to.have.property('callCount', 2);
+    });
+
+    it('props.onPrevMonthClick is triggered by custom prev month button click', () => {
+      const onPrevMonthStub = sinon.stub();
+      const renderNavPrevButtonStub = sinon.stub().onCall(0).callsFake(({ onClick }) => <button onClick={onClick} type="button">Prev</button>);
+      const prevMonthButton = shallow(<DayPickerNavigation
+        onPrevMonthClick={onPrevMonthStub}
+        renderNavPrevButton={renderNavPrevButtonStub}
+      />).dive().find('button').at(0);
+      prevMonthButton.simulate('click');
+      expect(onPrevMonthStub).to.have.property('callCount', 1);
+    });
+
+    it('props.onNextMonthClick is triggered by custom next month button click', () => {
+      const onNextMonthStub = sinon.stub();
+      const renderNavNextButtonStub = sinon.stub().onCall(0).callsFake(({ onClick }) => <button onClick={onClick} type="button">Next</button>);
+      const nextMonthButton = shallow(<DayPickerNavigation
+        onNextMonthClick={onNextMonthStub}
+        renderNavNextButton={renderNavNextButtonStub}
+      />).dive().find('button').at(0);
+      nextMonthButton.simulate('click');
+      expect(onNextMonthStub).to.have.property('callCount', 1);
+    });
+
+    it('props.onPrevMonthClick is not triggered by custom prev month disabled click', () => {
+      const onPrevMonthStub = sinon.stub();
+      const renderNavPrevButtonStub = sinon.stub().onCall(0).callsFake(({ disabled, onClick }) => <button disabled={disabled} onClick={onClick} type="button">Prev</button>);
+      const prevMonthButton = shallow(<DayPickerNavigation
+        disablePrev
+        onPrevMonthClick={onPrevMonthStub}
+        renderNavPrevButton={renderNavPrevButtonStub}
+      />).dive().find('button').at(0);
+      prevMonthButton.simulate('click');
+      expect(onPrevMonthStub).to.have.property('callCount', 0);
+    });
+
+    it('props.onNextMonthClick is not triggered by custom next month disabled click', () => {
+      const onNextMonthStub = sinon.stub();
+      const renderNavNextButtonStub = sinon.stub().onCall(0).callsFake(({ disabled, onClick }) => <button disabled={disabled} onClick={onClick} type="button">Next</button>);
+      const nextMonthButton = shallow(<DayPickerNavigation
+        disableNext
+        onNextMonthClick={onNextMonthStub}
+        renderNavNextButton={renderNavNextButtonStub}
+      />).dive().find('button').at(0);
+      nextMonthButton.simulate('click');
+      expect(onNextMonthStub).to.have.property('callCount', 0);
+    });
   });
 });

From 7c58d6d6aadf0061980f1adeb52465c2606d58ac Mon Sep 17 00:00:00 2001
From: Kevin Pan <kevin.pan@airbnb.com>
Date: Wed, 13 Nov 2019 16:22:17 -0800
Subject: [PATCH 540/618] Version 21.5.0

---
 CHANGELOG.md | 4 ++++
 package.json | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7a25502c3f..2d7df98a6a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,10 @@
 - []  ([#](https://github.com/airbnb/react-dates/pull/))
 -->
 
+## 21.5.0
+
+- [new] Add support for custom month navigation buttons ([#1859](https://github.com/airbnb/react-dates/pull/1859))
+
 ## 21.4.0
 
 - [new] Expose 'after-hovered-start' modifier and add 'before-hovered-end', 'no-selected-start-before-selected-end', 'selected-start-in-hovered-span', 'selected-end-in-hovered-span', 'selected-start-no-selected-end', and 'selected-end-no-selected-start' modifiers [#1608](https://github.com/airbnb/react-dates/pull/1608)
diff --git a/package.json b/package.json
index 8f191c41d6..974e1a27ad 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "21.4.0",
+  "version": "21.5.0",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 6363481cd38eb20317a2fa28c7f80fb221fb336e Mon Sep 17 00:00:00 2001
From: Kaeson Ho <kaeson.ho@airbnb.com>
Date: Tue, 10 Dec 2019 12:46:24 -0800
Subject: [PATCH 541/618] Remove overflowY:scroll on CalendarMonthGrid

---
 src/components/CalendarMonthGrid.jsx | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/components/CalendarMonthGrid.jsx b/src/components/CalendarMonthGrid.jsx
index bb43f01309..a86078c994 100644
--- a/src/components/CalendarMonthGrid.jsx
+++ b/src/components/CalendarMonthGrid.jsx
@@ -396,14 +396,6 @@ export default withStyles(({
 
   CalendarMonthGrid__vertical_scrollable: {
     margin: '0 auto',
-    overflowY: 'scroll',
-    ...(noScrollBarOnVerticalScrollable && {
-      '-webkitOverflowScrolling': 'touch',
-      '::-webkit-scrollbar': {
-        '-webkit-appearance': 'none',
-        display: 'none',
-      },
-    }),
   },
 
   CalendarMonthGrid_month__horizontal: {

From 1a4e252d2fac95832489b597ac450f6f4c69f6d9 Mon Sep 17 00:00:00 2001
From: Kaeson Ho <kaeson.ho@airbnb.com>
Date: Tue, 10 Dec 2019 12:57:37 -0800
Subject: [PATCH 542/618] remove unused variable

---
 src/components/CalendarMonthGrid.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/CalendarMonthGrid.jsx b/src/components/CalendarMonthGrid.jsx
index a86078c994..7ade948e44 100644
--- a/src/components/CalendarMonthGrid.jsx
+++ b/src/components/CalendarMonthGrid.jsx
@@ -370,7 +370,6 @@ CalendarMonthGrid.defaultProps = defaultProps;
 export default withStyles(({
   reactDates: {
     color,
-    noScrollBarOnVerticalScrollable,
     spacing,
     zIndex,
   },

From 1fa929be7541bc13f549140b24b2604361ad9075 Mon Sep 17 00:00:00 2001
From: Kevin Pan <kevin.pan@airbnb.com>
Date: Tue, 10 Dec 2019 13:33:04 -0800
Subject: [PATCH 543/618] Version 21.5.1

---
 CHANGELOG.md | 3 +++
 package.json | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2d7df98a6a..b4d3b8fee9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,9 @@
 <!--
 - []  ([#](https://github.com/airbnb/react-dates/pull/))
 -->
+## 21.5.1
+
+- [fix] Remove redundant overflowY:scroll on CalendarMonthGrid ([#1881](https://github.com/airbnb/react-dates/pull/1881))
 
 ## 21.5.0
 
diff --git a/package.json b/package.json
index 974e1a27ad..7cefa80754 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "21.5.0",
+  "version": "21.5.1",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 8e8963cd05cd1d72faa00463f631158c773fee8e Mon Sep 17 00:00:00 2001
From: Nicole Kinser <nicole.kinser@airbnb.com>
Date: Thu, 9 Jan 2020 16:31:22 -0800
Subject: [PATCH 544/618] Add functionality to see previous months for vertical
 scrollable calendar

---
 src/components/DayPicker.jsx                  |  54 ++++--
 src/components/DayPickerNavigation.jsx        | 157 ++++++++++--------
 src/components/DayPickerRangeController.jsx   |  24 ++-
 test/components/DayPickerNavigation_spec.jsx  |  10 +-
 .../DayPickerRangeController_spec.jsx         |  27 ++-
 test/components/DayPicker_spec.jsx            |  44 ++++-
 6 files changed, 217 insertions(+), 99 deletions(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 0f5b2f7162..34e91299e6 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -51,6 +51,8 @@ const PREV_TRANSITION = 'prev';
 const NEXT_TRANSITION = 'next';
 const MONTH_SELECTION_TRANSITION = 'month_selection';
 const YEAR_SELECTION_TRANSITION = 'year_selection';
+const PREV_NAV = 'prev_nav';
+const NEXT_NAV = 'next_nav';
 
 const propTypes = forbidExtraProps({
   ...withStylesPropTypes,
@@ -91,7 +93,8 @@ const propTypes = forbidExtraProps({
   onNextMonthClick: PropTypes.func,
   onMonthChange: PropTypes.func,
   onYearChange: PropTypes.func,
-  onMultiplyScrollableMonths: PropTypes.func, // VERTICAL_SCROLLABLE daypickers only
+  onGetNextScrollableMonths: PropTypes.func, // VERTICAL_SCROLLABLE daypickers only
+  onGetPrevScrollableMonths: PropTypes.func, // VERTICAL_SCROLLABLE daypickers only
 
   // month props
   renderMonthText: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'),
@@ -158,7 +161,8 @@ export const defaultProps = {
   onNextMonthClick() {},
   onMonthChange() {},
   onYearChange() {},
-  onMultiplyScrollableMonths() {},
+  onGetNextScrollableMonths() {},
+  onGetPrevScrollableMonths() {},
 
   // month props
   renderMonthText: null,
@@ -238,7 +242,8 @@ class DayPicker extends React.PureComponent {
     this.onMonthChange = this.onMonthChange.bind(this);
     this.onYearChange = this.onYearChange.bind(this);
 
-    this.multiplyScrollableMonths = this.multiplyScrollableMonths.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);
@@ -704,17 +709,29 @@ class DayPicker extends React.PureComponent {
     return false;
   }
 
-  multiplyScrollableMonths(e) {
-    const { onMultiplyScrollableMonths } = this.props;
+  getNextScrollableMonths(e) {
+    const { onGetNextScrollableMonths } = this.props;
     if (e) e.preventDefault();
 
-    if (onMultiplyScrollableMonths) onMultiplyScrollableMonths(e);
+    if (onGetNextScrollableMonths) onGetNextScrollableMonths(e);
 
     this.setState(({ scrollableMonthMultiple }) => ({
       scrollableMonthMultiple: scrollableMonthMultiple + 1,
     }));
   }
 
+  getPrevScrollableMonths(e) {
+    const { numberOfMonths, onGetPrevScrollableMonths } = this.props;
+    if (e) e.preventDefault();
+
+    if (onGetPrevScrollableMonths) onGetPrevScrollableMonths(e);
+
+    this.setState(({ currentMonth, scrollableMonthMultiple }) => ({
+      currentMonth: currentMonth.clone().subtract(numberOfMonths, 'month'),
+      scrollableMonthMultiple: scrollableMonthMultiple + 1,
+    }));
+  }
+
   isHorizontal() {
     const { orientation } = this.props;
     return orientation === HORIZONTAL_ORIENTATION;
@@ -842,7 +859,7 @@ class DayPicker extends React.PureComponent {
     });
   }
 
-  renderNavigation() {
+  renderNavigation(navDirection = null) {
     const {
       dayPickerNavigationInlineStyles,
       disablePrev,
@@ -862,16 +879,22 @@ class DayPicker extends React.PureComponent {
       return null;
     }
 
-    const onNextMonthClick = orientation === VERTICAL_SCROLLABLE
-      ? this.multiplyScrollableMonths
-      : this.onNextMonthClick;
+    const onPrevMonthClick =
+      orientation === VERTICAL_SCROLLABLE
+        ? this.getPrevScrollableMonths
+        : this.onPrevMonthClick;
+
+    const onNextMonthClick =
+      orientation === VERTICAL_SCROLLABLE
+        ? this.getNextScrollableMonths
+        : this.onNextMonthClick;
 
     return (
       <DayPickerNavigation
         disablePrev={disablePrev}
         disableNext={disableNext}
         inlineStyles={dayPickerNavigationInlineStyles}
-        onPrevMonthClick={this.onPrevMonthClick}
+        onPrevMonthClick={onPrevMonthClick}
         onNextMonthClick={onNextMonthClick}
         navPosition={navPosition}
         navPrev={navPrev}
@@ -881,6 +904,12 @@ class DayPicker extends React.PureComponent {
         orientation={orientation}
         phrases={phrases}
         isRTL={isRTL}
+        showNavNextButton={
+          !(orientation === VERTICAL_SCROLLABLE && navDirection === PREV_NAV)
+        }
+        showNavPrevButton={
+          !(orientation === VERTICAL_SCROLLABLE && navDirection === NEXT_NAV)
+        }
       />
     );
   }
@@ -1118,6 +1147,7 @@ class DayPicker extends React.PureComponent {
                 )}
                 ref={this.setTransitionContainerRef}
               >
+                {verticalScrollable && this.renderNavigation(PREV_NAV)}
                 <CalendarMonthGrid
                   setMonthTitleHeight={!monthTitleHeight ? this.setMonthTitleHeight : undefined}
                   translationValue={translationValue}
@@ -1150,7 +1180,7 @@ class DayPicker extends React.PureComponent {
                   verticalBorderSpacing={verticalBorderSpacing}
                   horizontalMonthPadding={horizontalMonthPadding}
                 />
-                {verticalScrollable && this.renderNavigation()}
+                {verticalScrollable && this.renderNavigation(NEXT_NAV)}
               </div>
 
               {!verticalScrollable
diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index a0103173ca..cd769fec84 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -40,6 +40,8 @@ const propTypes = forbidExtraProps({
 
   renderNavPrevButton: PropTypes.func,
   renderNavNextButton: PropTypes.func,
+  showNavPrevButton: PropTypes.bool,
+  showNavNextButton: PropTypes.bool,
 });
 
 const defaultProps = {
@@ -60,6 +62,8 @@ const defaultProps = {
 
   renderNavPrevButton: null,
   renderNavNextButton: null,
+  showNavPrevButton: true,
+  showNavNextButton: true,
 };
 
 function DayPickerNavigation({
@@ -76,6 +80,8 @@ function DayPickerNavigation({
   phrases,
   renderNavPrevButton,
   renderNavNextButton,
+  showNavPrevButton,
+  showNavNextButton,
   styles,
 }) {
   const isHorizontal = orientation === HORIZONTAL_ORIENTATION;
@@ -151,19 +157,21 @@ function DayPickerNavigation({
         hasInlineStyles && inlineStyles,
       )}
     >
-      {!isVerticalScrollable && (
-        renderNavPrevButton ? renderNavPrevButton({
-          ariaLabel: phrases.jumpToPrevMonth,
-          disabled: disablePrev,
-          onClick: disablePrev ? undefined : onPrevMonthClick,
-          onKeyUp: disablePrev ? undefined : (e) => {
-            const { key } = e;
-            if (key === 'Enter' || key === ' ') onPrevMonthClick(e);
-          },
-          onMouseUp: disablePrev ? undefined : (e) => {
-            e.currentTarget.blur();
-          },
-        }) : (
+      {showNavPrevButton &&
+        (renderNavPrevButton ? (
+          renderNavPrevButton({
+            ariaLabel: phrases.jumpToPrevMonth,
+            disabled: disablePrev,
+            onClick: disablePrev ? undefined : onPrevMonthClick,
+            onKeyUp: disablePrev ? undefined : (e) => {
+              const { key } = e;
+              if (key === 'Enter' || key === ' ') onPrevMonthClick(e);
+            },
+            onMouseUp: disablePrev ? undefined : (e) => {
+              e.currentTarget.blur();
+            },
+          })
+        ) : (
           <div // eslint-disable-line jsx-a11y/interactive-supports-focus
             role="button"
             {...navPrevTabIndex}
@@ -185,6 +193,7 @@ function DayPickerNavigation({
                 ...(isDefaultNavPrev ? [
                   styles.DayPickerNavigation_button__verticalDefault,
                   styles.DayPickerNavigation_prevButton__verticalDefault,
+                  isVerticalScrollable && styles.DayPickerNavigation_prevButton__verticalScrollableDefault,
                 ] : []),
               ] : []),
             )}
@@ -201,62 +210,63 @@ function DayPickerNavigation({
           >
             {navPrevIcon}
           </div>
-        )
-      )}
-
-      {renderNavNextButton ? renderNavNextButton({
-        ariaLabel: phrases.jumpToNextMonth,
-        disabled: disableNext,
-        onClick: disableNext ? undefined : onNextMonthClick,
-        onKeyUp: disableNext ? undefined : (e) => {
-          const { key } = e;
-          if (key === 'Enter' || key === ' ') onNextMonthClick(e);
-        },
-        onMouseUp: disableNext ? undefined : (e) => {
-          e.currentTarget.blur();
-        },
-      }) : (
-        <div // eslint-disable-line jsx-a11y/interactive-supports-focus
-          role="button"
-          {...navNextTabIndex}
-          {...css(
-            styles.DayPickerNavigation_button,
-            isDefaultNavNext && styles.DayPickerNavigation_button__default,
-            disableNext && styles.DayPickerNavigation_button__disabled,
-            ...(isHorizontal ? [
-              styles.DayPickerNavigation_button__horizontal,
-              ...(isDefaultNavNext ? [
-                styles.DayPickerNavigation_button__horizontalDefault,
-                isBottomNavPosition && styles.DayPickerNavigation_bottomButton__horizontalDefault,
-                isRTL && styles.DayPickerNavigation_leftButton__horizontalDefault,
-                !isRTL && styles.DayPickerNavigation_rightButton__horizontalDefault,
+        ))}
+
+      {showNavNextButton &&
+        (renderNavNextButton ? (
+          renderNavNextButton({
+            ariaLabel: phrases.jumpToNextMonth,
+            disabled: disableNext,
+            onClick: disableNext ? undefined : onNextMonthClick,
+            onKeyUp: disableNext ? undefined : (e) => {
+              const { key } = e;
+              if (key === 'Enter' || key === ' ') onNextMonthClick(e);
+            },
+            onMouseUp: disableNext ? undefined : e => {
+              e.currentTarget.blur();
+            },
+          })
+        ) : (
+          <div // eslint-disable-line jsx-a11y/interactive-supports-focus
+            role='button'
+            {...navNextTabIndex}
+            {...css(
+              styles.DayPickerNavigation_button,
+              isDefaultNavNext && styles.DayPickerNavigation_button__default,
+              disableNext && styles.DayPickerNavigation_button__disabled,
+              ...(isHorizontal ? [
+                styles.DayPickerNavigation_button__horizontal,
+                ...(isDefaultNavNext ? [
+                  styles.DayPickerNavigation_button__horizontalDefault,
+                  isBottomNavPosition && styles.DayPickerNavigation_bottomButton__horizontalDefault,
+                  isRTL && styles.DayPickerNavigation_leftButton__horizontalDefault,
+                  !isRTL && styles.DayPickerNavigation_rightButton__horizontalDefault,
+                ] : []),
               ] : []),
-            ] : []),
-            ...(isVertical ? [
-              styles.DayPickerNavigation_button__vertical,
-              styles.DayPickerNavigation_nextButton__vertical,
-              ...(isDefaultNavNext ? [
-                styles.DayPickerNavigation_button__verticalDefault,
-                styles.DayPickerNavigation_nextButton__verticalDefault,
-                isVerticalScrollable
-                && styles.DayPickerNavigation_nextButton__verticalScrollableDefault,
+              ...(isVertical ? [
+                styles.DayPickerNavigation_button__vertical,
+                ...(isDefaultNavNext ? [
+                  styles.DayPickerNavigation_button__verticalDefault,
+                  styles.DayPickerNavigation_nextButton__verticalDefault,
+                  isVerticalScrollable &&
+                    styles.DayPickerNavigation_nextButton__verticalScrollableDefault,
+                ] : []),
               ] : []),
-            ] : []),
-          )}
-          aria-disabled={disableNext ? true : undefined}
-          aria-label={phrases.jumpToNextMonth}
-          onClick={disableNext ? undefined : onNextMonthClick}
-          onKeyUp={disableNext ? undefined : (e) => {
-            const { key } = e;
-            if (key === 'Enter' || key === ' ') onNextMonthClick(e);
-          }}
-          onMouseUp={disableNext ? undefined : (e) => {
-            e.currentTarget.blur();
-          }}
-        >
-          {navNextIcon}
-        </div>
-      )}
+            )}
+            aria-disabled={disableNext ? true : undefined}
+            aria-label={phrases.jumpToNextMonth}
+            onClick={disableNext ? undefined : onNextMonthClick}
+            onKeyUp={ disableNext ? undefined : (e) => {
+              const { key } = e;
+              if (key === 'Enter' || key === ' ') onNextMonthClick(e);
+            }}
+            onMouseUp={disableNext ? undefined : (e) => {
+              e.currentTarget.blur();
+            }}
+          >
+            {navNextIcon}
+          </div>
+        ))}
     </div>
   );
 }
@@ -341,8 +351,7 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     },
   },
 
-  DayPickerNavigation_button__horizontal: {
-  },
+  DayPickerNavigation_button__horizontal: {},
 
   DayPickerNavigation_button__horizontalDefault: {
     position: 'absolute',
@@ -368,8 +377,7 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     right: noflip(22),
   },
 
-  DayPickerNavigation_button__vertical: {
-  },
+  DayPickerNavigation_button__vertical: {},
 
   DayPickerNavigation_button__verticalDefault: {
     padding: 5,
@@ -382,8 +390,7 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     width: '50%',
   },
 
-  DayPickerNavigation_prevButton__verticalDefault: {
-  },
+  DayPickerNavigation_prevButton__verticalDefault: {},
 
   DayPickerNavigation_nextButton__verticalDefault: {
     borderLeft: noflip(0),
@@ -393,6 +400,10 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     width: '100%',
   },
 
+  DayPickerNavigation_prevButton__verticalScrollableDefault: {
+    width: '100%',
+  },
+
   DayPickerNavigation_svg__horizontal: {
     height: 19,
     width: 19,
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 37a8dc250d..6c197e37eb 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -259,7 +259,8 @@ export default class DayPickerRangeController extends React.PureComponent {
     this.onNextMonthClick = this.onNextMonthClick.bind(this);
     this.onMonthChange = this.onMonthChange.bind(this);
     this.onYearChange = this.onYearChange.bind(this);
-    this.onMultiplyScrollableMonths = this.onMultiplyScrollableMonths.bind(this);
+    this.onGetNextScrollableMonths = this.onGetNextScrollableMonths.bind(this);
+    this.onGetPrevScrollableMonths = this.onGetPrevScrollableMonths.bind(this);
     this.getFirstFocusableDay = this.getFirstFocusableDay.bind(this);
   }
 
@@ -989,7 +990,7 @@ export default class DayPickerRangeController extends React.PureComponent {
     });
   }
 
-  onMultiplyScrollableMonths() {
+  onGetNextScrollableMonths() {
     const { numberOfMonths, enableOutsideDays } = this.props;
     const { currentMonth, visibleDays } = this.state;
 
@@ -1005,6 +1006,22 @@ export default class DayPickerRangeController extends React.PureComponent {
     });
   }
 
+  onGetPrevScrollableMonths() {
+    const { numberOfMonths, enableOutsideDays } = this.props;
+    const { currentMonth, visibleDays } = this.state;
+
+    const firstPreviousMonth = currentMonth.clone().subtract(numberOfMonths, 'month');
+    const newVisibleDays = getVisibleDays(firstPreviousMonth, numberOfMonths, enableOutsideDays, true);
+
+    this.setState({
+      currentMonth: firstPreviousMonth.clone(),
+      visibleDays: {
+        ...visibleDays,
+        ...this.getModifiers(newVisibleDays),
+      },
+    });
+  }
+
   getFirstFocusableDay(newMonth) {
     const {
       startDate,
@@ -1317,7 +1334,8 @@ export default class DayPickerRangeController extends React.PureComponent {
         onTab={onTab}
         onShiftTab={onShiftTab}
         onYearChange={this.onYearChange}
-        onMultiplyScrollableMonths={this.onMultiplyScrollableMonths}
+        onGetNextScrollableMonths={this.onGetNextScrollableMonths}
+        onGetPrevScrollableMonths={this.onGetPrevScrollableMonths}
         monthFormat={monthFormat}
         renderMonthText={renderMonthText}
         renderWeekHeaderElement={renderWeekHeaderElement}
diff --git a/test/components/DayPickerNavigation_spec.jsx b/test/components/DayPickerNavigation_spec.jsx
index f61e5ff109..8343ae95ca 100644
--- a/test/components/DayPickerNavigation_spec.jsx
+++ b/test/components/DayPickerNavigation_spec.jsx
@@ -4,7 +4,6 @@ import sinon from 'sinon-sandbox';
 import { shallow } from 'enzyme';
 
 import DayPickerNavigation from '../../src/components/DayPickerNavigation';
-import { VERTICAL_SCROLLABLE } from '../../src/constants';
 import RightArrow from '../../src/components/RightArrow';
 import LeftArrow from '../../src/components/LeftArrow';
 
@@ -15,8 +14,13 @@ describe('DayPickerNavigation', () => {
       expect(wrapper.find('[role="button"]')).to.have.lengthOf(2);
     });
 
-    it('renders one button when vertically scrollable', () => {
-      const wrapper = shallow(<DayPickerNavigation orientation={VERTICAL_SCROLLABLE} />).dive();
+    it('renders one button when showNavNextButton is false', () => {
+      const wrapper = shallow(<DayPickerNavigation showNavNextButton={false} />).dive();
+      expect(wrapper.find('[role="button"]')).to.have.lengthOf(1);
+    });
+
+    it('renders one button when showNavNextButton is false', () => {
+      const wrapper = shallow(<DayPickerNavigation showNavPrevButton={false} />).dive();
       expect(wrapper.find('[role="button"]')).to.have.lengthOf(1);
     });
 
diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index 6904f62e2b..7d09c1b45e 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -4142,7 +4142,7 @@ describe('DayPickerRangeController', () => {
     });
   });
 
-  it('return value now has modifier arg for day after multiplying number of months', () => {
+  it('return value now has modifier arg for day after getting next scrollable months', () => {
     const modifierToAdd = 'foo';
     const futureDateAfterMultiply = today.clone().add(4, 'months');
     const monthISO = toISOMonthString(futureDateAfterMultiply);
@@ -4160,11 +4160,34 @@ describe('DayPickerRangeController', () => {
     )).instance();
     let modifiers = wrapper.addModifier(updatedDays, futureDateAfterMultiply, modifierToAdd);
     expect(Array.from(modifiers[monthISO][todayISO])).to.not.contain(modifierToAdd);
-    wrapper.onMultiplyScrollableMonths();
+    wrapper.onGetNextScrollableMonths();
     modifiers = wrapper.addModifier(updatedDays, futureDateAfterMultiply, modifierToAdd);
     expect(Array.from(modifiers[monthISO][todayISO])).to.contain(modifierToAdd);
   });
 
+  it('return value now has modifier arg for day after getting previous scrollable months', () => {
+    const modifierToAdd = 'foo';
+    const pastDateAfterMultiply = today.clone().subtract(4, 'months');
+    const monthISO = toISOMonthString(pastDateAfterMultiply);
+    const todayISO = toISODateString(pastDateAfterMultiply);
+    const updatedDays = {
+      [monthISO]: { [todayISO]: new Set(['bar', 'baz']) },
+    };
+    const wrapper = shallow((
+      <DayPickerRangeController
+        onDatesChange={sinon.stub()}
+        onFocusChange={sinon.stub()}
+        orientation={VERTICAL_SCROLLABLE}
+        numberOfMonths={3}
+      />
+    )).instance();
+    let modifiers = wrapper.addModifier(updatedDays, pastDateAfterMultiply, modifierToAdd);
+    expect(Array.from(modifiers[monthISO][todayISO])).to.not.contain(modifierToAdd);
+    wrapper.onGetPreviousScrollableMonths();
+    modifiers = wrapper.addModifier(updatedDays, pastDateAfterMultiply, modifierToAdd);
+    expect(Array.from(modifiers[monthISO][todayISO])).to.contain(modifierToAdd);
+  });
+
   describe('#addModifierToRange', () => {
     let addModifierSpy;
     beforeEach(() => {
diff --git a/test/components/DayPicker_spec.jsx b/test/components/DayPicker_spec.jsx
index 63fb8e506c..984896a8ad 100644
--- a/test/components/DayPicker_spec.jsx
+++ b/test/components/DayPicker_spec.jsx
@@ -208,13 +208,30 @@ describe('DayPicker', () => {
   });
 
   describe('props.orientation === VERTICAL_SCROLLABLE', () => {
-    it('uses multiplyScrollableMonths instead of onNextMonthClick', () => {
+    it('renders two DayPickerNavigations', () => {
       const wrapper = shallow(
         <DayPicker orientation={VERTICAL_SCROLLABLE} />,
         { disableLifecycleMethods: false },
       ).dive();
-      const nav = wrapper.find(DayPickerNavigation);
-      expect(nav.prop('onNextMonthClick')).to.equal(wrapper.instance().multiplyScrollableMonths);
+      expect(wrapper.find(DayPickerNavigation)).to.have.length(2);
+    });
+
+    it('uses getNextScrollableMonths instead of onNextMonthClick', () => {
+      const wrapper = shallow(
+        <DayPicker orientation={VERTICAL_SCROLLABLE} />,
+        { disableLifecycleMethods: false },
+      ).dive();
+      const nav = wrapper.find(DayPickerNavigation)[1];
+      expect(nav.prop('onNextMonthClick')).to.equal(wrapper.instance().getNextScrollableMonths);
+    });
+
+    it('uses getPrevScrollableMonths instead of onNextMonthClick', () => {
+      const wrapper = shallow(
+        <DayPicker orientation={VERTICAL_SCROLLABLE} />,
+        { disableLifecycleMethods: false },
+      ).dive();
+      const nav = wrapper.find(DayPickerNavigation)[0];
+      expect(nav.prop('onPrevMonthClick')).to.equal(wrapper.instance().getPrevScrollableMonths);
     });
   });
 
@@ -795,17 +812,32 @@ describe('DayPicker', () => {
     });
   });
 
-  describe('#multiplyScrollableMonths', () => {
+  describe('#getNextScrollableMonths', () => {
+    it('increments scrollableMonthMultiple', () => {
+      const wrapper = shallow(<DayPicker />).dive();
+      wrapper.instance().getNextScrollableMonths(event);
+      expect(wrapper.state().scrollableMonthMultiple).to.equal(2);
+    });
+
+    it('increments scrollableMonthMultiple without an event', () => {
+      const wrapper = shallow(<DayPicker />).dive();
+      wrapper.instance().getNextScrollableMonths();
+      expect(wrapper.state().scrollableMonthMultiple).to.equal(2);
+    });
+  });
+
+  describe('#getPrevScrollableMonths', () => {
     it('increments scrollableMonthMultiple', () => {
       const wrapper = shallow(<DayPicker />).dive();
-      wrapper.instance().multiplyScrollableMonths(event);
+      wrapper.instance().getPrevScrollableMonths(event);
       expect(wrapper.state().scrollableMonthMultiple).to.equal(2);
     });
 
     it('increments scrollableMonthMultiple without an event', () => {
       const wrapper = shallow(<DayPicker />).dive();
-      wrapper.instance().multiplyScrollableMonths();
+      wrapper.instance().getPrevScrollableMonths();
       expect(wrapper.state().scrollableMonthMultiple).to.equal(2);
+      expect(wrapper.state().currentMonth).to.equal(moment().subtract(1, 'month'));
     });
   });
 

From 1a68fa396429def841ac88de90307bc6d3fbf7c4 Mon Sep 17 00:00:00 2001
From: Rob <rhays@turo.com>
Date: Fri, 10 Jan 2020 11:36:35 -0800
Subject: [PATCH 545/618] feature(DayPickerSingleDateController) Add support
 for noNavButtons (match DayPickerRangeController support)

---
 src/components/DayPickerSingleDateController.jsx    |  4 ++++
 stories/DayPickerSingleDateController.js            |  6 ++++++
 .../DayPickerSingleDateController_spec.jsx          | 13 +++++++++++++
 3 files changed, 23 insertions(+)

diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 2ff010b60e..a1df832e57 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -70,6 +70,7 @@ const propTypes = forbidExtraProps({
   navNext: PropTypes.node,
   renderNavPrevButton: PropTypes.func,
   renderNavNextButton: PropTypes.func,
+  noNavButtons: PropTypes.bool,
 
   onPrevMonthClick: PropTypes.func,
   onNextMonthClick: PropTypes.func,
@@ -131,6 +132,7 @@ const defaultProps = {
   navNext: null,
   renderNavPrevButton: null,
   renderNavNextButton: null,
+  noNavButtons: false,
 
   onPrevMonthClick() {},
   onNextMonthClick() {},
@@ -589,6 +591,7 @@ export default class DayPickerSingleDateController extends React.PureComponent {
       navNext,
       renderNavPrevButton,
       renderNavNextButton,
+      noNavButtons,
       onOutsideClick,
       onShiftTab,
       onTab,
@@ -646,6 +649,7 @@ export default class DayPickerSingleDateController extends React.PureComponent {
         navNext={navNext}
         renderNavPrevButton={renderNavPrevButton}
         renderNavNextButton={renderNavNextButton}
+        noNavButtons={noNavButtons}
         renderMonthText={renderMonthText}
         renderWeekHeaderElement={renderWeekHeaderElement}
         renderCalendarDay={renderCalendarDay}
diff --git a/stories/DayPickerSingleDateController.js b/stories/DayPickerSingleDateController.js
index 5752fef190..60c2728733 100644
--- a/stories/DayPickerSingleDateController.js
+++ b/stories/DayPickerSingleDateController.js
@@ -363,4 +363,10 @@ storiesOf('DayPickerSingleDateController', module)
       onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
       verticalBorderSpacing={16}
     />
+  )))
+  .add('with no nav buttons', withInfo()(() => (
+    <DayPickerSingleDateControllerWrapper
+      onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
+      noNavButtons
+    />
   )));
diff --git a/test/components/DayPickerSingleDateController_spec.jsx b/test/components/DayPickerSingleDateController_spec.jsx
index 6cd614a91c..d60ef40e60 100644
--- a/test/components/DayPickerSingleDateController_spec.jsx
+++ b/test/components/DayPickerSingleDateController_spec.jsx
@@ -6,6 +6,7 @@ import moment from 'moment';
 
 import DayPicker from '../../src/components/DayPicker';
 import DayPickerSingleDateController from '../../src/components/DayPickerSingleDateController';
+import DayPickerNavigation from '../../src/components/DayPickerNavigation';
 
 import toISODateString from '../../src/utils/toISODateString';
 import toISOMonthString from '../../src/utils/toISOMonthString';
@@ -1540,5 +1541,17 @@ describe('DayPickerSingleDateController', () => {
         expect(dayPicker.props().initialVisibleMonth().isSame(today, 'day')).to.equal(true);
       });
     });
+
+    describe('noNavButtons prop', () => {
+      it('renders navigation button', () => {
+        const wrapper = shallow(<DayPickerSingleDateController />).dive().dive();
+        expect(wrapper.find(DayPickerNavigation)).to.have.lengthOf(1);
+      });
+
+      it('does not render navigation button when noNavButtons prop applied', () => {
+        const wrapper = shallow(<DayPickerSingleDateController noNavButtons />).dive().dive();
+        expect(wrapper.find(DayPickerNavigation)).to.have.lengthOf(0);
+      });
+    });
   });
 });

From 5071e9d08fcbc65df95892fb7cb0e867bc39bebf Mon Sep 17 00:00:00 2001
From: Nicole Kinser <nicole.kinser@airbnb.com>
Date: Fri, 10 Jan 2020 14:00:52 -0800
Subject: [PATCH 546/618] style changes

---
 src/components/DayPicker.jsx           |  2 +-
 src/components/DayPickerNavigation.jsx | 16 ++++++++++++----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 34e91299e6..9f5a5aacc1 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -859,7 +859,7 @@ class DayPicker extends React.PureComponent {
     });
   }
 
-  renderNavigation(navDirection = null) {
+  renderNavigation(navDirection) {
     const {
       dayPickerNavigationInlineStyles,
       disablePrev,
diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index cd769fec84..641cf1df24 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -165,7 +165,9 @@ function DayPickerNavigation({
             onClick: disablePrev ? undefined : onPrevMonthClick,
             onKeyUp: disablePrev ? undefined : (e) => {
               const { key } = e;
-              if (key === 'Enter' || key === ' ') onPrevMonthClick(e);
+              if (key === 'Enter' || key === ' ') {
+                onPrevMonthClick(e);
+              }
             },
             onMouseUp: disablePrev ? undefined : (e) => {
               e.currentTarget.blur();
@@ -202,7 +204,9 @@ function DayPickerNavigation({
             onClick={disablePrev ? undefined : onPrevMonthClick}
             onKeyUp={disablePrev ? undefined : (e) => {
               const { key } = e;
-              if (key === 'Enter' || key === ' ') onPrevMonthClick(e);
+              if (key === 'Enter' || key === ' ') {
+                onPrevMonthClick(e);
+              }
             }}
             onMouseUp={disablePrev ? undefined : (e) => {
               e.currentTarget.blur();
@@ -220,7 +224,9 @@ function DayPickerNavigation({
             onClick: disableNext ? undefined : onNextMonthClick,
             onKeyUp: disableNext ? undefined : (e) => {
               const { key } = e;
-              if (key === 'Enter' || key === ' ') onNextMonthClick(e);
+              if (key === 'Enter' || key === ' ') {
+                onNextMonthClick(e)
+              };
             },
             onMouseUp: disableNext ? undefined : e => {
               e.currentTarget.blur();
@@ -258,7 +264,9 @@ function DayPickerNavigation({
             onClick={disableNext ? undefined : onNextMonthClick}
             onKeyUp={ disableNext ? undefined : (e) => {
               const { key } = e;
-              if (key === 'Enter' || key === ' ') onNextMonthClick(e);
+              if (key === 'Enter' || key === ' ') {
+                onNextMonthClick(e);
+              }
             }}
             onMouseUp={disableNext ? undefined : (e) => {
               e.currentTarget.blur();

From 0718c79d9a2474b73b8666a0dca8e3885c54aade Mon Sep 17 00:00:00 2001
From: Nicole Kinser <nicole.kinser@airbnb.com>
Date: Fri, 10 Jan 2020 14:45:59 -0800
Subject: [PATCH 547/618] update tests

---
 src/components/DayPickerNavigation.jsx        |  2 +-
 .../DayPickerRangeController_spec.jsx         | 12 ++++----
 test/components/DayPicker_spec.jsx            | 29 +++++++------------
 3 files changed, 18 insertions(+), 25 deletions(-)

diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index 641cf1df24..6a702138c4 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -228,7 +228,7 @@ function DayPickerNavigation({
                 onNextMonthClick(e)
               };
             },
-            onMouseUp: disableNext ? undefined : e => {
+            onMouseUp: disableNext ? undefined : (e) => {
               e.currentTarget.blur();
             },
           })
diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index 7d09c1b45e..d1efc1484d 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -4167,11 +4167,11 @@ describe('DayPickerRangeController', () => {
 
   it('return value now has modifier arg for day after getting previous scrollable months', () => {
     const modifierToAdd = 'foo';
-    const pastDateAfterMultiply = today.clone().subtract(4, 'months');
+    const pastDateAfterMultiply = today.clone().subtract(3, 'months');
     const monthISO = toISOMonthString(pastDateAfterMultiply);
-    const todayISO = toISODateString(pastDateAfterMultiply);
+    const dayISO = toISODateString(pastDateAfterMultiply);
     const updatedDays = {
-      [monthISO]: { [todayISO]: new Set(['bar', 'baz']) },
+      [monthISO]: { [dayISO]: new Set(['bar', 'baz']) },
     };
     const wrapper = shallow((
       <DayPickerRangeController
@@ -4182,10 +4182,10 @@ describe('DayPickerRangeController', () => {
       />
     )).instance();
     let modifiers = wrapper.addModifier(updatedDays, pastDateAfterMultiply, modifierToAdd);
-    expect(Array.from(modifiers[monthISO][todayISO])).to.not.contain(modifierToAdd);
-    wrapper.onGetPreviousScrollableMonths();
+    expect(Array.from(modifiers[monthISO][dayISO])).to.not.contain(modifierToAdd);
+    wrapper.onGetPrevScrollableMonths();
     modifiers = wrapper.addModifier(updatedDays, pastDateAfterMultiply, modifierToAdd);
-    expect(Array.from(modifiers[monthISO][todayISO])).to.contain(modifierToAdd);
+    expect(Array.from(modifiers[monthISO][dayISO])).to.contain(modifierToAdd);
   });
 
   describe('#addModifierToRange', () => {
diff --git a/test/components/DayPicker_spec.jsx b/test/components/DayPicker_spec.jsx
index 984896a8ad..6259c7ab4e 100644
--- a/test/components/DayPicker_spec.jsx
+++ b/test/components/DayPicker_spec.jsx
@@ -5,6 +5,7 @@ import sinon from 'sinon-sandbox';
 import { mount, shallow } from 'enzyme';
 
 import * as isDayVisible from '../../src/utils/isDayVisible';
+import isSameMonth from '../../src/utils/isSameMonth';
 
 import DayPicker, { PureDayPicker } from '../../src/components/DayPicker';
 import CalendarMonthGrid from '../../src/components/CalendarMonthGrid';
@@ -221,8 +222,10 @@ describe('DayPicker', () => {
         <DayPicker orientation={VERTICAL_SCROLLABLE} />,
         { disableLifecycleMethods: false },
       ).dive();
-      const nav = wrapper.find(DayPickerNavigation)[1];
-      expect(nav.prop('onNextMonthClick')).to.equal(wrapper.instance().getNextScrollableMonths);
+      expect(wrapper.find(DayPickerNavigation)).to.have.length(2);
+      const nav = wrapper.find(DayPickerNavigation).get(1);
+      console.log(nav);
+      expect(nav.props.onNextMonthClick).to.equal(wrapper.instance().getNextScrollableMonths);
     });
 
     it('uses getPrevScrollableMonths instead of onNextMonthClick', () => {
@@ -230,8 +233,10 @@ describe('DayPicker', () => {
         <DayPicker orientation={VERTICAL_SCROLLABLE} />,
         { disableLifecycleMethods: false },
       ).dive();
-      const nav = wrapper.find(DayPickerNavigation)[0];
-      expect(nav.prop('onPrevMonthClick')).to.equal(wrapper.instance().getPrevScrollableMonths);
+      expect(wrapper.find(DayPickerNavigation)).to.have.length(2);
+      const nav = wrapper.find(DayPickerNavigation).get(0);
+      console.log(nav);
+      expect(nav.props.onPrevMonthClick).to.equal(wrapper.instance().getPrevScrollableMonths);
     });
   });
 
@@ -818,26 +823,14 @@ describe('DayPicker', () => {
       wrapper.instance().getNextScrollableMonths(event);
       expect(wrapper.state().scrollableMonthMultiple).to.equal(2);
     });
-
-    it('increments scrollableMonthMultiple without an event', () => {
-      const wrapper = shallow(<DayPicker />).dive();
-      wrapper.instance().getNextScrollableMonths();
-      expect(wrapper.state().scrollableMonthMultiple).to.equal(2);
-    });
   });
 
   describe('#getPrevScrollableMonths', () => {
-    it('increments scrollableMonthMultiple', () => {
-      const wrapper = shallow(<DayPicker />).dive();
-      wrapper.instance().getPrevScrollableMonths(event);
-      expect(wrapper.state().scrollableMonthMultiple).to.equal(2);
-    });
-
-    it('increments scrollableMonthMultiple without an event', () => {
+    it('increments scrollableMonthMultiple and updates currentMonth', () => {
       const wrapper = shallow(<DayPicker />).dive();
       wrapper.instance().getPrevScrollableMonths();
       expect(wrapper.state().scrollableMonthMultiple).to.equal(2);
-      expect(wrapper.state().currentMonth).to.equal(moment().subtract(1, 'month'));
+      expect(isSameMonth(wrapper.state().currentMonth, moment().subtract(2, 'month'))).to.equal(true);
     });
   });
 

From a3e76feb193d09af640e226bf33f7d98f628cad8 Mon Sep 17 00:00:00 2001
From: Nicole Kinser <nicole.kinser@airbnb.com>
Date: Mon, 13 Jan 2020 10:35:11 -0800
Subject: [PATCH 548/618] changes for single date picker

---
 src/components/DayPicker.jsx                  | 60 +++++++++----------
 src/components/DayPickerNavigation.jsx        | 27 ++++-----
 src/components/DayPickerRangeController.jsx   |  4 +-
 .../DayPickerSingleDateController.jsx         | 26 +++++++-
 stories/DayPickerRangeController.js           | 17 ++++++
 stories/DayPickerSingleDateController.js      | 11 +++-
 test/components/DayPickerNavigation_spec.jsx  | 34 +++++++++++
 .../DayPickerSingleDateController_spec.jsx    | 28 ++++++++-
 test/components/DayPicker_spec.jsx            |  2 -
 9 files changed, 155 insertions(+), 54 deletions(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 9f5a5aacc1..86ebe0c9a8 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -679,6 +679,29 @@ class DayPicker extends React.PureComponent {
     this.transitionContainer = ref;
   }
 
+  getNextScrollableMonths(e) {
+    const { onGetNextScrollableMonths } = this.props;
+    if (e) e.preventDefault();
+
+    if (onGetNextScrollableMonths) onGetNextScrollableMonths(e);
+
+    this.setState(({ scrollableMonthMultiple }) => ({
+      scrollableMonthMultiple: scrollableMonthMultiple + 1,
+    }));
+  }
+
+  getPrevScrollableMonths(e) {
+    const { numberOfMonths, onGetPrevScrollableMonths } = this.props;
+    if (e) e.preventDefault();
+
+    if (onGetPrevScrollableMonths) onGetPrevScrollableMonths(e);
+
+    this.setState(({ currentMonth, scrollableMonthMultiple }) => ({
+      currentMonth: currentMonth.clone().subtract(numberOfMonths, 'month'),
+      scrollableMonthMultiple: scrollableMonthMultiple + 1,
+    }));
+  }
+
   maybeTransitionNextMonth(newFocusedDate) {
     const { numberOfMonths } = this.props;
     const { currentMonth, focusedDate } = this.state;
@@ -709,29 +732,6 @@ class DayPicker extends React.PureComponent {
     return false;
   }
 
-  getNextScrollableMonths(e) {
-    const { onGetNextScrollableMonths } = this.props;
-    if (e) e.preventDefault();
-
-    if (onGetNextScrollableMonths) onGetNextScrollableMonths(e);
-
-    this.setState(({ scrollableMonthMultiple }) => ({
-      scrollableMonthMultiple: scrollableMonthMultiple + 1,
-    }));
-  }
-
-  getPrevScrollableMonths(e) {
-    const { numberOfMonths, onGetPrevScrollableMonths } = this.props;
-    if (e) e.preventDefault();
-
-    if (onGetPrevScrollableMonths) onGetPrevScrollableMonths(e);
-
-    this.setState(({ currentMonth, scrollableMonthMultiple }) => ({
-      currentMonth: currentMonth.clone().subtract(numberOfMonths, 'month'),
-      scrollableMonthMultiple: scrollableMonthMultiple + 1,
-    }));
-  }
-
   isHorizontal() {
     const { orientation } = this.props;
     return orientation === HORIZONTAL_ORIENTATION;
@@ -879,15 +879,13 @@ class DayPicker extends React.PureComponent {
       return null;
     }
 
-    const onPrevMonthClick =
-      orientation === VERTICAL_SCROLLABLE
-        ? this.getPrevScrollableMonths
-        : this.onPrevMonthClick;
+    const onPrevMonthClick = orientation === VERTICAL_SCROLLABLE
+      ? this.getPrevScrollableMonths
+      : this.onPrevMonthClick;
 
-    const onNextMonthClick =
-      orientation === VERTICAL_SCROLLABLE
-        ? this.getNextScrollableMonths
-        : this.onNextMonthClick;
+    const onNextMonthClick = orientation === VERTICAL_SCROLLABLE
+      ? this.getNextScrollableMonths
+      : this.onNextMonthClick;
 
     return (
       <DayPickerNavigation
diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index 6a702138c4..5cb4ecdf3e 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -133,9 +133,7 @@ function DayPickerNavigation({
     );
   }
 
-  const isDefaultNav = isVerticalScrollable
-    ? isDefaultNavNext
-    : (isDefaultNavNext || isDefaultNavPrev);
+  const isDefaultNav = isDefaultNavNext || isDefaultNavPrev;
 
   return (
     <div
@@ -157,8 +155,8 @@ function DayPickerNavigation({
         hasInlineStyles && inlineStyles,
       )}
     >
-      {showNavPrevButton &&
-        (renderNavPrevButton ? (
+      {showNavPrevButton
+        && (renderNavPrevButton ? (
           renderNavPrevButton({
             ariaLabel: phrases.jumpToPrevMonth,
             disabled: disablePrev,
@@ -195,7 +193,8 @@ function DayPickerNavigation({
                 ...(isDefaultNavPrev ? [
                   styles.DayPickerNavigation_button__verticalDefault,
                   styles.DayPickerNavigation_prevButton__verticalDefault,
-                  isVerticalScrollable && styles.DayPickerNavigation_prevButton__verticalScrollableDefault,
+                  isVerticalScrollable
+                    && styles.DayPickerNavigation_prevButton__verticalScrollableDefault,
                 ] : []),
               ] : []),
             )}
@@ -216,8 +215,8 @@ function DayPickerNavigation({
           </div>
         ))}
 
-      {showNavNextButton &&
-        (renderNavNextButton ? (
+      {showNavNextButton
+        && (renderNavNextButton ? (
           renderNavNextButton({
             ariaLabel: phrases.jumpToNextMonth,
             disabled: disableNext,
@@ -225,8 +224,8 @@ function DayPickerNavigation({
             onKeyUp: disableNext ? undefined : (e) => {
               const { key } = e;
               if (key === 'Enter' || key === ' ') {
-                onNextMonthClick(e)
-              };
+                onNextMonthClick(e);
+              }
             },
             onMouseUp: disableNext ? undefined : (e) => {
               e.currentTarget.blur();
@@ -234,7 +233,7 @@ function DayPickerNavigation({
           })
         ) : (
           <div // eslint-disable-line jsx-a11y/interactive-supports-focus
-            role='button'
+            role="button"
             {...navNextTabIndex}
             {...css(
               styles.DayPickerNavigation_button,
@@ -254,15 +253,15 @@ function DayPickerNavigation({
                 ...(isDefaultNavNext ? [
                   styles.DayPickerNavigation_button__verticalDefault,
                   styles.DayPickerNavigation_nextButton__verticalDefault,
-                  isVerticalScrollable &&
-                    styles.DayPickerNavigation_nextButton__verticalScrollableDefault,
+                  isVerticalScrollable
+                    && styles.DayPickerNavigation_nextButton__verticalScrollableDefault,
                 ] : []),
               ] : []),
             )}
             aria-disabled={disableNext ? true : undefined}
             aria-label={phrases.jumpToNextMonth}
             onClick={disableNext ? undefined : onNextMonthClick}
-            onKeyUp={ disableNext ? undefined : (e) => {
+            onKeyUp={disableNext ? undefined : (e) => {
               const { key } = e;
               if (key === 'Enter' || key === ' ') {
                 onNextMonthClick(e);
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 6c197e37eb..c657628666 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -1011,7 +1011,9 @@ export default class DayPickerRangeController extends React.PureComponent {
     const { currentMonth, visibleDays } = this.state;
 
     const firstPreviousMonth = currentMonth.clone().subtract(numberOfMonths, 'month');
-    const newVisibleDays = getVisibleDays(firstPreviousMonth, numberOfMonths, enableOutsideDays, true);
+    const newVisibleDays = getVisibleDays(
+      firstPreviousMonth, numberOfMonths, enableOutsideDays, true,
+    );
 
     this.setState({
       currentMonth: firstPreviousMonth.clone(),
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 2ff010b60e..dd5e395000 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -194,7 +194,8 @@ export default class DayPickerSingleDateController extends React.PureComponent {
     this.onNextMonthClick = this.onNextMonthClick.bind(this);
     this.onMonthChange = this.onMonthChange.bind(this);
     this.onYearChange = this.onYearChange.bind(this);
-    this.onMultiplyScrollableMonths = this.onMultiplyScrollableMonths.bind(this);
+    this.onGetNextScrollableMonths = this.onGetNextScrollableMonths.bind(this);
+    this.onGetPrevScrollableMonths = this.onGetPrevScrollableMonths.bind(this);
     this.getFirstFocusableDay = this.getFirstFocusableDay.bind(this);
   }
 
@@ -461,7 +462,7 @@ export default class DayPickerSingleDateController extends React.PureComponent {
     });
   }
 
-  onMultiplyScrollableMonths() {
+  onGetNextScrollableMonths() {
     const { numberOfMonths, enableOutsideDays } = this.props;
     const { currentMonth, visibleDays } = this.state;
 
@@ -477,6 +478,24 @@ export default class DayPickerSingleDateController extends React.PureComponent {
     });
   }
 
+  onGetPrevScrollableMonths() {
+    const { numberOfMonths, enableOutsideDays } = this.props;
+    const { currentMonth, visibleDays } = this.state;
+
+    const firstPreviousMonth = currentMonth.clone().subtract(numberOfMonths, 'month');
+    const newVisibleDays = getVisibleDays(
+      firstPreviousMonth, numberOfMonths, enableOutsideDays, true,
+    );
+
+    this.setState({
+      currentMonth: firstPreviousMonth.clone(),
+      visibleDays: {
+        ...visibleDays,
+        ...this.getModifiers(newVisibleDays),
+      },
+    });
+  }
+
   getFirstFocusableDay(newMonth) {
     const { date, numberOfMonths } = this.props;
 
@@ -632,7 +651,8 @@ export default class DayPickerSingleDateController extends React.PureComponent {
         onNextMonthClick={this.onNextMonthClick}
         onMonthChange={this.onMonthChange}
         onYearChange={this.onYearChange}
-        onMultiplyScrollableMonths={this.onMultiplyScrollableMonths}
+        onGetNextScrollableMonths={this.onGetNextScrollableMonths}
+        onGetPrevScrollableMonths={this.onGetPrevScrollableMonths}
         monthFormat={monthFormat}
         withPortal={withPortal}
         hidden={!focused}
diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
index 62c3567940..e4f9a9a769 100644
--- a/stories/DayPickerRangeController.js
+++ b/stories/DayPickerRangeController.js
@@ -442,6 +442,23 @@ storiesOf('DayPickerRangeController', module)
             </span>
           </div>
         )}
+        navPrev={(
+          <div style={{ position: 'relative' }}>
+            <span
+              style={{
+                position: 'absolute',
+                top: 20,
+                left: 50,
+                fontSize: 24,
+                border: '1px solid gray',
+                width: 200,
+                padding: 10,
+              }}
+            >
+              Show More Months
+            </span>
+          </div>
+        )}
       />
     </div>
   )))
diff --git a/stories/DayPickerSingleDateController.js b/stories/DayPickerSingleDateController.js
index 5752fef190..4d454557ce 100644
--- a/stories/DayPickerSingleDateController.js
+++ b/stories/DayPickerSingleDateController.js
@@ -10,7 +10,7 @@ import isSameDay from '../src/utils/isSameDay';
 import isInclusivelyAfterDay from '../src/utils/isInclusivelyAfterDay';
 import CustomizableCalendarDay, { defaultStyles, selectedStyles } from '../src/components/CustomizableCalendarDay';
 
-import { NAV_POSITION_BOTTOM, VERTICAL_ORIENTATION } from '../src/constants';
+import { NAV_POSITION_BOTTOM, VERTICAL_ORIENTATION, VERTICAL_SCROLLABLE } from '../src/constants';
 
 import DayPickerSingleDateControllerWrapper from '../examples/DayPickerSingleDateControllerWrapper';
 
@@ -220,6 +220,15 @@ storiesOf('DayPickerSingleDateController', module)
       orientation={VERTICAL_ORIENTATION}
     />
   )))
+  .add('verticalScrollable', withInfo()(() => (
+    <DayPickerSingleDateControllerWrapper
+      numberOfMonths={3}
+      onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
+      onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
+      onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
+      orientation={VERTICAL_SCROLLABLE}
+    />
+  )))
   .add('with custom month navigation icons', withInfo()(() => (
     <DayPickerSingleDateControllerWrapper
       onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
diff --git a/test/components/DayPickerNavigation_spec.jsx b/test/components/DayPickerNavigation_spec.jsx
index 8343ae95ca..a0e67cdfd9 100644
--- a/test/components/DayPickerNavigation_spec.jsx
+++ b/test/components/DayPickerNavigation_spec.jsx
@@ -134,6 +134,8 @@ describe('DayPickerNavigation', () => {
       expect(onPrevMonthStub).to.have.property('callCount', 1);
       prevMonthButton.simulate('keyup', { key: ' ' });
       expect(onPrevMonthStub).to.have.property('callCount', 2);
+      prevMonthButton.simulate('keyup', { key: 'k' });
+      expect(onPrevMonthStub).to.have.property('callCount', 2);
     });
 
     it('props.onNextMonthClick is triggered by next month button key up', () => {
@@ -145,6 +147,8 @@ describe('DayPickerNavigation', () => {
       expect(onNextMonthStub).to.have.property('callCount', 1);
       nextMonthButton.simulate('keyup', { key: ' ' });
       expect(onNextMonthStub).to.have.property('callCount', 2);
+      nextMonthButton.simulate('keyup', { key: 'k' });
+      expect(onNextMonthStub).to.have.property('callCount', 2);
     });
 
     it('props.onPrevMonthClick is triggered by custom prev month button click', () => {
@@ -192,5 +196,35 @@ describe('DayPickerNavigation', () => {
       nextMonthButton.simulate('click');
       expect(onNextMonthStub).to.have.property('callCount', 0);
     });
+
+    it('props.onPrevMonthClick is triggered by custom prev month button key up', () => {
+      const onPrevMonthStub = sinon.stub();
+      const renderNavPrevButtonStub = sinon.stub().onCall(0).callsFake(({ onKeyUp }) => <button onKeyUp={onKeyUp} type="button">Prev</button>);
+      const prevMonthButton = shallow(<DayPickerNavigation
+        onPrevMonthClick={onPrevMonthStub}
+        renderNavPrevButton={renderNavPrevButtonStub}
+      />).dive().find('button').at(0);
+      prevMonthButton.simulate('keyup', { key: 'Enter' });
+      expect(onPrevMonthStub).to.have.property('callCount', 1);
+      prevMonthButton.simulate('keyup', { key: ' ' });
+      expect(onPrevMonthStub).to.have.property('callCount', 2);
+      prevMonthButton.simulate('keyup', { key: 'k' });
+      expect(onPrevMonthStub).to.have.property('callCount', 2);
+    });
+
+    it('props.onNextMonthClick is triggered by custom next month button key up', () => {
+      const onNextMonthStub = sinon.stub();
+      const renderNavNextButtonStub = sinon.stub().onCall(0).callsFake(({ onKeyUp }) => <button onKeyUp={onKeyUp} type="button">Next</button>);
+      const nextMonthButton = shallow(<DayPickerNavigation
+        onNextMonthClick={onNextMonthStub}
+        renderNavNextButton={renderNavNextButtonStub}
+      />).dive().find('button').at(0);
+      nextMonthButton.simulate('keyup', { key: 'Enter' });
+      expect(onNextMonthStub).to.have.property('callCount', 1);
+      nextMonthButton.simulate('keyup', { key: ' ' });
+      expect(onNextMonthStub).to.have.property('callCount', 2);
+      nextMonthButton.simulate('keyup', { key: 'k' });
+      expect(onNextMonthStub).to.have.property('callCount', 2);
+    });
   });
 });
diff --git a/test/components/DayPickerSingleDateController_spec.jsx b/test/components/DayPickerSingleDateController_spec.jsx
index 6cd614a91c..268d1696f7 100644
--- a/test/components/DayPickerSingleDateController_spec.jsx
+++ b/test/components/DayPickerSingleDateController_spec.jsx
@@ -1178,7 +1178,7 @@ describe('DayPickerSingleDateController', () => {
       expect(Array.from(modifiers[nextMonthISO][nextMonthDayISO])).to.contain(modifierToAdd);
     });
 
-    it('return value now has modifier arg for day after multiplying number of months', () => {
+    it('return value now has modifier arg for day after getting next scrollable months', () => {
       const modifierToAdd = 'foo';
       const numberOfMonths = 2;
       const nextMonth = today.clone().add(numberOfMonths, 'month');
@@ -1197,10 +1197,34 @@ describe('DayPickerSingleDateController', () => {
       )).instance();
       let modifiers = wrapper.addModifier(updatedDays, nextMonth, modifierToAdd);
       expect(Array.from(modifiers[nextMonthISO][nextMonthDayISO])).to.not.contain(modifierToAdd);
-      wrapper.onMultiplyScrollableMonths();
+      wrapper.onGetNextScrollableMonths();
       modifiers = wrapper.addModifier(updatedDays, nextMonth, modifierToAdd);
       expect(Array.from(modifiers[nextMonthISO][nextMonthDayISO])).to.contain(modifierToAdd);
     });
+
+    it('return value now has modifier arg for day after getting previous scrollable months', () => {
+      const modifierToAdd = 'foo';
+      const numberOfMonths = 2;
+      const pastDateAfterMultiply = today.clone().subtract(numberOfMonths, 'months');
+      const monthISO = toISOMonthString(pastDateAfterMultiply);
+      const dayISO = toISODateString(pastDateAfterMultiply);
+      const updatedDays = {
+        [monthISO]: { [dayISO]: new Set(['bar', 'baz']) },
+      };
+      const wrapper = shallow((
+        <DayPickerSingleDateController
+          onDatesChange={sinon.stub()}
+          onFocusChange={sinon.stub()}
+          numberOfMonths={numberOfMonths}
+          orientation={VERTICAL_SCROLLABLE}
+        />
+      )).instance();
+      let modifiers = wrapper.addModifier(updatedDays, pastDateAfterMultiply, modifierToAdd);
+      expect(Array.from(modifiers[monthISO][dayISO])).to.not.contain(modifierToAdd);
+      wrapper.onGetPrevScrollableMonths();
+      modifiers = wrapper.addModifier(updatedDays, pastDateAfterMultiply, modifierToAdd);
+      expect(Array.from(modifiers[monthISO][dayISO])).to.contain(modifierToAdd);
+    });
   });
 
   describe('#deleteModifier', () => {
diff --git a/test/components/DayPicker_spec.jsx b/test/components/DayPicker_spec.jsx
index 6259c7ab4e..8b20aab508 100644
--- a/test/components/DayPicker_spec.jsx
+++ b/test/components/DayPicker_spec.jsx
@@ -224,7 +224,6 @@ describe('DayPicker', () => {
       ).dive();
       expect(wrapper.find(DayPickerNavigation)).to.have.length(2);
       const nav = wrapper.find(DayPickerNavigation).get(1);
-      console.log(nav);
       expect(nav.props.onNextMonthClick).to.equal(wrapper.instance().getNextScrollableMonths);
     });
 
@@ -235,7 +234,6 @@ describe('DayPicker', () => {
       ).dive();
       expect(wrapper.find(DayPickerNavigation)).to.have.length(2);
       const nav = wrapper.find(DayPickerNavigation).get(0);
-      console.log(nav);
       expect(nav.props.onPrevMonthClick).to.equal(wrapper.instance().getPrevScrollableMonths);
     });
   });

From 48f7cd370fd0772cb118bb7059cd3be6c99bf326 Mon Sep 17 00:00:00 2001
From: Kevin Pan <kevin.pan@airbnb.com>
Date: Mon, 13 Jan 2020 14:54:57 -0800
Subject: [PATCH 549/618] Version 21.6.0

---
 CHANGELOG.md | 5 +++++
 package.json | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b4d3b8fee9..1ab70db682 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,11 @@
 <!--
 - []  ([#](https://github.com/airbnb/react-dates/pull/))
 -->
+## 21.6.0
+
+- [new] Add functionality to see previous months for vertical scrollable calendar ([#1894](https://github.com/airbnb/react-dates/pull/1894))
+- [new] Add support for noNavButtons in DayPickerSingleDateController (match DayPickerRangeController support) ([#1895](https://github.com/airbnb/react-dates/pull/1895))
+
 ## 21.5.1
 
 - [fix] Remove redundant overflowY:scroll on CalendarMonthGrid ([#1881](https://github.com/airbnb/react-dates/pull/1881))
diff --git a/package.json b/package.json
index 7cefa80754..7f0e43f074 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "21.5.1",
+  "version": "21.6.0",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From d4cc1673c679cf994674ddf09330162e80fdd41a Mon Sep 17 00:00:00 2001
From: Nicole Kinser <nicole.kinser@airbnb.com>
Date: Mon, 13 Jan 2020 17:59:18 -0800
Subject: [PATCH 550/618] Add ability to hide prev or next navigation button

---
 src/components/DayPicker.jsx                     | 10 ++++++++--
 src/components/DayPickerRangeController.jsx      |  8 ++++++++
 src/components/DayPickerSingleDateController.jsx |  8 ++++++++
 stories/DayPickerRangeController.js              | 12 ++++++++++++
 stories/DayPickerSingleDateController.js         | 12 ++++++++++++
 5 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 86ebe0c9a8..b0434d8c53 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -89,6 +89,8 @@ const propTypes = forbidExtraProps({
   renderNavPrevButton: PropTypes.func,
   renderNavNextButton: PropTypes.func,
   noNavButtons: PropTypes.bool,
+  noNavNextButton: PropTypes.bool,
+  noNavPrevButton: PropTypes.bool,
   onPrevMonthClick: PropTypes.func,
   onNextMonthClick: PropTypes.func,
   onMonthChange: PropTypes.func,
@@ -157,6 +159,8 @@ export const defaultProps = {
   renderNavPrevButton: null,
   renderNavNextButton: null,
   noNavButtons: false,
+  noNavNextButton: false,
+  noNavPrevButton: false,
   onPrevMonthClick() {},
   onNextMonthClick() {},
   onMonthChange() {},
@@ -868,6 +872,8 @@ class DayPicker extends React.PureComponent {
       navPrev,
       navNext,
       noNavButtons,
+      noNavNextButton,
+      noNavPrevButton,
       orientation,
       phrases,
       renderNavPrevButton,
@@ -903,10 +909,10 @@ class DayPicker extends React.PureComponent {
         phrases={phrases}
         isRTL={isRTL}
         showNavNextButton={
-          !(orientation === VERTICAL_SCROLLABLE && navDirection === PREV_NAV)
+          !(noNavNextButton || (orientation === VERTICAL_SCROLLABLE && navDirection === PREV_NAV))
         }
         showNavPrevButton={
-          !(orientation === VERTICAL_SCROLLABLE && navDirection === NEXT_NAV)
+          !(noNavPrevButton || (orientation === VERTICAL_SCROLLABLE && navDirection === NEXT_NAV))
         }
       />
     );
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index c657628666..5087f7d6db 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -87,6 +87,8 @@ const propTypes = forbidExtraProps({
   renderNavPrevButton: PropTypes.func,
   renderNavNextButton: PropTypes.func,
   noNavButtons: PropTypes.bool,
+  noNavNextButton: PropTypes.bool,
+  noNavPrevButton: PropTypes.bool,
 
   onPrevMonthClick: PropTypes.func,
   onNextMonthClick: PropTypes.func,
@@ -156,6 +158,8 @@ const defaultProps = {
   renderNavPrevButton: null,
   renderNavNextButton: null,
   noNavButtons: false,
+  noNavNextButton: false,
+  noNavPrevButton: false,
 
   onPrevMonthClick() {},
   onNextMonthClick() {},
@@ -1284,6 +1288,8 @@ export default class DayPickerRangeController extends React.PureComponent {
       renderNavPrevButton,
       renderNavNextButton,
       noNavButtons,
+      noNavNextButton,
+      noNavPrevButton,
       onOutsideClick,
       withPortal,
       enableOutsideDays,
@@ -1355,6 +1361,8 @@ export default class DayPickerRangeController extends React.PureComponent {
         renderNavPrevButton={renderNavPrevButton}
         renderNavNextButton={renderNavNextButton}
         noNavButtons={noNavButtons}
+        noNavPrevButton={noNavPrevButton}
+        noNavNextButton={noNavNextButton}
         renderCalendarDay={renderCalendarDay}
         renderDayContents={renderDayContents}
         renderCalendarInfo={renderCalendarInfo}
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 274171c489..480132891b 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -71,6 +71,8 @@ const propTypes = forbidExtraProps({
   renderNavPrevButton: PropTypes.func,
   renderNavNextButton: PropTypes.func,
   noNavButtons: PropTypes.bool,
+  noNavNextButton: PropTypes.bool,
+  noNavPrevButton: PropTypes.bool,
 
   onPrevMonthClick: PropTypes.func,
   onNextMonthClick: PropTypes.func,
@@ -133,6 +135,8 @@ const defaultProps = {
   renderNavPrevButton: null,
   renderNavNextButton: null,
   noNavButtons: false,
+  noNavNextButton: false,
+  noNavPrevButton: false,
 
   onPrevMonthClick() {},
   onNextMonthClick() {},
@@ -611,6 +615,8 @@ export default class DayPickerSingleDateController extends React.PureComponent {
       renderNavPrevButton,
       renderNavNextButton,
       noNavButtons,
+      noNavPrevButton,
+      noNavNextButton,
       onOutsideClick,
       onShiftTab,
       onTab,
@@ -670,6 +676,8 @@ export default class DayPickerSingleDateController extends React.PureComponent {
         renderNavPrevButton={renderNavPrevButton}
         renderNavNextButton={renderNavNextButton}
         noNavButtons={noNavButtons}
+        noNavNextButton={noNavNextButton}
+        noNavPrevButton={noNavPrevButton}
         renderMonthText={renderMonthText}
         renderWeekHeaderElement={renderWeekHeaderElement}
         renderCalendarDay={renderCalendarDay}
diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
index e4f9a9a769..f12948bd93 100644
--- a/stories/DayPickerRangeController.js
+++ b/stories/DayPickerRangeController.js
@@ -653,6 +653,18 @@ storiesOf('DayPickerRangeController', module)
       noNavButtons
     />
   )))
+  .add('with no nav prev button', withInfo()(() => (
+    <DayPickerRangeControllerWrapper
+      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
+      noNavPrevButton
+    />
+  )))
+  .add('with no nav next button', withInfo()(() => (
+    <DayPickerRangeControllerWrapper
+      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
+      noNavNextButton
+    />
+  )))
   .add('with minimum nights for the hovered date', withInfo()(() => (
     <DayPickerRangeControllerWrapper
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
diff --git a/stories/DayPickerSingleDateController.js b/stories/DayPickerSingleDateController.js
index 8f43b67c77..b4d3f7d752 100644
--- a/stories/DayPickerSingleDateController.js
+++ b/stories/DayPickerSingleDateController.js
@@ -378,4 +378,16 @@ storiesOf('DayPickerSingleDateController', module)
       onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
       noNavButtons
     />
+  )))
+  .add('with no nav prev button', withInfo()(() => (
+    <DayPickerSingleDateControllerWrapper
+      onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
+      noNavPrevButton
+    />
+  )))
+  .add('with no nav next button', withInfo()(() => (
+    <DayPickerSingleDateControllerWrapper
+      onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
+      noNavNextButton
+    />
   )));

From 97be8e9e573341c4716fe4dc940c619d8000dd7f Mon Sep 17 00:00:00 2001
From: Nicole Kinser <nicole.kinser@airbnb.com>
Date: Mon, 13 Jan 2020 20:20:33 -0800
Subject: [PATCH 551/618] Add ability to not show prev or next navigation
 buttons

---
 src/components/DayPickerNavigation.jsx       |  4 ++
 stories/DayPickerRangeController.js          | 30 +++++++++----
 stories/DayPickerSingleDateController.js     | 44 +++++++++++++-------
 test/components/DayPickerNavigation_spec.jsx |  7 ++++
 4 files changed, 62 insertions(+), 23 deletions(-)

diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index 5cb4ecdf3e..56cd811ee9 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -84,6 +84,10 @@ function DayPickerNavigation({
   showNavNextButton,
   styles,
 }) {
+  if (!showNavNextButton && !showNavPrevButton) {
+    return null;
+  }
+
   const isHorizontal = orientation === HORIZONTAL_ORIENTATION;
   const isVertical = orientation !== HORIZONTAL_ORIENTATION;
   const isVerticalScrollable = orientation === VERTICAL_SCROLLABLE;
diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
index f12948bd93..e89e2d77c4 100644
--- a/stories/DayPickerRangeController.js
+++ b/stories/DayPickerRangeController.js
@@ -654,16 +654,30 @@ storiesOf('DayPickerRangeController', module)
     />
   )))
   .add('with no nav prev button', withInfo()(() => (
-    <DayPickerRangeControllerWrapper
-      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
-      noNavPrevButton
-    />
+    <div style={{ height: 500 }}>
+      <DayPickerRangeControllerWrapper
+        onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
+        onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
+        onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
+        orientation={VERTICAL_SCROLLABLE}
+        numberOfMonths={6}
+        verticalHeight={800}
+        noNavPrevButton
+      />
+    </div>
   )))
   .add('with no nav next button', withInfo()(() => (
-    <DayPickerRangeControllerWrapper
-      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
-      noNavNextButton
-    />
+    <div style={{ height: 500 }}>
+      <DayPickerRangeControllerWrapper
+        onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
+        onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
+        onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
+        orientation={VERTICAL_SCROLLABLE}
+        numberOfMonths={6}
+        verticalHeight={800}
+        noNavNextButton
+      />
+    </div>
   )))
   .add('with minimum nights for the hovered date', withInfo()(() => (
     <DayPickerRangeControllerWrapper
diff --git a/stories/DayPickerSingleDateController.js b/stories/DayPickerSingleDateController.js
index b4d3f7d752..e7fd81a5f0 100644
--- a/stories/DayPickerSingleDateController.js
+++ b/stories/DayPickerSingleDateController.js
@@ -221,13 +221,15 @@ storiesOf('DayPickerSingleDateController', module)
     />
   )))
   .add('verticalScrollable', withInfo()(() => (
-    <DayPickerSingleDateControllerWrapper
-      numberOfMonths={3}
-      onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
-      onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
-      onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
-      orientation={VERTICAL_SCROLLABLE}
-    />
+    <div style={{ height: 500 }}>
+      <DayPickerSingleDateControllerWrapper
+        numberOfMonths={3}
+        onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
+        onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
+        onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
+        orientation={VERTICAL_SCROLLABLE}
+      />
+    </div>
   )))
   .add('with custom month navigation icons', withInfo()(() => (
     <DayPickerSingleDateControllerWrapper
@@ -380,14 +382,26 @@ storiesOf('DayPickerSingleDateController', module)
     />
   )))
   .add('with no nav prev button', withInfo()(() => (
-    <DayPickerSingleDateControllerWrapper
-      onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
-      noNavPrevButton
-    />
+    <div style={{ height: 500 }}>
+      <DayPickerSingleDateControllerWrapper
+        numberOfMonths={3}
+        onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
+        onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
+        onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
+        orientation={VERTICAL_SCROLLABLE}
+        noNavPrevButton
+      />
+    </div>
   )))
   .add('with no nav next button', withInfo()(() => (
-    <DayPickerSingleDateControllerWrapper
-      onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
-      noNavNextButton
-    />
+    <div style={{ height: 500 }}>
+      <DayPickerSingleDateControllerWrapper
+        numberOfMonths={3}
+        onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
+        onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
+        onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
+        orientation={VERTICAL_SCROLLABLE}
+        noNavNextButton
+      />
+    </div>
   )));
diff --git a/test/components/DayPickerNavigation_spec.jsx b/test/components/DayPickerNavigation_spec.jsx
index a0e67cdfd9..f15f358c75 100644
--- a/test/components/DayPickerNavigation_spec.jsx
+++ b/test/components/DayPickerNavigation_spec.jsx
@@ -24,6 +24,13 @@ describe('DayPickerNavigation', () => {
       expect(wrapper.find('[role="button"]')).to.have.lengthOf(1);
     });
 
+    it('is null when showNavNextButton and showNavPrevButton are both false', () => {
+      const wrapper = shallow(
+        <DayPickerNavigation showNavPrevButton={false} showNavNextButton={false} />,
+      ).dive();
+      expect(wrapper.type()).to.equal(null);
+    });
+
     it('tabindex is present when the default buttons are used', () => {
       const wrapper = shallow(<DayPickerNavigation />).dive();
       const prevMonthButton = wrapper.find('[role="button"]').at(0);

From 94c2397909e9956ef77d522803e7720b66c777d0 Mon Sep 17 00:00:00 2001
From: Nicole Kinser <nicole.kinser@airbnb.com>
Date: Tue, 14 Jan 2020 12:26:29 -0800
Subject: [PATCH 552/618] make class component so that it is valid to return
 null for versions of react below 15

---
 src/components/DayPickerNavigation.jsx | 414 +++++++++++++------------
 1 file changed, 210 insertions(+), 204 deletions(-)

diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index 56cd811ee9..0cbb1ce13e 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -66,220 +66,226 @@ const defaultProps = {
   showNavNextButton: true,
 };
 
-function DayPickerNavigation({
-  inlineStyles,
-  isRTL,
-  disablePrev,
-  disableNext,
-  navPosition,
-  navPrev,
-  navNext,
-  onPrevMonthClick,
-  onNextMonthClick,
-  orientation,
-  phrases,
-  renderNavPrevButton,
-  renderNavNextButton,
-  showNavPrevButton,
-  showNavNextButton,
-  styles,
-}) {
-  if (!showNavNextButton && !showNavPrevButton) {
-    return null;
-  }
+class DayPickerNavigation extends React.PureComponent {
+  render() {
+    const {
+      inlineStyles,
+      isRTL,
+      disablePrev,
+      disableNext,
+      navPosition,
+      navPrev,
+      navNext,
+      onPrevMonthClick,
+      onNextMonthClick,
+      orientation,
+      phrases,
+      renderNavPrevButton,
+      renderNavNextButton,
+      showNavPrevButton,
+      showNavNextButton,
+      styles,
+    } = this.props;
+
+    if (!showNavNextButton && !showNavPrevButton) {
+      return null;
+    }
 
-  const isHorizontal = orientation === HORIZONTAL_ORIENTATION;
-  const isVertical = orientation !== HORIZONTAL_ORIENTATION;
-  const isVerticalScrollable = orientation === VERTICAL_SCROLLABLE;
-  const isBottomNavPosition = navPosition === NAV_POSITION_BOTTOM;
-  const hasInlineStyles = !!inlineStyles;
-
-  let navPrevIcon = navPrev;
-  let navNextIcon = navNext;
-  let isDefaultNavPrev = false;
-  let isDefaultNavNext = false;
-  let navPrevTabIndex = {};
-  let navNextTabIndex = {};
-
-  if (!navPrevIcon) {
-    navPrevTabIndex = { tabIndex: '0' };
-    isDefaultNavPrev = true;
-    let Icon = isVertical ? ChevronUp : LeftArrow;
-    if (isRTL && !isVertical) {
-      Icon = RightArrow;
+    const isHorizontal = orientation === HORIZONTAL_ORIENTATION;
+    const isVertical = orientation !== HORIZONTAL_ORIENTATION;
+    const isVerticalScrollable = orientation === VERTICAL_SCROLLABLE;
+    const isBottomNavPosition = navPosition === NAV_POSITION_BOTTOM;
+    const hasInlineStyles = !!inlineStyles;
+
+    let navPrevIcon = navPrev;
+    let navNextIcon = navNext;
+    let isDefaultNavPrev = false;
+    let isDefaultNavNext = false;
+    let navPrevTabIndex = {};
+    let navNextTabIndex = {};
+
+    if (!navPrevIcon) {
+      navPrevTabIndex = { tabIndex: '0' };
+      isDefaultNavPrev = true;
+      let Icon = isVertical ? ChevronUp : LeftArrow;
+      if (isRTL && !isVertical) {
+        Icon = RightArrow;
+      }
+      navPrevIcon = (
+        <Icon
+          {...css(
+            isHorizontal && styles.DayPickerNavigation_svg__horizontal,
+            isVertical && styles.DayPickerNavigation_svg__vertical,
+            disablePrev && styles.DayPickerNavigation_svg__disabled,
+          )}
+        />
+      );
     }
-    navPrevIcon = (
-      <Icon
-        {...css(
-          isHorizontal && styles.DayPickerNavigation_svg__horizontal,
-          isVertical && styles.DayPickerNavigation_svg__vertical,
-          disablePrev && styles.DayPickerNavigation_svg__disabled,
-        )}
-      />
-    );
-  }
 
-  if (!navNextIcon) {
-    navNextTabIndex = { tabIndex: '0' };
-    isDefaultNavNext = true;
-    let Icon = isVertical ? ChevronDown : RightArrow;
-    if (isRTL && !isVertical) {
-      Icon = LeftArrow;
+    if (!navNextIcon) {
+      navNextTabIndex = { tabIndex: '0' };
+      isDefaultNavNext = true;
+      let Icon = isVertical ? ChevronDown : RightArrow;
+      if (isRTL && !isVertical) {
+        Icon = LeftArrow;
+      }
+      navNextIcon = (
+        <Icon
+          {...css(
+            isHorizontal && styles.DayPickerNavigation_svg__horizontal,
+            isVertical && styles.DayPickerNavigation_svg__vertical,
+            disableNext && styles.DayPickerNavigation_svg__disabled,
+          )}
+        />
+      );
     }
-    navNextIcon = (
-      <Icon
+
+    const isDefaultNav = isDefaultNavNext || isDefaultNavPrev;
+
+    return (
+      <div
         {...css(
-          isHorizontal && styles.DayPickerNavigation_svg__horizontal,
-          isVertical && styles.DayPickerNavigation_svg__vertical,
-          disableNext && styles.DayPickerNavigation_svg__disabled,
+          styles.DayPickerNavigation,
+          isHorizontal && styles.DayPickerNavigation__horizontal,
+          ...(isVertical ? [
+            styles.DayPickerNavigation__vertical,
+            isDefaultNav && styles.DayPickerNavigation__verticalDefault,
+          ] : []),
+          ...(isVerticalScrollable ? [
+            styles.DayPickerNavigation__verticalScrollable,
+            isDefaultNav && styles.DayPickerNavigation__verticalScrollableDefault,
+          ] : []),
+          ...(isBottomNavPosition ? [
+            styles.DayPickerNavigation__bottom,
+            isDefaultNav && styles.DayPickerNavigation__bottomDefault,
+          ] : []),
+          hasInlineStyles && inlineStyles,
         )}
-      />
-    );
-  }
-
-  const isDefaultNav = isDefaultNavNext || isDefaultNavPrev;
-
-  return (
-    <div
-      {...css(
-        styles.DayPickerNavigation,
-        isHorizontal && styles.DayPickerNavigation__horizontal,
-        ...(isVertical ? [
-          styles.DayPickerNavigation__vertical,
-          isDefaultNav && styles.DayPickerNavigation__verticalDefault,
-        ] : []),
-        ...(isVerticalScrollable ? [
-          styles.DayPickerNavigation__verticalScrollable,
-          isDefaultNav && styles.DayPickerNavigation__verticalScrollableDefault,
-        ] : []),
-        ...(isBottomNavPosition ? [
-          styles.DayPickerNavigation__bottom,
-          isDefaultNav && styles.DayPickerNavigation__bottomDefault,
-        ] : []),
-        hasInlineStyles && inlineStyles,
-      )}
-    >
-      {showNavPrevButton
-        && (renderNavPrevButton ? (
-          renderNavPrevButton({
-            ariaLabel: phrases.jumpToPrevMonth,
-            disabled: disablePrev,
-            onClick: disablePrev ? undefined : onPrevMonthClick,
-            onKeyUp: disablePrev ? undefined : (e) => {
-              const { key } = e;
-              if (key === 'Enter' || key === ' ') {
-                onPrevMonthClick(e);
-              }
-            },
-            onMouseUp: disablePrev ? undefined : (e) => {
-              e.currentTarget.blur();
-            },
-          })
-        ) : (
-          <div // eslint-disable-line jsx-a11y/interactive-supports-focus
-            role="button"
-            {...navPrevTabIndex}
-            {...css(
-              styles.DayPickerNavigation_button,
-              isDefaultNavPrev && styles.DayPickerNavigation_button__default,
-              disablePrev && styles.DayPickerNavigation_button__disabled,
-              ...(isHorizontal ? [
-                styles.DayPickerNavigation_button__horizontal,
-                ...(isDefaultNavPrev ? [
-                  styles.DayPickerNavigation_button__horizontalDefault,
-                  isBottomNavPosition && styles.DayPickerNavigation_bottomButton__horizontalDefault,
-                  !isRTL && styles.DayPickerNavigation_leftButton__horizontalDefault,
-                  isRTL && styles.DayPickerNavigation_rightButton__horizontalDefault,
+      >
+        {showNavPrevButton
+          && (renderNavPrevButton ? (
+            renderNavPrevButton({
+              ariaLabel: phrases.jumpToPrevMonth,
+              disabled: disablePrev,
+              onClick: disablePrev ? undefined : onPrevMonthClick,
+              onKeyUp: disablePrev ? undefined : (e) => {
+                const { key } = e;
+                if (key === 'Enter' || key === ' ') {
+                  onPrevMonthClick(e);
+                }
+              },
+              onMouseUp: disablePrev ? undefined : (e) => {
+                e.currentTarget.blur();
+              },
+            })
+          ) : (
+            <div // eslint-disable-line jsx-a11y/interactive-supports-focus
+              role="button"
+              {...navPrevTabIndex}
+              {...css(
+                styles.DayPickerNavigation_button,
+                isDefaultNavPrev && styles.DayPickerNavigation_button__default,
+                disablePrev && styles.DayPickerNavigation_button__disabled,
+                ...(isHorizontal ? [
+                  styles.DayPickerNavigation_button__horizontal,
+                  ...(isDefaultNavPrev ? [
+                    styles.DayPickerNavigation_button__horizontalDefault,
+                    isBottomNavPosition
+                      && styles.DayPickerNavigation_bottomButton__horizontalDefault,
+                    !isRTL && styles.DayPickerNavigation_leftButton__horizontalDefault,
+                    isRTL && styles.DayPickerNavigation_rightButton__horizontalDefault,
+                  ] : []),
                 ] : []),
-              ] : []),
-              ...(isVertical ? [
-                styles.DayPickerNavigation_button__vertical,
-                ...(isDefaultNavPrev ? [
-                  styles.DayPickerNavigation_button__verticalDefault,
-                  styles.DayPickerNavigation_prevButton__verticalDefault,
-                  isVerticalScrollable
-                    && styles.DayPickerNavigation_prevButton__verticalScrollableDefault,
+                ...(isVertical ? [
+                  styles.DayPickerNavigation_button__vertical,
+                  ...(isDefaultNavPrev ? [
+                    styles.DayPickerNavigation_button__verticalDefault,
+                    styles.DayPickerNavigation_prevButton__verticalDefault,
+                    isVerticalScrollable
+                      && styles.DayPickerNavigation_prevButton__verticalScrollableDefault,
+                  ] : []),
                 ] : []),
-              ] : []),
-            )}
-            aria-disabled={disablePrev ? true : undefined}
-            aria-label={phrases.jumpToPrevMonth}
-            onClick={disablePrev ? undefined : onPrevMonthClick}
-            onKeyUp={disablePrev ? undefined : (e) => {
-              const { key } = e;
-              if (key === 'Enter' || key === ' ') {
-                onPrevMonthClick(e);
-              }
-            }}
-            onMouseUp={disablePrev ? undefined : (e) => {
-              e.currentTarget.blur();
-            }}
-          >
-            {navPrevIcon}
-          </div>
-        ))}
-
-      {showNavNextButton
-        && (renderNavNextButton ? (
-          renderNavNextButton({
-            ariaLabel: phrases.jumpToNextMonth,
-            disabled: disableNext,
-            onClick: disableNext ? undefined : onNextMonthClick,
-            onKeyUp: disableNext ? undefined : (e) => {
-              const { key } = e;
-              if (key === 'Enter' || key === ' ') {
-                onNextMonthClick(e);
-              }
-            },
-            onMouseUp: disableNext ? undefined : (e) => {
-              e.currentTarget.blur();
-            },
-          })
-        ) : (
-          <div // eslint-disable-line jsx-a11y/interactive-supports-focus
-            role="button"
-            {...navNextTabIndex}
-            {...css(
-              styles.DayPickerNavigation_button,
-              isDefaultNavNext && styles.DayPickerNavigation_button__default,
-              disableNext && styles.DayPickerNavigation_button__disabled,
-              ...(isHorizontal ? [
-                styles.DayPickerNavigation_button__horizontal,
-                ...(isDefaultNavNext ? [
-                  styles.DayPickerNavigation_button__horizontalDefault,
-                  isBottomNavPosition && styles.DayPickerNavigation_bottomButton__horizontalDefault,
-                  isRTL && styles.DayPickerNavigation_leftButton__horizontalDefault,
-                  !isRTL && styles.DayPickerNavigation_rightButton__horizontalDefault,
+              )}
+              aria-disabled={disablePrev ? true : undefined}
+              aria-label={phrases.jumpToPrevMonth}
+              onClick={disablePrev ? undefined : onPrevMonthClick}
+              onKeyUp={disablePrev ? undefined : (e) => {
+                const { key } = e;
+                if (key === 'Enter' || key === ' ') {
+                  onPrevMonthClick(e);
+                }
+              }}
+              onMouseUp={disablePrev ? undefined : (e) => {
+                e.currentTarget.blur();
+              }}
+            >
+              {navPrevIcon}
+            </div>
+          ))}
+
+        {showNavNextButton
+          && (renderNavNextButton ? (
+            renderNavNextButton({
+              ariaLabel: phrases.jumpToNextMonth,
+              disabled: disableNext,
+              onClick: disableNext ? undefined : onNextMonthClick,
+              onKeyUp: disableNext ? undefined : (e) => {
+                const { key } = e;
+                if (key === 'Enter' || key === ' ') {
+                  onNextMonthClick(e);
+                }
+              },
+              onMouseUp: disableNext ? undefined : (e) => {
+                e.currentTarget.blur();
+              },
+            })
+          ) : (
+            <div // eslint-disable-line jsx-a11y/interactive-supports-focus
+              role="button"
+              {...navNextTabIndex}
+              {...css(
+                styles.DayPickerNavigation_button,
+                isDefaultNavNext && styles.DayPickerNavigation_button__default,
+                disableNext && styles.DayPickerNavigation_button__disabled,
+                ...(isHorizontal ? [
+                  styles.DayPickerNavigation_button__horizontal,
+                  ...(isDefaultNavNext ? [
+                    styles.DayPickerNavigation_button__horizontalDefault,
+                    isBottomNavPosition
+                      && styles.DayPickerNavigation_bottomButton__horizontalDefault,
+                    isRTL && styles.DayPickerNavigation_leftButton__horizontalDefault,
+                    !isRTL && styles.DayPickerNavigation_rightButton__horizontalDefault,
+                  ] : []),
                 ] : []),
-              ] : []),
-              ...(isVertical ? [
-                styles.DayPickerNavigation_button__vertical,
-                ...(isDefaultNavNext ? [
-                  styles.DayPickerNavigation_button__verticalDefault,
-                  styles.DayPickerNavigation_nextButton__verticalDefault,
-                  isVerticalScrollable
-                    && styles.DayPickerNavigation_nextButton__verticalScrollableDefault,
+                ...(isVertical ? [
+                  styles.DayPickerNavigation_button__vertical,
+                  ...(isDefaultNavNext ? [
+                    styles.DayPickerNavigation_button__verticalDefault,
+                    styles.DayPickerNavigation_nextButton__verticalDefault,
+                    isVerticalScrollable
+                      && styles.DayPickerNavigation_nextButton__verticalScrollableDefault,
+                  ] : []),
                 ] : []),
-              ] : []),
-            )}
-            aria-disabled={disableNext ? true : undefined}
-            aria-label={phrases.jumpToNextMonth}
-            onClick={disableNext ? undefined : onNextMonthClick}
-            onKeyUp={disableNext ? undefined : (e) => {
-              const { key } = e;
-              if (key === 'Enter' || key === ' ') {
-                onNextMonthClick(e);
-              }
-            }}
-            onMouseUp={disableNext ? undefined : (e) => {
-              e.currentTarget.blur();
-            }}
-          >
-            {navNextIcon}
-          </div>
-        ))}
-    </div>
-  );
+              )}
+              aria-disabled={disableNext ? true : undefined}
+              aria-label={phrases.jumpToNextMonth}
+              onClick={disableNext ? undefined : onNextMonthClick}
+              onKeyUp={disableNext ? undefined : (e) => {
+                const { key } = e;
+                if (key === 'Enter' || key === ' ') {
+                  onNextMonthClick(e);
+                }
+              }}
+              onMouseUp={disableNext ? undefined : (e) => {
+                e.currentTarget.blur();
+              }}
+            >
+              {navNextIcon}
+            </div>
+          ))}
+      </div>
+    );
+  }
 }
 
 DayPickerNavigation.propTypes = propTypes;

From c9a3c6f00fbd7ee8b8f9889888b3efa0843fa1db Mon Sep 17 00:00:00 2001
From: Nicole Kinser <nicole.kinser@airbnb.com>
Date: Mon, 13 Jan 2020 17:24:40 -0800
Subject: [PATCH 553/618] Fix logic for apply default navigation button styling

---
 src/components/DayPickerNavigation.jsx |  4 +-
 stories/DayPickerRangeController.js    | 62 ++++++++++++++++++++++++++
 2 files changed, 64 insertions(+), 2 deletions(-)

diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index 0cbb1ce13e..df1f28b30c 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -104,7 +104,7 @@ class DayPickerNavigation extends React.PureComponent {
     let navPrevTabIndex = {};
     let navNextTabIndex = {};
 
-    if (!navPrevIcon) {
+    if (!navPrevIcon && !renderNavPrevButton) {
       navPrevTabIndex = { tabIndex: '0' };
       isDefaultNavPrev = true;
       let Icon = isVertical ? ChevronUp : LeftArrow;
@@ -122,7 +122,7 @@ class DayPickerNavigation extends React.PureComponent {
       );
     }
 
-    if (!navNextIcon) {
+    if (!navNextIcon && !renderNavNextButton) {
       navNextTabIndex = { tabIndex: '0' };
       isDefaultNavNext = true;
       let Icon = isVertical ? ChevronDown : RightArrow;
diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
index e89e2d77c4..7d5f2def3c 100644
--- a/stories/DayPickerRangeController.js
+++ b/stories/DayPickerRangeController.js
@@ -157,6 +157,54 @@ function renderNavNextButton(buttonProps) {
   );
 }
 
+function renderNavPrevButtonForVerticalScrollable(buttonProps) {
+  const {
+    ariaLabel,
+    disabled,
+    onClick,
+    onKeyUp,
+    onMouseUp,
+  } = buttonProps;
+
+  return (
+    <button
+      aria-label={ariaLabel}
+      disabled={disabled}
+      onClick={onClick}
+      onKeyUp={onKeyUp}
+      onMouseUp={onMouseUp}
+      style={{ width: '100%', textAlign: 'center' }}
+      type="button"
+    >
+      &lsaquo; Prev
+    </button>
+  );
+}
+
+function renderNavNextButtonForVerticalScrollable(buttonProps) {
+  const {
+    ariaLabel,
+    disabled,
+    onClick,
+    onKeyUp,
+    onMouseUp,
+  } = buttonProps;
+
+  return (
+    <button
+      aria-label={ariaLabel}
+      disabled={disabled}
+      onClick={onClick}
+      onKeyUp={onKeyUp}
+      onMouseUp={onMouseUp}
+      style={{ width: '100%', textAlign: 'center' }}
+      type="button"
+    >
+      Next &rsaquo;
+    </button>
+  );
+}
+
 function renderKeyboardShortcutsButton(buttonProps) {
   const { ref, onClick, ariaLabel } = buttonProps;
 
@@ -462,6 +510,20 @@ storiesOf('DayPickerRangeController', module)
       />
     </div>
   )))
+  .add('vertical scrollable with custom rendered month navigation', withInfo()(() => (
+    <div style={{ height: 500 }}>
+      <DayPickerRangeControllerWrapper
+        onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
+        onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
+        onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
+        orientation={VERTICAL_SCROLLABLE}
+        numberOfMonths={3}
+        verticalHeight={300}
+        renderNavPrevButton={renderNavPrevButtonForVerticalScrollable}
+        renderNavNextButton={renderNavNextButtonForVerticalScrollable}
+      />
+    </div>
+  )))
   .add('with custom month navigation icons', withInfo()(() => (
     <DayPickerRangeControllerWrapper
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}

From 1057719d92f950bad072f4ac91e4bfb2372aa738 Mon Sep 17 00:00:00 2001
From: Nicole Kinser <nicole.kinser@airbnb.com>
Date: Tue, 14 Jan 2020 12:15:38 -0800
Subject: [PATCH 554/618] regression tests

---
 src/components/DayPickerNavigation.jsx       |  4 +-
 stories/DayPickerRangeController.js          |  4 +-
 test/components/DayPickerNavigation_spec.jsx | 62 ++++++++++++++++++++
 3 files changed, 66 insertions(+), 4 deletions(-)

diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index df1f28b30c..f7fb91f65b 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -104,7 +104,7 @@ class DayPickerNavigation extends React.PureComponent {
     let navPrevTabIndex = {};
     let navNextTabIndex = {};
 
-    if (!navPrevIcon && !renderNavPrevButton) {
+    if (!navPrevIcon && !renderNavPrevButton && showNavPrevButton) {
       navPrevTabIndex = { tabIndex: '0' };
       isDefaultNavPrev = true;
       let Icon = isVertical ? ChevronUp : LeftArrow;
@@ -122,7 +122,7 @@ class DayPickerNavigation extends React.PureComponent {
       );
     }
 
-    if (!navNextIcon && !renderNavNextButton) {
+    if (!navNextIcon && !renderNavNextButton && showNavNextButton) {
       navNextTabIndex = { tabIndex: '0' };
       isDefaultNavNext = true;
       let Icon = isVertical ? ChevronDown : RightArrow;
diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
index 7d5f2def3c..80f8497029 100644
--- a/stories/DayPickerRangeController.js
+++ b/stories/DayPickerRangeController.js
@@ -152,7 +152,7 @@ function renderNavNextButton(buttonProps) {
       style={{ position: 'absolute', top: 23, right: 22 }}
       type="button"
     >
-      Next &rsaquo;
+      Next
     </button>
   );
 }
@@ -176,7 +176,7 @@ function renderNavPrevButtonForVerticalScrollable(buttonProps) {
       style={{ width: '100%', textAlign: 'center' }}
       type="button"
     >
-      &lsaquo; Prev
+      Prev
     </button>
   );
 }
diff --git a/test/components/DayPickerNavigation_spec.jsx b/test/components/DayPickerNavigation_spec.jsx
index f15f358c75..489b0754ab 100644
--- a/test/components/DayPickerNavigation_spec.jsx
+++ b/test/components/DayPickerNavigation_spec.jsx
@@ -6,6 +6,7 @@ import { shallow } from 'enzyme';
 import DayPickerNavigation from '../../src/components/DayPickerNavigation';
 import RightArrow from '../../src/components/RightArrow';
 import LeftArrow from '../../src/components/LeftArrow';
+import { VERTICAL_ORIENTATION } from '../../src/constants';
 
 describe('DayPickerNavigation', () => {
   describe('#render', () => {
@@ -91,6 +92,67 @@ describe('DayPickerNavigation', () => {
       expect(wrapper.childAt(1).find('div[role="button"]')).to.have.lengthOf(0);
       expect(renderNavNextButtonStub).to.have.property('callCount', 1);
     });
+
+    it('does not render default styles when custom navigation is used', () => {
+      const renderNavPrevButtonStub = sinon.stub().returns(<button type="button">Prev</button>);
+      const renderNavNextButtonStub = sinon.stub().returns(<button type="button">Next</button>);
+      const wrapper = shallow(
+        <DayPickerNavigation
+          renderNavNextButton={renderNavNextButtonStub}
+          renderNavPrevButton={renderNavPrevButtonStub}
+          orientation={VERTICAL_ORIENTATION}
+        />,
+      ).dive();
+      const wrapperDiv = wrapper.find('div').filterWhere((div) => {
+        const className = div.prop('className') || '';
+        return className.includes('DayPickerNavigation__verticalDefault');
+      });
+      expect(wrapperDiv).to.have.lengthOf(0);
+    });
+
+    it('does render default styles when custom navigation is used for only one nav button', () => {
+      const renderNavPrevButtonStub = sinon.stub().returns(<button type="button">Prev</button>);
+      const wrapper = shallow(
+        <DayPickerNavigation
+          renderNavPrevButton={renderNavPrevButtonStub}
+          orientation={VERTICAL_ORIENTATION}
+        />,
+      ).dive();
+      const wrapperDiv = wrapper.find('div').filterWhere((div) => {
+        const className = div.prop('className') || '';
+        return className.includes('DayPickerNavigation__verticalDefault');
+      });
+      expect(wrapperDiv).to.have.lengthOf(1);
+    });
+
+    it('does not render default styles when custom navigation is used for only button but the other nav button is not shown', () => {
+      const renderNavPrevButtonStub = sinon.stub().returns(<button type="button">Prev</button>);
+      const wrapper = shallow(
+        <DayPickerNavigation
+          showNavNextButton={false}
+          renderNavPrevButton={renderNavPrevButtonStub}
+          orientation={VERTICAL_ORIENTATION}
+        />,
+      ).dive();
+      const wrapperDiv = wrapper.find('div').filterWhere((div) => {
+        const className = div.prop('className') || '';
+        return className.includes('DayPickerNavigation__verticalDefault');
+      });
+      expect(wrapperDiv).to.have.lengthOf(0);
+    });
+
+    it('renders default styles when default navigation is used', () => {
+      const wrapper = shallow(
+        <DayPickerNavigation
+          orientation={VERTICAL_ORIENTATION}
+        />,
+      ).dive();
+      const wrapperDiv = wrapper.find('div').filterWhere((div) => {
+        const className = div.prop('className') || '';
+        return className.includes('DayPickerNavigation__verticalDefault');
+      });
+      expect(wrapperDiv).to.have.lengthOf(1);
+    });
   });
 
   describe('interactions', () => {

From 399ba3c6b20693d9979b0ab2bfbdb619fd94acb8 Mon Sep 17 00:00:00 2001
From: Nicole Kinser <nicole.kinser@airbnb.com>
Date: Tue, 14 Jan 2020 16:27:47 -0800
Subject: [PATCH 555/618] Keep scroll position when prev months rendered on
 vertical scrollable calendar

---
 src/components/DayPicker.jsx       | 63 ++++++++++++++++++++++++------
 test/components/DayPicker_spec.jsx | 57 +++++++++++++++++++++++++++
 2 files changed, 109 insertions(+), 11 deletions(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index b0434d8c53..a31a710f10 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -25,6 +25,7 @@ import getCalendarMonthWidth from '../utils/getCalendarMonthWidth';
 import calculateDimension from '../utils/calculateDimension';
 import getActiveElement from '../utils/getActiveElement';
 import isDayVisible from '../utils/isDayVisible';
+import isSameMonth from '../utils/isSameMonth';
 
 import ModifiersShape from '../shapes/ModifiersShape';
 import NavPositionShape from '../shapes/NavPositionShape';
@@ -215,6 +216,7 @@ class DayPicker extends React.PureComponent {
 
     this.hasSetInitialVisibleMonth = !props.hidden;
     this.state = {
+      currentMonthScrollTop: null,
       currentMonth,
       monthTransition: null,
       translationValue,
@@ -260,29 +262,37 @@ class DayPicker extends React.PureComponent {
   }
 
   componentDidMount() {
+    const { orientation } = this.props;
     const { currentMonth } = this.state;
-    if (this.calendarInfo) {
-      this.setState({
-        isTouchDevice: isTouchDevice(),
-        calendarInfoWidth: calculateDimension(this.calendarInfo, 'width', true, true),
-      });
-    } else {
-      this.setState({ isTouchDevice: isTouchDevice() });
-    }
+
+    const calendarInfoWidth = this.calendarInfo
+      ? calculateDimension(this.calendarInfo, 'width', true, true)
+      : 0;
+    const currentMonthScrollTop = this.transitionContainer && orientation === VERTICAL_SCROLLABLE
+      ? this.transitionContainer.scrollHeight - this.transitionContainer.scrollTop
+      : null;
+
+    this.setState({
+      isTouchDevice: isTouchDevice(),
+      calendarInfoWidth,
+      currentMonthScrollTop,
+    });
 
     this.setCalendarMonthWeeks(currentMonth);
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentWillReceiveProps(nextProps, nextState) {
     const {
       hidden,
       isFocused,
       showKeyboardShortcuts,
       onBlur,
+      orientation,
       renderMonthText,
       horizontalMonthPadding,
     } = nextProps;
     const { currentMonth } = this.state;
+    const { currentMonth: nextCurrentMonth } = nextState;
 
     if (!hidden) {
       if (!this.hasSetInitialVisibleMonth) {
@@ -334,6 +344,20 @@ class DayPicker extends React.PureComponent {
         monthTitleHeight: null,
       });
     }
+
+    // Capture the scroll position so when previous months are rendered above the current month
+    // we can adjust scroll after the component has updated and the previous current month
+    // stays in view.
+    if (
+      orientation === VERTICAL_SCROLLABLE
+      && this.transitionContainer
+      && !isSameMonth(currentMonth, nextCurrentMonth)
+    ) {
+      this.setState({
+        currentMonthScrollTop:
+          this.transitionContainer.scrollHeight - this.transitionContainer.scrollTop,
+      });
+    }
   }
 
   componentWillUpdate() {
@@ -355,11 +379,16 @@ class DayPicker extends React.PureComponent {
     }
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps, prevState) {
     const {
       orientation, daySize, isFocused, numberOfMonths,
     } = this.props;
-    const { focusedDate, monthTitleHeight } = this.state;
+    const {
+      currentMonth,
+      currentMonthScrollTop,
+      focusedDate,
+      monthTitleHeight,
+    } = this.state;
 
     if (
       this.isHorizontal()
@@ -374,6 +403,18 @@ class DayPicker extends React.PureComponent {
     if (!prevProps.isFocused && isFocused && !focusedDate) {
       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 === VERTICAL_SCROLLABLE
+      && !isSameMonth(prevState.currentMonth, currentMonth)
+      && currentMonthScrollTop
+      && this.transitionContainer
+    ) {
+      this.transitionContainer.scrollTop = this.transitionContainer.scrollHeight
+        - currentMonthScrollTop;
+    }
   }
 
   componentWillUnmount() {
diff --git a/test/components/DayPicker_spec.jsx b/test/components/DayPicker_spec.jsx
index 8b20aab508..4a8f119c9d 100644
--- a/test/components/DayPicker_spec.jsx
+++ b/test/components/DayPicker_spec.jsx
@@ -906,6 +906,12 @@ describe('DayPicker', () => {
           mount(<DayPicker orientation={HORIZONTAL_ORIENTATION} />);
           expect(adjustDayPickerHeightSpy).to.have.property('callCount', 1);
         });
+
+        it('does not update state.currentMonthScrollTop', () => {
+          sinon.spy(DayPicker.prototype, 'setTransitionContainerRef');
+          const wrapper = mount(<DayPicker orientation={HORIZONTAL_ORIENTATION} />);
+          expect(wrapper.state().currentMonthScrollTop).to.equal(null);
+        });
       });
 
       describe('props.orientation === VERTICAL_ORIENTATION', () => {
@@ -913,6 +919,35 @@ describe('DayPicker', () => {
           mount(<DayPicker orientation={VERTICAL_ORIENTATION} />);
           expect(adjustDayPickerHeightSpy.called).to.equal(false);
         });
+
+        it('does not update state.currentMonthScrollTop', () => {
+          sinon.spy(DayPicker.prototype, 'setTransitionContainerRef');
+          const wrapper = mount(<DayPicker orientation={VERTICAL_ORIENTATION} />);
+          expect(wrapper.state().currentMonthScrollTop).to.equal(null);
+        });
+      });
+
+      describe('props.orientation === VERTICAL_SCROLLABLE', () => {
+        it('updates state.currentMonthScrollTop', () => {
+          sinon.spy(DayPicker.prototype, 'setTransitionContainerRef');
+          const wrapper = mount(<DayPicker orientation={VERTICAL_SCROLLABLE} />);
+          expect(wrapper.state().currentMonthScrollTop).to.not.equal(null);
+        });
+      });
+    });
+
+    describe('#componentWillReceiveProps', () => {
+      describe('props.orientation === VERTICAL_SCROLLABLE', () => {
+        it('updates state.currentMonthScrollTop', () => {
+          sinon.spy(DayPicker.prototype, 'setTransitionContainerRef');
+          const wrapper = mount(<DayPicker orientation={VERTICAL_SCROLLABLE} />);
+          const prevCurrentMonthScrollTop = wrapper.state().currentMonthScrollTop;
+          wrapper.setState({
+            currentMonth: moment().subtract(1, 'months'),
+          });
+          wrapper.setProps({ initialVisibleMonth: () => moment().subtract(1, 'month') });
+          expect(wrapper.state().currentMonthScrollTop).to.not.equal(prevCurrentMonthScrollTop);
+        });
       });
     });
 
@@ -1027,6 +1062,28 @@ describe('DayPicker', () => {
         });
       });
 
+      describe('props.orientation === VERTICAL_SCROLLABLE', () => {
+        it('does not update transitionContainer ref`s scrollTop currentMonth stays the same', () => {
+          sinon.spy(DayPicker.prototype, 'setTransitionContainerRef');
+          const wrapper = mount(<DayPicker orientation={VERTICAL_SCROLLABLE} />);
+          const prevScrollTop = wrapper.transitionContainer.scrollTop;
+          wrapper.setState({
+            currentMonth: moment(),
+          });
+          expect(wrapper.transitionContainer).to.have.property('scrollTop', prevScrollTop);
+        });
+
+        it('updates transitionContainer ref`s scrollTop currentMonth changes', () => {
+          sinon.spy(DayPicker.prototype, 'setTransitionContainerRef');
+          const wrapper = mount(<DayPicker orientation={VERTICAL_SCROLLABLE} />);
+          const prevScrollTop = wrapper.transitionContainer.scrollTop;
+          wrapper.setState({
+            currentMonth: moment().subtract(1, 'months'),
+          });
+          expect(wrapper.transitionContainer).to.not.have.property('scrollTop', prevScrollTop);
+        });
+      });
+
       describe('when isFocused is updated to true', () => {
         const prevProps = { isFocused: false };
         const newProps = { isFocused: true };

From c644b5c0b66a57dc2b1287b9bf188578e1475fac Mon Sep 17 00:00:00 2001
From: Kevin Pan <kevin.pan@airbnb.com>
Date: Wed, 15 Jan 2020 12:46:04 -0800
Subject: [PATCH 556/618] Version 21.7.0

---
 CHANGELOG.md | 6 ++++++
 package.json | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1ab70db682..433ab3c5ba 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,12 @@
 <!--
 - []  ([#](https://github.com/airbnb/react-dates/pull/))
 -->
+
+## 21.7.0
+- [fix] Keep scroll position when prev months rendered on vertical scrollable calendar ([#1902](https://github.com/airbnb/react-dates/pull/1902))
+- [new] Add ability to not show prev or next navigation buttons ([#1900](https://github.com/airbnb/react-dates/pull/1900))
+- [fix] Fix logic for applying default navigation button styling ([#1898](https://github.com/airbnb/react-dates/pull/1898))
+
 ## 21.6.0
 
 - [new] Add functionality to see previous months for vertical scrollable calendar ([#1894](https://github.com/airbnb/react-dates/pull/1894))
diff --git a/package.json b/package.json
index 7f0e43f074..7ae237d97e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "21.6.0",
+  "version": "21.7.0",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From fe3bdbc5292d6921f474ad41a05ac6131aec3d17 Mon Sep 17 00:00:00 2001
From: Kevin Pan <kevin.pan@airbnb.com>
Date: Tue, 28 Jan 2020 11:34:59 -0800
Subject: [PATCH 557/618] fix conditional

---
 src/components/DayPickerKeyboardShortcuts.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DayPickerKeyboardShortcuts.jsx b/src/components/DayPickerKeyboardShortcuts.jsx
index 2861d3eda5..7e9b70014a 100644
--- a/src/components/DayPickerKeyboardShortcuts.jsx
+++ b/src/components/DayPickerKeyboardShortcuts.jsx
@@ -189,7 +189,7 @@ class DayPickerKeyboardShortcuts extends React.PureComponent {
             onClick: this.onShowKeyboardShortcutsButtonClick,
             ariaLabel: toggleButtonText,
           })}
-        {renderKeyboardShortcutsButton || (
+        {!renderKeyboardShortcutsButton && (
           <button
             ref={this.setShowKeyboardShortcutsButtonRef}
             {...css(

From 8484dc689d670cca84fa6cf2878340f208835901 Mon Sep 17 00:00:00 2001
From: Kevin Pan <kevin.pan@airbnb.com>
Date: Tue, 28 Jan 2020 11:47:16 -0800
Subject: [PATCH 558/618] Version 21.7.1

---
 CHANGELOG.md | 3 +++
 package.json | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 433ab3c5ba..ecf2e85da2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,9 @@
 - []  ([#](https://github.com/airbnb/react-dates/pull/))
 -->
 
+## 21.7.1
+- [fix] Fix render conditional in DayPickerKeyboardShortcuts ([#1911](https://github.com/airbnb/react-dates/pull/1911))
+
 ## 21.7.0
 - [fix] Keep scroll position when prev months rendered on vertical scrollable calendar ([#1902](https://github.com/airbnb/react-dates/pull/1902))
 - [new] Add ability to not show prev or next navigation buttons ([#1900](https://github.com/airbnb/react-dates/pull/1900))
diff --git a/package.json b/package.json
index 7ae237d97e..ab8e0e43e2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "21.7.0",
+  "version": "21.7.1",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 783d756fb2cee0bc5fb639f9a99d711cb7455d8b Mon Sep 17 00:00:00 2001
From: Kevin Pan <kevin.pan@airbnb.com>
Date: Tue, 28 Jan 2020 12:12:59 -0800
Subject: [PATCH 559/618] add test

---
 test/components/DayPickerKeyboardShortcuts_spec.jsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/test/components/DayPickerKeyboardShortcuts_spec.jsx b/test/components/DayPickerKeyboardShortcuts_spec.jsx
index c68822dadb..dd59f1f541 100644
--- a/test/components/DayPickerKeyboardShortcuts_spec.jsx
+++ b/test/components/DayPickerKeyboardShortcuts_spec.jsx
@@ -145,6 +145,14 @@ describe('DayPickerKeyboardShortcuts', () => {
           const wrapper = shallow(<DayPickerKeyboardShortcuts {...props} />).dive();
           expect(wrapper.children().find(Button)).to.have.lengthOf(1);
         });
+
+        it('renders the default button if renderKeyboardShortcutsButton is not provided', () => {
+          const wrapper = shallow(<DayPickerKeyboardShortcuts />).dive();
+          expect(wrapper.children().find('button')).to.have.lengthOf(1);
+          expect(wrapper.children().find('button').prop('aria-label')).to.eql(
+            DayPickerKeyboardShortcutsPhrases.showKeyboardShortcutsPanel,
+          );
+        });
       });
 
       describe('renderKeyboardShortcutsPanel', () => {

From c1a644a9c0dd47dbcca848956bfa4e1ebe19ffb4 Mon Sep 17 00:00:00 2001
From: Kevin Pan <kevin.pan@airbnb.com>
Date: Tue, 28 Jan 2020 14:21:45 -0800
Subject: [PATCH 560/618] Version 21.7.2

---
 CHANGELOG.md | 3 +++
 package.json | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ecf2e85da2..35ca3e75c4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,9 @@
 - []  ([#](https://github.com/airbnb/react-dates/pull/))
 -->
 
+## 21.7.2
+- [fix] Add tests for previous fix ([#1912](https://github.com/airbnb/react-dates/pull/1912))
+
 ## 21.7.1
 - [fix] Fix render conditional in DayPickerKeyboardShortcuts ([#1911](https://github.com/airbnb/react-dates/pull/1911))
 
diff --git a/package.json b/package.json
index ab8e0e43e2..3fe17c57f5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "21.7.1",
+  "version": "21.7.2",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From ae4220243f3554ec05d80af4d4659dd76c0de4ae Mon Sep 17 00:00:00 2001
From: Nicole Kinser <nicole.kinser@airbnb.com>
Date: Tue, 28 Jan 2020 14:52:08 -0800
Subject: [PATCH 561/618] Add option to allow days violating min nights to be
 clicked

---
 examples/DayPickerRangeControllerWrapper.jsx  | 28 +++++++++++++++--
 src/components/DayPickerRangeController.jsx   | 17 +++++++++--
 stories/DayPickerRangeController.js           | 11 +++++++
 .../DayPickerRangeController_spec.jsx         | 30 +++++++++++++++++++
 4 files changed, 80 insertions(+), 6 deletions(-)

diff --git a/examples/DayPickerRangeControllerWrapper.jsx b/examples/DayPickerRangeControllerWrapper.jsx
index 1975c098e8..95ae47099a 100644
--- a/examples/DayPickerRangeControllerWrapper.jsx
+++ b/examples/DayPickerRangeControllerWrapper.jsx
@@ -29,6 +29,7 @@ const propTypes = forbidExtraProps({
   isOutsideRange: PropTypes.func,
   isDayBlocked: PropTypes.func,
   isDayHighlighted: PropTypes.func,
+  daysViolatingMinNightsCanBeClicked: PropTypes.bool,
 
   // DayPicker props
   enableOutsideDays: PropTypes.bool,
@@ -79,6 +80,7 @@ const defaultProps = {
   isOutsideRange: day => !isInclusivelyAfterDay(day, moment()),
   isDayHighlighted: () => false,
   enableOutsideDays: false,
+  daysViolatingMinNightsCanBeClicked: false,
 
   // calendar presentation and interaction related props
   orientation: HORIZONTAL_ORIENTATION,
@@ -112,6 +114,7 @@ class DayPickerRangeControllerWrapper extends React.Component {
     super(props);
 
     this.state = {
+      errorMessage: null,
       focusedInput: props.autoFocusEndDate ? END_DATE : START_DATE,
       startDate: props.initialStartDate,
       endDate: props.initialEndDate,
@@ -122,7 +125,19 @@ class DayPickerRangeControllerWrapper extends React.Component {
   }
 
   onDatesChange({ startDate, endDate }) {
-    this.setState({ startDate, endDate });
+    const { daysViolatingMinNightsCanBeClicked, minimumNights } = this.props;
+    let doesNotMeetMinNights = false;
+    if (daysViolatingMinNightsCanBeClicked && startDate && endDate) {
+      const dayDiff = endDate.diff(startDate.clone().startOf('day').hour(12), 'days');
+      doesNotMeetMinNights = dayDiff < minimumNights && dayDiff >= 0;
+    }
+    this.setState({
+      startDate,
+      endDate: doesNotMeetMinNights ? null : endDate,
+      errorMessage: doesNotMeetMinNights
+        ? 'That day does not meet the minimum nights requirement'
+        : null,
+    });
   }
 
   onFocusChange(focusedInput) {
@@ -133,8 +148,13 @@ class DayPickerRangeControllerWrapper extends React.Component {
   }
 
   render() {
-    const { showInputs } = this.props;
-    const { focusedInput, startDate, endDate } = this.state;
+    const { renderCalendarInfo: renderCalendarInfoProp, showInputs } = this.props;
+    const {
+      errorMessage,
+      focusedInput,
+      startDate,
+      endDate,
+    } = this.state;
 
     const props = omit(this.props, [
       'autoFocus',
@@ -146,6 +166,7 @@ class DayPickerRangeControllerWrapper extends React.Component {
 
     const startDateString = startDate && startDate.format('YYYY-MM-DD');
     const endDateString = endDate && endDate.format('YYYY-MM-DD');
+    const renderCalendarInfo = errorMessage ? () => <div>{errorMessage}</div> : renderCalendarInfoProp;
 
     return (
       <div style={{ height: '100%' }}>
@@ -163,6 +184,7 @@ class DayPickerRangeControllerWrapper extends React.Component {
           focusedInput={focusedInput}
           startDate={startDate}
           endDate={endDate}
+          renderCalendarInfo={renderCalendarInfo}
         />
       </div>
     );
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 5087f7d6db..6ceab45ad3 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -64,6 +64,7 @@ const propTypes = forbidExtraProps({
   isDayBlocked: PropTypes.func,
   isDayHighlighted: PropTypes.func,
   getMinNightsForHoverDate: PropTypes.func,
+  daysViolatingMinNightsCanBeClicked: PropTypes.bool,
 
   // DayPicker props
   renderMonthText: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'),
@@ -139,6 +140,7 @@ const defaultProps = {
   isDayBlocked() {},
   isDayHighlighted() {},
   getMinNightsForHoverDate() {},
+  daysViolatingMinNightsCanBeClicked: false,
 
   // DayPicker props
   renderMonthText: null,
@@ -593,10 +595,11 @@ export default class DayPickerRangeController extends React.PureComponent {
       startDateOffset,
       endDateOffset,
       disabled,
+      daysViolatingMinNightsCanBeClicked,
     } = this.props;
 
     if (e) e.preventDefault();
-    if (this.isBlocked(day)) return;
+    if (this.isBlocked(day, !daysViolatingMinNightsCanBeClicked)) return;
 
     let { startDate, endDate } = this.props;
 
@@ -649,6 +652,12 @@ export default class DayPickerRangeController extends React.PureComponent {
           onFocusChange(null);
           onClose({ startDate, endDate });
         }
+      } else if (
+        daysViolatingMinNightsCanBeClicked
+        && this.doesNotMeetMinimumNights(day)
+      ) {
+        endDate = day;
+        onDatesChange({ startDate, endDate });
       } else if (disabled !== START_DATE) {
         startDate = day;
         endDate = null;
@@ -1230,9 +1239,11 @@ export default class DayPickerRangeController extends React.PureComponent {
     return isSameDay(day, startDate);
   }
 
-  isBlocked(day) {
+  isBlocked(day, blockDaysViolatingMinNights = true) {
     const { isDayBlocked, isOutsideRange } = this.props;
-    return isDayBlocked(day) || isOutsideRange(day) || this.doesNotMeetMinimumNights(day);
+    return isDayBlocked(day)
+      || isOutsideRange(day)
+      || (blockDaysViolatingMinNights && this.doesNotMeetMinimumNights(day));
   }
 
   isToday(day) {
diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
index 80f8497029..47b4ecca04 100644
--- a/stories/DayPickerRangeController.js
+++ b/stories/DayPickerRangeController.js
@@ -773,4 +773,15 @@ storiesOf('DayPickerRangeController', module)
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
       renderKeyboardShortcutsPanel={renderKeyboardShortcutsPanel}
     />
+  )))
+  .add('with minimum nights set and daysViolatingMinNightsCanBeClicked set to true', withInfo()(() => (
+    <DayPickerRangeControllerWrapper
+      daysViolatingMinNightsCanBeClicked
+      minimumNights={3}
+      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
+      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
+      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
+      initialStartDate={moment().add(3, 'days')}
+      autoFocusEndDate
+    />
   )));
diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index d1efc1484d..4d28220d1c 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -1911,6 +1911,24 @@ describe('DayPickerRangeController', () => {
       });
     });
 
+    describe('daysViolatingMinNightsCanBeClicked is true', () => {
+      it('props.onDatesChange is called and props.onFocusChange is not called when the day does not meet min nights', () => {
+        const onFocusChangeStub = sinon.stub();
+        const onDatesChangeStub = sinon.stub();
+        const wrapper = shallow(<DayPickerRangeController
+          daysViolatingMinNightsCanBeClicked
+          focusedInput={END_DATE}
+          minimumNights={3}
+          onFocusChange={onFocusChangeStub}
+          onDatesChange={onDatesChangeStub}
+          startDate={today}
+        />);
+        wrapper.instance().onDayClick(today.clone().add(1, 'days'));
+        expect(onFocusChangeStub.callCount).to.equal(0);
+        expect(onDatesChangeStub.callCount).to.equal(1);
+      });
+    });
+
     describe('props.focusedInput === START_DATE', () => {
       describe('props.onFocusChange', () => {
         it('is called once', () => {
@@ -4871,6 +4889,18 @@ describe('DayPickerRangeController', () => {
         />);
         expect(wrapper.instance().isBlocked(today)).to.equal(false);
       });
+
+      it('returns false if arg does not meet minimum nights but blockDaysViolatingMinNights is false', () => {
+        isDayBlockedStub.returns(false);
+        isOutsideRangeStub.returns(false);
+        doesNotMeetMinimumNightsStub.returns(true);
+
+        const wrapper = shallow(<DayPickerRangeController
+          isDayBlocked={isDayBlockedStub}
+          isOutsideRange={isOutsideRangeStub}
+        />);
+        expect(wrapper.instance().isBlocked(today, false)).to.equal(false);
+      });
     });
 
     describe('#isToday', () => {

From 94c537ccc0000c5b9b529878648d43acc44b84cc Mon Sep 17 00:00:00 2001
From: Nicole Kinser <nicole.kinser@airbnb.com>
Date: Tue, 28 Jan 2020 16:17:00 -0800
Subject: [PATCH 562/618] Prevent vertical scrollable prev nav button from
 overlapping weekday headers

---
 src/components/DayPickerNavigation.jsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index f7fb91f65b..1fc2ec3d2f 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -154,6 +154,7 @@ class DayPickerNavigation extends React.PureComponent {
           ...(isVerticalScrollable ? [
             styles.DayPickerNavigation__verticalScrollable,
             isDefaultNav && styles.DayPickerNavigation__verticalScrollableDefault,
+            showNavPrevButton && styles.DayPickerNavigation__verticalScrollable_prevNav,
           ] : []),
           ...(isBottomNavPosition ? [
             styles.DayPickerNavigation__bottom,
@@ -303,6 +304,9 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
 
   DayPickerNavigation__vertical: {},
   DayPickerNavigation__verticalScrollable: {},
+  DayPickerNavigation__verticalScrollable_prevNav: {
+    zIndex: zIndex + 1, // zIndex + 2 causes the button to show on top of the day of week headers
+  },
 
   DayPickerNavigation__verticalDefault: {
     position: 'absolute',

From 9acb2a55cc7a3012380d953168b06bd6b704de6b Mon Sep 17 00:00:00 2001
From: Nicole <nkinser@berkeley.edu>
Date: Wed, 29 Jan 2020 10:50:10 -0800
Subject: [PATCH 563/618] Version 21.8.0

---
 CHANGELOG.md | 5 +++++
 package.json | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 35ca3e75c4..f8bf0a1fd5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,11 @@
 - []  ([#](https://github.com/airbnb/react-dates/pull/))
 -->
 
+## 21.8.0
+
+- [new] Add option to allow days violating min nights to be clicked ([#1913](https://github.com/airbnb/react-dates/pull/1913))
+- [fix] Prevent vertical scrollable prev nav button from overlapping weekday headers ([#1914](https://github.com/airbnb/react-dates/pull/1914))
+
 ## 21.7.2
 - [fix] Add tests for previous fix ([#1912](https://github.com/airbnb/react-dates/pull/1912))
 
diff --git a/package.json b/package.json
index 3fe17c57f5..52465e94f8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dates",
-  "version": "21.7.2",
+  "version": "21.8.0",
   "description": "A responsive and accessible date range picker component built with React",
   "main": "index.js",
   "scripts": {

From 05356400baa8e05a9d7ea17e74fbb04bb3b23fa8 Mon Sep 17 00:00:00 2001
From: mmarkelov <maks-markel@mail.ru>
Date: Mon, 3 Feb 2020 16:47:47 +0300
Subject: [PATCH 564/618] [Fix] `SingleDatePicker`/`DateRangePicker`: Fix
 onChange validation

---
 src/components/DateRangePicker.jsx            |  2 +
 .../DateRangePickerInputController.jsx        |  8 ++-
 src/components/DayPickerKeyboardShortcuts.jsx |  2 +-
 src/components/SingleDatePicker.jsx           |  2 +
 .../SingleDatePickerInputController.jsx       |  5 +-
 .../DateRangePickerInputController_spec.jsx   | 64 ++++++++++++++++++-
 test/components/DateRangePicker_spec.jsx      | 10 +++
 .../SingleDatePickerInputController_spec.jsx  | 35 +++++++++-
 test/components/SingleDatePicker_spec.jsx     | 15 +++++
 9 files changed, 137 insertions(+), 6 deletions(-)

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 212e7f1196..7d6fc4988d 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -590,6 +590,7 @@ class DateRangePicker extends React.PureComponent {
       openDirection,
       phrases,
       isOutsideRange,
+      isDayBlocked,
       minimumNights,
       withPortal,
       withFullScreenPortal,
@@ -640,6 +641,7 @@ class DateRangePicker extends React.PureComponent {
         reopenPickerOnClearDates={reopenPickerOnClearDates}
         keepOpenOnDateSelect={keepOpenOnDateSelect}
         isOutsideRange={isOutsideRange}
+        isDayBlocked={isDayBlocked}
         minimumNights={minimumNights}
         withFullScreenPortal={withFullScreenPortal}
         onDatesChange={onDatesChange}
diff --git a/src/components/DateRangePickerInputController.jsx b/src/components/DateRangePickerInputController.jsx
index 681beb2a48..8eda984b53 100644
--- a/src/components/DateRangePickerInputController.jsx
+++ b/src/components/DateRangePickerInputController.jsx
@@ -62,6 +62,7 @@ const propTypes = forbidExtraProps({
   withFullScreenPortal: PropTypes.bool,
   minimumNights: nonNegativeInteger,
   isOutsideRange: PropTypes.func,
+  isDayBlocked: PropTypes.func,
   displayFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
 
   onFocusChange: PropTypes.func,
@@ -118,6 +119,7 @@ const defaultProps = {
   withFullScreenPortal: false,
   minimumNights: 1,
   isOutsideRange: (day) => !isInclusivelyAfterDay(day, moment()),
+  isDayBlocked: () => false,
   displayFormat: () => moment.localeData().longDateFormat('L'),
 
   onFocusChange() {},
@@ -167,6 +169,7 @@ export default class DateRangePickerInputController extends React.PureComponent
     const {
       startDate,
       isOutsideRange,
+      isDayBlocked,
       minimumNights,
       keepOpenOnDateSelect,
       onDatesChange,
@@ -175,7 +178,7 @@ export default class DateRangePickerInputController extends React.PureComponent
     const endDate = toMomentObject(endDateString, this.getDisplayFormat());
 
     const isEndDateValid = endDate
-      && !isOutsideRange(endDate)
+      && !isOutsideRange(endDate) && !isDayBlocked(endDate)
       && !(startDate && isBeforeDay(endDate, startDate.clone().add(minimumNights, 'days')));
     if (isEndDateValid) {
       onDatesChange({ startDate, endDate });
@@ -210,6 +213,7 @@ export default class DateRangePickerInputController extends React.PureComponent
     let { endDate } = this.props;
     const {
       isOutsideRange,
+      isDayBlocked,
       minimumNights,
       onDatesChange,
       onFocusChange,
@@ -220,7 +224,7 @@ export default class DateRangePickerInputController extends React.PureComponent
     const isEndDateBeforeStartDate = startDate
       && isBeforeDay(endDate, startDate.clone().add(minimumNights, 'days'));
     const isStartDateValid = startDate
-      && !isOutsideRange(startDate)
+      && !isOutsideRange(startDate) && !isDayBlocked(startDate)
       && !(disabled === END_DATE && isEndDateBeforeStartDate);
 
     if (isStartDateValid) {
diff --git a/src/components/DayPickerKeyboardShortcuts.jsx b/src/components/DayPickerKeyboardShortcuts.jsx
index 7e9b70014a..4c4f4e2174 100644
--- a/src/components/DayPickerKeyboardShortcuts.jsx
+++ b/src/components/DayPickerKeyboardShortcuts.jsx
@@ -214,7 +214,7 @@ class DayPickerKeyboardShortcuts extends React.PureComponent {
                 topLeft && styles.DayPickerKeyboardShortcuts_showSpan__topLeft,
               )}
             >
-            ?
+              ?
             </span>
           </button>
         )}
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index 275736d1c9..656dc6566f 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -569,6 +569,7 @@ class SingleDatePicker extends React.PureComponent {
       keepOpenOnDateSelect,
       styles,
       isOutsideRange,
+      isDayBlocked,
     } = this.props;
 
     const { isInputFocused } = this.state;
@@ -593,6 +594,7 @@ class SingleDatePicker extends React.PureComponent {
         showDefaultInputIcon={showDefaultInputIcon}
         inputIconPosition={inputIconPosition}
         isOutsideRange={isOutsideRange}
+        isDayBlocked={isDayBlocked}
         customCloseIcon={customCloseIcon}
         customInputIcon={customInputIcon}
         date={date}
diff --git a/src/components/SingleDatePickerInputController.jsx b/src/components/SingleDatePickerInputController.jsx
index 2da008ee16..ac65adcd54 100644
--- a/src/components/SingleDatePickerInputController.jsx
+++ b/src/components/SingleDatePickerInputController.jsx
@@ -54,6 +54,7 @@ const propTypes = forbidExtraProps({
   keepOpenOnDateSelect: PropTypes.bool,
   reopenPickerOnClearDate: PropTypes.bool,
   isOutsideRange: PropTypes.func,
+  isDayBlocked: PropTypes.func,
   displayFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
 
   onClose: PropTypes.func,
@@ -98,6 +99,7 @@ const defaultProps = {
   keepOpenOnDateSelect: false,
   reopenPickerOnClearDate: false,
   isOutsideRange: (day) => !isInclusivelyAfterDay(day, moment()),
+  isDayBlocked: () => false,
   displayFormat: () => moment.localeData().longDateFormat('L'),
 
   onClose() {},
@@ -129,6 +131,7 @@ export default class SingleDatePickerInputController extends React.PureComponent
   onChange(dateString) {
     const {
       isOutsideRange,
+      isDayBlocked,
       keepOpenOnDateSelect,
       onDateChange,
       onFocusChange,
@@ -136,7 +139,7 @@ export default class SingleDatePickerInputController extends React.PureComponent
     } = this.props;
     const newDate = toMomentObject(dateString, this.getDisplayFormat());
 
-    const isValid = newDate && !isOutsideRange(newDate);
+    const isValid = newDate && !isOutsideRange(newDate) && !isDayBlocked(newDate);
     if (isValid) {
       onDateChange(newDate);
       if (!keepOpenOnDateSelect) {
diff --git a/test/components/DateRangePickerInputController_spec.jsx b/test/components/DateRangePickerInputController_spec.jsx
index 779450d8ec..a9b6566912 100644
--- a/test/components/DateRangePickerInputController_spec.jsx
+++ b/test/components/DateRangePickerInputController_spec.jsx
@@ -432,6 +432,37 @@ describe('DateRangePickerInputController', () => {
       });
     });
 
+    describe('is blocked', () => {
+      const futureDate = moment().add(7, 'days').format('DD/MM/YYYY');
+      const isDayBlocked = sinon.stub().returns(true);
+
+      it('calls props.onDatesChange', () => {
+        const onDatesChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <DateRangePickerInputController
+            onDatesChange={onDatesChangeStub}
+            isDayBlocked={isDayBlocked}
+          />
+        ));
+        wrapper.instance().onEndDateChange(futureDate);
+        expect(onDatesChangeStub.callCount).to.equal(1);
+      });
+
+      it('calls props.onDatesChange with endDate === null', () => {
+        const onDatesChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <DateRangePickerInputController
+            onDatesChange={onDatesChangeStub}
+            startDate={today}
+            isDayBlocked={isDayBlocked}
+          />
+        ));
+        wrapper.instance().onEndDateChange(futureDate);
+        const args = onDatesChangeStub.getCall(0).args[0];
+        expect(args.endDate).to.equal(null);
+      });
+    });
+
     describe('is inclusively before state.startDate', () => {
       const startDate = moment(today).add(10, 'days');
       const beforeStartDateString = today.toISOString();
@@ -720,7 +751,7 @@ describe('DateRangePickerInputController', () => {
     });
 
     describe('is outside range', () => {
-      const futureDate = moment().add(7, 'days').toISOString();
+      const futureDate = moment().add(7, 'days').format('DD/MM/YYYY');
       const isOutsideRange = (day) => day > moment().add(5, 'days');
 
       it('calls props.onDatesChange', () => {
@@ -763,6 +794,37 @@ describe('DateRangePickerInputController', () => {
         expect(args.endDate).to.equal(today);
       });
     });
+
+    describe('is blocked', () => {
+      const futureDate = moment().add(7, 'days').format('DD/MM/YYYY');
+      const isDayBlocked = sinon.stub().returns(true);
+
+      it('calls props.onDatesChange', () => {
+        const onDatesChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <DateRangePickerInputController
+            onDatesChange={onDatesChangeStub}
+            isDayBlocked={isDayBlocked}
+          />
+        ));
+        wrapper.instance().onStartDateChange(futureDate);
+        expect(onDatesChangeStub.callCount).to.equal(1);
+      });
+
+      it('calls props.onDatesChange with startDate === null', () => {
+        const onDatesChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <DateRangePickerInputController
+            onDatesChange={onDatesChangeStub}
+            startDate={today}
+            isDayBlocked={isDayBlocked}
+          />
+        ));
+        wrapper.instance().onStartDateChange(futureDate);
+        const args = onDatesChangeStub.getCall(0).args[0];
+        expect(args.startDate).to.equal(null);
+      });
+    });
   });
 
   describe('#onStartDateFocus', () => {
diff --git a/test/components/DateRangePicker_spec.jsx b/test/components/DateRangePicker_spec.jsx
index deadee3453..e08f19c0f9 100644
--- a/test/components/DateRangePicker_spec.jsx
+++ b/test/components/DateRangePicker_spec.jsx
@@ -110,6 +110,16 @@ describe('DateRangePicker', () => {
       });
     });
 
+    describe('props.isDayBlocked is defined', () => {
+      it('should pass props.isDayBlocked to <DateRangePickerInputController>', () => {
+        const isDayBlocked = sinon.stub();
+        const wrapper = shallow((
+          <DateRangePicker {...requiredProps} isDayBlocked={isDayBlocked} />
+        )).dive();
+        expect(wrapper.find(DateRangePickerInputController).prop('isDayBlocked')).to.equal(isDayBlocked);
+      });
+    });
+
     describe('props.appendToBody', () => {
       it('renders <DayPickerRangeController> inside <Portal>', () => {
         const wrapper = shallow((
diff --git a/test/components/SingleDatePickerInputController_spec.jsx b/test/components/SingleDatePickerInputController_spec.jsx
index af304dc712..4e6407934c 100644
--- a/test/components/SingleDatePickerInputController_spec.jsx
+++ b/test/components/SingleDatePickerInputController_spec.jsx
@@ -203,7 +203,7 @@ describe('SingleDatePickerInputController', () => {
 
     describe('date string outside range', () => {
       const isOutsideRangeStub = sinon.stub().returns(true);
-      const todayDateString = today.toISOString();
+      const todayDateString = today.format('DD/MM/YYYY');
 
       it('calls props.onDateChange once', () => {
         const onDateChangeStub = sinon.stub();
@@ -247,6 +247,39 @@ describe('SingleDatePickerInputController', () => {
         expect(onFocusChangeStub.callCount).to.equal(0);
       });
     });
+
+    describe('date string is blocked', () => {
+      const isDayBlocked = sinon.stub().returns(true);
+      const todayDateString = today.format('DD/MM/YYYY');
+
+      it('calls props.onDateChange once', () => {
+        const onDateChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <SingleDatePickerInputController
+            id="date"
+            onDateChange={onDateChangeStub}
+            onFocusChange={() => {}}
+            isDayBlocked={isDayBlocked}
+          />
+        ));
+        wrapper.instance().onChange(todayDateString);
+        expect(onDateChangeStub.callCount).to.equal(1);
+      });
+
+      it('calls props.onDateChange with null as arg', () => {
+        const onDateChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <SingleDatePickerInputController
+            id="date"
+            onDateChange={onDateChangeStub}
+            onFocusChange={() => {}}
+            isDayBlocked={isDayBlocked}
+          />
+        ));
+        wrapper.instance().onChange(todayDateString);
+        expect(onDateChangeStub.getCall(0).args[0]).to.equal(null);
+      });
+    });
   });
 
   describe('#onFocus', () => {
diff --git a/test/components/SingleDatePicker_spec.jsx b/test/components/SingleDatePicker_spec.jsx
index 3b05e5e421..bd2ddff8e0 100644
--- a/test/components/SingleDatePicker_spec.jsx
+++ b/test/components/SingleDatePicker_spec.jsx
@@ -56,6 +56,21 @@ describe('SingleDatePicker', () => {
           expect(wrapper.find(SingleDatePickerInputController).prop('isOutsideRange')).to.equal(isOutsideRange);
         });
       });
+
+      describe('props.isDayBlocked is defined', () => {
+        it('should pass props.isDayBlocked to <SingleDatePickerInputController>', () => {
+          const isDayBlocked = sinon.stub();
+          const wrapper = shallow((
+            <SingleDatePicker
+              id="date"
+              onDateChange={() => {}}
+              onFocusChange={() => {}}
+              isDayBlocked={isDayBlocked}
+            />
+          )).dive();
+          expect(wrapper.find(SingleDatePickerInputController).prop('isDayBlocked')).to.equal(isDayBlocked);
+        });
+      });
     });
 
     describe('DayPickerSingleDateController', () => {

From 927fb93091f84393301b857bdb8b9d7c4aa00081 Mon Sep 17 00:00:00 2001
From: mmarkelov <maks-markel@mail.ru>
Date: Thu, 18 Jul 2019 10:09:03 +0300
Subject: [PATCH 565/618] [New] Add minDate and maxDate support to
 SingleDatePicker, DayPickerSingleDateController

Co-authored-by: mmarkelov <maks-markel@mail.ru>
Co-authored-by: Stephen <stephencweiss@gmail.com>

Fixes #1632. Closes #1727.
---
 .../DayPickerSingleDateController.jsx         | 48 +++++++++++++-
 src/components/SingleDatePicker.jsx           |  6 ++
 src/shapes/SingleDatePickerShape.js           |  2 +
 stories/SingleDatePicker.js                   | 19 ++++++
 .../DayPickerSingleDateController_spec.jsx    | 66 +++++++++++++++++++
 5 files changed, 138 insertions(+), 3 deletions(-)

diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 480132891b..89be9f6ed8 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -11,6 +11,7 @@ import getPhrasePropTypes from '../utils/getPhrasePropTypes';
 
 import isSameDay from '../utils/isSameDay';
 import isAfterDay from '../utils/isAfterDay';
+import isDayVisible from '../utils/isDayVisible';
 
 import getVisibleDays from '../utils/getVisibleDays';
 
@@ -35,6 +36,8 @@ import getPooledMoment from '../utils/getPooledMoment';
 
 const propTypes = forbidExtraProps({
   date: momentPropTypes.momentObj,
+  minDate: momentPropTypes.momentObj,
+  maxDate: momentPropTypes.momentObj,
   onDateChange: PropTypes.func,
 
   focused: PropTypes.bool,
@@ -100,6 +103,8 @@ const propTypes = forbidExtraProps({
 
 const defaultProps = {
   date: undefined, // TODO: use null
+  minDate: null,
+  maxDate: null,
   onDateChange() {},
 
   focused: false,
@@ -190,6 +195,8 @@ export default class DayPickerSingleDateController extends React.PureComponent {
       hoverDate: null,
       currentMonth,
       visibleDays,
+      disablePrev: this.shouldDisableMonthNavigation(props.minDate, currentMonth),
+      disableNext: this.shouldDisableMonthNavigation(props.maxDate, currentMonth),
     };
 
     this.onDayMouseEnter = this.onDayMouseEnter.bind(this);
@@ -390,7 +397,13 @@ export default class DayPickerSingleDateController extends React.PureComponent {
   }
 
   onPrevMonthClick() {
-    const { onPrevMonthClick, numberOfMonths, enableOutsideDays } = this.props;
+    const {
+      enableOutsideDays,
+      maxDate,
+      minDate,
+      numberOfMonths,
+      onPrevMonthClick,
+    } = this.props;
     const { currentMonth, visibleDays } = this.state;
 
     const newVisibleDays = {};
@@ -400,9 +413,12 @@ export default class DayPickerSingleDateController extends React.PureComponent {
 
     const prevMonth = currentMonth.clone().subtract(1, 'month');
     const prevMonthVisibleDays = getVisibleDays(prevMonth, 1, enableOutsideDays);
+    const newCurrentMonth = currentMonth.clone().subtract(1, 'month');
 
     this.setState({
       currentMonth: prevMonth,
+      disablePrev: this.shouldDisableMonthNavigation(minDate, newCurrentMonth),
+      disableNext: this.shouldDisableMonthNavigation(maxDate, newCurrentMonth),
       visibleDays: {
         ...newVisibleDays,
         ...this.getModifiers(prevMonthVisibleDays),
@@ -413,7 +429,13 @@ export default class DayPickerSingleDateController extends React.PureComponent {
   }
 
   onNextMonthClick() {
-    const { onNextMonthClick, numberOfMonths, enableOutsideDays } = this.props;
+    const {
+      enableOutsideDays,
+      maxDate,
+      minDate,
+      numberOfMonths,
+      onNextMonthClick,
+    } = this.props;
     const { currentMonth, visibleDays } = this.state;
 
     const newVisibleDays = {};
@@ -427,6 +449,8 @@ export default class DayPickerSingleDateController extends React.PureComponent {
     const newCurrentMonth = currentMonth.clone().add(1, 'month');
     this.setState({
       currentMonth: newCurrentMonth,
+      disablePrev: this.shouldDisableMonthNavigation(minDate, newCurrentMonth),
+      disableNext: this.shouldDisableMonthNavigation(maxDate, newCurrentMonth),
       visibleDays: {
         ...newVisibleDays,
         ...this.getModifiers(nextMonthVisibleDays),
@@ -564,6 +588,17 @@ export default class DayPickerSingleDateController extends React.PureComponent {
     return { currentMonth, visibleDays };
   }
 
+  shouldDisableMonthNavigation(date, visibleMonth) {
+    if (!date) return false;
+
+    const {
+      numberOfMonths,
+      enableOutsideDays,
+    } = this.props;
+
+    return isDayVisible(date, visibleMonth, numberOfMonths, enableOutsideDays);
+  }
+
   addModifier(updatedDays, day, modifier) {
     return addModifier(updatedDays, day, modifier, this.props, this.state);
   }
@@ -645,7 +680,12 @@ export default class DayPickerSingleDateController extends React.PureComponent {
       horizontalMonthPadding,
     } = this.props;
 
-    const { currentMonth, visibleDays } = this.state;
+    const {
+      currentMonth,
+      disableNext,
+      disablePrev,
+      visibleDays,
+    } = this.state;
 
     return (
       <DayPicker
@@ -671,6 +711,8 @@ export default class DayPickerSingleDateController extends React.PureComponent {
         onOutsideClick={onOutsideClick}
         dayPickerNavigationInlineStyles={dayPickerNavigationInlineStyles}
         navPosition={navPosition}
+        disablePrev={disablePrev}
+        disableNext={disableNext}
         navPrev={navPrev}
         navNext={navNext}
         renderNavPrevButton={renderNavPrevButton}
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index 656dc6566f..cbb8f11c7a 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -45,6 +45,8 @@ const defaultProps = {
   // required props for a functional interactive SingleDatePicker
   date: null,
   focused: false,
+  minDate: null,
+  maxDate: null,
 
   // input related props
   id: 'date',
@@ -393,6 +395,8 @@ class SingleDatePicker extends React.PureComponent {
       openDirection,
       onDateChange,
       date,
+      minDate,
+      maxDate,
       onFocusChange,
       focused,
       enableOutsideDays,
@@ -475,6 +479,8 @@ class SingleDatePicker extends React.PureComponent {
       >
         <DayPickerSingleDateController
           date={date}
+          minDate={minDate}
+          maxDate={maxDate}
           onDateChange={onDateChange}
           onFocusChange={onFocusChange}
           orientation={orientation}
diff --git a/src/shapes/SingleDatePickerShape.js b/src/shapes/SingleDatePickerShape.js
index 70a13f6e97..04a31fadff 100644
--- a/src/shapes/SingleDatePickerShape.js
+++ b/src/shapes/SingleDatePickerShape.js
@@ -86,6 +86,8 @@ export default {
   isDayBlocked: PropTypes.func,
   isOutsideRange: PropTypes.func,
   isDayHighlighted: PropTypes.func,
+  minDate: momentPropTypes.momentObj,
+  maxDate: momentPropTypes.momentObj,
 
   // internationalization props
   displayFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
diff --git a/stories/SingleDatePicker.js b/stories/SingleDatePicker.js
index 4b417ce0bc..81ad053090 100644
--- a/stories/SingleDatePicker.js
+++ b/stories/SingleDatePicker.js
@@ -4,6 +4,8 @@ import momentJalaali from 'moment-jalaali';
 import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
 import DirectionProvider, { DIRECTIONS } from 'react-with-direction/dist/DirectionProvider';
+import isInclusivelyBeforeDay from '../src/utils/isInclusivelyBeforeDay';
+import isInclusivelyAfterDay from '../src/utils/isInclusivelyAfterDay';
 
 import {
   VERTICAL_ORIENTATION,
@@ -74,6 +76,23 @@ storiesOf('SingleDatePicker (SDP)', module)
       />
     </DirectionProvider>
   )))
+  .add('with custom month navigation and blocked navigation (minDate and maxDate)', withInfo()(() => (
+    <SingleDatePickerWrapper
+      minDate={moment().subtract(2, 'months').startOf('month')}
+      maxDate={moment().add(2, 'months').endOf('month')}
+    />
+  )))
+  .add('with custom isOutsideRange and month navigation and blocked navigation (minDate and maxDate)', withInfo()(() => {
+    const minDate = moment().subtract(2, 'months').startOf('month')
+    const maxDate = moment().add(2, 'months').endOf('month')
+    const isOutsideRange = day => isInclusivelyBeforeDay(day, minDate) || isInclusivelyAfterDay(day, maxDate)
+    return (
+    <SingleDatePickerWrapper
+      minDate={minDate}
+      maxDate={maxDate}
+      isOutsideRange={isOutsideRange}
+    />
+  )}))
   .add('vertical with custom height', withInfo()(() => (
     <SingleDatePickerWrapper
       orientation={VERTICAL_ORIENTATION}
diff --git a/test/components/DayPickerSingleDateController_spec.jsx b/test/components/DayPickerSingleDateController_spec.jsx
index 802f35fb03..3a55baa0d7 100644
--- a/test/components/DayPickerSingleDateController_spec.jsx
+++ b/test/components/DayPickerSingleDateController_spec.jsx
@@ -762,6 +762,72 @@ describe('DayPickerSingleDateController', () => {
       expect(onPrevMonthClickStub.firstCall.args[0].year()).to.equal(newMonth.year());
       expect(onPrevMonthClickStub.firstCall.args[0].month()).to.equal(newMonth.month());
     });
+
+    it('calls this.shouldDisableMonthNavigation twice', () => {
+      const shouldDisableMonthNavigationSpy = sinon.spy(DayPickerSingleDateController.prototype, 'shouldDisableMonthNavigation');
+      const wrapper = shallow((
+        <DayPickerSingleDateController
+          onDatesChange={sinon.stub()}
+          onFocusChange={sinon.stub()}
+        />
+      ));
+      shouldDisableMonthNavigationSpy.resetHistory();
+      wrapper.instance().onPrevMonthClick();
+      expect(shouldDisableMonthNavigationSpy).to.have.property('callCount', 2);
+    });
+
+    it('sets disablePrev and disablePrev as false on onPrevMonthClick call withouth maxDate and minDate set', () => {
+      const numberOfMonths = 2;
+      const wrapper = shallow((
+        <DayPickerSingleDateController
+          onDatesChange={sinon.stub()}
+          onFocusChange={sinon.stub()}
+          numberOfMonths={numberOfMonths}
+        />
+      ));
+      wrapper.setState({
+        currentMonth: today,
+      });
+      wrapper.instance().onPrevMonthClick();
+      expect(wrapper.state()).to.have.property('disablePrev', false);
+      expect(wrapper.state()).to.have.property('disableNext', false);
+    });
+
+    it('sets disableNext as true when maxDate is in visible month', () => {
+      const numberOfMonths = 2;
+      const wrapper = shallow((
+        <DayPickerSingleDateController
+          onDatesChange={sinon.stub()}
+          onFocusChange={sinon.stub()}
+          numberOfMonths={numberOfMonths}
+          maxDate={today}
+        />
+      ));
+      wrapper.setState({
+        currentMonth: today,
+      });
+      wrapper.instance().onPrevMonthClick();
+      expect(wrapper.state()).to.have.property('disablePrev', false);
+      expect(wrapper.state()).to.have.property('disableNext', true);
+    });
+
+    it('sets disablePrev as true when minDate is in visible month', () => {
+      const numberOfMonths = 2;
+      const wrapper = shallow((
+        <DayPickerSingleDateController
+          onDatesChange={sinon.stub()}
+          onFocusChange={sinon.stub()}
+          numberOfMonths={numberOfMonths}
+          minDate={today.clone().subtract(1, 'month')}
+        />
+      ));
+      wrapper.setState({
+        currentMonth: today,
+      });
+      wrapper.instance().onPrevMonthClick();
+      expect(wrapper.state()).to.have.property('disablePrev', true);
+      expect(wrapper.state()).to.have.property('disableNext', false);
+    });
   });
 
   describe('#onNextMonthClick', () => {

From bc0e051478963817c66d7e437854a093362aec22 Mon Sep 17 00:00:00 2001
From: Ian MacIntosh <ianjmacintosh@gmail.com>
Date: Fri, 6 Mar 2020 17:38:07 -0600
Subject: [PATCH 566/618] Update docs with an alternative installer command

Since the primarily recommended command doesn't work on Windows,
@ljharb provided a `npx` command that is platform-agnostic for
contributors running npm 5+

Also made it more clear that the "primarily recommended command" should
be run from the command line.
---
 README.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 524783951e..397366af28 100644
--- a/README.md
+++ b/README.md
@@ -26,7 +26,7 @@ To run that demo on your own computer:
 
 ## Getting Started
 ### Install dependencies
-Ensure packages are installed with correct version numbers by running:
+Ensure packages are installed with correct version numbers by running (from your command line):
   ```sh
   (
     export PKG=react-dates;
@@ -40,6 +40,8 @@ Ensure packages are installed with correct version numbers by running:
   npm install --save react-dates moment@>=#.## react@>=#.## react-dom@>=#.##
   ```
 
+  > If you are running Windows, that command will not work, but if you are running npm 5 or higher, you can run `npx install-peerdeps react-dates` on any platform
+
 ### Initialize
 ```js
 import 'react-dates/initialize';

From 0b1c7eee0aa151592695378251427134668f1e0c Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Wed, 15 Jul 2020 22:08:22 -0700
Subject: [PATCH 567/618] [eslint] fix linting errors

---
 src/components/CalendarMonth.jsx                   | 1 -
 src/components/CalendarMonthGrid.jsx               | 1 -
 src/components/DateRangePickerInput.jsx            | 1 -
 src/components/DayPickerRangeController.jsx        | 1 -
 src/components/SingleDatePickerInputController.jsx | 1 -
 test/components/DateRangePickerInput_spec.jsx      | 1 -
 test/components/DateRangePicker_spec.jsx           | 1 -
 test/components/DayPickerRangeController_spec.jsx  | 1 -
 test/components/DayPicker_spec.jsx                 | 2 --
 test/components/SingleDatePicker_spec.jsx          | 1 -
 10 files changed, 11 deletions(-)

diff --git a/src/components/CalendarMonth.jsx b/src/components/CalendarMonth.jsx
index 226918b433..0c9002fbf2 100644
--- a/src/components/CalendarMonth.jsx
+++ b/src/components/CalendarMonth.jsx
@@ -22,7 +22,6 @@ import ModifiersShape from '../shapes/ModifiersShape';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
 
-
 import {
   HORIZONTAL_ORIENTATION,
   VERTICAL_SCROLLABLE,
diff --git a/src/components/CalendarMonthGrid.jsx b/src/components/CalendarMonthGrid.jsx
index 7ade948e44..073d260458 100644
--- a/src/components/CalendarMonthGrid.jsx
+++ b/src/components/CalendarMonthGrid.jsx
@@ -23,7 +23,6 @@ import ModifiersShape from '../shapes/ModifiersShape';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 import DayOfWeekShape from '../shapes/DayOfWeekShape';
 
-
 import {
   HORIZONTAL_ORIENTATION,
   VERTICAL_ORIENTATION,
diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index 2389595852..aa4bae5cd0 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -281,7 +281,6 @@ function DateRangePickerInput({
         regular={regular}
       />
 
-
       {showClearDates && (
         <button
           type="button"
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 6ceab45ad3..87c61f0544 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -898,7 +898,6 @@ export default class DayPickerRangeController extends React.PureComponent {
       }
     }
 
-
     this.setState({
       hoverDate: null,
       visibleDays: {
diff --git a/src/components/SingleDatePickerInputController.jsx b/src/components/SingleDatePickerInputController.jsx
index ac65adcd54..67f09f9072 100644
--- a/src/components/SingleDatePickerInputController.jsx
+++ b/src/components/SingleDatePickerInputController.jsx
@@ -151,7 +151,6 @@ export default class SingleDatePickerInputController extends React.PureComponent
     }
   }
 
-
   onFocus() {
     const {
       onFocusChange,
diff --git a/test/components/DateRangePickerInput_spec.jsx b/test/components/DateRangePickerInput_spec.jsx
index ef049df422..65274e2d23 100644
--- a/test/components/DateRangePickerInput_spec.jsx
+++ b/test/components/DateRangePickerInput_spec.jsx
@@ -145,7 +145,6 @@ describe('DateRangePickerInput', () => {
       });
     });
 
-
     describe('props.disabled=false', () => {
       it('First DateInput gets disabled prop, second does not', () => {
         const wrapper = shallow(<DateRangePickerInput disabled={false} />).dive();
diff --git a/test/components/DateRangePicker_spec.jsx b/test/components/DateRangePicker_spec.jsx
index e08f19c0f9..0ae715d888 100644
--- a/test/components/DateRangePicker_spec.jsx
+++ b/test/components/DateRangePicker_spec.jsx
@@ -593,7 +593,6 @@ describe('DateRangePicker', () => {
       expect(onOutsideClick.callCount).to.equal(1);
     });
 
-
     it('tabbing within itself does not behave as an outside click', () => {
       const target = sinon.stub();
       const onOutsideClick = sinon.stub();
diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index 4d28220d1c..f530b93f83 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -1651,7 +1651,6 @@ describe('DayPickerRangeController', () => {
           });
         });
 
-
         describe('start date has changed, and end date or previous end date are falsey', () => {
           it('calls deleteModifier with `selected-start-no-selected-end`', () => {
             const deleteModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifier');
diff --git a/test/components/DayPicker_spec.jsx b/test/components/DayPicker_spec.jsx
index 4a8f119c9d..285ad70844 100644
--- a/test/components/DayPicker_spec.jsx
+++ b/test/components/DayPicker_spec.jsx
@@ -18,7 +18,6 @@ import {
   NAV_POSITION_BOTTOM,
 } from '../../src/constants';
 
-
 const today = moment().locale('en');
 const event = { preventDefault() {}, stopPropagation() {} };
 
@@ -514,7 +513,6 @@ describe('DayPicker', () => {
       });
     });
 
-
     describe('focusedDate is falsy', () => {
       it('does not call maybeTransitionPrevMonth', () => {
         const maybeTransitionPrevMonthSpy = sinon.spy(PureDayPicker.prototype, 'maybeTransitionPrevMonth');
diff --git a/test/components/SingleDatePicker_spec.jsx b/test/components/SingleDatePicker_spec.jsx
index bd2ddff8e0..05f2a217bd 100644
--- a/test/components/SingleDatePicker_spec.jsx
+++ b/test/components/SingleDatePicker_spec.jsx
@@ -376,7 +376,6 @@ describe('SingleDatePicker', () => {
       expect(onDayPickerFocusSpy.callCount).to.equal(1);
     });
 
-
     it('calls onDayPickerFocus if readOnly and keepFocusOnInput', () => {
       const wrapper = shallow((
         <SingleDatePicker

From 4d859319440e600a3872c5cc80e4a0302aa02ca3 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Wed, 15 Jul 2020 22:21:33 -0700
Subject: [PATCH 568/618] [Tests] tiny coverage bump

---
 test/components/DateRangePicker_spec.jsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/test/components/DateRangePicker_spec.jsx b/test/components/DateRangePicker_spec.jsx
index 0ae715d888..f5bf0919c1 100644
--- a/test/components/DateRangePicker_spec.jsx
+++ b/test/components/DateRangePicker_spec.jsx
@@ -118,6 +118,13 @@ describe('DateRangePicker', () => {
         )).dive();
         expect(wrapper.find(DateRangePickerInputController).prop('isDayBlocked')).to.equal(isDayBlocked);
       });
+
+      it('is a noop when omitted', () => {
+        const wrapper = shallow((
+          <DateRangePicker {...requiredProps} />
+        )).dive();
+        expect(wrapper.find(DateRangePickerInputController).prop('isDayBlocked')).not.to.throw();
+      });
     });
 
     describe('props.appendToBody', () => {

From 5b29610dba5a00c0e61ac6c84ea58f0991690d4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= <info@michaeldeboey.be>
Date: Wed, 15 Jul 2020 01:39:18 +0200
Subject: [PATCH 569/618] [Tests] add node 14

---
 .travis.yml | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index 40af3ca812..b55536c174 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,9 +1,10 @@
 language: node_js
 node_js:
-  - "12"
-  - "10"
-  - "8"
-  - "6"
+  - 14
+  - 12
+  - 10
+  - 8
+  - 6
 before_install:
   - 'nvm install-latest-npm'
 services:

From 35766d6d17ec36704af0e9ab109a1f84205a9f4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= <info@michaeldeboey.be>
Date: Wed, 15 Jul 2020 01:39:47 +0200
Subject: [PATCH 570/618] [meta] add "engines"

---
 package.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/package.json b/package.json
index 52465e94f8..f86500c6da 100644
--- a/package.json
+++ b/package.json
@@ -142,5 +142,8 @@
       "mocha",
       "webpack"
     ]
+  },
+  "engines": {
+    "node": ">=0.10"
   }
 }

From 2b8089bc6ae565eea87d69880cee9b9097b04434 Mon Sep 17 00:00:00 2001
From: Vincent Astolfi <astolfivincent@gmail.com>
Date: Wed, 13 Nov 2019 10:39:58 -0600
Subject: [PATCH 571/618] [New]
 `{DateRangePicker,SingleDatePicker}{,Input,InputController}`: add title text
 props

Fixes #1861.
---
 README.md                                          |  3 +++
 src/components/DateInput.jsx                       |  4 ++++
 src/components/DateRangePicker.jsx                 |  6 ++++++
 src/components/DateRangePickerInput.jsx            |  8 ++++++++
 src/components/DateRangePickerInputController.jsx  |  8 ++++++++
 src/components/SingleDatePicker.jsx                |  3 +++
 src/components/SingleDatePickerInput.jsx           |  4 ++++
 src/components/SingleDatePickerInputController.jsx |  4 ++++
 src/shapes/DateRangePickerShape.js                 |  2 ++
 src/shapes/SingleDatePickerShape.js                |  1 +
 stories/DateRangePicker_input.js                   |  8 ++++++++
 stories/SingleDatePicker_input.js                  |  6 ++++++
 test/components/DateInput_spec.jsx                 | 11 +++++++++++
 13 files changed, 68 insertions(+)

diff --git a/README.md b/README.md
index 397366af28..f3a23ef153 100644
--- a/README.md
+++ b/README.md
@@ -142,6 +142,8 @@ startDatePlaceholderText: PropTypes.string,
 endDatePlaceholderText: PropTypes.string,
 startDateAriaLabel: PropTypes.string,
 endDateAriaLabel: PropTypes.string,
+startDateTitleText: PropTypes.string,
+endDateTitleText: PropTypes.string,
 disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([START_DATE, END_DATE])]),
 required: PropTypes.bool,
 readOnly: PropTypes.bool,
@@ -228,6 +230,7 @@ The following is a list of other *OPTIONAL* props you may provide to the `Single
 // input related props
 placeholder: PropTypes.string,
 ariaLabel: PropTypes.string,
+titleText: PropTypes.string,
 disabled: PropTypes.bool,
 required: PropTypes.bool,
 readOnly: PropTypes.bool,
diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
index 93158f319e..8a3467105f 100644
--- a/src/components/DateInput.jsx
+++ b/src/components/DateInput.jsx
@@ -29,6 +29,7 @@ const propTypes = forbidExtraProps({
   placeholder: PropTypes.string,
   displayValue: PropTypes.string,
   ariaLabel: PropTypes.string,
+  titleText: PropTypes.string,
   screenReaderMessage: PropTypes.string,
   focused: PropTypes.bool,
   disabled: PropTypes.bool,
@@ -57,6 +58,7 @@ const defaultProps = {
   placeholder: 'Select Date',
   displayValue: '',
   ariaLabel: undefined,
+  titleText: undefined,
   screenReaderMessage: '',
   focused: false,
   disabled: false,
@@ -175,6 +177,7 @@ class DateInput extends React.PureComponent {
       id,
       placeholder,
       ariaLabel,
+      titleText,
       displayValue,
       screenReaderMessage,
       focused,
@@ -221,6 +224,7 @@ class DateInput extends React.PureComponent {
             disabled && styles.DateInput_input__disabled,
           )}
           aria-label={ariaLabel === undefined ? placeholder : ariaLabel}
+          title={titleText}
           type="text"
           id={id}
           name={id}
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 7d6fc4988d..b88ba446b6 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -54,6 +54,8 @@ const defaultProps = {
   endDatePlaceholderText: 'End Date',
   startDateAriaLabel: undefined,
   endDateAriaLabel: undefined,
+  startDateTitleText: undefined,
+  endDateTitleText: undefined,
   startDateOffset: undefined,
   endDateOffset: undefined,
   disabled: false,
@@ -572,10 +574,12 @@ class DateRangePicker extends React.PureComponent {
       startDateId,
       startDatePlaceholderText,
       startDateAriaLabel,
+      startDateTitleText,
       endDate,
       endDateId,
       endDatePlaceholderText,
       endDateAriaLabel,
+      endDateTitleText,
       focusedInput,
       screenReaderInputMessage,
       showClearDates,
@@ -621,11 +625,13 @@ class DateRangePicker extends React.PureComponent {
         startDatePlaceholderText={startDatePlaceholderText}
         isStartDateFocused={focusedInput === START_DATE}
         startDateAriaLabel={startDateAriaLabel}
+        startDateTitleText={startDateTitleText}
         endDate={endDate}
         endDateId={endDateId}
         endDatePlaceholderText={endDatePlaceholderText}
         isEndDateFocused={focusedInput === END_DATE}
         endDateAriaLabel={endDateAriaLabel}
+        endDateTitleText={endDateTitleText}
         displayFormat={displayFormat}
         showClearDates={showClearDates}
         showCaret={!withPortal && !withFullScreenPortal && !hideFang}
diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index aa4bae5cd0..92407bdaf7 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -33,11 +33,13 @@ const propTypes = forbidExtraProps({
   startDateId: PropTypes.string,
   startDatePlaceholderText: PropTypes.string,
   startDateAriaLabel: PropTypes.string,
+  startDateTitleText: PropTypes.string,
   screenReaderMessage: PropTypes.string,
 
   endDateId: PropTypes.string,
   endDatePlaceholderText: PropTypes.string,
   endDateAriaLabel: PropTypes.string,
+  endDateTitleText: PropTypes.string,
 
   onStartDateFocus: PropTypes.func,
   onEndDateFocus: PropTypes.func,
@@ -88,6 +90,8 @@ const defaultProps = {
   endDatePlaceholderText: 'End Date',
   startDateAriaLabel: undefined,
   endDateAriaLabel: undefined,
+  startDateTitleText: undefined,
+  endDateTitleText: undefined,
   screenReaderMessage: '',
   onStartDateFocus() {},
   onEndDateFocus() {},
@@ -141,6 +145,7 @@ function DateRangePickerInput({
   onStartDateFocus,
   onStartDateShiftTab,
   startDateAriaLabel,
+  startDateTitleText,
   endDate,
   endDateId,
   endDatePlaceholderText,
@@ -149,6 +154,7 @@ function DateRangePickerInput({
   onEndDateFocus,
   onEndDateTab,
   endDateAriaLabel,
+  endDateTitleText,
   onKeyDownArrowDown,
   onKeyDownQuestionMark,
   onClearDates,
@@ -227,6 +233,7 @@ function DateRangePickerInput({
         id={startDateId}
         placeholder={startDatePlaceholderText}
         ariaLabel={startDateAriaLabel}
+        titleText={startDateTitleText}
         displayValue={startDate}
         screenReaderMessage={screenReaderStartDateText}
         focused={isStartDateFocused}
@@ -262,6 +269,7 @@ function DateRangePickerInput({
         id={endDateId}
         placeholder={endDatePlaceholderText}
         ariaLabel={endDateAriaLabel}
+        titleText={endDateTitleText}
         displayValue={endDate}
         screenReaderMessage={screenReaderEndDateText}
         focused={isEndDateFocused}
diff --git a/src/components/DateRangePickerInputController.jsx b/src/components/DateRangePickerInputController.jsx
index 8eda984b53..d644b55037 100644
--- a/src/components/DateRangePickerInputController.jsx
+++ b/src/components/DateRangePickerInputController.jsx
@@ -35,12 +35,14 @@ const propTypes = forbidExtraProps({
   startDatePlaceholderText: PropTypes.string,
   isStartDateFocused: PropTypes.bool,
   startDateAriaLabel: PropTypes.string,
+  startDateTitleText: PropTypes.string,
 
   endDate: momentPropTypes.momentObj,
   endDateId: PropTypes.string,
   endDatePlaceholderText: PropTypes.string,
   isEndDateFocused: PropTypes.bool,
   endDateAriaLabel: PropTypes.string,
+  endDateTitleText: PropTypes.string,
 
   screenReaderMessage: PropTypes.string,
   showClearDates: PropTypes.bool,
@@ -92,12 +94,14 @@ const defaultProps = {
   startDatePlaceholderText: 'Start Date',
   isStartDateFocused: false,
   startDateAriaLabel: undefined,
+  startDateTitleText: undefined,
 
   endDate: null,
   endDateId: END_DATE,
   endDatePlaceholderText: 'End Date',
   isEndDateFocused: false,
   endDateAriaLabel: undefined,
+  endDateTitleText: undefined,
 
   screenReaderMessage: '',
   showClearDates: false,
@@ -279,10 +283,12 @@ export default class DateRangePickerInputController extends React.PureComponent
       startDatePlaceholderText,
       isStartDateFocused,
       startDateAriaLabel,
+      startDateTitleText,
       endDate,
       endDateId,
       endDatePlaceholderText,
       endDateAriaLabel,
+      endDateTitleText,
       isEndDateFocused,
       screenReaderMessage,
       showClearDates,
@@ -318,11 +324,13 @@ export default class DateRangePickerInputController extends React.PureComponent
         startDatePlaceholderText={startDatePlaceholderText}
         isStartDateFocused={isStartDateFocused}
         startDateAriaLabel={startDateAriaLabel}
+        startDateTitleText={startDateTitleText}
         endDate={endDateString}
         endDateId={endDateId}
         endDatePlaceholderText={endDatePlaceholderText}
         isEndDateFocused={isEndDateFocused}
         endDateAriaLabel={endDateAriaLabel}
+        endDateTitleText={endDateTitleText}
         isFocused={isFocused}
         disabled={disabled}
         required={required}
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index cbb8f11c7a..c289412774 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -52,6 +52,7 @@ const defaultProps = {
   id: 'date',
   placeholder: 'Date',
   ariaLabel: undefined,
+  titleText: undefined,
   disabled: false,
   required: false,
   readOnly: false,
@@ -548,6 +549,7 @@ class SingleDatePicker extends React.PureComponent {
       id,
       placeholder,
       ariaLabel,
+      titleText,
       disabled,
       focused,
       required,
@@ -589,6 +591,7 @@ class SingleDatePicker extends React.PureComponent {
         id={id}
         placeholder={placeholder}
         ariaLabel={ariaLabel}
+        titleText={titleText}
         focused={focused}
         isFocused={isInputFocused}
         disabled={disabled}
diff --git a/src/components/SingleDatePickerInput.jsx b/src/components/SingleDatePickerInput.jsx
index af7b4d6731..ce9aa24e79 100644
--- a/src/components/SingleDatePickerInput.jsx
+++ b/src/components/SingleDatePickerInput.jsx
@@ -22,6 +22,7 @@ const propTypes = forbidExtraProps({
   children: PropTypes.node,
   placeholder: PropTypes.string,
   ariaLabel: PropTypes.string,
+  titleText: PropTypes.string,
   displayValue: PropTypes.string,
   screenReaderMessage: PropTypes.string,
   focused: PropTypes.bool,
@@ -59,6 +60,7 @@ const defaultProps = {
   children: null,
   placeholder: 'Select Date',
   ariaLabel: undefined,
+  titleText: undefined,
   displayValue: '',
   screenReaderMessage: '',
   focused: false,
@@ -97,6 +99,7 @@ function SingleDatePickerInput({
   children,
   placeholder,
   ariaLabel,
+  titleText,
   displayValue,
   focused,
   isFocused,
@@ -169,6 +172,7 @@ function SingleDatePickerInput({
         id={id}
         placeholder={placeholder}
         ariaLabel={ariaLabel}
+        titleText={titleText}
         displayValue={displayValue}
         screenReaderMessage={screenReaderText}
         focused={focused}
diff --git a/src/components/SingleDatePickerInputController.jsx b/src/components/SingleDatePickerInputController.jsx
index 67f09f9072..ccaf469369 100644
--- a/src/components/SingleDatePickerInputController.jsx
+++ b/src/components/SingleDatePickerInputController.jsx
@@ -36,6 +36,7 @@ const propTypes = forbidExtraProps({
   id: PropTypes.string.isRequired,
   placeholder: PropTypes.string,
   ariaLabel: PropTypes.string,
+  titleText: PropTypes.string,
   screenReaderMessage: PropTypes.string,
   showClearDate: PropTypes.bool,
   showCaret: PropTypes.bool,
@@ -81,6 +82,7 @@ const defaultProps = {
 
   placeholder: '',
   ariaLabel: undefined,
+  titleText: undefined,
   screenReaderMessage: 'Date',
   showClearDate: false,
   showCaret: false,
@@ -202,6 +204,7 @@ export default class SingleDatePickerInputController extends React.PureComponent
       id,
       placeholder,
       ariaLabel,
+      titleText,
       disabled,
       focused,
       isFocused,
@@ -234,6 +237,7 @@ export default class SingleDatePickerInputController extends React.PureComponent
         id={id}
         placeholder={placeholder}
         ariaLabel={ariaLabel}
+        titleText={titleText}
         focused={focused}
         isFocused={isFocused}
         disabled={disabled}
diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js
index 99aca7ca06..a54126932b 100644
--- a/src/shapes/DateRangePickerShape.js
+++ b/src/shapes/DateRangePickerShape.js
@@ -35,6 +35,8 @@ export default {
   endDatePlaceholderText: PropTypes.string,
   startDateAriaLabel: PropTypes.string,
   endDateAriaLabel: PropTypes.string,
+  startDateTitleText: PropTypes.string,
+  endDateTitleText: PropTypes.string,
   disabled: DisabledShape,
   required: PropTypes.bool,
   readOnly: PropTypes.bool,
diff --git a/src/shapes/SingleDatePickerShape.js b/src/shapes/SingleDatePickerShape.js
index 04a31fadff..ef9edcb4e0 100644
--- a/src/shapes/SingleDatePickerShape.js
+++ b/src/shapes/SingleDatePickerShape.js
@@ -25,6 +25,7 @@ export default {
   id: PropTypes.string.isRequired,
   placeholder: PropTypes.string,
   ariaLabel: PropTypes.string,
+  titleText: PropTypes.string,
   disabled: PropTypes.bool,
   required: PropTypes.bool,
   readOnly: PropTypes.bool,
diff --git a/stories/DateRangePicker_input.js b/stories/DateRangePicker_input.js
index da2ad90c75..7650210a6a 100644
--- a/stories/DateRangePicker_input.js
+++ b/stories/DateRangePicker_input.js
@@ -149,6 +149,14 @@ storiesOf('DRP - Input Props', module)
       screenReaderInputMessage="Here you could inform screen reader users of the date format, minimum nights, blocked out dates, etc"
     />
   )))
+  .add('with custom Start & End Date title attributes', withInfo()(() => (
+    <DateRangePickerWrapper
+      initialStartDate={moment().add(3, 'days')}
+      initialEndDate={moment().add(10, 'days')}
+      startDateTitleText="Here you can set the title attribute of the Start input, which shows in the tooltip on :hover over the field"
+      endDateTitleText="Here you can set the title attribute of the End input, which shows in the tooltip on :hover over the field"
+    />
+  )))
   .add('noBorder', withInfo()(() => (
     <DateRangePickerWrapper
       initialStartDate={moment().add(3, 'days')}
diff --git a/stories/SingleDatePicker_input.js b/stories/SingleDatePicker_input.js
index ba433df568..5fbdf5a369 100644
--- a/stories/SingleDatePicker_input.js
+++ b/stories/SingleDatePicker_input.js
@@ -80,6 +80,12 @@ storiesOf('SDP - Input Props', module)
       screenReaderInputMessage="Here you could inform screen reader users of the date format, minimum nights, blocked out dates, etc"
     />
   )))
+  .add('with custom title attribute', withInfo()(() => (
+    <SingleDatePickerWrapper
+      initialDate={moment().add(3, 'days')}
+      titleText="Here you can set the title attribute of the input, which shows in the tooltip on :hover over the field"
+    />
+  )))
   .add('noBorder', withInfo()(() => (
     <SingleDatePickerWrapper
       initialDate={moment().add(3, 'days')}
diff --git a/test/components/DateInput_spec.jsx b/test/components/DateInput_spec.jsx
index 2e7886144b..7660846ebd 100644
--- a/test/components/DateInput_spec.jsx
+++ b/test/components/DateInput_spec.jsx
@@ -27,6 +27,17 @@ describe('DateInput', () => {
         expect(wrapper.find('input').props()['aria-label']).to.equal(placeholder);
       });
 
+      it('has props.titleText as a title attribute if titleText is passed in', () => {
+        const titleText = 'titleTextExample';
+        const wrapper = shallow(<DateInput id="date" titleText={titleText} />).dive();
+        expect(wrapper.find('input').props().title).to.equal(titleText);
+      });
+
+      it('has no title attribute if props.titleText is null', () => {
+        const wrapper = shallow(<DateInput id="date" titleText={null} />).dive();
+        expect(wrapper.find('input').props().title).to.equal(null);
+      });
+
       it('has value === props.displayValue', () => {
         const DISPLAY_VALUE = 'foobar';
         const wrapper = shallow(<DateInput id="date" displayValue={DISPLAY_VALUE} />).dive();

From f74f1e38ddc3704edde7ad1daecdb267b3ebee48 Mon Sep 17 00:00:00 2001
From: mmarkelov <maks-markel@mail.ru>
Date: Wed, 17 Jun 2020 17:22:44 +0300
Subject: [PATCH 572/618] [New] `CalendarDay`: Add `aria-current` for "today"

---
 src/components/CalendarDay.jsx       |  1 +
 test/components/CalendarDay_spec.jsx | 26 ++++++++++++++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/src/components/CalendarDay.jsx b/src/components/CalendarDay.jsx
index e863fe3eeb..29816a1dbf 100644
--- a/src/components/CalendarDay.jsx
+++ b/src/components/CalendarDay.jsx
@@ -154,6 +154,7 @@ class CalendarDay extends React.PureComponent {
         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={(e) => { this.onDayMouseEnter(day, e); }}
         onMouseLeave={(e) => { this.onDayMouseLeave(day, e); }}
diff --git a/test/components/CalendarDay_spec.jsx b/test/components/CalendarDay_spec.jsx
index 79730d377b..f5fd544c29 100644
--- a/test/components/CalendarDay_spec.jsx
+++ b/test/components/CalendarDay_spec.jsx
@@ -54,6 +54,32 @@ describe('CalendarDay', () => {
       expect(wrapper.props().tabIndex).to.equal(tabIndex);
     });
 
+    describe('aria-current', () => {
+      it('should add aria-current to date for today date', () => {
+        const modifiers = new Set(['today']);
+
+        const wrapper = shallow((
+          <CalendarDay
+            modifiers={modifiers}
+          />
+        )).dive();
+
+        expect(wrapper.prop('aria-current')).to.equal('date');
+      });
+
+      it('should not add aria-current for not today date', () => {
+        const modifiers = new Set();
+
+        const wrapper = shallow((
+          <CalendarDay
+            modifiers={modifiers}
+          />
+        )).dive();
+
+        expect(wrapper).to.not.have.property('aria-current');
+      });
+    });
+
     describe('aria-label', () => {
       const phrases = {};
       const day = moment('10/10/2017', 'MM/DD/YYYY');

From 624aef1b0bd1c935ebb5a85c2cc5fb24d207a821 Mon Sep 17 00:00:00 2001
From: mmarkelov <maks-markel@mail.ru>
Date: Mon, 18 May 2020 10:11:34 +0300
Subject: [PATCH 573/618] [Fix] `DayPicker`: fix check for renderMonthText

Fixes #1993
---
 src/components/DayPicker.jsx       |  3 ++-
 test/components/DayPicker_spec.jsx | 15 +++++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index a31a710f10..f39aa8ec01 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -339,7 +339,8 @@ class DayPicker extends React.PureComponent {
       }
     }
 
-    if (renderMonthText !== prevRenderMonthText) {
+    if (renderMonthText !== null && prevRenderMonthText !== null
+        && renderMonthText(currentMonth) !== prevRenderMonthText(currentMonth)) {
       this.setState({
         monthTitleHeight: null,
       });
diff --git a/test/components/DayPicker_spec.jsx b/test/components/DayPicker_spec.jsx
index 285ad70844..5f98b61e9b 100644
--- a/test/components/DayPicker_spec.jsx
+++ b/test/components/DayPicker_spec.jsx
@@ -606,6 +606,21 @@ describe('DayPicker', () => {
     });
   });
 
+  describe('monthTitleHeight', () => {
+    it('change monthTitleHeight correctly with setMonthTitleHeight', () => {
+      const wrapper = shallow(<DayPicker />).dive();
+      wrapper.instance().setMonthTitleHeight(80);
+      expect(wrapper.state().monthTitleHeight).to.equal(80);
+    });
+
+    it('do not change monthTitleHeight with renderMonthText === prevRenderMonthText', () => {
+      const wrapper = shallow(<DayPicker renderMonthText={() => 'foo'} />).dive();
+      wrapper.instance().setMonthTitleHeight(80);
+      wrapper.setProps({ renderMonthText: () => 'foo' });
+      expect(wrapper.state().monthTitleHeight).to.equal(80);
+    });
+  });
+
   describe('#onNextMonthClick', () => {
     it('calls onNextMonthTransition', () => {
       const onNextMonthTransitionSpy = sinon.spy(PureDayPicker.prototype, 'onNextMonthTransition');

From 2bbbf5035abb2972cfa66715ee8ee8d117ef75f2 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Mon, 26 Oct 2020 12:36:16 -0700
Subject: [PATCH 574/618] [meta] use `mkdirp` for windows compat

---
 package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f86500c6da..bdebaf8bde 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "build": "npm run build:cjs && npm run build:esm && npm run build:css -- --optimize ",
     "build:cjs": "BABEL_ENV=cjs babel src/ -d lib/",
     "build:esm": "BABEL_ENV=esm babel src/ -d esm/",
-    "prebuild:css": "rimraf lib/css && mkdir -p lib/css",
+    "prebuild:css": "rimraf lib/css && mkdirp lib/css",
     "build:css": "node scripts/buildCSS.js",
     "clean": "rimraf lib esm",
     "precover": "rimraf coverage && npm run react",
@@ -93,6 +93,7 @@
     "karma-mocha": "^1.3.0",
     "karma-sinon": "^1.0.5",
     "karma-webpack": "^4.0.2",
+    "mkdirp": "^0.5.5",
     "mocha": "^3.5.3",
     "mocha-wrap": "^2.1.2",
     "moment": "^2.24.0",

From c77b9a70572fb7b8eaecdda626b92b42af60fbd5 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Mon, 26 Oct 2020 12:37:45 -0700
Subject: [PATCH 575/618] [Deps] update `airbnb-prop-types`,
 `enzyme-shallow-equal`, `object.assign`, `object.values`,
 `react-moment-proptypes`, `react-outside-click-handler`, `react-portal`

---
 package.json | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index bdebaf8bde..40875f16f9 100644
--- a/package.json
+++ b/package.json
@@ -115,18 +115,18 @@
     "webpack": "^4.31.0"
   },
   "dependencies": {
-    "airbnb-prop-types": "^2.15.0",
+    "airbnb-prop-types": "^2.16.0",
     "consolidated-events": "^1.1.1 || ^2.0.0",
-    "enzyme-shallow-equal": "^1.0.0",
+    "enzyme-shallow-equal": "^1.0.4",
     "is-touch-device": "^1.0.1",
     "lodash": "^4.1.1",
-    "object.assign": "^4.1.0",
-    "object.values": "^1.1.0",
+    "object.assign": "^4.1.2",
+    "object.values": "^1.1.1",
     "prop-types": "^15.7.2",
     "raf": "^3.4.1",
-    "react-moment-proptypes": "^1.6.0",
-    "react-outside-click-handler": "^1.2.4",
-    "react-portal": "^4.2.0",
+    "react-moment-proptypes": "^1.7.0",
+    "react-outside-click-handler": "^1.3.0",
+    "react-portal": "^4.2.1",
     "react-with-direction": "^1.3.1",
     "react-with-styles": "^4.1.0",
     "react-with-styles-interface-css": "^6.0.0"

From 80d4e512d3aa5475323b02cc31c41a1918563194 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Fri, 30 Oct 2020 22:14:38 -0700
Subject: [PATCH 576/618] [Test] `DateRangePickerInputController`: fix November
 6th being seen as June 11th

---
 test/components/DateRangePickerInputController_spec.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/components/DateRangePickerInputController_spec.jsx b/test/components/DateRangePickerInputController_spec.jsx
index a9b6566912..91601231c3 100644
--- a/test/components/DateRangePickerInputController_spec.jsx
+++ b/test/components/DateRangePickerInputController_spec.jsx
@@ -751,7 +751,7 @@ describe('DateRangePickerInputController', () => {
     });
 
     describe('is outside range', () => {
-      const futureDate = moment().add(7, 'days').format('DD/MM/YYYY');
+      const futureDate = moment().add(7, 'days').format('YYYY/MM/DD');
       const isOutsideRange = (day) => day > moment().add(5, 'days');
 
       it('calls props.onDatesChange', () => {

From 7a93b097af2e4f4ca8f8e6a329b213f49d70bd98 Mon Sep 17 00:00:00 2001
From: Ivan Buryak <buryak.ivan@yandex.ru>
Date: Fri, 30 Oct 2020 14:39:24 +0500
Subject: [PATCH 577/618] [Fix] `DateRangePicker`: replace sass-specific
 `darken` with runtime color calculation

Fixes #1513.
---
 package.json                        | 1 +
 src/components/DateRangePicker.jsx  | 5 +++--
 src/components/SingleDatePicker.jsx | 5 +++--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 40875f16f9..5382ecef77 100644
--- a/package.json
+++ b/package.json
@@ -116,6 +116,7 @@
   },
   "dependencies": {
     "airbnb-prop-types": "^2.16.0",
+    "color2k": "^1.1.0",
     "consolidated-events": "^1.1.1 || ^2.0.0",
     "enzyme-shallow-equal": "^1.0.4",
     "is-touch-device": "^1.0.1",
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index b88ba446b6..3d237d6221 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -6,6 +6,7 @@ import { forbidExtraProps } from 'airbnb-prop-types';
 import { addEventListener } from 'consolidated-events';
 import isTouchDevice from 'is-touch-device';
 import OutsideClickHandler from 'react-outside-click-handler';
+import { darken } from 'color2k';
 
 import DateRangePickerShape from '../shapes/DateRangePickerShape';
 import { DateRangePickerPhrases } from '../defaultPhrases';
@@ -749,12 +750,12 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     zIndex: zIndex + 2,
 
     ':hover': {
-      color: `darken(${color.core.grayLighter}, 10%)`,
+      color: darken(color.core.grayLighter, 0.1),
       textDecoration: 'none',
     },
 
     ':focus': {
-      color: `darken(${color.core.grayLighter}, 10%)`,
+      color: darken(color.core.grayLighter, 0.1),
       textDecoration: 'none',
     },
   },
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index c289412774..c449f7e2fb 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -6,6 +6,7 @@ import { forbidExtraProps } from 'airbnb-prop-types';
 import { addEventListener } from 'consolidated-events';
 import isTouchDevice from 'is-touch-device';
 import OutsideClickHandler from 'react-outside-click-handler';
+import { darken } from 'color2k';
 
 import SingleDatePickerShape from '../shapes/SingleDatePickerShape';
 import { SingleDatePickerPhrases } from '../defaultPhrases';
@@ -707,12 +708,12 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     zIndex: zIndex + 2,
 
     ':hover': {
-      color: `darken(${color.core.grayLighter}, 10%)`,
+      color: darken(color.core.grayLighter, 0.1),
       textDecoration: 'none',
     },
 
     ':focus': {
-      color: `darken(${color.core.grayLighter}, 10%)`,
+      color: darken(color.core.grayLighter, 0.1),
       textDecoration: 'none',
     },
   },

From 4bf7d09765bfce6dff4fdd0ec4b9808ac9e8e42a Mon Sep 17 00:00:00 2001
From: mmarkelov <maks-markel@mail.ru>
Date: Sat, 3 Oct 2020 18:11:00 +0300
Subject: [PATCH 578/618] [Fix] `CalendarMonthGrid`: Fix iOS 14 navigation

Fixes #2034. Fixes #2050.
---
 src/components/CalendarMonthGrid.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/CalendarMonthGrid.jsx b/src/components/CalendarMonthGrid.jsx
index 073d260458..849635d423 100644
--- a/src/components/CalendarMonthGrid.jsx
+++ b/src/components/CalendarMonthGrid.jsx
@@ -292,7 +292,7 @@ class CalendarMonthGrid extends React.PureComponent {
           isVerticalScrollable && styles.CalendarMonthGrid__vertical_scrollable,
           isAnimating && styles.CalendarMonthGrid__animating,
           isAnimating && transitionDuration && {
-            transition: `transform ${transitionDuration}ms ease-in-out`,
+            transition: `transform ${transitionDuration}ms ease-in-out 0.1s`,
           },
           {
             ...getTransformStyles(transformValue),

From b66dbe4397c7307946abecb10bf37914ebc746f9 Mon Sep 17 00:00:00 2001
From: Federico Tagliabue <federico.tagliabue@bugcrowd.com>
Date: Tue, 10 Nov 2020 10:18:24 +1100
Subject: [PATCH 579/618] [New] `DateRangePicker`: pass noBorder as noBorder to
 `DayPickerRangeController`

Fixes #1592.
---
 src/components/DateRangePicker.jsx       | 2 ++
 stories/DateRangePicker_calendar.js      | 7 +++++++
 test/components/DateRangePicker_spec.jsx | 8 ++++++++
 3 files changed, 17 insertions(+)

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 3d237d6221..040d1fa597 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -451,6 +451,7 @@ class DateRangePicker extends React.PureComponent {
       weekDayFormat,
       styles,
       verticalHeight,
+      noBorder,
       transitionDuration,
       verticalSpacing,
       horizontalMonthPadding,
@@ -548,6 +549,7 @@ class DateRangePicker extends React.PureComponent {
           firstDayOfWeek={firstDayOfWeek}
           weekDayFormat={weekDayFormat}
           verticalHeight={verticalHeight}
+          noBorder={noBorder}
           transitionDuration={transitionDuration}
           disabled={disabled}
           horizontalMonthPadding={horizontalMonthPadding}
diff --git a/stories/DateRangePicker_calendar.js b/stories/DateRangePicker_calendar.js
index bb869a944e..a2b167390f 100644
--- a/stories/DateRangePicker_calendar.js
+++ b/stories/DateRangePicker_calendar.js
@@ -253,4 +253,11 @@ storiesOf('DRP - Calendar Props', module)
       verticalSpacing={0}
       autoFocus
     />
+  )))
+  .add('without borders', withInfo()(() => (
+    <DateRangePickerWrapper
+      verticalSpacing={0}
+      noBorder
+      autoFocus
+    />
   )));
diff --git a/test/components/DateRangePicker_spec.jsx b/test/components/DateRangePicker_spec.jsx
index f5bf0919c1..158bb255d4 100644
--- a/test/components/DateRangePicker_spec.jsx
+++ b/test/components/DateRangePicker_spec.jsx
@@ -787,4 +787,12 @@ describe('DateRangePicker', () => {
       });
     });
   });
+
+  it('should pass noBorder as noBorder to <DayPickerRangeController>', () => {
+    const wrapper = shallow((
+      <DateRangePicker {...requiredProps} focusedInput={START_DATE} noBorder />
+    )).dive();
+
+    expect(wrapper.find(DayPickerRangeController).prop('noBorder')).to.equal(true);
+  });
 });

From f424b11e11b7f7f09f77792364f311de5008c693 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Thu, 21 Jan 2021 09:41:06 -0800
Subject: [PATCH 580/618] [eslint] fix linting error

---
 src/components/DayPickerKeyboardShortcuts.jsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/DayPickerKeyboardShortcuts.jsx b/src/components/DayPickerKeyboardShortcuts.jsx
index 4c4f4e2174..0f686a1c17 100644
--- a/src/components/DayPickerKeyboardShortcuts.jsx
+++ b/src/components/DayPickerKeyboardShortcuts.jsx
@@ -102,6 +102,14 @@ class DayPickerKeyboardShortcuts extends React.PureComponent {
     this.handleFocus();
   }
 
+  handleFocus() {
+    if (this.hideKeyboardShortcutsButton) {
+      // automatically move focus into the dialog by moving
+      // to the only interactive element, the hide button
+      this.hideKeyboardShortcutsButton.focus();
+    }
+  }
+
   onKeyDown(e) {
     e.stopPropagation();
 
@@ -152,14 +160,6 @@ class DayPickerKeyboardShortcuts extends React.PureComponent {
     this.hideKeyboardShortcutsButton = ref;
   }
 
-  handleFocus() {
-    if (this.hideKeyboardShortcutsButton) {
-      // automatically move focus into the dialog by moving
-      // to the only interactive element, the hide button
-      this.hideKeyboardShortcutsButton.focus();
-    }
-  }
-
   render() {
     const {
       block,

From 5979fddac527c43de847cd9e4769f8334e78b259 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Thu, 21 Jan 2021 09:42:42 -0800
Subject: [PATCH 581/618] [Deps] update `color2k`, `object.values`

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 5382ecef77..2d94f906ba 100644
--- a/package.json
+++ b/package.json
@@ -116,13 +116,13 @@
   },
   "dependencies": {
     "airbnb-prop-types": "^2.16.0",
-    "color2k": "^1.1.0",
+    "color2k": "^1.1.1",
     "consolidated-events": "^1.1.1 || ^2.0.0",
     "enzyme-shallow-equal": "^1.0.4",
     "is-touch-device": "^1.0.1",
     "lodash": "^4.1.1",
     "object.assign": "^4.1.2",
-    "object.values": "^1.1.1",
+    "object.values": "^1.1.2",
     "prop-types": "^15.7.2",
     "raf": "^3.4.1",
     "react-moment-proptypes": "^1.7.0",

From 61ce4991459863a2eb9b95521a100bb05500555c Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Thu, 21 Jan 2021 09:50:27 -0800
Subject: [PATCH 582/618] [Dev Deps] update `@babel/cli`, `@babel/core`,
 `@babel/register`, `@babel/runtime`, `@storybook/addon-actions`,
 `@storybook/addon-info`, `@storybook/addon-links`,
 `@storybook/addon-options`, `@storybook/addons`, `@storybook/react`,
 `@welldone-software/why-did-you-render`, `airbnb-js-shim`, `aphrodite`,
 `babel-eslint`, `babel-loader`, `babel-plugin-inline-react-svg`,
 `babel-plugin-inline-svg`, `babel-preset-airbnb`, `clean-css`, `coveralls`,
 `cross-env`, `enzyme`, `enzyme-adapter-react-helper`, `eslint`,
 `eslint-config-airbnb`, `eslint-plugin-import`, `eslint-plugin-jsx-a11y`,
 `eslint-plugin-react`, `eslint-plugin-react-hooks`,
 `eslint-plugin-react-with-styles`, `in-publish`,
 `react-with-styles-interface-aphrodite`, `rimraf`, `safe-publish-latest`,
 `sass-loader`, `sinon`, `sinon-sandbox`, `webpack`

---
 package.json | 78 ++++++++++++++++++++++++++--------------------------
 1 file changed, 39 insertions(+), 39 deletions(-)

diff --git a/package.json b/package.json
index 2d94f906ba..d5f62e238c 100644
--- a/package.json
+++ b/package.json
@@ -51,42 +51,42 @@
   },
   "homepage": "https://github.com/airbnb/react-dates#readme",
   "devDependencies": {
-    "@babel/cli": "^7.5.5",
-    "@babel/core": "^7.5.5",
-    "@babel/register": "^7.5.5",
-    "@babel/runtime": "^7.0.0",
-    "@storybook/addon-actions": "^5.1.11",
-    "@storybook/addon-info": "^5.1.11",
-    "@storybook/addon-links": "^5.1.11",
-    "@storybook/addon-options": "^5.1.11",
-    "@storybook/addons": "^5.1.11",
-    "@storybook/react": "^5.1.11",
-    "@welldone-software/why-did-you-render": "^3.3.1",
-    "airbnb-js-shims": "^2.2.0",
-    "aphrodite": "^2.3.1",
-    "babel-eslint": "^10.0.3",
-    "babel-loader": "^8.0.6",
-    "babel-plugin-inline-react-svg": "^1.1.0",
-    "babel-plugin-inline-svg": "^1.0.1",
+    "@babel/cli": "^7.12.10",
+    "@babel/core": "^7.12.10",
+    "@babel/register": "^7.12.10",
+    "@babel/runtime": "^7.12.5",
+    "@storybook/addon-actions": "^5.3.21",
+    "@storybook/addon-info": "^5.3.21",
+    "@storybook/addon-links": "^5.3.21",
+    "@storybook/addon-options": "^5.3.21",
+    "@storybook/addons": "^5.3.21",
+    "@storybook/react": "^5.3.21",
+    "@welldone-software/why-did-you-render": "^3.6.0",
+    "airbnb-js-shims": "^2.2.1",
+    "aphrodite": "^2.4.0",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-inline-react-svg": "^1.1.2",
+    "babel-plugin-inline-svg": "^1.2.0",
     "babel-plugin-istanbul": "^5.2.0",
     "babel-plugin-transform-replace-object-assign": "^2.0.0",
-    "babel-preset-airbnb": "^4.0.1",
+    "babel-preset-airbnb": "^4.5.0",
     "chai": "^4.2.0",
-    "clean-css": "^4.2.1",
-    "coveralls": "^3.0.6",
-    "cross-env": "^5.2.0",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-helper": "^1.3.6",
-    "eslint": "^6.2.1",
-    "eslint-config-airbnb": "^18.0.1",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.14.3",
-    "eslint-plugin-react-hooks": "^1.7.0",
-    "eslint-plugin-react-with-styles": "^2.2.0",
+    "clean-css": "^4.2.3",
+    "coveralls": "^3.1.0",
+    "cross-env": "^5.2.1",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-helper": "^1.3.9",
+    "eslint": "^7.18.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-react-with-styles": "^2.3.0",
     "git-directory-deploy": "^1.5.1",
     "imports-loader": "^0.8.0",
-    "in-publish": "^2.0.0",
+    "in-publish": "^2.0.1",
     "karma": "^4.2.0",
     "karma-chai": "^0.1.0",
     "karma-firefox-launcher": "^1.2.0",
@@ -96,23 +96,23 @@
     "mkdirp": "^0.5.5",
     "mocha": "^3.5.3",
     "mocha-wrap": "^2.1.2",
-    "moment": "^2.24.0",
+    "moment": "^2.29.1",
     "moment-jalaali": "^0.7.4",
     "node-sass": "^4.12.0",
     "nyc": "^14.1.1",
     "raw-loader": "^0.5.1",
     "react": "^0.14 || ^15.5.4 || ^16.1.1",
     "react-dom": "^0.14 || ^15.5.4 || ^16.1.1",
-    "react-with-styles-interface-aphrodite": "^6.0.0",
+    "react-with-styles-interface-aphrodite": "^6.0.1",
     "react-with-styles-interface-css-compiler": "^2.2.0",
-    "rimraf": "^2.6.3",
-    "safe-publish-latest": "^1.1.3",
-    "sass-loader": "^7.2.0",
-    "sinon": "^7.4.1",
-    "sinon-sandbox": "^2.0.5",
+    "rimraf": "^2.7.1",
+    "safe-publish-latest": "^1.1.4",
+    "sass-loader": "^7.3.1",
+    "sinon": "^7.5.0",
+    "sinon-sandbox": "^2.0.6",
     "style-loader": "^0.20.3",
     "typescript": "*",
-    "webpack": "^4.31.0"
+    "webpack": "^4.46.0"
   },
   "dependencies": {
     "airbnb-prop-types": "^2.16.0",

From 486b8ee1b46f43613324ebf143569fdc2c0ee9bf Mon Sep 17 00:00:00 2001
From: Matan Borenkraout <matan@infibond.com>
Date: Thu, 17 Jan 2019 16:29:00 +0200
Subject: [PATCH 583/618] [Fix] `DateRangePickerInput`: `customArrowIcon`
 always overrides RTL or small icon

Fixes #1507. Fixes #1537.
---
 src/components/DateRangePickerInput.jsx       |  4 ++--
 stories/DateRangePicker_input.js              |  8 ++++++++
 test/components/DateRangePickerInput_spec.jsx | 20 +++++++++++++++++++
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index 92407bdaf7..924ba9c4bc 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -182,10 +182,10 @@ function DateRangePickerInput({
   const calendarIcon = customInputIcon || (
     <CalendarIcon {...css(styles.DateRangePickerInput_calendarIcon_svg)} />
   );
-
-  let arrowIcon = customArrowIcon || <RightArrow {...css(styles.DateRangePickerInput_arrow_svg)} />;
+  let arrowIcon = <RightArrow {...css(styles.DateRangePickerInput_arrow_svg)} />;
   if (isRTL) arrowIcon = <LeftArrow {...css(styles.DateRangePickerInput_arrow_svg)} />;
   if (small) arrowIcon = '-';
+  if (customArrowIcon) arrowIcon = customArrowIcon;
 
   const closeIcon = customCloseIcon || (
     <CloseButton
diff --git a/stories/DateRangePicker_input.js b/stories/DateRangePicker_input.js
index 7650210a6a..a2fff36872 100644
--- a/stories/DateRangePicker_input.js
+++ b/stories/DateRangePicker_input.js
@@ -126,6 +126,14 @@ storiesOf('DRP - Input Props', module)
       customArrowIcon={<TestCustomArrowIcon />}
     />
   )))
+  .add('with custom arrow icon and RTL support', withInfo()(() => (
+    <DateRangePickerWrapper
+      initialStartDate={moment().add(3, 'days')}
+      initialEndDate={moment().add(10, 'days')}
+      customArrowIcon={<TestCustomArrowIcon />}
+      isRTL
+    />
+  )))
   .add('with custom close icon', withInfo()(() => (
     <DateRangePickerWrapper
       initialStartDate={moment().add(3, 'days')}
diff --git a/test/components/DateRangePickerInput_spec.jsx b/test/components/DateRangePickerInput_spec.jsx
index 65274e2d23..6358c708fc 100644
--- a/test/components/DateRangePickerInput_spec.jsx
+++ b/test/components/DateRangePickerInput_spec.jsx
@@ -69,6 +69,26 @@ describe('DateRangePickerInput', () => {
       )).dive();
       expect(wrapper.find('.custom-arrow-icon')).to.have.lengthOf(1);
     });
+
+    it('custom icon is rendered when in RTL mode', () => {
+      const wrapper = shallow(
+        <DateRangePickerInput
+          customArrowIcon={<span className="custom-arrow-icon" />}
+          isRTL
+        />,
+      ).dive();
+      expect(wrapper.find('.custom-arrow-icon')).to.have.lengthOf(1);
+    });
+
+    it('custom icon is rendered when using small mode', () => {
+      const wrapper = shallow(
+        <DateRangePickerInput
+          customArrowIcon={<span className="custom-arrow-icon" />}
+          small
+        />,
+      ).dive();
+      expect(wrapper.find('.custom-arrow-icon')).to.have.lengthOf(1);
+    });
   });
 
   describe('props.customCloseIcon', () => {

From e78b84ed0da45e95d877489200a3ebfee18fd9e1 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Mon, 22 Feb 2021 20:30:45 -0800
Subject: [PATCH 584/618] [Tests] `npm run react`: use legacy peer deps, due to
 npm 7

---
 .travis.yml  | 2 +-
 package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index b55536c174..f8c4163fc0 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -18,7 +18,7 @@ script:
   - 'if [ -n "${KARMA-}" ]; then npm run tests-karma ; fi'
   - 'if [ -n "${COVERAGE-}" ] && [ "${TRAVIS_BRANCH-}" = "master" ]; then npm run cover; cat ./coverage/lcov.info | ./node_modules/.bin/coveralls ; fi'
 install:
-  - 'if [ -n "${LINT-}" ]; then npm install --legacy-bundling ; else npm install ; fi'
+  - 'if [ -n "${LINT-}" ]; then NPM_CONFIG_LEGACY_PEER_DEPS=true npm install --legacy-bundling ; else npm install ; fi'
 env:
   global:
     - TEST=true
diff --git a/package.json b/package.json
index d5f62e238c..7798b21855 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "lint": "eslint --ext .js,.jsx src test",
     "mocha": "mocha ./test/_helpers",
     "storybook:uninstall": "npm uninstall --no-save @storybook/react && rimraf node_modules/@storybook node_modules/react-modal node_modules/react-dom-factories",
-    "react": "enzyme-adapter-react-install 16",
+    "react": "NPM_CONFIG_LEGACY_PEER_DEPS=true enzyme-adapter-react-install 16",
     "pretest": "npm run --silent lint",
     "pretests-only": "npm run react",
     "tests-only": "npm run mocha --silent",

From 42e5996706c2b3252584822246375e455119905f Mon Sep 17 00:00:00 2001
From: Jonathan Hao <haojonat@amazon.com>
Date: Mon, 22 Feb 2021 11:09:36 -0500
Subject: [PATCH 585/618] [Fix] `DayPicker`: update calendarMonthWeeks if
 numberOfMonths is changed

Fixes #1394.

Co-authored-by: Lee Mulvey <lmulvey@me.com>
Co-authored-by: Jonathan Hao <haojonat@amazon.com>
---
 src/components/DayPicker.jsx       |  9 +++++
 test/components/DayPicker_spec.jsx | 58 +++++++++++++++++++-----------
 2 files changed, 47 insertions(+), 20 deletions(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index f39aa8ec01..34345f7259 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -391,10 +391,19 @@ class DayPicker extends React.PureComponent {
       monthTitleHeight,
     } = this.state;
 
+    let shouldAdjustHeight = false;
+    if (numberOfMonths !== prevProps.numberOfMonths) {
+      this.setCalendarMonthWeeks(currentMonth);
+      shouldAdjustHeight = true;
+    }
     if (
       this.isHorizontal()
       && (orientation !== prevProps.orientation || daySize !== prevProps.daySize)
     ) {
+      shouldAdjustHeight = true;
+    }
+
+    if (shouldAdjustHeight) {
       const visibleCalendarWeeks = this.calendarMonthWeeks.slice(1, numberOfMonths + 1);
       const calendarMonthWeeksHeight = Math.max(0, ...visibleCalendarWeeks) * (daySize - 1);
       const newMonthHeight = monthTitleHeight + calendarMonthWeeksHeight + 1;
diff --git a/test/components/DayPicker_spec.jsx b/test/components/DayPicker_spec.jsx
index 5f98b61e9b..46d0697f90 100644
--- a/test/components/DayPicker_spec.jsx
+++ b/test/components/DayPicker_spec.jsx
@@ -12,6 +12,7 @@ import CalendarMonthGrid from '../../src/components/CalendarMonthGrid';
 import DayPickerNavigation from '../../src/components/DayPickerNavigation';
 import DayPickerKeyboardShortcuts from '../../src/components/DayPickerKeyboardShortcuts';
 import {
+  DAY_SIZE,
   HORIZONTAL_ORIENTATION,
   VERTICAL_ORIENTATION,
   VERTICAL_SCROLLABLE,
@@ -22,8 +23,9 @@ const today = moment().locale('en');
 const event = { preventDefault() {}, stopPropagation() {} };
 
 describe('DayPicker', () => {
+  let adjustDayPickerHeightSpy;
   beforeEach(() => {
-    sinon.stub(PureDayPicker.prototype, 'adjustDayPickerHeight');
+    adjustDayPickerHeightSpy = sinon.stub(PureDayPicker.prototype, 'adjustDayPickerHeight');
   });
 
   afterEach(() => {
@@ -907,13 +909,8 @@ describe('DayPicker', () => {
     });
   });
 
-  describe.skip('life cycle methods', () => {
-    let adjustDayPickerHeightSpy;
-    beforeEach(() => {
-      adjustDayPickerHeightSpy = sinon.stub(PureDayPicker.prototype, 'adjustDayPickerHeight');
-    });
-
-    describe('#componentDidMount', () => {
+  describe('life cycle methods', () => {
+    describe.skip('#componentDidMount', () => {
       describe('props.orientation === HORIZONTAL_ORIENTATION', () => {
         it('calls adjustDayPickerHeight', () => {
           mount(<DayPicker orientation={HORIZONTAL_ORIENTATION} />);
@@ -927,7 +924,7 @@ describe('DayPicker', () => {
         });
       });
 
-      describe('props.orientation === VERTICAL_ORIENTATION', () => {
+      describe.skip('props.orientation === VERTICAL_ORIENTATION', () => {
         it('does not call adjustDayPickerHeight', () => {
           mount(<DayPicker orientation={VERTICAL_ORIENTATION} />);
           expect(adjustDayPickerHeightSpy.called).to.equal(false);
@@ -949,7 +946,7 @@ describe('DayPicker', () => {
       });
     });
 
-    describe('#componentWillReceiveProps', () => {
+    describe.skip('#componentWillReceiveProps', () => {
       describe('props.orientation === VERTICAL_SCROLLABLE', () => {
         it('updates state.currentMonthScrollTop', () => {
           sinon.spy(DayPicker.prototype, 'setTransitionContainerRef');
@@ -966,15 +963,16 @@ describe('DayPicker', () => {
 
     describe('#componentDidUpdate', () => {
       let updateStateAfterMonthTransitionSpy;
+
       beforeEach(() => {
         updateStateAfterMonthTransitionSpy = sinon.stub(
-          DayPicker.prototype,
+          PureDayPicker.prototype,
           'updateStateAfterMonthTransition',
         );
       });
 
       describe('props.orientation === HORIZONTAL_ORIENTATION', () => {
-        it('calls adjustDayPickerHeight if state.monthTransition is truthy', () => {
+        it.skip('calls adjustDayPickerHeight if state.monthTransition is truthy', () => {
           const wrapper = mount(<DayPicker orientation={HORIZONTAL_ORIENTATION} />);
           wrapper.setState({
             monthTransition: 'foo',
@@ -982,7 +980,7 @@ describe('DayPicker', () => {
           expect(adjustDayPickerHeightSpy).to.have.property('callCount', 2);
         });
 
-        it('does not call adjustDayPickerHeight if state.monthTransition is falsy', () => {
+        it.skip('does not call adjustDayPickerHeight if state.monthTransition is falsy', () => {
           const wrapper = mount(<DayPicker orientation={HORIZONTAL_ORIENTATION} />);
           wrapper.setState({
             monthTransition: null,
@@ -990,7 +988,7 @@ describe('DayPicker', () => {
           expect(adjustDayPickerHeightSpy.calledTwice).to.equal(false);
         });
 
-        it('calls adjustDayPickerHeight if orientation has changed from HORIZONTAL_ORIENTATION to VERTICAL_ORIENTATION', () => {
+        it.skip('calls adjustDayPickerHeight if orientation has changed from HORIZONTAL_ORIENTATION to VERTICAL_ORIENTATION', () => {
           const wrapper = mount(<DayPicker orientation={HORIZONTAL_ORIENTATION} />);
           wrapper.setState({
             orientation: VERTICAL_ORIENTATION,
@@ -998,7 +996,7 @@ describe('DayPicker', () => {
           expect(adjustDayPickerHeightSpy).to.have.property('callCount', 2);
         });
 
-        it('calls adjustDayPickerHeight if daySize has changed', () => {
+        it.skip('calls adjustDayPickerHeight if daySize has changed', () => {
           const wrapper = mount(<DayPicker daySize={39} orientation={HORIZONTAL_ORIENTATION} />);
           wrapper.setState({
             daySize: 40,
@@ -1007,7 +1005,7 @@ describe('DayPicker', () => {
           expect(adjustDayPickerHeightSpy).to.have.property('callCount', 2);
         });
 
-        it('calls updateStateAfterMonthTransition if state.monthTransition is truthy', () => {
+        it.skip('calls updateStateAfterMonthTransition if state.monthTransition is truthy', () => {
           const wrapper = mount(<DayPicker orientation={HORIZONTAL_ORIENTATION} />);
           wrapper.setState({
             monthTransition: 'foo',
@@ -1015,16 +1013,36 @@ describe('DayPicker', () => {
           expect(updateStateAfterMonthTransitionSpy).to.have.property('callCount', 1);
         });
 
-        it('does not call updateStateAfterMonthTransition if state.monthTransition is falsy', () => {
+        it.skip('does not call updateStateAfterMonthTransition if state.monthTransition is falsy', () => {
           const wrapper = mount(<DayPicker orientation={HORIZONTAL_ORIENTATION} />);
           wrapper.setState({
             monthTransition: null,
           });
           expect(updateStateAfterMonthTransitionSpy.calledOnce).to.equal(false);
         });
+
+        it('calls adjustDayPickerHeightSpy if props.numberOfMonths changes', () => {
+          const wrapper = shallow(<DayPicker numberOfMonths={2} />).dive();
+          wrapper.instance().componentDidUpdate({
+            daySize: DAY_SIZE,
+            numberOfMonths: 3,
+            orientation: HORIZONTAL_ORIENTATION,
+          });
+          expect(adjustDayPickerHeightSpy.callCount).to.equal(1);
+        });
+
+        it('does not call adjustDayPickerHeightSpy if props.numberOfMonths does not change', () => {
+          const wrapper = shallow(<DayPicker numberOfMonths={2} />).dive();
+          wrapper.instance().componentDidUpdate({
+            daySize: DAY_SIZE,
+            numberOfMonths: 2,
+            orientation: HORIZONTAL_ORIENTATION,
+          });
+          expect(adjustDayPickerHeightSpy.called).to.equal(false);
+        });
       });
 
-      describe('props.orientation === VERTICAL_ORIENTATION', () => {
+      describe.skip('props.orientation === VERTICAL_ORIENTATION', () => {
         it('does not call adjustDayPickerHeight if state.monthTransition is truthy', () => {
           const wrapper = mount(<DayPicker orientation={VERTICAL_ORIENTATION} />);
           wrapper.setState({
@@ -1075,7 +1093,7 @@ describe('DayPicker', () => {
         });
       });
 
-      describe('props.orientation === VERTICAL_SCROLLABLE', () => {
+      describe.skip('props.orientation === VERTICAL_SCROLLABLE', () => {
         it('does not update transitionContainer ref`s scrollTop currentMonth stays the same', () => {
           sinon.spy(DayPicker.prototype, 'setTransitionContainerRef');
           const wrapper = mount(<DayPicker orientation={VERTICAL_SCROLLABLE} />);
@@ -1097,7 +1115,7 @@ describe('DayPicker', () => {
         });
       });
 
-      describe('when isFocused is updated to true', () => {
+      describe.skip('when isFocused is updated to true', () => {
         const prevProps = { isFocused: false };
         const newProps = { isFocused: true };
 

From 185de16be79ec005a3a615747a1bdf657ac0eb4a Mon Sep 17 00:00:00 2001
From: Keven Max <keven.lima@solides.com.br>
Date: Wed, 17 Feb 2021 11:38:00 -0300
Subject: [PATCH 586/618] [Docs] examples:
 `DateRangePickerWrapper`/`SingleDatePickerWrapper`: Add open direction as
 default props

---
 examples/DateRangePickerWrapper.jsx  | 2 ++
 examples/SingleDatePickerWrapper.jsx | 3 ++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/examples/DateRangePickerWrapper.jsx b/examples/DateRangePickerWrapper.jsx
index 620a286cdd..96154f4d06 100644
--- a/examples/DateRangePickerWrapper.jsx
+++ b/examples/DateRangePickerWrapper.jsx
@@ -14,6 +14,7 @@ import {
   HORIZONTAL_ORIENTATION,
   ANCHOR_LEFT,
   NAV_POSITION_TOP,
+  OPEN_DOWN,
 } from '../src/constants';
 import isInclusivelyAfterDay from '../src/utils/isInclusivelyAfterDay';
 
@@ -70,6 +71,7 @@ const defaultProps = {
   keepOpenOnDateSelect: false,
   reopenPickerOnClearDates: false,
   isRTL: false,
+  openDirection: OPEN_DOWN,
 
   // navigation related props
   navPosition: NAV_POSITION_TOP,
diff --git a/examples/SingleDatePickerWrapper.jsx b/examples/SingleDatePickerWrapper.jsx
index 92a309f7a8..0dcf491462 100644
--- a/examples/SingleDatePickerWrapper.jsx
+++ b/examples/SingleDatePickerWrapper.jsx
@@ -8,7 +8,7 @@ import SingleDatePicker from '../src/components/SingleDatePicker';
 
 import { SingleDatePickerPhrases } from '../src/defaultPhrases';
 import SingleDatePickerShape from '../src/shapes/SingleDatePickerShape';
-import { HORIZONTAL_ORIENTATION, ANCHOR_LEFT } from '../src/constants';
+import { HORIZONTAL_ORIENTATION, ANCHOR_LEFT, OPEN_DOWN } from '../src/constants';
 import isInclusivelyAfterDay from '../src/utils/isInclusivelyAfterDay';
 
 const propTypes = {
@@ -56,6 +56,7 @@ const defaultProps = {
   keepOpenOnDateSelect: false,
   reopenPickerOnClearDate: false,
   isRTL: false,
+  openDirection: OPEN_DOWN,
 
   // navigation related props
   navPrev: null,

From 6c2cb61c5e876fbdac72e6efed49c0bd64f06d6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Leal?= <joaoleal@google.com>
Date: Wed, 11 Nov 2020 22:15:34 +0000
Subject: [PATCH 587/618] [New] `DayPickerSingleDateController`: add
 `allowUnselect` prop that allows controlling whether unselecting selected
 days is possible

---
 .../DayPickerSingleDateControllerWrapper.jsx  |  2 ++
 .../DayPickerSingleDateController.jsx         | 16 +++++++--
 stories/DayPickerSingleDateController.js      |  8 +++++
 .../DayPickerSingleDateController_spec.jsx    | 34 +++++++++++++++++++
 4 files changed, 57 insertions(+), 3 deletions(-)

diff --git a/examples/DayPickerSingleDateControllerWrapper.jsx b/examples/DayPickerSingleDateControllerWrapper.jsx
index 02d94e931b..44a0a5e1fb 100644
--- a/examples/DayPickerSingleDateControllerWrapper.jsx
+++ b/examples/DayPickerSingleDateControllerWrapper.jsx
@@ -19,6 +19,7 @@ const propTypes = forbidExtraProps({
   initialDate: momentPropTypes.momentObj,
   showInput: PropTypes.bool,
 
+  allowUnselect: PropTypes.bool,
   keepOpenOnDateSelect: PropTypes.bool,
   isOutsideRange: PropTypes.func,
   isDayBlocked: PropTypes.func,
@@ -56,6 +57,7 @@ const defaultProps = {
   showInput: false,
 
   // day presentation and interaction related props
+  allowUnselect: false,
   renderCalendarDay: undefined,
   renderDayContents: null,
   isDayBlocked: () => false,
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 89be9f6ed8..de492c3a24 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -34,12 +34,18 @@ import {
 import DayPicker from './DayPicker';
 import getPooledMoment from '../utils/getPooledMoment';
 
+// Default value of the date property. Represents the state
+// when there is no date selected.
+// TODO: use null
+const DATE_UNSET_VALUE = undefined;
+
 const propTypes = forbidExtraProps({
   date: momentPropTypes.momentObj,
   minDate: momentPropTypes.momentObj,
   maxDate: momentPropTypes.momentObj,
   onDateChange: PropTypes.func,
 
+  allowUnselect: PropTypes.bool,
   focused: PropTypes.bool,
   onFocusChange: PropTypes.func,
   onClose: PropTypes.func,
@@ -102,11 +108,12 @@ const propTypes = forbidExtraProps({
 });
 
 const defaultProps = {
-  date: undefined, // TODO: use null
+  date: DATE_UNSET_VALUE,
   minDate: null,
   maxDate: null,
   onDateChange() {},
 
+  allowUnselect: false,
   focused: false,
   onFocusChange() {},
   onClose() {},
@@ -352,16 +359,19 @@ export default class DayPickerSingleDateController extends React.PureComponent {
     if (e) e.preventDefault();
     if (this.isBlocked(day)) return;
     const {
+      allowUnselect,
       onDateChange,
       keepOpenOnDateSelect,
       onFocusChange,
       onClose,
     } = this.props;
 
-    onDateChange(day);
+    const clickedDay = allowUnselect && this.isSelected(day) ? DATE_UNSET_VALUE : day;
+
+    onDateChange(clickedDay);
     if (!keepOpenOnDateSelect) {
       onFocusChange({ focused: false });
-      onClose({ date: day });
+      onClose({ date: clickedDay });
     }
   }
 
diff --git a/stories/DayPickerSingleDateController.js b/stories/DayPickerSingleDateController.js
index e7fd81a5f0..ef05c08305 100644
--- a/stories/DayPickerSingleDateController.js
+++ b/stories/DayPickerSingleDateController.js
@@ -145,6 +145,14 @@ storiesOf('DayPickerSingleDateController', module)
       onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
     />
   )))
+  .add('with day unselection', withInfo()(() => (
+    <DayPickerSingleDateControllerWrapper
+      onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
+      onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
+      onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
+      allowUnselect
+    />
+  )))
   .add('with custom input', withInfo()(() => (
     <DayPickerSingleDateControllerWrapper
       onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
diff --git a/test/components/DayPickerSingleDateController_spec.jsx b/test/components/DayPickerSingleDateController_spec.jsx
index 3a55baa0d7..3bc892f635 100644
--- a/test/components/DayPickerSingleDateController_spec.jsx
+++ b/test/components/DayPickerSingleDateController_spec.jsx
@@ -539,6 +539,40 @@ describe('DayPickerSingleDateController', () => {
         expect(onDateChangeStub.callCount).to.equal(1);
       });
 
+      it('props.onDateChange receives undefined when day selected', () => {
+        const date = moment();
+        const onDateChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <DayPickerSingleDateController
+            onDateChange={onDateChangeStub}
+            onFocusChange={() => {}}
+            date={date}
+            allowUnselect
+          />
+        ));
+        // Click same day as the provided date.
+        wrapper.instance().onDayClick(date);
+        expect(onDateChangeStub.callCount).to.equal(1);
+        expect(onDateChangeStub.getCall(0).args[0]).to.equal(undefined);
+      });
+
+      it('props.onDateChange receives day when allowUnselect is disabled', () => {
+        const date = moment();
+        const onDateChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <DayPickerSingleDateController
+            onDateChange={onDateChangeStub}
+            onFocusChange={() => {}}
+            date={date}
+            allowUnselect={false}
+          />
+        ));
+        // Click same day as the provided date.
+        wrapper.instance().onDayClick(date);
+        expect(onDateChangeStub.callCount).to.equal(1);
+        expect(onDateChangeStub.getCall(0).args[0]).to.equal(date);
+      });
+
       describe('props.keepOpenOnDateSelect is false', () => {
         it('props.onFocusChange is called', () => {
           const onFocusChangeStub = sinon.stub();

From 28e6a15965a268d2e6d317f220b7480ce1ac42bd Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Thu, 25 Nov 2021 12:31:27 -0800
Subject: [PATCH 588/618] [Dev Deps] remove `node-sass`, because it fails to
 compile on node > 14
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This might mean the storybook requires a manual install of node-sass, but that’s better than the alternative
---
 package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/package.json b/package.json
index 7798b21855..3244d3aee7 100644
--- a/package.json
+++ b/package.json
@@ -98,7 +98,6 @@
     "mocha-wrap": "^2.1.2",
     "moment": "^2.29.1",
     "moment-jalaali": "^0.7.4",
-    "node-sass": "^4.12.0",
     "nyc": "^14.1.1",
     "raw-loader": "^0.5.1",
     "react": "^0.14 || ^15.5.4 || ^16.1.1",

From 74fe1a0014f33852bafba504e1d848cae65687e3 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Thu, 25 Nov 2021 12:34:09 -0800
Subject: [PATCH 589/618] [Deps] pin `react-with-styles` to v4.1 due to a
 breaking change in v4.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 3244d3aee7..5ebadfb701 100644
--- a/package.json
+++ b/package.json
@@ -128,7 +128,7 @@
     "react-outside-click-handler": "^1.3.0",
     "react-portal": "^4.2.1",
     "react-with-direction": "^1.3.1",
-    "react-with-styles": "^4.1.0",
+    "react-with-styles": "~4.1.0",
     "react-with-styles-interface-css": "^6.0.0"
   },
   "peerDependencies": {

From b3cc4267736a9de8768f77cdf98811d8982dd9dd Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Thu, 25 Nov 2021 13:02:37 -0800
Subject: [PATCH 590/618] [Tests] migrate to Github Actions

---
 .github/workflows/node-pretest.yml            | 37 ++++++++++++++
 .github/workflows/node.yml                    | 48 +++++++++++++++++++
 .github/workflows/rebase.yml                  | 15 ++++++
 .github/workflows/require-allow-edits.yml     | 12 +++++
 .nycrc                                        |  6 +--
 .travis.yml                                   | 38 ++-------------
 css/storybook.scss                            |  2 +-
 package.json                                  | 13 +----
 .../DateRangePickerInputController_spec.jsx   |  3 +-
 9 files changed, 121 insertions(+), 53 deletions(-)
 create mode 100644 .github/workflows/node-pretest.yml
 create mode 100644 .github/workflows/node.yml
 create mode 100644 .github/workflows/rebase.yml
 create mode 100644 .github/workflows/require-allow-edits.yml

diff --git a/.github/workflows/node-pretest.yml b/.github/workflows/node-pretest.yml
new file mode 100644
index 0000000000..981f03f4c2
--- /dev/null
+++ b/.github/workflows/node-pretest.yml
@@ -0,0 +1,37 @@
+name: 'Tests: pretest/posttest/build'
+
+on: [pull_request, push]
+
+jobs:
+  pretest:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - uses: ljharb/actions/node/install@main
+        name: 'nvm install lts/* && npm install'
+        with:
+          node-version: 'lts/*'
+      - run: npm run pretest
+
+  # posttest:
+  #   runs-on: ubuntu-latest
+
+  #   steps:
+  #     - uses: actions/checkout@v2
+  #     - uses: ljharb/actions/node/install@main
+  #       name: 'nvm install lts/* && npm install'
+  #       with:
+  #         node-version: 'lts/*'
+  #     - run: npm run posttest
+
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - uses: ljharb/actions/node/install@main
+        name: 'nvm install lts/* && npm install'
+        with:
+          node-version: 'lts/*'
+      - run: npm run build
diff --git a/.github/workflows/node.yml b/.github/workflows/node.yml
new file mode 100644
index 0000000000..64fd778928
--- /dev/null
+++ b/.github/workflows/node.yml
@@ -0,0 +1,48 @@
+name: 'Tests: node.js'
+
+on: [pull_request, push]
+
+jobs:
+  matrix:
+    runs-on: ubuntu-latest
+    outputs:
+      latest: ${{ steps.set-matrix.outputs.requireds }}
+      minors: ${{ steps.set-matrix.outputs.optionals }}
+    steps:
+      - uses: ljharb/actions/node/matrix@main
+        id: set-matrix
+        with:
+          type: 'majors'
+          versionsAsRoot: true
+          preset: '>=6'
+          # to test in node < 6, we need to run the build in one stage, including the tests, and then run the tests in the desired node version later
+
+  majors:
+    needs: [matrix]
+    name: 'latest minors'
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        node-version: ${{ fromJson(needs.matrix.outputs.latest) }}
+        react:
+          - 16
+          - 15
+          - 0.14
+
+    steps:
+      - uses: actions/checkout@v2
+      - uses: ljharb/actions/node/install@main
+        name: 'nvm install ${{ matrix.node-version }} && npm install'
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm run tests-only
+      - uses: codecov/codecov-action@v2
+
+  node:
+    name: 'node 6+'
+    needs: [majors]
+    runs-on: ubuntu-latest
+    steps:
+      - run: 'echo tests completed'
diff --git a/.github/workflows/rebase.yml b/.github/workflows/rebase.yml
new file mode 100644
index 0000000000..027aed0797
--- /dev/null
+++ b/.github/workflows/rebase.yml
@@ -0,0 +1,15 @@
+name: Automatic Rebase
+
+on: [pull_request_target]
+
+jobs:
+  _:
+    name: "Automatic Rebase"
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v2
+    - uses: ljharb/rebase@master
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.github/workflows/require-allow-edits.yml b/.github/workflows/require-allow-edits.yml
new file mode 100644
index 0000000000..549d7b4823
--- /dev/null
+++ b/.github/workflows/require-allow-edits.yml
@@ -0,0 +1,12 @@
+name: Require “Allow Edits”
+
+on: [pull_request_target]
+
+jobs:
+  _:
+    name: "Require “Allow Edits”"
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: ljharb/require-allow-edits@main
diff --git a/.nycrc b/.nycrc
index fb85ce72b1..90d79055a2 100644
--- a/.nycrc
+++ b/.nycrc
@@ -11,14 +11,10 @@
   ],
   "reporter": [
     "text",
+    "html",
     "lcov"
   ],
   "all": true,
-  "check-coverage": true,
-  "statements": 83,
-  "branches": 73,
-  "lines": 83,
-  "functions": 67.8,
   "sourceMap": false,
   "instrument": false
 }
diff --git a/.travis.yml b/.travis.yml
index f8c4163fc0..ea471eba53 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,43 +1,13 @@
 language: node_js
-node_js:
-  - 14
-  - 12
-  - 10
-  - 8
-  - 6
+node_js: lts/*
 before_install:
-  - 'nvm install-latest-npm'
+  - nvm install-latest-npm
 services:
   - xvfb
-before_script:
-  - 'if [ -n "${KARMA-}" ]; then export DISPLAY=:99.0; fi'
 script:
-  - 'if [ -n "${LINT-}" ]; then npm run lint ; fi'
-  - 'if [ -n "${BUILD-}" ]; then npm run build ; fi'
-  - 'if [ "${TEST-}" = true ]; then npm run tests-only ; fi'
-  - 'if [ -n "${KARMA-}" ]; then npm run tests-karma ; fi'
-  - 'if [ -n "${COVERAGE-}" ] && [ "${TRAVIS_BRANCH-}" = "master" ]; then npm run cover; cat ./coverage/lcov.info | ./node_modules/.bin/coveralls ; fi'
-install:
-  - 'if [ -n "${LINT-}" ]; then NPM_CONFIG_LEGACY_PEER_DEPS=true npm install --legacy-bundling ; else npm install ; fi'
+  - npm run tests-karma
 env:
   global:
-    - TEST=true
-  matrix:
-    - REACT=0.14
-    - REACT=15
     - REACT=16
+    - DISPLAY=:99.0
 sudo: false
-matrix:
-  fast_finish: true
-  include:
-    - node_js: "lts/*"
-      env: LINT=true TEST=false
-    - node_js: "lts/*"
-      env: BUILD=true TEST=false
-    - node_js: "lts/*"
-      env: COVERAGE=true TEST=false
-    - node_js: "lts/*"
-      env: KARMA=true TEST=false
-  allow_failures:
-    - node_js: "10"
-      env: REACT=16
diff --git a/css/storybook.scss b/css/storybook.scss
index c304369718..2e20e67c21 100644
--- a/css/storybook.scss
+++ b/css/storybook.scss
@@ -21,4 +21,4 @@ a {
 
 .foo-bar {
   background: red !important;
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index 5ebadfb701..9400cc49fd 100644
--- a/package.json
+++ b/package.json
@@ -11,15 +11,13 @@
     "prebuild:css": "rimraf lib/css && mkdirp lib/css",
     "build:css": "node scripts/buildCSS.js",
     "clean": "rimraf lib esm",
-    "precover": "rimraf coverage && npm run react",
-    "cover": "cross-env NODE_ENV=test node --max-old-space-size=4096 $(which nyc) npm run mocha",
     "lint": "eslint --ext .js,.jsx src test",
     "mocha": "mocha ./test/_helpers",
     "storybook:uninstall": "npm uninstall --no-save @storybook/react && rimraf node_modules/@storybook node_modules/react-modal node_modules/react-dom-factories",
     "react": "NPM_CONFIG_LEGACY_PEER_DEPS=true enzyme-adapter-react-install 16",
     "pretest": "npm run --silent lint",
     "pretests-only": "npm run react",
-    "tests-only": "npm run mocha --silent",
+    "tests-only": "cross-env NODE_ENV=test nyc npm run mocha --silent",
     "pretests-karma": "npm run react",
     "tests-karma": "karma start",
     "test": "npm run build && npm run tests-only",
@@ -73,7 +71,6 @@
     "babel-preset-airbnb": "^4.5.0",
     "chai": "^4.2.0",
     "clean-css": "^4.2.3",
-    "coveralls": "^3.1.0",
     "cross-env": "^5.2.1",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-helper": "^1.3.9",
@@ -98,7 +95,7 @@
     "mocha-wrap": "^2.1.2",
     "moment": "^2.29.1",
     "moment-jalaali": "^0.7.4",
-    "nyc": "^14.1.1",
+    "nyc": "^10.3.2",
     "raw-loader": "^0.5.1",
     "react": "^0.14 || ^15.5.4 || ^16.1.1",
     "react-dom": "^0.14 || ^15.5.4 || ^16.1.1",
@@ -138,12 +135,6 @@
     "react-dom": "^0.14 || ^15.5.4 || ^16.1.1",
     "react-with-direction": "^1.3.1"
   },
-  "greenkeeper": {
-    "ignore": [
-      "mocha",
-      "webpack"
-    ]
-  },
   "engines": {
     "node": ">=0.10"
   }
diff --git a/test/components/DateRangePickerInputController_spec.jsx b/test/components/DateRangePickerInputController_spec.jsx
index 91601231c3..b6112065bd 100644
--- a/test/components/DateRangePickerInputController_spec.jsx
+++ b/test/components/DateRangePickerInputController_spec.jsx
@@ -4,8 +4,7 @@ import moment from 'moment';
 import sinon from 'sinon-sandbox';
 import { shallow } from 'enzyme';
 
-import DateRangePickerInputController
-  from '../../src/components/DateRangePickerInputController';
+import DateRangePickerInputController from '../../src/components/DateRangePickerInputController';
 
 import DateRangePickerInput from '../../src/components/DateRangePickerInput';
 

From 67fc5447add57c19ddb4a99efe583e4804b15d5b Mon Sep 17 00:00:00 2001
From: Greg O'Connor <greg.oconnor@airbnb.com>
Date: Wed, 27 Jan 2021 10:23:47 -0800
Subject: [PATCH 591/618] [Fix] `DateRangePicker`, `DateRangePickerInput`: Fix
 keyboard navigation

Keyboard navigation is broken for the date range picker. The following
bugs exist:

When passing through the component with tab-navigation, after exiting
the end-date input the dropdown does not close. When attempting to enter
values into the end-date dropdown, users would have to tab backwards
back to the dropdown to enter values. The simplest and clearest solution
that came to be is simply to put the day picker after the currently
active input. In this way, the dropdown always appears next in the
tab-order to the input the user has selected. The existing blur handler
in the dropdown means that tabbing through the component will leave the
dropdown closed at the end.

The react keys ensure that the element is just moved over in the DOM and
so there is no flickering.

Fixes #1809

Co-authored-by: Greg O'Connor <greg.oconnor@airbnb.com>
Co-authored-by: Daniel M <daniel.magarreiro@airbnb.com>
---
 src/components/DateRangePicker.jsx       |  1 +
 src/components/DateRangePickerInput.jsx  |  4 +-
 test/components/DateRangePicker_spec.jsx | 61 ++++++++++++++++++++++++
 3 files changed, 65 insertions(+), 1 deletion(-)

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 040d1fa597..a67e535c1a 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -481,6 +481,7 @@ class DateRangePicker extends React.PureComponent {
     /* eslint-disable jsx-a11y/click-events-have-key-events */
     return (
       <div
+        key="day-picker"
         ref={this.setDayPickerContainerRef}
         {...css(
           styles.DateRangePicker_picker,
diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index 924ba9c4bc..d3923c98b5 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -253,7 +253,7 @@ function DateRangePickerInput({
         regular={regular}
       />
 
-      {children}
+      {!isEndDateFocused && children}
 
       {
         <div
@@ -289,6 +289,8 @@ function DateRangePickerInput({
         regular={regular}
       />
 
+      {isEndDateFocused && children}
+
       {showClearDates && (
         <button
           type="button"
diff --git a/test/components/DateRangePicker_spec.jsx b/test/components/DateRangePicker_spec.jsx
index 158bb255d4..7f20e12d75 100644
--- a/test/components/DateRangePicker_spec.jsx
+++ b/test/components/DateRangePicker_spec.jsx
@@ -9,6 +9,7 @@ import DateRangePicker, { PureDateRangePicker } from '../../src/components/DateR
 
 import DateRangePickerInputController from '../../src/components/DateRangePickerInputController';
 import DayPickerRangeController from '../../src/components/DayPickerRangeController';
+import DayPicker from '../../src/components/DayPicker';
 
 import {
   HORIZONTAL_ORIENTATION,
@@ -17,6 +18,49 @@ import {
 
 const describeIfWindow = typeof document === 'undefined' ? describe.skip : describe;
 
+class DateRangePickerWrapper extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      focusedInput: null,
+      startDate: null,
+      endDate: null,
+    };
+
+    this.onDatesChange = this.onDatesChange.bind(this);
+    this.onFocusChange = this.onFocusChange.bind(this);
+  }
+
+  onDatesChange({ startDate, endDate }) {
+    this.setState({ startDate, endDate });
+  }
+
+  onFocusChange(focusedInput) {
+    this.setState({ focusedInput });
+  }
+
+  render() {
+    const { focusedInput, startDate, endDate } = this.state;
+
+    return (
+      <div>
+        <DateRangePicker
+          {...this.props}
+          onDatesChange={this.onDatesChange}
+          onFocusChange={this.onFocusChange}
+          focusedInput={focusedInput}
+          startDate={startDate}
+          endDate={endDate}
+        />
+        <button type="button">
+          Dummy button
+        </button>
+      </div>
+    );
+  }
+}
+
 const requiredProps = {
   onDatesChange: () => {},
   onFocusChange: () => {},
@@ -539,6 +583,23 @@ describe('DateRangePicker', () => {
     });
   });
 
+  describeIfWindow('day picker position', () => {
+    it('day picker is opened after the end date input when end date input is focused', () => {
+      const wrapper = mount((
+        <DateRangePickerWrapper
+          startDateId="startDate"
+          endDateId="endDate"
+        />
+      ));
+      expect(wrapper.find(DayPicker)).to.have.length(0);
+      wrapper.find('input').at(0).simulate('focus'); // when focusing on start date the day picker is rendered after the start date input
+      expect(wrapper.find('DateRangePickerInput').children().childAt(1).find(DayPicker)).to.have.length(1);
+      wrapper.find('input').at(1).simulate('focus'); // when focusing on end date the day picker is rendered after the end date input
+      expect(wrapper.find('DateRangePickerInput').children().childAt(1).find(DayPicker)).to.have.length(0);
+      expect(wrapper.find('DateRangePickerInput').children().childAt(3).find(DayPicker)).to.have.length(1);
+    });
+  });
+
   describeIfWindow('#onDayPickerBlur', () => {
     it('sets state.isDateRangePickerInputFocused to true', () => {
       const wrapper = shallow((

From b8e26f01933aa6513af6fd22a7525ff1cd30df06 Mon Sep 17 00:00:00 2001
From: Tanner Byers <tanner.byers@availity.com>
Date: Thu, 28 Oct 2021 15:29:24 -0400
Subject: [PATCH 592/618] [New] DateInput,
 {DateRange,SingleDate}Picker{,Input,InputController}: add autocomplete prop

---
 README.md                                          | 2 ++
 examples/DateRangePickerWrapper.jsx                | 1 +
 examples/SingleDatePickerWrapper.jsx               | 1 +
 src/components/DateInput.jsx                       | 5 ++++-
 src/components/DateRangePicker.jsx                 | 3 +++
 src/components/DateRangePickerInput.jsx            | 5 +++++
 src/components/DateRangePickerInputController.jsx  | 4 ++++
 src/components/SingleDatePicker.jsx                | 3 +++
 src/components/SingleDatePickerInput.jsx           | 4 ++++
 src/components/SingleDatePickerInputController.jsx | 4 ++++
 src/shapes/DateRangePickerShape.js                 | 1 +
 src/shapes/SingleDatePickerShape.js                | 1 +
 stories/DateRangePicker.js                         | 3 +++
 stories/SingleDatePicker.js                        | 5 +++++
 14 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index f3a23ef153..315ac38e69 100644
--- a/README.md
+++ b/README.md
@@ -158,6 +158,7 @@ noBorder: PropTypes.bool,
 block: PropTypes.bool,
 small: PropTypes.bool,
 regular: PropTypes.bool,
+autoComplete: PropTypes.string,
 
 // calendar presentation and interaction related props
 renderMonthText: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'), // (month) => PropTypes.string,
@@ -244,6 +245,7 @@ noBorder: PropTypes.bool,
 block: PropTypes.bool,
 small: PropTypes.bool,
 regular: PropTypes.bool,
+autoComplete: PropTypes.string,
 
 // calendar presentation and interaction related props
 renderMonthText: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'), // (month) => PropTypes.string,
diff --git a/examples/DateRangePickerWrapper.jsx b/examples/DateRangePickerWrapper.jsx
index 96154f4d06..a210448ff0 100644
--- a/examples/DateRangePickerWrapper.jsx
+++ b/examples/DateRangePickerWrapper.jsx
@@ -58,6 +58,7 @@ const defaultProps = {
   block: false,
   small: false,
   regular: false,
+  autoComplete: 'off',
 
   // calendar presentation and interaction related props
   renderMonthText: null,
diff --git a/examples/SingleDatePickerWrapper.jsx b/examples/SingleDatePickerWrapper.jsx
index 0dcf491462..9b3eaf8c80 100644
--- a/examples/SingleDatePickerWrapper.jsx
+++ b/examples/SingleDatePickerWrapper.jsx
@@ -43,6 +43,7 @@ const defaultProps = {
   regular: false,
   verticalSpacing: undefined,
   keepFocusOnInput: false,
+  autoComplete: 'off',
 
   // calendar presentation and interaction related props
   renderMonthText: null,
diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
index 8a3467105f..e9c12dfccc 100644
--- a/src/components/DateInput.jsx
+++ b/src/components/DateInput.jsx
@@ -29,6 +29,7 @@ const propTypes = forbidExtraProps({
   placeholder: PropTypes.string,
   displayValue: PropTypes.string,
   ariaLabel: PropTypes.string,
+  autoComplete: PropTypes.string,
   titleText: PropTypes.string,
   screenReaderMessage: PropTypes.string,
   focused: PropTypes.bool,
@@ -58,6 +59,7 @@ const defaultProps = {
   placeholder: 'Select Date',
   displayValue: '',
   ariaLabel: undefined,
+  autoComplete: 'off',
   titleText: undefined,
   screenReaderMessage: '',
   focused: false,
@@ -177,6 +179,7 @@ class DateInput extends React.PureComponent {
       id,
       placeholder,
       ariaLabel,
+      autoComplete,
       titleText,
       displayValue,
       screenReaderMessage,
@@ -234,7 +237,7 @@ class DateInput extends React.PureComponent {
           onKeyDown={this.onKeyDown}
           onFocus={onFocus}
           placeholder={placeholder}
-          autoComplete="off"
+          autoComplete={autoComplete}
           disabled={disabled}
           readOnly={typeof readOnly === 'boolean' ? readOnly : isTouch}
           required={required}
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index a67e535c1a..1f706991d4 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -99,6 +99,7 @@ const defaultProps = {
   verticalHeight: null,
   transitionDuration: undefined,
   verticalSpacing: DEFAULT_VERTICAL_SPACING,
+  autoComplete: 'off',
   horizontalMonthPadding: undefined,
 
   // navigation related props
@@ -595,6 +596,7 @@ class DateRangePicker extends React.PureComponent {
       disabled,
       required,
       readOnly,
+      autoComplete,
       openDirection,
       phrases,
       isOutsideRange,
@@ -668,6 +670,7 @@ class DateRangePicker extends React.PureComponent {
         small={small}
         regular={regular}
         verticalSpacing={verticalSpacing}
+        autoComplete={autoComplete}
       >
         {this.maybeRenderDayPickerWithPortal()}
       </DateRangePickerInputController>
diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index d3923c98b5..1f0a2551e2 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -72,6 +72,7 @@ const propTypes = forbidExtraProps({
   small: PropTypes.bool,
   regular: PropTypes.bool,
   verticalSpacing: nonNegativeInteger,
+  autoComplete: PropTypes.string,
 
   // accessibility
   isFocused: PropTypes.bool, // describes actual DOM focus
@@ -93,6 +94,7 @@ const defaultProps = {
   startDateTitleText: undefined,
   endDateTitleText: undefined,
   screenReaderMessage: '',
+  autoComplete: 'off',
   onStartDateFocus() {},
   onEndDateFocus() {},
   onStartDateChange() {},
@@ -162,6 +164,7 @@ function DateRangePickerInput({
   disabled,
   required,
   readOnly,
+  autoComplete,
   showCaret,
   openDirection,
   showDefaultInputIcon,
@@ -233,6 +236,7 @@ function DateRangePickerInput({
         id={startDateId}
         placeholder={startDatePlaceholderText}
         ariaLabel={startDateAriaLabel}
+        autoComplete={autoComplete}
         titleText={startDateTitleText}
         displayValue={startDate}
         screenReaderMessage={screenReaderStartDateText}
@@ -269,6 +273,7 @@ function DateRangePickerInput({
         id={endDateId}
         placeholder={endDatePlaceholderText}
         ariaLabel={endDateAriaLabel}
+        autoComplete={autoComplete}
         titleText={endDateTitleText}
         displayValue={endDate}
         screenReaderMessage={screenReaderEndDateText}
diff --git a/src/components/DateRangePickerInputController.jsx b/src/components/DateRangePickerInputController.jsx
index d644b55037..56d2a39fd0 100644
--- a/src/components/DateRangePickerInputController.jsx
+++ b/src/components/DateRangePickerInputController.jsx
@@ -58,6 +58,7 @@ const propTypes = forbidExtraProps({
   small: PropTypes.bool,
   regular: PropTypes.bool,
   verticalSpacing: nonNegativeInteger,
+  autoComplete: PropTypes.string,
 
   keepOpenOnDateSelect: PropTypes.bool,
   reopenPickerOnClearDates: PropTypes.bool,
@@ -117,6 +118,7 @@ const defaultProps = {
   small: false,
   regular: false,
   verticalSpacing: undefined,
+  autoComplete: 'off',
 
   keepOpenOnDateSelect: false,
   reopenPickerOnClearDates: false,
@@ -312,6 +314,7 @@ export default class DateRangePickerInputController extends React.PureComponent
       small,
       regular,
       verticalSpacing,
+      autoComplete,
     } = this.props;
 
     const startDateString = this.getDateString(startDate);
@@ -359,6 +362,7 @@ export default class DateRangePickerInputController extends React.PureComponent
         small={small}
         regular={regular}
         verticalSpacing={verticalSpacing}
+        autoComplete={autoComplete}
       >
         {children}
       </DateRangePickerInput>
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index c449f7e2fb..d1a5e3f19c 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -53,6 +53,7 @@ const defaultProps = {
   id: 'date',
   placeholder: 'Date',
   ariaLabel: undefined,
+  autoComplete: 'off',
   titleText: undefined,
   disabled: false,
   required: false,
@@ -550,6 +551,7 @@ class SingleDatePicker extends React.PureComponent {
       id,
       placeholder,
       ariaLabel,
+      autoComplete,
       titleText,
       disabled,
       focused,
@@ -592,6 +594,7 @@ class SingleDatePicker extends React.PureComponent {
         id={id}
         placeholder={placeholder}
         ariaLabel={ariaLabel}
+        autoComplete={autoComplete}
         titleText={titleText}
         focused={focused}
         isFocused={isInputFocused}
diff --git a/src/components/SingleDatePickerInput.jsx b/src/components/SingleDatePickerInput.jsx
index ce9aa24e79..17de3d017b 100644
--- a/src/components/SingleDatePickerInput.jsx
+++ b/src/components/SingleDatePickerInput.jsx
@@ -22,6 +22,7 @@ const propTypes = forbidExtraProps({
   children: PropTypes.node,
   placeholder: PropTypes.string,
   ariaLabel: PropTypes.string,
+  autoComplete: PropTypes.string,
   titleText: PropTypes.string,
   displayValue: PropTypes.string,
   screenReaderMessage: PropTypes.string,
@@ -60,6 +61,7 @@ const defaultProps = {
   children: null,
   placeholder: 'Select Date',
   ariaLabel: undefined,
+  autoComplete: 'off',
   titleText: undefined,
   displayValue: '',
   screenReaderMessage: '',
@@ -99,6 +101,7 @@ function SingleDatePickerInput({
   children,
   placeholder,
   ariaLabel,
+  autoComplete,
   titleText,
   displayValue,
   focused,
@@ -172,6 +175,7 @@ function SingleDatePickerInput({
         id={id}
         placeholder={placeholder}
         ariaLabel={ariaLabel}
+        autoComplete={autoComplete}
         titleText={titleText}
         displayValue={displayValue}
         screenReaderMessage={screenReaderText}
diff --git a/src/components/SingleDatePickerInputController.jsx b/src/components/SingleDatePickerInputController.jsx
index ccaf469369..c7a3214c3e 100644
--- a/src/components/SingleDatePickerInputController.jsx
+++ b/src/components/SingleDatePickerInputController.jsx
@@ -36,6 +36,7 @@ const propTypes = forbidExtraProps({
   id: PropTypes.string.isRequired,
   placeholder: PropTypes.string,
   ariaLabel: PropTypes.string,
+  autoComplete: PropTypes.string,
   titleText: PropTypes.string,
   screenReaderMessage: PropTypes.string,
   showClearDate: PropTypes.bool,
@@ -82,6 +83,7 @@ const defaultProps = {
 
   placeholder: '',
   ariaLabel: undefined,
+  autoComplete: 'off',
   titleText: undefined,
   screenReaderMessage: 'Date',
   showClearDate: false,
@@ -204,6 +206,7 @@ export default class SingleDatePickerInputController extends React.PureComponent
       id,
       placeholder,
       ariaLabel,
+      autoComplete,
       titleText,
       disabled,
       focused,
@@ -237,6 +240,7 @@ export default class SingleDatePickerInputController extends React.PureComponent
         id={id}
         placeholder={placeholder}
         ariaLabel={ariaLabel}
+        autoComplete={autoComplete}
         titleText={titleText}
         focused={focused}
         isFocused={isFocused}
diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js
index a54126932b..94763c0aab 100644
--- a/src/shapes/DateRangePickerShape.js
+++ b/src/shapes/DateRangePickerShape.js
@@ -52,6 +52,7 @@ export default {
   small: PropTypes.bool,
   regular: PropTypes.bool,
   keepFocusOnInput: PropTypes.bool,
+  autoComplete: PropTypes.string,
 
   // calendar presentation and interaction related props
   renderMonthText: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'),
diff --git a/src/shapes/SingleDatePickerShape.js b/src/shapes/SingleDatePickerShape.js
index ef9edcb4e0..a55a02c012 100644
--- a/src/shapes/SingleDatePickerShape.js
+++ b/src/shapes/SingleDatePickerShape.js
@@ -41,6 +41,7 @@ export default {
   regular: PropTypes.bool,
   verticalSpacing: nonNegativeInteger,
   keepFocusOnInput: PropTypes.bool,
+  autoComplete: PropTypes.string,
 
   // calendar presentation and interaction related props
   renderMonthText: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'),
diff --git a/stories/DateRangePicker.js b/stories/DateRangePicker.js
index 0353260f59..8f124cde84 100644
--- a/stories/DateRangePicker.js
+++ b/stories/DateRangePicker.js
@@ -124,4 +124,7 @@ storiesOf('DateRangePicker (DRP)', module)
       maxDate={moment().add(2, 'months').endOf('month')}
       numberOfMonths={2}
     />
+  )))
+  .add('with custom autoComplete', withInfo()(() => (
+    <DateRangePickerWrapper autoComplete="datePicker" />
   )));
diff --git a/stories/SingleDatePicker.js b/stories/SingleDatePicker.js
index 81ad053090..3a7d96e656 100644
--- a/stories/SingleDatePicker.js
+++ b/stories/SingleDatePicker.js
@@ -98,4 +98,9 @@ storiesOf('SingleDatePicker (SDP)', module)
       orientation={VERTICAL_ORIENTATION}
       verticalHeight={568}
     />
+  )))
+  .add('with custom autoComplete attribute', withInfo()(() => (
+    <SingleDatePickerWrapper
+    autoComplete="datePicker"
+    />
   )));

From af5d7c25a2be60b139736afe931cabf10b747870 Mon Sep 17 00:00:00 2001
From: mum-never-proud <abhuz@hotmail.com>
Date: Sat, 30 May 2020 20:03:30 +0530
Subject: [PATCH 593/618] [meta] storybook tag fix

---
 stories/DateRangePicker_day.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/stories/DateRangePicker_day.js b/stories/DateRangePicker_day.js
index 7c75a2614a..8f27abb041 100644
--- a/stories/DateRangePicker_day.js
+++ b/stories/DateRangePicker_day.js
@@ -126,7 +126,7 @@ storiesOf('DRP - Day Props', module)
   )))
   .add('with custom daily details', withInfo()(() => (
     <DateRangePickerWrapper
-      renderDayContents={day => <td className="foo-bar">{day.format('ddd')}</td>}
+      renderDayContents={day => <div className="foo-bar">{day.format('ddd')}</div>}
       autoFocus
     />
   )))

From 3ddb7b56a944f64bede7b33c1cdb300a0b6fb877 Mon Sep 17 00:00:00 2001
From: Dane David <dane@surveysparrow.com>
Date: Fri, 8 May 2020 22:34:04 +0530
Subject: [PATCH 594/618] [readme] Add `verticalSpacing`

Fixes #1852.
---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index 315ac38e69..da8f6c36e2 100644
--- a/README.md
+++ b/README.md
@@ -180,6 +180,7 @@ reopenPickerOnClearDates: PropTypes.bool,
 renderCalendarInfo: PropTypes.func,
 renderMonthElement: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'), PropTypes.func, // ({ month, onMonthSelect, onYearSelect, isVisible }) => PropTypes.node,
 hideKeyboardShortcutsPanel: PropTypes.bool,
+verticalSpacing: PropTypes.number,
 
 // navigation related props
 navPrev: PropTypes.node,
@@ -267,6 +268,7 @@ renderMonthElement: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'r
 hideKeyboardShortcutsPanel: PropTypes.bool,
 daySize: nonNegativeInteger,
 isRTL: PropTypes.bool,
+verticalSpacing: PropTypes.number,
 
 // navigation related props
 navPrev: PropTypes.node,

From 5bcf4d59655c641dfdd620984d07119c3e4cbc1d Mon Sep 17 00:00:00 2001
From: sainath-batthala <sainath.b@practo.com>
Date: Wed, 19 Jul 2017 16:22:25 +0530
Subject: [PATCH 595/618] [Fix] `DateRangePicker`, `SingleDatePickerInput`: Set
 tab index as -1 for default and custom date icons

---
 src/components/DateRangePicker.jsx       | 1 +
 src/components/SingleDatePickerInput.jsx | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 1f706991d4..445d7e0c5e 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -563,6 +563,7 @@ class DateRangePicker extends React.PureComponent {
             type="button"
             onClick={this.onOutsideClick}
             aria-label={phrases.closeDatePicker}
+            tabIndex="-1"
           >
             {closeIcon}
           </button>
diff --git a/src/components/SingleDatePickerInput.jsx b/src/components/SingleDatePickerInput.jsx
index 17de3d017b..e6516704b6 100644
--- a/src/components/SingleDatePickerInput.jsx
+++ b/src/components/SingleDatePickerInput.jsx
@@ -153,6 +153,7 @@ function SingleDatePickerInput({
       disabled={disabled}
       aria-label={phrases.focusStartDate}
       onClick={onFocus}
+      tabIndex="-1"
     >
       {calendarIcon}
     </button>

From f5fa12291d858546a9754bea72e13ccc433102bc Mon Sep 17 00:00:00 2001
From: Sajid Ahmed <sajid.ahmed@mail.utoronto.ca>
Date: Mon, 18 Feb 2019 17:20:16 -0500
Subject: [PATCH 596/618] [Fix] `DayPicker`: Fixed month transition in RTL mode

Fixes #1551
---
 src/components/DayPicker.jsx       |   6 +-
 test/components/DayPicker_spec.jsx | 104 +++++++++++++++++++++++++++++
 2 files changed, 108 insertions(+), 2 deletions(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 34345f7259..a5aff8b123 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -473,10 +473,11 @@ class DayPicker extends React.PureComponent {
         e.preventDefault();
         if (isRTL) {
           newFocusedDate.add(1, 'day');
+          didTransitionMonth = this.maybeTransitionNextMonth(newFocusedDate);
         } else {
           newFocusedDate.subtract(1, 'day');
+          didTransitionMonth = this.maybeTransitionPrevMonth(newFocusedDate);
         }
-        didTransitionMonth = this.maybeTransitionPrevMonth(newFocusedDate);
         break;
       case 'Home':
         e.preventDefault();
@@ -498,10 +499,11 @@ class DayPicker extends React.PureComponent {
         e.preventDefault();
         if (isRTL) {
           newFocusedDate.subtract(1, 'day');
+          didTransitionMonth = this.maybeTransitionPrevMonth(newFocusedDate);
         } else {
           newFocusedDate.add(1, 'day');
+          didTransitionMonth = this.maybeTransitionNextMonth(newFocusedDate);
         }
-        didTransitionMonth = this.maybeTransitionNextMonth(newFocusedDate);
         break;
       case 'End':
         e.preventDefault();
diff --git a/test/components/DayPicker_spec.jsx b/test/components/DayPicker_spec.jsx
index 46d0697f90..ed005f40c1 100644
--- a/test/components/DayPicker_spec.jsx
+++ b/test/components/DayPicker_spec.jsx
@@ -296,6 +296,58 @@ describe('DayPicker', () => {
           const arg = maybeTransitionPrevMonthSpy.getCall(0).args[0];
           expect(arg.isSame(oneDayBefore, 'day')).to.equal(true);
         });
+
+        it('arg is end of previous month', () => {
+          const startOfThisMonth = today.clone().startOf('month');
+          const endOfPrevMonth = startOfThisMonth.clone().subtract(1, 'day');
+
+          const maybeTransitionPrevMonthSpy = sinon.spy(PureDayPicker.prototype, 'maybeTransitionPrevMonth');
+          const wrapper = shallow(<DayPicker />).dive();
+          wrapper.setState({
+            focusedDate: startOfThisMonth,
+          });
+          wrapper.instance().onKeyDown({ ...event, key: 'ArrowLeft' });
+          const arg = maybeTransitionPrevMonthSpy.getCall(0).args[0];
+          expect(arg.isSame(endOfPrevMonth, 'day')).to.equal(true);
+        });
+      });
+
+      describe('ArrowLeft -- RTL', () => {
+        it('calls maybeTransitionNextMonth', () => {
+          const maybeTransitionNextMonthSpy = sinon.spy(PureDayPicker.prototype, 'maybeTransitionNextMonth');
+          const wrapper = shallow(<DayPicker isRTL />).dive();
+          wrapper.setState({
+            focusedDate: today,
+          });
+          wrapper.instance().onKeyDown({ ...event, key: 'ArrowLeft' });
+          expect(maybeTransitionNextMonthSpy.callCount).to.equal(1);
+        });
+
+        it('arg is 1 day after focusedDate', () => {
+          const oneDayAfter = today.clone().add(1, 'day');
+          const maybeTransitionNextMonthSpy = sinon.spy(PureDayPicker.prototype, 'maybeTransitionNextMonth');
+          const wrapper = shallow(<DayPicker isRTL />).dive();
+          wrapper.setState({
+            focusedDate: today,
+          });
+          wrapper.instance().onKeyDown({ ...event, key: 'ArrowLeft' });
+          const arg = maybeTransitionNextMonthSpy.getCall(0).args[0];
+          expect(arg.isSame(oneDayAfter, 'day')).to.equal(true);
+        });
+
+        it('arg is start of next month', () => {
+          const endOfThisMonth = today.clone().endOf('month');
+          const startOfNextMonth = endOfThisMonth.clone().add(1, 'day');
+
+          const maybeTransitionNextMonthSpy = sinon.spy(PureDayPicker.prototype, 'maybeTransitionNextMonth');
+          const wrapper = shallow(<DayPicker isRTL />).dive();
+          wrapper.setState({
+            focusedDate: endOfThisMonth,
+          });
+          wrapper.instance().onKeyDown({ ...event, key: 'ArrowLeft' });
+          const arg = maybeTransitionNextMonthSpy.getCall(0).args[0];
+          expect(arg.isSame(startOfNextMonth, 'day')).to.equal(true);
+        });
       });
 
       describe('Home', () => {
@@ -392,6 +444,58 @@ describe('DayPicker', () => {
           const arg = maybeTransitionNextMonthSpy.getCall(0).args[0];
           expect(arg.isSame(oneDayAfter, 'day')).to.equal(true);
         });
+
+        it('arg is start of next  month', () => {
+          const endOfThisMonth = today.clone().endOf('month');
+          const startOfNextMonth = endOfThisMonth.clone().add(1, 'day');
+
+          const maybeTransitionNextMonthSpy = sinon.spy(PureDayPicker.prototype, 'maybeTransitionNextMonth');
+          const wrapper = shallow(<DayPicker />).dive();
+          wrapper.setState({
+            focusedDate: endOfThisMonth,
+          });
+          wrapper.instance().onKeyDown({ ...event, key: 'ArrowRight' });
+          const arg = maybeTransitionNextMonthSpy.getCall(0).args[0];
+          expect(arg.isSame(startOfNextMonth, 'day')).to.equal(true);
+        });
+      });
+
+      describe('ArrowRight -- RTL', () => {
+        it('calls maybeTransitionPrevMonth', () => {
+          const maybeTransitionPrevMonthSpy = sinon.spy(PureDayPicker.prototype, 'maybeTransitionPrevMonth');
+          const wrapper = shallow(<DayPicker isRTL />).dive();
+          wrapper.setState({
+            focusedDate: today,
+          });
+          wrapper.instance().onKeyDown({ ...event, key: 'ArrowRight' });
+          expect(maybeTransitionPrevMonthSpy.callCount).to.equal(1);
+        });
+
+        it('arg is 1 day before focusedDate', () => {
+          const oneDayBefore = today.clone().subtract(1, 'day');
+          const maybeTransitionPrevMonthSpy = sinon.spy(PureDayPicker.prototype, 'maybeTransitionPrevMonth');
+          const wrapper = shallow(<DayPicker isRTL />).dive();
+          wrapper.setState({
+            focusedDate: today,
+          });
+          wrapper.instance().onKeyDown({ ...event, key: 'ArrowRight' });
+          const arg = maybeTransitionPrevMonthSpy.getCall(0).args[0];
+          expect(arg.isSame(oneDayBefore, 'day')).to.equal(true);
+        });
+
+        it('arg is end of previous month', () => {
+          const startOfThisMonth = today.clone().startOf('month');
+          const endOfPrevMonth = startOfThisMonth.clone().subtract(1, 'day');
+
+          const maybeTransitionPrevMonthSpy = sinon.spy(PureDayPicker.prototype, 'maybeTransitionPrevMonth');
+          const wrapper = shallow(<DayPicker isRTL />).dive();
+          wrapper.setState({
+            focusedDate: startOfThisMonth,
+          });
+          wrapper.instance().onKeyDown({ ...event, key: 'ArrowRight' });
+          const arg = maybeTransitionPrevMonthSpy.getCall(0).args[0];
+          expect(arg.isSame(endOfPrevMonth, 'day')).to.equal(true);
+        });
       });
 
       describe('End', () => {

From 7490089eb2d4a31b0ce3a6a0aa6681025436e486 Mon Sep 17 00:00:00 2001
From: Jay Swain <github@jayswain.com>
Date: Tue, 27 Nov 2018 16:59:21 -0800
Subject: [PATCH 597/618] [Fix] `DayPicker`, `DayPickerSingleDateController`:
 Snap to new date if date is off screen

Fixes #1320.

Co-authored-by: Jay Swain <github@jayswain.com>
Co-authored-by: Jordan Harband <ljharb@gmail.com>
---
 src/components/DayPicker.jsx                  |  6 ++
 .../DayPickerSingleDateController.jsx         |  6 ++
 .../DayPickerSingleDateController_spec.jsx    | 26 +++++++
 test/components/DayPicker_spec.jsx            | 67 ++++++++++++++++---
 4 files changed, 96 insertions(+), 9 deletions(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index a5aff8b123..0d25a948cf 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -300,6 +300,12 @@ class DayPicker extends React.PureComponent {
         this.setState({
           currentMonth: nextProps.initialVisibleMonth(),
         });
+      } else {
+        const { numberOfMonths } = this.props;
+        const newDate = nextProps.initialVisibleMonth();
+        if (!isDayVisible(newDate, currentMonth, numberOfMonths)) {
+          this.onMonthChange(newDate);
+        }
       }
     }
 
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index de492c3a24..36705917a6 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -268,6 +268,7 @@ export default class DayPickerSingleDateController extends React.PureComponent {
     const recomputePropModifiers = (
       recomputeOutsideRange || recomputeDayBlocked || recomputeDayHighlighted
     );
+    const { currentMonth: prevCurrentMonth } = this.state;
 
     if (
       numberOfMonths !== prevNumberOfMonths
@@ -277,6 +278,11 @@ export default class DayPickerSingleDateController extends React.PureComponent {
         && !prevFocused
         && focused
       )
+      || (
+        prevDate
+        && prevDate.diff(date)
+        && !isDayVisible(date, prevCurrentMonth, numberOfMonths)
+      )
     ) {
       const newMonthState = this.getStateForNewMonth(nextProps);
       const { currentMonth } = newMonthState;
diff --git a/test/components/DayPickerSingleDateController_spec.jsx b/test/components/DayPickerSingleDateController_spec.jsx
index 3bc892f635..f6a62e04e5 100644
--- a/test/components/DayPickerSingleDateController_spec.jsx
+++ b/test/components/DayPickerSingleDateController_spec.jsx
@@ -47,6 +47,32 @@ describe('DayPickerSingleDateController', () => {
       onFocusChange() {},
     };
 
+    describe('props.date changed', () => {
+      describe('date is not visible', () => {
+        it('setState gets called with new month', () => {
+          sinon.stub(isDayVisible, 'default').returns(false);
+          const date = today;
+          const newDate = moment().add(1, 'month');
+          const wrapper = shallow(<DayPickerSingleDateController {...props} date={date} />);
+          expect(wrapper.state()).to.have.property('currentMonth', date);
+          wrapper.instance().componentWillReceiveProps({ ...props, date: newDate });
+          expect(wrapper.state()).to.have.property('currentMonth', newDate);
+        });
+      });
+
+      describe('date is visible', () => {
+        it('setState gets called with existing month', () => {
+          sinon.stub(isDayVisible, 'default').returns(true);
+          const date = today;
+          const newDate = moment().add(1, 'month');
+          const wrapper = shallow(<DayPickerSingleDateController {...props} date={date} />);
+          expect(wrapper.state()).to.have.property('currentMonth', date);
+          wrapper.instance().componentWillReceiveProps({ ...props, date: newDate });
+          expect(wrapper.state()).to.have.property('currentMonth', date);
+        });
+      });
+    });
+
     describe('modifiers', () => {
       describe('selected modifier', () => {
         describe('props.date did not change', () => {
diff --git a/test/components/DayPicker_spec.jsx b/test/components/DayPicker_spec.jsx
index ed005f40c1..53070b483c 100644
--- a/test/components/DayPicker_spec.jsx
+++ b/test/components/DayPicker_spec.jsx
@@ -7,7 +7,7 @@ import { mount, shallow } from 'enzyme';
 import * as isDayVisible from '../../src/utils/isDayVisible';
 import isSameMonth from '../../src/utils/isSameMonth';
 
-import DayPicker, { PureDayPicker } from '../../src/components/DayPicker';
+import DayPicker, { PureDayPicker, defaultProps as DayPickerDefaultProps } from '../../src/components/DayPicker';
 import CalendarMonthGrid from '../../src/components/CalendarMonthGrid';
 import DayPickerNavigation from '../../src/components/DayPickerNavigation';
 import DayPickerKeyboardShortcuts from '../../src/components/DayPickerKeyboardShortcuts';
@@ -1022,7 +1022,7 @@ describe('DayPicker', () => {
         });
 
         it('does not update state.currentMonthScrollTop', () => {
-          sinon.spy(DayPicker.prototype, 'setTransitionContainerRef');
+          sinon.spy(PureDayPicker.prototype, 'setTransitionContainerRef');
           const wrapper = mount(<DayPicker orientation={HORIZONTAL_ORIENTATION} />);
           expect(wrapper.state().currentMonthScrollTop).to.equal(null);
         });
@@ -1035,7 +1035,7 @@ describe('DayPicker', () => {
         });
 
         it('does not update state.currentMonthScrollTop', () => {
-          sinon.spy(DayPicker.prototype, 'setTransitionContainerRef');
+          sinon.spy(PureDayPicker.prototype, 'setTransitionContainerRef');
           const wrapper = mount(<DayPicker orientation={VERTICAL_ORIENTATION} />);
           expect(wrapper.state().currentMonthScrollTop).to.equal(null);
         });
@@ -1043,17 +1043,17 @@ describe('DayPicker', () => {
 
       describe('props.orientation === VERTICAL_SCROLLABLE', () => {
         it('updates state.currentMonthScrollTop', () => {
-          sinon.spy(DayPicker.prototype, 'setTransitionContainerRef');
+          sinon.spy(PureDayPicker.prototype, 'setTransitionContainerRef');
           const wrapper = mount(<DayPicker orientation={VERTICAL_SCROLLABLE} />);
           expect(wrapper.state().currentMonthScrollTop).to.not.equal(null);
         });
       });
     });
 
-    describe.skip('#componentWillReceiveProps', () => {
-      describe('props.orientation === VERTICAL_SCROLLABLE', () => {
+    describe('#componentWillReceiveProps', () => {
+      describe.skip('props.orientation === VERTICAL_SCROLLABLE', () => {
         it('updates state.currentMonthScrollTop', () => {
-          sinon.spy(DayPicker.prototype, 'setTransitionContainerRef');
+          sinon.spy(PureDayPicker.prototype, 'setTransitionContainerRef');
           const wrapper = mount(<DayPicker orientation={VERTICAL_SCROLLABLE} />);
           const prevCurrentMonthScrollTop = wrapper.state().currentMonthScrollTop;
           wrapper.setState({
@@ -1063,6 +1063,55 @@ describe('DayPicker', () => {
           expect(wrapper.state().currentMonthScrollTop).to.not.equal(prevCurrentMonthScrollTop);
         });
       });
+
+      describe('props.date changed', () => {
+        const props = {
+          ...DayPickerDefaultProps,
+          onDateChange() {},
+          onFocusChange() {},
+          initialVisibleMonth() { return today; },
+          theme: { reactDates: { spacing: {} } },
+          styles: {},
+        };
+
+        describe('date is not visible', () => {
+          it('setState gets called with new month', () => {
+            sinon.stub(isDayVisible, 'default').returns(false);
+            const date = today;
+            const newDate = date.clone().add(1, 'month');
+            const wrapper = shallow(<PureDayPicker {...props} date={date} />);
+            expect(wrapper.state().currentMonth).to.eql(date);
+            wrapper.instance().componentWillReceiveProps(
+              {
+                ...props,
+                date: newDate,
+                initialVisibleMonth() { return newDate; },
+              },
+              {},
+            );
+            expect(wrapper.state().currentMonth).to.eql(newDate);
+          });
+        });
+
+        describe('date is visible', () => {
+          it('setState gets called with existing month', () => {
+            sinon.stub(isDayVisible, 'default').returns(true);
+            const date = today;
+            const newDate = date.clone().add(1, 'month');
+            const wrapper = shallow(<PureDayPicker {...props} date={date} />);
+            expect(wrapper.state().currentMonth).to.eql(date);
+            wrapper.instance().componentWillReceiveProps(
+              {
+                ...props,
+                date: newDate,
+                initialVisibleMonth() { return newDate; },
+              },
+              {},
+            );
+            expect(wrapper.state().currentMonth).to.eql(date);
+          });
+        });
+      });
     });
 
     describe('#componentDidUpdate', () => {
@@ -1199,7 +1248,7 @@ describe('DayPicker', () => {
 
       describe.skip('props.orientation === VERTICAL_SCROLLABLE', () => {
         it('does not update transitionContainer ref`s scrollTop currentMonth stays the same', () => {
-          sinon.spy(DayPicker.prototype, 'setTransitionContainerRef');
+          sinon.spy(PureDayPicker.prototype, 'setTransitionContainerRef');
           const wrapper = mount(<DayPicker orientation={VERTICAL_SCROLLABLE} />);
           const prevScrollTop = wrapper.transitionContainer.scrollTop;
           wrapper.setState({
@@ -1209,7 +1258,7 @@ describe('DayPicker', () => {
         });
 
         it('updates transitionContainer ref`s scrollTop currentMonth changes', () => {
-          sinon.spy(DayPicker.prototype, 'setTransitionContainerRef');
+          sinon.spy(PureDayPicker.prototype, 'setTransitionContainerRef');
           const wrapper = mount(<DayPicker orientation={VERTICAL_SCROLLABLE} />);
           const prevScrollTop = wrapper.transitionContainer.scrollTop;
           wrapper.setState({

From fe31485fad71929eabbb349403f9deccff466b72 Mon Sep 17 00:00:00 2001
From: Cedric Sohrauer <sohrauer@gmail.com>
Date: Tue, 2 Jul 2019 18:08:18 +0200
Subject: [PATCH 598/618] [Tests] add shared `describeIfWindow` helper

---
 test/_helpers/describeIfWindow.js         | 1 +
 test/components/DateRangePicker_spec.jsx  | 2 +-
 test/components/SingleDatePicker_spec.jsx | 2 +-
 test/utils/disableScroll_spec.js          | 2 +-
 4 files changed, 4 insertions(+), 3 deletions(-)
 create mode 100644 test/_helpers/describeIfWindow.js

diff --git a/test/_helpers/describeIfWindow.js b/test/_helpers/describeIfWindow.js
new file mode 100644
index 0000000000..0889ec0a72
--- /dev/null
+++ b/test/_helpers/describeIfWindow.js
@@ -0,0 +1 @@
+export default typeof document === 'undefined' ? describe.skip : describe;
diff --git a/test/components/DateRangePicker_spec.jsx b/test/components/DateRangePicker_spec.jsx
index 7f20e12d75..ca34ae3f8f 100644
--- a/test/components/DateRangePicker_spec.jsx
+++ b/test/components/DateRangePicker_spec.jsx
@@ -16,7 +16,7 @@ import {
   START_DATE,
 } from '../../src/constants';
 
-const describeIfWindow = typeof document === 'undefined' ? describe.skip : describe;
+import describeIfWindow from '../_helpers/describeIfWindow';
 
 class DateRangePickerWrapper extends React.Component {
   constructor(props) {
diff --git a/test/components/SingleDatePicker_spec.jsx b/test/components/SingleDatePicker_spec.jsx
index 05f2a217bd..b94e184811 100644
--- a/test/components/SingleDatePicker_spec.jsx
+++ b/test/components/SingleDatePicker_spec.jsx
@@ -9,7 +9,7 @@ import DayPickerSingleDateController from '../../src/components/DayPickerSingleD
 import SingleDatePickerInputController from '../../src/components/SingleDatePickerInputController';
 import SingleDatePicker, { PureSingleDatePicker } from '../../src/components/SingleDatePicker';
 
-const describeIfWindow = typeof document === 'undefined' ? describe.skip : describe;
+import describeIfWindow from '../_helpers/describeIfWindow';
 
 describe('SingleDatePicker', () => {
   afterEach(() => {
diff --git a/test/utils/disableScroll_spec.js b/test/utils/disableScroll_spec.js
index 8063b578fd..6a06021073 100644
--- a/test/utils/disableScroll_spec.js
+++ b/test/utils/disableScroll_spec.js
@@ -5,7 +5,7 @@ import disableScroll, {
   getScrollAncestorsOverflowY,
 } from '../../src/utils/disableScroll';
 
-const describeIfWindow = typeof document === 'undefined' ? describe.skip : describe;
+import describeIfWindow from '../_helpers/describeIfWindow';
 
 const createScrollContainer = (level = 1) => {
   const el = document.createElement('div');

From 17c3c881bcc890dc02d2423f90dcdfb6b478fe26 Mon Sep 17 00:00:00 2001
From: Cedric Sohrauer <sohrauer@gmail.com>
Date: Tue, 2 Jul 2019 18:08:18 +0200
Subject: [PATCH 599/618] [Fix] `CalendarMonth`: recompute month title height
 when rerendering

---
 src/components/CalendarMonth.jsx       | 14 ++++++++-
 test/components/CalendarMonth_spec.jsx | 40 +++++++++++++++++++++++++-
 2 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/src/components/CalendarMonth.jsx b/src/components/CalendarMonth.jsx
index 0c9002fbf2..d20650b2e9 100644
--- a/src/components/CalendarMonth.jsx
+++ b/src/components/CalendarMonth.jsx
@@ -106,7 +106,7 @@ class CalendarMonth extends React.PureComponent {
   }
 
   componentDidMount() {
-    this.setMonthTitleHeightTimeout = setTimeout(this.setMonthTitleHeight, 0);
+    this.queueSetMonthTitleHeight();
   }
 
   componentWillReceiveProps(nextProps) {
@@ -131,6 +131,14 @@ class CalendarMonth extends React.PureComponent {
     }
   }
 
+  componentDidUpdate(prevProps) {
+    const { setMonthTitleHeight } = this.props;
+
+    if (prevProps.setMonthTitleHeight === null && setMonthTitleHeight !== null) {
+      this.queueSetMonthTitleHeight();
+    }
+  }
+
   componentWillUnmount() {
     if (this.setMonthTitleHeightTimeout) {
       clearTimeout(this.setMonthTitleHeightTimeout);
@@ -149,6 +157,10 @@ class CalendarMonth extends React.PureComponent {
     this.captionRef = ref;
   }
 
+  queueSetMonthTitleHeight() {
+    this.setMonthTitleHeightTimeout = window.setTimeout(this.setMonthTitleHeight, 0);
+  }
+
   render() {
     const {
       dayAriaLabelFormat,
diff --git a/test/components/CalendarMonth_spec.jsx b/test/components/CalendarMonth_spec.jsx
index 05a3a6dd82..1a0ab8966e 100644
--- a/test/components/CalendarMonth_spec.jsx
+++ b/test/components/CalendarMonth_spec.jsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { expect } from 'chai';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 import sinon from 'sinon-sandbox';
 import moment from 'moment';
+import describeIfWindow from '../_helpers/describeIfWindow';
 
 import CalendarMonth from '../../src/components/CalendarMonth';
 
@@ -46,5 +47,42 @@ describe('CalendarMonth', () => {
       expect(typeof isVisible).to.equal('boolean');
       expect(wrapper.find('#month-element').exists()).to.equal(true);
     });
+
+    describeIfWindow('setMonthTitleHeight', () => {
+      beforeEach(() => {
+        sinon.stub(window, 'setTimeout').callsFake((handler) => handler());
+      });
+
+      it('sets the title height after mount', () => {
+        const setMonthTitleHeightStub = sinon.stub();
+        mount(
+          <CalendarMonth
+            isVisible
+            setMonthTitleHeight={setMonthTitleHeightStub}
+          />,
+        );
+
+        expect(setMonthTitleHeightStub).to.have.property('callCount', 1);
+      });
+
+      describe('if the callbacks gets set again', () => {
+        it('updates the title height', () => {
+          const setMonthTitleHeightStub = sinon.stub();
+          const wrapper = mount(
+            <CalendarMonth
+              isVisible
+              setMonthTitleHeight={setMonthTitleHeightStub}
+            />,
+          );
+
+          expect(setMonthTitleHeightStub).to.have.property('callCount', 1);
+
+          wrapper.setProps({ setMonthTitleHeight: null });
+
+          wrapper.setProps({ setMonthTitleHeight: setMonthTitleHeightStub });
+          expect(setMonthTitleHeightStub).to.have.property('callCount', 2);
+        });
+      });
+    });
   });
 });

From ba61165b236d4e6ea053d0d34553468dbdaa4940 Mon Sep 17 00:00:00 2001
From: mmarkelov <maks-markel@mail.ru>
Date: Thu, 9 Jan 2020 13:11:41 +0300
Subject: [PATCH 600/618] [Fix] `DateRangePickerInputController`: fix onClose
 method

---
 .../DateRangePickerInputController.jsx          |  7 ++++++-
 .../DateRangePickerInputController_spec.jsx     | 17 +++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/components/DateRangePickerInputController.jsx b/src/components/DateRangePickerInputController.jsx
index 56d2a39fd0..b2c9ad7135 100644
--- a/src/components/DateRangePickerInputController.jsx
+++ b/src/components/DateRangePickerInputController.jsx
@@ -179,6 +179,8 @@ export default class DateRangePickerInputController extends React.PureComponent
       minimumNights,
       keepOpenOnDateSelect,
       onDatesChange,
+      onClose,
+      onFocusChange,
     } = this.props;
 
     const endDate = toMomentObject(endDateString, this.getDisplayFormat());
@@ -188,7 +190,10 @@ export default class DateRangePickerInputController extends React.PureComponent
       && !(startDate && isBeforeDay(endDate, startDate.clone().add(minimumNights, 'days')));
     if (isEndDateValid) {
       onDatesChange({ startDate, endDate });
-      if (!keepOpenOnDateSelect) this.onClearFocus();
+      if (!keepOpenOnDateSelect) {
+        onFocusChange(null);
+        onClose({ startDate, endDate });
+      }
     } else {
       onDatesChange({
         startDate,
diff --git a/test/components/DateRangePickerInputController_spec.jsx b/test/components/DateRangePickerInputController_spec.jsx
index b6112065bd..a5f63e1539 100644
--- a/test/components/DateRangePickerInputController_spec.jsx
+++ b/test/components/DateRangePickerInputController_spec.jsx
@@ -221,6 +221,23 @@ describe('DateRangePickerInputController', () => {
           expect(isSameDay(onDatesChangeArgs.endDate, futureDate)).to.equal(true);
         });
 
+        it('calls props.onClose with props.startDate and provided end date', () => {
+          const onCloseStub = sinon.stub();
+          const wrapper = shallow((
+            <DateRangePickerInputController
+              onClose={onCloseStub}
+              startDate={startDate}
+            />
+          ));
+          wrapper.instance().onEndDateChange(validFutureDateString);
+          expect(onCloseStub).to.have.property('callCount', 1);
+
+          const [onCloseArgs] = onCloseStub.getCall(0).args;
+          const futureDate = moment(validFutureDateString);
+          expect(onCloseArgs).to.have.property('startDate', startDate);
+          expect(isSameDay(onCloseArgs.endDate, futureDate)).to.equal(true);
+        });
+
         describe('props.onFocusChange', () => {
           it('is called once', () => {
             const onFocusChangeStub = sinon.stub();

From dce9c227e305072d34aa62d3f9384a13a89f666c Mon Sep 17 00:00:00 2001
From: Maja Wichrowska <majapw@gmail.com>
Date: Fri, 11 Oct 2019 20:35:48 -0700
Subject: [PATCH 601/618] Revert "Revert "[Tests] `DayPicker`: unit test for
 getWeekHeaders()""

This reverts commit defb7fd680cab4154d12e9416c9f28e4a47e9e5b.
---
 test/components/DayPicker_spec.jsx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/test/components/DayPicker_spec.jsx b/test/components/DayPicker_spec.jsx
index 53070b483c..6b11bf3793 100644
--- a/test/components/DayPicker_spec.jsx
+++ b/test/components/DayPicker_spec.jsx
@@ -3,6 +3,7 @@ import moment from 'moment/min/moment-with-locales';
 import { expect } from 'chai';
 import sinon from 'sinon-sandbox';
 import { mount, shallow } from 'enzyme';
+import { cloneDeep } from 'lodash';
 
 import * as isDayVisible from '../../src/utils/isDayVisible';
 import isSameMonth from '../../src/utils/isSameMonth';
@@ -1013,6 +1014,23 @@ describe('DayPicker', () => {
     });
   });
 
+  describe('#getWeekHeaders', () => {
+    it('returns unmutated weekday headers for currentMonth in a future', () => {
+      sinon.stub(PureDayPicker.prototype, 'render').returns(null);
+
+      const getWeekHeadersSpy = sinon.spy(PureDayPicker.prototype, 'getWeekHeaders');
+      const INITIAL_MONTH = moment().add(2, 'Months').week(3).weekday(3);
+      const wrapper = shallow(<DayPicker initialVisibleMonth={() => INITIAL_MONTH} />).dive();
+      const instance = wrapper.instance();
+      const state = cloneDeep(wrapper.state());
+
+      expect(instance.getWeekHeaders()).to.be.eql(INITIAL_MONTH.localeData().weekdaysMin());
+      expect(instance.state).not.to.equal(state);
+      expect(instance.state).to.eql(state);
+      expect(getWeekHeadersSpy).to.have.property('callCount', 1);
+    });
+  });
+
   describe('life cycle methods', () => {
     describe.skip('#componentDidMount', () => {
       describe('props.orientation === HORIZONTAL_ORIENTATION', () => {

From 57cba2f836a203f6ff246feb5edf423a3853953e Mon Sep 17 00:00:00 2001
From: mmarkelov <maks-markel@mail.ru>
Date: Tue, 17 Dec 2019 10:14:37 +0300
Subject: [PATCH 602/618] [Refactor] `CalendarMonthGrid`: Skip unnecessary
 setState

---
 src/components/CalendarMonthGrid.jsx       | 44 +++++++++++-----------
 test/components/CalendarMonthGrid_spec.jsx | 15 ++++++++
 2 files changed, 38 insertions(+), 21 deletions(-)

diff --git a/src/components/CalendarMonthGrid.jsx b/src/components/CalendarMonthGrid.jsx
index 849635d423..8734f6e8fe 100644
--- a/src/components/CalendarMonthGrid.jsx
+++ b/src/components/CalendarMonthGrid.jsx
@@ -151,33 +151,35 @@ class CalendarMonthGrid extends React.PureComponent {
     const hasNumberOfMonthsChanged = prevNumberOfMonths !== numberOfMonths;
     let newMonths = months;
 
-    if (hasMonthChanged && !hasNumberOfMonthsChanged) {
-      if (isNextMonth(prevInitialMonth, initialMonth)) {
-        newMonths = months.slice(1);
-        newMonths.push(months[months.length - 1].clone().add(1, 'month'));
-      } else if (isPrevMonth(prevInitialMonth, initialMonth)) {
-        newMonths = months.slice(0, months.length - 1);
-        newMonths.unshift(months[0].clone().subtract(1, 'month'));
-      } else {
+    if (hasMonthChanged || hasNumberOfMonthsChanged) {
+      if (hasMonthChanged && !hasNumberOfMonthsChanged) {
+        if (isNextMonth(prevInitialMonth, initialMonth)) {
+          newMonths = months.slice(1);
+          newMonths.push(months[months.length - 1].clone().add(1, 'month'));
+        } else if (isPrevMonth(prevInitialMonth, initialMonth)) {
+          newMonths = months.slice(0, months.length - 1);
+          newMonths.unshift(months[0].clone().subtract(1, 'month'));
+        } else {
+          const withoutTransitionMonths = orientation === VERTICAL_SCROLLABLE;
+          newMonths = getMonths(initialMonth, numberOfMonths, withoutTransitionMonths);
+        }
+      }
+
+      if (hasNumberOfMonthsChanged) {
         const withoutTransitionMonths = orientation === VERTICAL_SCROLLABLE;
         newMonths = getMonths(initialMonth, numberOfMonths, withoutTransitionMonths);
       }
-    }
 
-    if (hasNumberOfMonthsChanged) {
-      const withoutTransitionMonths = orientation === VERTICAL_SCROLLABLE;
-      newMonths = getMonths(initialMonth, numberOfMonths, withoutTransitionMonths);
-    }
+      const momentLocale = moment.locale();
+      if (this.locale !== momentLocale) {
+        this.locale = momentLocale;
+        newMonths = newMonths.map((m) => m.locale(this.locale));
+      }
 
-    const momentLocale = moment.locale();
-    if (this.locale !== momentLocale) {
-      this.locale = momentLocale;
-      newMonths = newMonths.map((m) => m.locale(this.locale));
+      this.setState({
+        months: newMonths,
+      });
     }
-
-    this.setState({
-      months: newMonths,
-    });
   }
 
   componentDidUpdate() {
diff --git a/test/components/CalendarMonthGrid_spec.jsx b/test/components/CalendarMonthGrid_spec.jsx
index 209d7a3d92..3461a18ec1 100644
--- a/test/components/CalendarMonthGrid_spec.jsx
+++ b/test/components/CalendarMonthGrid_spec.jsx
@@ -45,6 +45,21 @@ describe('CalendarMonthGrid', () => {
     expect(Object.keys(collisions).length).to.equal(months.length);
   });
 
+  it('does not setState if hasMonthChanged and hasNumberOfMonthsChanged are falsy', () => {
+    const setState = sinon.stub(CalendarMonthGrid.prototype, 'setState');
+    const initialMonth = moment();
+    const wrapper = shallow((
+      <CalendarMonthGrid numberOfMonths={12} initialMonth={initialMonth} />
+    )).dive();
+
+    wrapper.instance().componentWillReceiveProps({
+      initialMonth,
+      numberOfMonths: 12,
+    });
+
+    expect(setState.callCount).to.eq(0);
+  });
+
   it('works with the same number of months', () => {
     const initialMonth = moment();
     const wrapper = shallow((

From a83df7eac8c85e48326c2a44951ae21d086d7498 Mon Sep 17 00:00:00 2001
From: "maksim.markelov" <Maksim.Markelov@nexign.com>
Date: Thu, 28 Nov 2019 12:27:13 +0300
Subject: [PATCH 603/618] [Fix] `DateInput`: Fix invalid font-weight for
 regular option

Fixes #1868. Closes #1869.
---
 src/components/DateInput.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
index e9c12dfccc..e24da287e0 100644
--- a/src/components/DateInput.jsx
+++ b/src/components/DateInput.jsx
@@ -342,7 +342,7 @@ export default withStyles(({
   },
 
   DateInput_input__regular: {
-    fontWeight: 'auto',
+    fontWeight: 'inherit',
   },
 
   DateInput_input__readOnly: {

From d9b1dd0e0171af551fb8c61f0b23831b86d82a52 Mon Sep 17 00:00:00 2001
From: Cheng Wang <wangcheng678@gmail.com>
Date: Sun, 19 Jan 2020 13:06:21 +0800
Subject: [PATCH 604/618] [Fix] use the injected css prop instead of the
 imported one

---
 src/components/CalendarDay.jsx                | 3 ++-
 src/components/CalendarMonth.jsx              | 3 ++-
 src/components/CalendarMonthGrid.jsx          | 3 ++-
 src/components/CustomizableCalendarDay.jsx    | 3 ++-
 src/components/DateInput.jsx                  | 3 ++-
 src/components/DateRangePicker.jsx            | 4 +++-
 src/components/DateRangePickerInput.jsx       | 3 ++-
 src/components/DayPicker.jsx                  | 4 +++-
 src/components/DayPickerKeyboardShortcuts.jsx | 3 ++-
 src/components/DayPickerNavigation.jsx        | 3 ++-
 src/components/KeyboardShortcutRow.jsx        | 3 ++-
 src/components/SingleDatePicker.jsx           | 4 +++-
 src/components/SingleDatePickerInput.jsx      | 3 ++-
 test/components/DayPicker_spec.jsx            | 1 +
 14 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/src/components/CalendarDay.jsx b/src/components/CalendarDay.jsx
index 29816a1dbf..036a7c7655 100644
--- a/src/components/CalendarDay.jsx
+++ b/src/components/CalendarDay.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import momentPropTypes from 'react-moment-proptypes';
 import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
-import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
+import { withStyles, withStylesPropTypes } from 'react-with-styles';
 import moment from 'moment';
 import raf from 'raf';
 
@@ -105,6 +105,7 @@ class CalendarDay extends React.PureComponent {
       modifiers,
       renderDayContents,
       tabIndex,
+      css,
       styles,
       phrases,
     } = this.props;
diff --git a/src/components/CalendarMonth.jsx b/src/components/CalendarMonth.jsx
index d20650b2e9..248a486416 100644
--- a/src/components/CalendarMonth.jsx
+++ b/src/components/CalendarMonth.jsx
@@ -4,7 +4,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import momentPropTypes from 'react-moment-proptypes';
 import { forbidExtraProps, mutuallyExclusiveProps, nonNegativeInteger } from 'airbnb-prop-types';
-import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
+import { withStyles, withStylesPropTypes } from 'react-with-styles';
 import moment from 'moment';
 
 import { CalendarDayPhrases } from '../defaultPhrases';
@@ -183,6 +183,7 @@ class CalendarMonth extends React.PureComponent {
       renderDayContents,
       renderMonthElement,
       renderMonthText,
+      css,
       styles,
       verticalBorderSpacing,
     } = this.props;
diff --git a/src/components/CalendarMonthGrid.jsx b/src/components/CalendarMonthGrid.jsx
index 8734f6e8fe..dd1c80bf8f 100644
--- a/src/components/CalendarMonthGrid.jsx
+++ b/src/components/CalendarMonthGrid.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import momentPropTypes from 'react-moment-proptypes';
 import { forbidExtraProps, mutuallyExclusiveProps, nonNegativeInteger } from 'airbnb-prop-types';
-import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
+import { withStyles, withStylesPropTypes } from 'react-with-styles';
 import moment from 'moment';
 import { addEventListener } from 'consolidated-events';
 
@@ -260,6 +260,7 @@ class CalendarMonthGrid extends React.PureComponent {
       focusedDate,
       isFocused,
       isRTL,
+      css,
       styles,
       phrases,
       dayAriaLabelFormat,
diff --git a/src/components/CustomizableCalendarDay.jsx b/src/components/CustomizableCalendarDay.jsx
index 2a3ee15752..ad3cdbb5d7 100644
--- a/src/components/CustomizableCalendarDay.jsx
+++ b/src/components/CustomizableCalendarDay.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import momentPropTypes from 'react-moment-proptypes';
 import { forbidExtraProps, nonNegativeInteger, or } from 'airbnb-prop-types';
-import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
+import { withStyles, withStylesPropTypes } from 'react-with-styles';
 import moment from 'moment';
 import raf from 'raf';
 
@@ -279,6 +279,7 @@ class CustomizableCalendarDay extends React.PureComponent {
       modifiers,
       tabIndex,
       renderDayContents,
+      css,
       styles,
       phrases,
 
diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
index e24da287e0..ff486eb155 100644
--- a/src/components/DateInput.jsx
+++ b/src/components/DateInput.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
-import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
+import { withStyles, withStylesPropTypes } from 'react-with-styles';
 import throttle from 'lodash/throttle';
 import isTouchDevice from 'is-touch-device';
 
@@ -194,6 +194,7 @@ class DateInput extends React.PureComponent {
       small,
       regular,
       block,
+      css,
       styles,
       theme: { reactDates },
     } = this.props;
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 445d7e0c5e..361056c7df 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import moment from 'moment';
-import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
+import { withStyles, withStylesPropTypes } from 'react-with-styles';
 import { Portal } from 'react-portal';
 import { forbidExtraProps } from 'airbnb-prop-types';
 import { addEventListener } from 'consolidated-events';
@@ -450,6 +450,7 @@ class DateRangePicker extends React.PureComponent {
       dayAriaLabelFormat,
       isRTL,
       weekDayFormat,
+      css,
       styles,
       verticalHeight,
       noBorder,
@@ -616,6 +617,7 @@ class DateRangePicker extends React.PureComponent {
       verticalSpacing,
       small,
       regular,
+      css,
       styles,
     } = this.props;
 
diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index 1f0a2551e2..09e2ef7d82 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
-import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
+import { withStyles, withStylesPropTypes } from 'react-with-styles';
 
 import { DateRangePickerInputPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
@@ -180,6 +180,7 @@ function DateRangePickerInput({
   verticalSpacing,
   small,
   regular,
+  css,
   styles,
 }) {
   const calendarIcon = customInputIcon || (
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 0d25a948cf..a56653cd23 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { forbidExtraProps, mutuallyExclusiveProps, nonNegativeInteger } from 'airbnb-prop-types';
-import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
+import { withStyles, withStylesPropTypes } from 'react-with-styles';
 
 import moment from 'moment';
 import throttle from 'lodash/throttle';
@@ -983,6 +983,7 @@ class DayPicker extends React.PureComponent {
       horizontalMonthPadding,
       orientation,
       renderWeekHeaderElement,
+      css,
       styles,
     } = this.props;
 
@@ -1068,6 +1069,7 @@ class DayPicker extends React.PureComponent {
       daySize,
       isFocused,
       isRTL,
+      css,
       styles,
       theme,
       phrases,
diff --git a/src/components/DayPickerKeyboardShortcuts.jsx b/src/components/DayPickerKeyboardShortcuts.jsx
index 0f686a1c17..acb521e19d 100644
--- a/src/components/DayPickerKeyboardShortcuts.jsx
+++ b/src/components/DayPickerKeyboardShortcuts.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { forbidExtraProps } from 'airbnb-prop-types';
-import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
+import { withStyles, withStylesPropTypes } from 'react-with-styles';
 
 import { DayPickerKeyboardShortcutsPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
@@ -166,6 +166,7 @@ class DayPickerKeyboardShortcuts extends React.PureComponent {
       buttonLocation,
       showKeyboardShortcutsPanel,
       closeKeyboardShortcutsPanel,
+      css,
       styles,
       phrases,
       renderKeyboardShortcutsButton,
diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
index 1fc2ec3d2f..9b576ef3c5 100644
--- a/src/components/DayPickerNavigation.jsx
+++ b/src/components/DayPickerNavigation.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { forbidExtraProps } from 'airbnb-prop-types';
-import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
+import { withStyles, withStylesPropTypes } from 'react-with-styles';
 
 import { DayPickerNavigationPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
@@ -84,6 +84,7 @@ class DayPickerNavigation extends React.PureComponent {
       renderNavNextButton,
       showNavPrevButton,
       showNavNextButton,
+      css,
       styles,
     } = this.props;
 
diff --git a/src/components/KeyboardShortcutRow.jsx b/src/components/KeyboardShortcutRow.jsx
index 7e3d2401c4..2aa755a09e 100644
--- a/src/components/KeyboardShortcutRow.jsx
+++ b/src/components/KeyboardShortcutRow.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { forbidExtraProps } from 'airbnb-prop-types';
-import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
+import { withStyles, withStylesPropTypes } from 'react-with-styles';
 
 const propTypes = forbidExtraProps({
   ...withStylesPropTypes,
@@ -20,6 +20,7 @@ function KeyboardShortcutRow({
   label,
   action,
   block,
+  css,
   styles,
 }) {
   return (
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index d1a5e3f19c..1f7195b110 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import moment from 'moment';
-import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
+import { withStyles, withStylesPropTypes } from 'react-with-styles';
 import { Portal } from 'react-portal';
 import { forbidExtraProps } from 'airbnb-prop-types';
 import { addEventListener } from 'consolidated-events';
@@ -437,6 +437,7 @@ class SingleDatePicker extends React.PureComponent {
       isDayBlocked,
       isDayHighlighted,
       weekDayFormat,
+      css,
       styles,
       verticalHeight,
       transitionDuration,
@@ -578,6 +579,7 @@ class SingleDatePicker extends React.PureComponent {
       verticalSpacing,
       reopenPickerOnClearDate,
       keepOpenOnDateSelect,
+      css,
       styles,
       isOutsideRange,
       isDayBlocked,
diff --git a/src/components/SingleDatePickerInput.jsx b/src/components/SingleDatePickerInput.jsx
index e6516704b6..82a0269832 100644
--- a/src/components/SingleDatePickerInput.jsx
+++ b/src/components/SingleDatePickerInput.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
-import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
+import { withStyles, withStylesPropTypes } from 'react-with-styles';
 
 import { SingleDatePickerInputPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
@@ -131,6 +131,7 @@ function SingleDatePickerInput({
   small,
   regular,
   verticalSpacing,
+  css,
   styles,
 }) {
   const calendarIcon = customInputIcon || (
diff --git a/test/components/DayPicker_spec.jsx b/test/components/DayPicker_spec.jsx
index 6b11bf3793..be120be3c6 100644
--- a/test/components/DayPicker_spec.jsx
+++ b/test/components/DayPicker_spec.jsx
@@ -1090,6 +1090,7 @@ describe('DayPicker', () => {
           initialVisibleMonth() { return today; },
           theme: { reactDates: { spacing: {} } },
           styles: {},
+          css() {},
         };
 
         describe('date is not visible', () => {

From adec1c86590f1f86a4cd2537c6b780cdc35dd812 Mon Sep 17 00:00:00 2001
From: Alex Kubyshkin <glint@mekonik.com>
Date: Sat, 18 Sep 2021 19:31:01 +0300
Subject: [PATCH 605/618] [Fix]
 `DayPicker{,RangeController,SingleDateController}`: Start every day at
 noon(12:00).

---
 src/components/DayPicker.jsx                      |  6 +++---
 src/components/DayPickerRangeController.jsx       |  2 +-
 src/components/DayPickerSingleDateController.jsx  |  2 +-
 src/utils/getNumberOfCalendarMonthWeeks.js        |  2 +-
 src/utils/isDayVisible.js                         |  9 +++++----
 test/components/DayPickerRangeController_spec.jsx | 15 +++++++++++++++
 .../DayPickerSingleDateController_spec.jsx        | 13 +++++++++++++
 test/utils/isDayVisible_spec.js                   |  8 ++++++++
 8 files changed, 47 insertions(+), 10 deletions(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index a56653cd23..83afc34680 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -203,7 +203,7 @@ class DayPicker extends React.PureComponent {
 
     const currentMonth = props.hidden ? moment() : props.initialVisibleMonth();
 
-    let focusedDate = currentMonth.clone().startOf('month');
+    let focusedDate = currentMonth.clone().startOf('month').hour(12);
     if (props.getFirstFocusableDay) {
       focusedDate = props.getFirstFocusableDay(currentMonth);
     }
@@ -487,7 +487,7 @@ class DayPicker extends React.PureComponent {
         break;
       case 'Home':
         e.preventDefault();
-        newFocusedDate.startOf('week');
+        newFocusedDate.startOf('week').hour(12);
         didTransitionMonth = this.maybeTransitionPrevMonth(newFocusedDate);
         break;
       case 'PageUp':
@@ -703,7 +703,7 @@ class DayPicker extends React.PureComponent {
     }
 
     if (newMonth && (!focusedDate || !isDayVisible(focusedDate, newMonth, numberOfMonths))) {
-      focusedDate = newMonth.clone().startOf('month');
+      focusedDate = newMonth.clone().startOf('month').hour(12);
     }
 
     return focusedDate;
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 87c61f0544..988595a855 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -1045,7 +1045,7 @@ export default class DayPickerRangeController extends React.PureComponent {
       numberOfMonths,
     } = this.props;
 
-    let focusedDate = newMonth.clone().startOf('month');
+    let focusedDate = newMonth.clone().startOf('month').hour(12);
     if (focusedInput === START_DATE && startDate) {
       focusedDate = startDate.clone();
     } else if (focusedInput === END_DATE && !endDate && startDate) {
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 36705917a6..dad08cb141 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -545,7 +545,7 @@ export default class DayPickerSingleDateController extends React.PureComponent {
   getFirstFocusableDay(newMonth) {
     const { date, numberOfMonths } = this.props;
 
-    let focusedDate = newMonth.clone().startOf('month');
+    let focusedDate = newMonth.clone().startOf('month').hour(12);
     if (date) {
       focusedDate = date.clone();
     }
diff --git a/src/utils/getNumberOfCalendarMonthWeeks.js b/src/utils/getNumberOfCalendarMonthWeeks.js
index 0ed4da8676..0e9482664f 100644
--- a/src/utils/getNumberOfCalendarMonthWeeks.js
+++ b/src/utils/getNumberOfCalendarMonthWeeks.js
@@ -9,7 +9,7 @@ export default function getNumberOfCalendarMonthWeeks(
   month,
   firstDayOfWeek = moment.localeData().firstDayOfWeek(),
 ) {
-  const firstDayOfMonth = month.clone().startOf('month');
+  const firstDayOfMonth = month.clone().startOf('month').hour(12);
   const numBlankDays = getBlankDaysBeforeFirstDay(firstDayOfMonth, firstDayOfWeek);
   return Math.ceil((numBlankDays + month.daysInMonth()) / 7);
 }
diff --git a/src/utils/isDayVisible.js b/src/utils/isDayVisible.js
index 34b9420339..e0d43f376c 100644
--- a/src/utils/isDayVisible.js
+++ b/src/utils/isDayVisible.js
@@ -21,7 +21,7 @@ export default function isDayVisible(day, month, numberOfMonths, enableOutsideDa
 
   if (enableOutsideDays) {
     if (!startCacheOutsideDays.has(startKey)) {
-      startCacheOutsideDays.set(startKey, month.clone().startOf('month').startOf('week'));
+      startCacheOutsideDays.set(startKey, month.clone().startOf('month').startOf('week').hour(12));
     }
 
     if (isBeforeDay(day, startCacheOutsideDays.get(startKey))) return false;
@@ -30,7 +30,8 @@ export default function isDayVisible(day, month, numberOfMonths, enableOutsideDa
       endCacheOutsideDays.set(
         endKey,
         month.clone().endOf('week').add(numberOfMonths - 1, 'months').endOf('month')
-          .endOf('week'),
+          .endOf('week')
+          .hour(12),
       );
     }
 
@@ -40,7 +41,7 @@ export default function isDayVisible(day, month, numberOfMonths, enableOutsideDa
   // !enableOutsideDays
 
   if (!startCacheInsideDays.has(startKey)) {
-    startCacheInsideDays.set(startKey, month.clone().startOf('month'));
+    startCacheInsideDays.set(startKey, month.clone().startOf('month').hour(12));
   }
 
   if (isBeforeDay(day, startCacheInsideDays.get(startKey))) return false;
@@ -48,7 +49,7 @@ export default function isDayVisible(day, month, numberOfMonths, enableOutsideDa
   if (!endCacheInsideDays.has(endKey)) {
     endCacheInsideDays.set(
       endKey,
-      month.clone().add(numberOfMonths - 1, 'months').endOf('month'),
+      month.clone().add(numberOfMonths - 1, 'months').endOf('month').hour(12),
     );
   }
 
diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index f530b93f83..c224009c7c 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -3775,6 +3775,21 @@ describe('DayPickerRangeController', () => {
       });
     });
 
+    it('time is a noon', () => {
+      sinon.stub(DayPickerRangeController.prototype, 'isBlocked').returns(false);
+      const wrapper = shallow((
+        <DayPickerRangeController
+          focusedInput={null}
+          startDate={null}
+          endDate={null}
+          onFocusChange={sinon.stub()}
+          onDatesChange={sinon.stub()}
+        />
+      ));
+      const firstFocusableDay = wrapper.instance().getFirstFocusableDay(today);
+      expect(firstFocusableDay.hours()).to.equal(12);
+    });
+
     describe('desired day is blocked', () => {
       it('returns next unblocked visible day after desired day if exists', () => {
         const isBlockedStub = sinon.stub(DayPickerRangeController.prototype, 'isBlocked');
diff --git a/test/components/DayPickerSingleDateController_spec.jsx b/test/components/DayPickerSingleDateController_spec.jsx
index f6a62e04e5..5e6e09522f 100644
--- a/test/components/DayPickerSingleDateController_spec.jsx
+++ b/test/components/DayPickerSingleDateController_spec.jsx
@@ -1000,6 +1000,19 @@ describe('DayPickerSingleDateController', () => {
       expect(firstFocusableDay.isSame(date, 'day')).to.equal(true);
     });
 
+    it('time is a noon', () => {
+      sinon.stub(DayPickerSingleDateController.prototype, 'isBlocked').returns(false);
+      const wrapper = shallow((
+        <DayPickerSingleDateController
+          date={null}
+          onDateChange={sinon.stub()}
+          onFocusChange={sinon.stub()}
+        />
+      ));
+      const firstFocusableDay = wrapper.instance().getFirstFocusableDay(today);
+      expect(firstFocusableDay.hours()).to.equal(12);
+    });
+
     describe('desired date is blocked', () => {
       it('returns first unblocked visible day if exists', () => {
         const isBlockedStub = sinon.stub(DayPickerSingleDateController.prototype, 'isBlocked');
diff --git a/test/utils/isDayVisible_spec.js b/test/utils/isDayVisible_spec.js
index f42455b549..074c5f2e3e 100644
--- a/test/utils/isDayVisible_spec.js
+++ b/test/utils/isDayVisible_spec.js
@@ -49,4 +49,12 @@ describe('#isDayVisible', () => {
       expect(isDayVisible(test, currentMonth, 1, true)).to.equal(false);
     });
   });
+
+  // this test fails when run with the whole suite,
+  // potentially due to cache pollution from other tests
+  it.skip('works when the first day of the week that starts the month does not have a midnight', () => {
+    const march29 = moment('2020-03-29').utcOffset(-1 /* 'Atlantic/Azores' */);
+    const april2020 = moment('2020-04-02').utcOffset(-1 /* 'Atlantic/Azores' */);
+    expect(isDayVisible(march29, april2020, 1, true)).to.equal(true);
+  });
 });

From fdcdc457cfeedecd8fc3572db1b6ba15fe3ab44c Mon Sep 17 00:00:00 2001
From: axsann <7417697+axsann@users.noreply.github.com>
Date: Mon, 2 Mar 2020 18:52:42 +0900
Subject: [PATCH 606/618] [Fix] `DayPicker{Range,SingleDate}Controller`: Fix
 incorrect firstDayOfWeek null checking

Co-authored-by: axsann <7417697+axsann@users.noreply.github.com>
Co-authored-by: Jordan Harband <ljharb@gmail.com>
---
 src/components/DayPickerRangeController.jsx       | 15 +++++++++++----
 src/components/DayPickerSingleDateController.jsx  | 15 +++++++++++----
 test/components/DayPickerRangeController_spec.jsx | 13 +++++++++++++
 .../DayPickerSingleDateController_spec.jsx        | 13 +++++++++++++
 4 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 988595a855..881c4e75ea 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -1036,6 +1036,15 @@ export default class DayPickerRangeController extends React.PureComponent {
     });
   }
 
+  getFirstDayOfWeek() {
+    const { firstDayOfWeek } = this.props;
+    if (firstDayOfWeek == null) {
+      return moment.localeData().firstDayOfWeek();
+    }
+
+    return firstDayOfWeek;
+  }
+
   getFirstFocusableDay(newMonth) {
     const {
       startDate,
@@ -1250,13 +1259,11 @@ export default class DayPickerRangeController extends React.PureComponent {
   }
 
   isFirstDayOfWeek(day) {
-    const { firstDayOfWeek } = this.props;
-    return day.day() === (firstDayOfWeek || moment.localeData().firstDayOfWeek());
+    return day.day() === this.getFirstDayOfWeek();
   }
 
   isLastDayOfWeek(day) {
-    const { firstDayOfWeek } = this.props;
-    return day.day() === ((firstDayOfWeek || moment.localeData().firstDayOfWeek()) + 6) % 7;
+    return day.day() === (this.getFirstDayOfWeek() + 6) % 7;
   }
 
   isFirstPossibleEndDateForHoveredStartDate(day, hoverDate) {
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index dad08cb141..d4fae53608 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -542,6 +542,15 @@ export default class DayPickerSingleDateController extends React.PureComponent {
     });
   }
 
+  getFirstDayOfWeek() {
+    const { firstDayOfWeek } = this.props;
+    if (firstDayOfWeek == null) {
+      return moment.localeData().firstDayOfWeek();
+    }
+
+    return firstDayOfWeek;
+  }
+
   getFirstFocusableDay(newMonth) {
     const { date, numberOfMonths } = this.props;
 
@@ -643,13 +652,11 @@ export default class DayPickerSingleDateController extends React.PureComponent {
   }
 
   isFirstDayOfWeek(day) {
-    const { firstDayOfWeek } = this.props;
-    return day.day() === (firstDayOfWeek || moment.localeData().firstDayOfWeek());
+    return day.day() === this.getFirstDayOfWeek();
   }
 
   isLastDayOfWeek(day) {
-    const { firstDayOfWeek } = this.props;
-    return day.day() === ((firstDayOfWeek || moment.localeData().firstDayOfWeek()) + 6) % 7;
+    return day.day() === (this.getFirstDayOfWeek() + 6) % 7;
   }
 
   render() {
diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
index c224009c7c..55734c7b04 100644
--- a/test/components/DayPickerRangeController_spec.jsx
+++ b/test/components/DayPickerRangeController_spec.jsx
@@ -4946,6 +4946,19 @@ describe('DayPickerRangeController', () => {
         expect(wrapper.instance().isFirstDayOfWeek(moment().startOf('week').day(firstDayOfWeek))).to.equal(true);
       });
 
+      it('returns true if first day of week and prop are both zero', () => {
+        const firstDayOfWeek = 0;
+        const wrapper = shallow(<DayPickerRangeController firstDayOfWeek={firstDayOfWeek} />);
+        expect(wrapper.instance().isFirstDayOfWeek(moment().startOf('week').day(firstDayOfWeek))).to.equal(true);
+      });
+
+      it('returns true if first day of week is not zero, and prop is zero', () => {
+        sinon.stub(moment.localeData(), 'firstDayOfWeek').returns(1);
+        const firstDayOfWeek = 0;
+        const wrapper = shallow(<DayPickerRangeController firstDayOfWeek={firstDayOfWeek} />);
+        expect(wrapper.instance().isFirstDayOfWeek(moment().startOf('week').day(firstDayOfWeek))).to.equal(true);
+      });
+
       it('returns false if not the first day of the week', () => {
         const wrapper = shallow(<DayPickerRangeController />);
         expect(wrapper.instance().isFirstDayOfWeek(moment().endOf('week'))).to.equal(false);
diff --git a/test/components/DayPickerSingleDateController_spec.jsx b/test/components/DayPickerSingleDateController_spec.jsx
index 5e6e09522f..a0ff339810 100644
--- a/test/components/DayPickerSingleDateController_spec.jsx
+++ b/test/components/DayPickerSingleDateController_spec.jsx
@@ -1634,6 +1634,19 @@ describe('DayPickerSingleDateController', () => {
         expect(wrapper.instance().isFirstDayOfWeek(moment().startOf('week').day(firstDayOfWeek))).to.equal(true);
       });
 
+      it('returns true if first day of week and prop are both zero', () => {
+        const firstDayOfWeek = 0;
+        const wrapper = shallow(<DayPickerSingleDateController firstDayOfWeek={firstDayOfWeek} />);
+        expect(wrapper.instance().isFirstDayOfWeek(moment().startOf('week').day(firstDayOfWeek))).to.equal(true);
+      });
+
+      it('returns true if first day of week is not zero, and prop is zero', () => {
+        sinon.stub(moment.localeData(), 'firstDayOfWeek').returns(1);
+        const firstDayOfWeek = 0;
+        const wrapper = shallow(<DayPickerSingleDateController firstDayOfWeek={firstDayOfWeek} />);
+        expect(wrapper.instance().isFirstDayOfWeek(moment().startOf('week').day(firstDayOfWeek))).to.equal(true);
+      });
+
       it('returns false if not the first day of the week', () => {
         const wrapper = shallow(<DayPickerSingleDateController />);
         expect(wrapper.instance().isFirstDayOfWeek(moment().endOf('week'))).to.equal(false);

From 9494adb4616e2b42229bd510b789694dd9711ed4 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Thu, 2 Dec 2021 23:49:54 -0800
Subject: [PATCH 607/618] [Deps] update `color2k`, `object.values`,
 `react-moment-proptypes`, `react-with-direction`

---
 package.json | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 9400cc49fd..b052d45f12 100644
--- a/package.json
+++ b/package.json
@@ -112,19 +112,19 @@
   },
   "dependencies": {
     "airbnb-prop-types": "^2.16.0",
-    "color2k": "^1.1.1",
+    "color2k": "^1.2.4",
     "consolidated-events": "^1.1.1 || ^2.0.0",
     "enzyme-shallow-equal": "^1.0.4",
     "is-touch-device": "^1.0.1",
     "lodash": "^4.1.1",
     "object.assign": "^4.1.2",
-    "object.values": "^1.1.2",
+    "object.values": "^1.1.5",
     "prop-types": "^15.7.2",
     "raf": "^3.4.1",
-    "react-moment-proptypes": "^1.7.0",
+    "react-moment-proptypes": "^1.8.1",
     "react-outside-click-handler": "^1.3.0",
     "react-portal": "^4.2.1",
-    "react-with-direction": "^1.3.1",
+    "react-with-direction": "^1.4.0",
     "react-with-styles": "~4.1.0",
     "react-with-styles-interface-css": "^6.0.0"
   },
@@ -132,8 +132,7 @@
     "@babel/runtime": "^7.0.0",
     "moment": "^2.18.1",
     "react": "^0.14 || ^15.5.4 || ^16.1.1",
-    "react-dom": "^0.14 || ^15.5.4 || ^16.1.1",
-    "react-with-direction": "^1.3.1"
+    "react-dom": "^0.14 || ^15.5.4 || ^16.1.1"
   },
   "engines": {
     "node": ">=0.10"

From 0f5082fe296d74e3d99f9c8fd9d24ed200a15782 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Fri, 21 Jan 2022 14:29:06 -0800
Subject: [PATCH 608/618] [meta] update repo URLs

---
 .storybook-css/config.js                 |   6 +-
 .storybook/config.js                     |   6 +-
 CHANGELOG.md                             | 616 +++++++++++------------
 INTHEWILD.md                             |   2 +-
 README.md                                |  26 +-
 package.json                             |   6 +-
 stories/DayPickerRangeController.js      |   2 +-
 stories/DayPickerSingleDateController.js |   2 +-
 stories/PresetDateRangePicker.js         |   4 +-
 9 files changed, 335 insertions(+), 335 deletions(-)

diff --git a/.storybook-css/config.js b/.storybook-css/config.js
index d6652020d0..da06e751a8 100644
--- a/.storybook-css/config.js
+++ b/.storybook-css/config.js
@@ -21,8 +21,8 @@ function getLink(href, text) {
   return `<a href=${href} rel="noopener noreferrer" target="_blank">${text}</a>`;
 }
 
-const README = getLink('https://github.com/airbnb/react-dates/blob/master/README.md', 'README');
-const wrapperSource = getLink('https://github.com/airbnb/react-dates/tree/master/examples', 'wrapper source');
+const README = getLink('https://github.com/react-dates/react-dates/blob/HEAD/README.md', 'README');
+const wrapperSource = getLink('https://github.com/react-dates/react-dates/tree/HEAD/examples', 'wrapper source');
 
 const helperText = `All examples are built using a wrapper component that is not exported by
   react-dates. Please see the ${README} for more information about minimal setup or explore
@@ -52,7 +52,7 @@ addDecorator(story => (
 
 setOptions({
   name: 'REACT-DATES',
-  url: 'https://github.com/airbnb/react-dates',
+  url: 'https://github.com/react-dates/react-dates',
 });
 
 function loadStories() {
diff --git a/.storybook/config.js b/.storybook/config.js
index 3882b60251..a14004d170 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -27,8 +27,8 @@ function getLink(href, text) {
   return `<a href=${href} rel="noopener noreferrer" target="_blank">${text}</a>`;
 }
 
-const README = getLink('https://github.com/airbnb/react-dates/blob/master/README.md', 'README');
-const wrapperSource = getLink('https://github.com/airbnb/react-dates/tree/master/examples', 'wrapper source');
+const README = getLink('https://github.com/react-dates/react-dates/blob/HEAD/README.md', 'README');
+const wrapperSource = getLink('https://github.com/react-dates/react-dates/tree/HEAD/examples', 'wrapper source');
 
 const helperText = `All examples are built using a wrapper component that is not exported by
   react-dates. Please see the ${README} for more information about minimal setup or explore
@@ -58,7 +58,7 @@ addDecorator(story => (
 
 setOptions({
   name: 'REACT-DATES',
-  url: 'https://github.com/airbnb/react-dates',
+  url: 'https://github.com/react-dates/react-dates',
 });
 
 function loadStories() {
diff --git a/CHANGELOG.md b/CHANGELOG.md
index f8bf0a1fd5..ede78bcdbc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,46 +1,46 @@
 # Change Log
 
 <!--
-- []  ([#](https://github.com/airbnb/react-dates/pull/))
+- []  ([#](https://github.com/react-dates/react-dates/pull/))
 -->
 
 ## 21.8.0
 
-- [new] Add option to allow days violating min nights to be clicked ([#1913](https://github.com/airbnb/react-dates/pull/1913))
-- [fix] Prevent vertical scrollable prev nav button from overlapping weekday headers ([#1914](https://github.com/airbnb/react-dates/pull/1914))
+- [new] Add option to allow days violating min nights to be clicked ([#1913](https://github.com/react-dates/react-dates/pull/1913))
+- [fix] Prevent vertical scrollable prev nav button from overlapping weekday headers ([#1914](https://github.com/react-dates/react-dates/pull/1914))
 
 ## 21.7.2
-- [fix] Add tests for previous fix ([#1912](https://github.com/airbnb/react-dates/pull/1912))
+- [fix] Add tests for previous fix ([#1912](https://github.com/react-dates/react-dates/pull/1912))
 
 ## 21.7.1
-- [fix] Fix render conditional in DayPickerKeyboardShortcuts ([#1911](https://github.com/airbnb/react-dates/pull/1911))
+- [fix] Fix render conditional in DayPickerKeyboardShortcuts ([#1911](https://github.com/react-dates/react-dates/pull/1911))
 
 ## 21.7.0
-- [fix] Keep scroll position when prev months rendered on vertical scrollable calendar ([#1902](https://github.com/airbnb/react-dates/pull/1902))
-- [new] Add ability to not show prev or next navigation buttons ([#1900](https://github.com/airbnb/react-dates/pull/1900))
-- [fix] Fix logic for applying default navigation button styling ([#1898](https://github.com/airbnb/react-dates/pull/1898))
+- [fix] Keep scroll position when prev months rendered on vertical scrollable calendar ([#1902](https://github.com/react-dates/react-dates/pull/1902))
+- [new] Add ability to not show prev or next navigation buttons ([#1900](https://github.com/react-dates/react-dates/pull/1900))
+- [fix] Fix logic for applying default navigation button styling ([#1898](https://github.com/react-dates/react-dates/pull/1898))
 
 ## 21.6.0
 
-- [new] Add functionality to see previous months for vertical scrollable calendar ([#1894](https://github.com/airbnb/react-dates/pull/1894))
-- [new] Add support for noNavButtons in DayPickerSingleDateController (match DayPickerRangeController support) ([#1895](https://github.com/airbnb/react-dates/pull/1895))
+- [new] Add functionality to see previous months for vertical scrollable calendar ([#1894](https://github.com/react-dates/react-dates/pull/1894))
+- [new] Add support for noNavButtons in DayPickerSingleDateController (match DayPickerRangeController support) ([#1895](https://github.com/react-dates/react-dates/pull/1895))
 
 ## 21.5.1
 
-- [fix] Remove redundant overflowY:scroll on CalendarMonthGrid ([#1881](https://github.com/airbnb/react-dates/pull/1881))
+- [fix] Remove redundant overflowY:scroll on CalendarMonthGrid ([#1881](https://github.com/react-dates/react-dates/pull/1881))
 
 ## 21.5.0
 
-- [new] Add support for custom month navigation buttons ([#1859](https://github.com/airbnb/react-dates/pull/1859))
+- [new] Add support for custom month navigation buttons ([#1859](https://github.com/react-dates/react-dates/pull/1859))
 
 ## 21.4.0
 
-- [new] Expose 'after-hovered-start' modifier and add 'before-hovered-end', 'no-selected-start-before-selected-end', 'selected-start-in-hovered-span', 'selected-end-in-hovered-span', 'selected-start-no-selected-end', and 'selected-end-no-selected-start' modifiers [#1608](https://github.com/airbnb/react-dates/pull/1608)
-- [fix] Loosen up CustomizeableCalendarDay restriction on children  ([#1857](https://github.com/airbnb/react-dates/pull/1857))
+- [new] Expose 'after-hovered-start' modifier and add 'before-hovered-end', 'no-selected-start-before-selected-end', 'selected-start-in-hovered-span', 'selected-end-in-hovered-span', 'selected-start-no-selected-end', and 'selected-end-no-selected-start' modifiers [#1608](https://github.com/react-dates/react-dates/pull/1608)
+- [fix] Loosen up CustomizeableCalendarDay restriction on children  ([#1857](https://github.com/react-dates/react-dates/pull/1857))
 
 ## 21.3.2
 
-- [fix] Revert "Call getStateForNewMonth when date/startDate/endDate is set to a date that is not visible" ([#1851](https://github.com/airbnb/react-dates/pull/1851))
+- [fix] Revert "Call getStateForNewMonth when date/startDate/endDate is set to a date that is not visible" ([#1851](https://github.com/react-dates/react-dates/pull/1851))
 
 ## 21.3.1
 
@@ -48,602 +48,602 @@
 
 ## 21.3.0
 
-- [new] Update react-with-styles 4.0.1 -> 4.1.0 ([#1843](https://github.com/airbnb/react-dates/pull/1843))
-- [new] Add Input Font-Weight to Default Theme ([#1765](https://github.com/airbnb/react-dates/pull/#1765))
+- [new] Update react-with-styles 4.0.1 -> 4.1.0 ([#1843](https://github.com/react-dates/react-dates/pull/1843))
+- [new] Add Input Font-Weight to Default Theme ([#1765](https://github.com/react-dates/react-dates/pull/#1765))
 
 ## 21.2.1
 
-- [fix] Call getStateForNewMonth when date/startDate/endDate is set to a date that is not visible ([#1834](https://github.com/airbnb/react-dates/pull/1834))
+- [fix] Call getStateForNewMonth when date/startDate/endDate is set to a date that is not visible ([#1834](https://github.com/react-dates/react-dates/pull/1834))
 
 ## 21.2.0
 
-- [fix] Revert "Merge pull request [#1758](https://github.com/airbnb/react-dates/pull/1758): Remove all direct imports of css in favor of injected prop" ([#1818](https://github.com/airbnb/react-dates/pull/1818))
-- [fix] Fix for getWeekHeaders(), prevents it from changing state.currentMonth ([#1796](https://github.com/airbnb/react-dates/pull/1796))
-- [new] Add support for positioning month navigation under the calendar ([#1784](https://github.com/airbnb/react-dates/pull/1784))
-- [new] Add minDate and maxDate props to DateRangePicker ([#1793](https://github.com/airbnb/react-dates/pull/1793), [#1794](https://github.com/airbnb/react-dates/pull/1794))
+- [fix] Revert "Merge pull request [#1758](https://github.com/react-dates/react-dates/pull/1758): Remove all direct imports of css in favor of injected prop" ([#1818](https://github.com/react-dates/react-dates/pull/1818))
+- [fix] Fix for getWeekHeaders(), prevents it from changing state.currentMonth ([#1796](https://github.com/react-dates/react-dates/pull/1796))
+- [new] Add support for positioning month navigation under the calendar ([#1784](https://github.com/react-dates/react-dates/pull/1784))
+- [new] Add minDate and maxDate props to DateRangePicker ([#1793](https://github.com/react-dates/react-dates/pull/1793), [#1794](https://github.com/react-dates/react-dates/pull/1794))
 
 ## 21.1.0
 
-- [fix] `DayPicker`: week headers: use the passed-in moment object’s instance, to support localy ([#1577](https://github.com/airbnb/react-dates/pull/1577))
-- [fix] Combine labelled DayPicker container elements ([#1783](https://github.com/airbnb/react-dates/pull/1783))
-- [new] Add a render function for customizable week header text ([#1787](https://github.com/airbnb/react-dates/pull/1787))
+- [fix] `DayPicker`: week headers: use the passed-in moment object’s instance, to support localy ([#1577](https://github.com/react-dates/react-dates/pull/1577))
+- [fix] Combine labelled DayPicker container elements ([#1783](https://github.com/react-dates/react-dates/pull/1783))
+- [new] Add a render function for customizable week header text ([#1787](https://github.com/react-dates/react-dates/pull/1787))
 
 ## 21.0.1
 
-- [fix] [deps] Update react-with-styles ^4.0.0 -> ^4.0.1 ([#1781](https://github.com/airbnb/react-dates/pull/1781))
+- [fix] [deps] Update react-with-styles ^4.0.0 -> ^4.0.1 ([#1781](https://github.com/react-dates/react-dates/pull/1781))
 
 ## 21.0.0
 
-- [breaking] [deps] Update react-with-styles and other deps ([#1761](https://github.com/airbnb/react-dates/pull/1761)
-- [new] [deps] Update dependencies related to react-with-styles ([#1775](https://github.com/airbnb/react-dates/pull/1775))
-- [new] `DayPickerSingleDateController`: Add onMultiplyScrollableMonths ([#1770](https://github.com/airbnb/react-dates/pull/1770))
-- [dev] Fix moment date formats ([#1767](https://github.com/airbnb/react-dates/pull/1767))
-- [dev] Fix addons webpack loader, Fix tests ([#1764](https://github.com/airbnb/react-dates/pull/1764))
+- [breaking] [deps] Update react-with-styles and other deps ([#1761](https://github.com/react-dates/react-dates/pull/1761)
+- [new] [deps] Update dependencies related to react-with-styles ([#1775](https://github.com/react-dates/react-dates/pull/1775))
+- [new] `DayPickerSingleDateController`: Add onMultiplyScrollableMonths ([#1770](https://github.com/react-dates/react-dates/pull/1770))
+- [dev] Fix moment date formats ([#1767](https://github.com/react-dates/react-dates/pull/1767))
+- [dev] Fix addons webpack loader, Fix tests ([#1764](https://github.com/react-dates/react-dates/pull/1764))
 - [dev] build: fix linting (refs eslint/eslint#12119)
 - [new] [deps] update `@babel/runtime`, `airbnb-prop-types`, `object.values`, `prop-types`, `react-outside-click-handler`, `react-portal`
 - [dev] [deps] update `@babel/*`, `@storybook/*`, `babel-plugin-inline-svg`, `babel-plugin-istanbul`, `babel-preset-airbnb`, `eslint-config-airbnb` to v18 (plus peer deps), `eslint` to v6; `eslint-plugin-react-with-styles`, `karma`, `karma-firefox-launcher`, `mocha`, `safe-publish-latest`, `sass-loader`, `sinon`, `sinon-sandbox`, `coveralls`, `enzyme-adapter-react-helper`
-- [fix] Remove all direct imports of css in favor of injected prop ([#1758](https://github.com/airbnb/react-dates/pull/1758))
+- [fix] Remove all direct imports of css in favor of injected prop ([#1758](https://github.com/react-dates/react-dates/pull/1758))
 
 ## 20.3.0
-- [fix] Optimize setState dayPickerContainerStyles in responsivizePickerPosition ([#1735](https://github.com/airbnb/react-dates/pull/1735))
-- [fix] Stop calendar blinking on DateRangePickerInput focus switch (fixes #1523) ([#1553](https://github.com/airbnb/react-dates/pull/1553))
-- [new] [a11y] Add `aria-roledescription` ([#1746](https://github.com/airbnb/react-dates/pull/1746))
+- [fix] Optimize setState dayPickerContainerStyles in responsivizePickerPosition ([#1735](https://github.com/react-dates/react-dates/pull/1735))
+- [fix] Stop calendar blinking on DateRangePickerInput focus switch (fixes #1523) ([#1553](https://github.com/react-dates/react-dates/pull/1553))
+- [new] [a11y] Add `aria-roledescription` ([#1746](https://github.com/react-dates/react-dates/pull/1746))
 
 ## 20.2.5
-- [fix] Defer day focusing until next animation frame ([#1707](https://github.com/airbnb/react-dates/pull/1707))
-- [fix] Fix startDate style (@mmarkelov, [#1710](https://github.com/airbnb/react-dates/pull/1710))
-- [fix] Pass correct props to SingleDatePicker on close (@AlokTakshak, [#1678](https://github.com/airbnb/react-dates/pull/1678))
-- [dev] Update blocked navigation (min/maxDate) stories (@ianduvall, [#1598](https://github.com/airbnb/react-dates/pull/1598))
-- [dev] Add positioning to custom navigation in stories (@dougmacknz, [#1573](https://github.com/airbnb/react-dates/pull/1573))
-- [dev] Update karma 3 → 4, mocha 3 → 6, nyc 12 → 14, sinon 6 → 7, eslint 5 → 6 ([#1713](https://github.com/airbnb/react-dates/pull/1713), [#1712](https://github.com/airbnb/react-dates/pull/1713))
+- [fix] Defer day focusing until next animation frame ([#1707](https://github.com/react-dates/react-dates/pull/1707))
+- [fix] Fix startDate style (@mmarkelov, [#1710](https://github.com/react-dates/react-dates/pull/1710))
+- [fix] Pass correct props to SingleDatePicker on close (@AlokTakshak, [#1678](https://github.com/react-dates/react-dates/pull/1678))
+- [dev] Update blocked navigation (min/maxDate) stories (@ianduvall, [#1598](https://github.com/react-dates/react-dates/pull/1598))
+- [dev] Add positioning to custom navigation in stories (@dougmacknz, [#1573](https://github.com/react-dates/react-dates/pull/1573))
+- [dev] Update karma 3 → 4, mocha 3 → 6, nyc 12 → 14, sinon 6 → 7, eslint 5 → 6 ([#1713](https://github.com/react-dates/react-dates/pull/1713), [#1712](https://github.com/react-dates/react-dates/pull/1713))
 
 ## 20.2.4
 - [fix] Replace react-addons-shallow-compare with enzyme-shallow-equal (bf7e3347702f)
-- [fix] Optimize SVG assets ([#1690](https://github.com/airbnb/react-dates/pull/1690))
-- [fix] Update babel-preset-airbnb 3.2.1 -> 4.0.0 ([#1692](https://github.com/airbnb/react-dates/pull/1692))
+- [fix] Optimize SVG assets ([#1690](https://github.com/react-dates/react-dates/pull/1690))
+- [fix] Update babel-preset-airbnb 3.2.1 -> 4.0.0 ([#1692](https://github.com/react-dates/react-dates/pull/1692))
 
 ## 20.2.3
-- [fix] Add guard for undefined objects in deleteModifier ([#1687](https://github.com/airbnb/react-dates/pull/1687))
-- [dev] Update Storybook from v4 to v5 ([@trotzig](https://github.com/trotzig) [#1673](https://github.com/airbnb/react-dates/pull/1673))
+- [fix] Add guard for undefined objects in deleteModifier ([#1687](https://github.com/react-dates/react-dates/pull/1687))
+- [dev] Update Storybook from v4 to v5 ([@trotzig](https://github.com/trotzig) [#1673](https://github.com/react-dates/react-dates/pull/1673))
 
 ## 20.2.2
-- [fix] Add guard for undefined objects in addModifier ([#1667](https://github.com/airbnb/react-dates/pull/1667))
+- [fix] Add guard for undefined objects in addModifier ([#1667](https://github.com/react-dates/react-dates/pull/1667))
 
 ## 20.2.1
-- [fix] Compile classes in loose mode ([#1655](https://github.com/airbnb/react-dates/pull/1655))
-- [fix] Performance optimizations ([#1656](https://github.com/airbnb/react-dates/pull/1656), [#1657](https://github.com/airbnb/react-dates/pull/1657), [#1659](https://github.com/airbnb/react-dates/pull/1659), [#1661](https://github.com/airbnb/react-dates/pull/1661), [#1662](https://github.com/airbnb/react-dates/pull/1662), and [#1663](https://github.com/airbnb/react-dates/pull/1663))
-- [docs] Add `initialVisibleMonth` to `DayPickerRangeController` in readme ([@AlokTakshak](https://github.com/AlokTakshak) [1652](https://github.com/airbnb/react-dates/pull/1652))
+- [fix] Compile classes in loose mode ([#1655](https://github.com/react-dates/react-dates/pull/1655))
+- [fix] Performance optimizations ([#1656](https://github.com/react-dates/react-dates/pull/1656), [#1657](https://github.com/react-dates/react-dates/pull/1657), [#1659](https://github.com/react-dates/react-dates/pull/1659), [#1661](https://github.com/react-dates/react-dates/pull/1661), [#1662](https://github.com/react-dates/react-dates/pull/1662), and [#1663](https://github.com/react-dates/react-dates/pull/1663))
+- [docs] Add `initialVisibleMonth` to `DayPickerRangeController` in readme ([@AlokTakshak](https://github.com/AlokTakshak) [1652](https://github.com/react-dates/react-dates/pull/1652))
 
 ## 20.2.0
-- [fix] Fix date selection in the SDP ([#1530](https://github.com/airbnb/react-dates/pull/1530))
-- [new] Add explicit aria label props ([#1594](https://github.com/airbnb/react-dates/pull/1594))
+- [fix] Fix date selection in the SDP ([#1530](https://github.com/react-dates/react-dates/pull/1530))
+- [new] Add explicit aria label props ([#1594](https://github.com/react-dates/react-dates/pull/1594))
 
 ## 20.1.0
-- [new] Add `renderKeyboardShortcutsButton` prop ([#1576](https://github.com/airbnb/react-dates/pull/1576))
+- [new] Add `renderKeyboardShortcutsButton` prop ([#1576](https://github.com/react-dates/react-dates/pull/1576))
 
 ## 20.0.0
-- [breaking] Omit tabindex prop from calendar navigation buttons when custom buttons are supplied ([#1563](https://github.com/airbnb/react-dates/pull/1563))
-- [new] Add hovered-start-blocked-minimun-nights and hovered-start-first-possible-end modifiers ([#1547](https://github.com/airbnb/react-dates/pull/1547))
-- [fix] clearTimeout added for the setCalendarMonthGridHeight timeout ([#1468](https://github.com/airbnb/react-dates/pull/1468))
-- [fix] Remove default styles for the last-in-range modifier ([#1538](https://github.com/airbnb/react-dates/pull/1538))
+- [breaking] Omit tabindex prop from calendar navigation buttons when custom buttons are supplied ([#1563](https://github.com/react-dates/react-dates/pull/1563))
+- [new] Add hovered-start-blocked-minimun-nights and hovered-start-first-possible-end modifiers ([#1547](https://github.com/react-dates/react-dates/pull/1547))
+- [fix] clearTimeout added for the setCalendarMonthGridHeight timeout ([#1468](https://github.com/react-dates/react-dates/pull/1468))
+- [fix] Remove default styles for the last-in-range modifier ([#1538](https://github.com/react-dates/react-dates/pull/1538))
 
 ## 19.0.4
-- [fix] Added `selected` aria label to dates in the selected range ([#1555](https://github.com/airbnb/react-dates/pull/1555))
+- [fix] Added `selected` aria label to dates in the selected range ([#1555](https://github.com/react-dates/react-dates/pull/1555))
 
 ## 19.0.3
-- [fix] Fix date selection in the SDP ([#1540](https://github.com/airbnb/react-dates/pull/1540))
+- [fix] Fix date selection in the SDP ([#1540](https://github.com/react-dates/react-dates/pull/1540))
 
 ## 19.0.2
 - no changes; extraneous publish
 
 ## 19.0.1
-- [fix] Fix single date picker not responding to input ([#1533](https://github.com/airbnb/react-dates/pull/1533))
-- [fix] Fixes the focus out event in IE11 ([#1524](https://github.com/airbnb/react-dates/pull/1524))
+- [fix] Fix single date picker not responding to input ([#1533](https://github.com/react-dates/react-dates/pull/1533))
+- [fix] Fixes the focus out event in IE11 ([#1524](https://github.com/react-dates/react-dates/pull/1524))
 
 ## 19.0.0
-- [breaking] Call `onDatesChange` before `onFocusChange` in the DRP ([#1525](https://github.com/airbnb/react-dates/pull/1525))
+- [breaking] Call `onDatesChange` before `onFocusChange` in the DRP ([#1525](https://github.com/react-dates/react-dates/pull/1525))
 
 ## 18.5.0
-- [fix] Add `aria-disabled` attribute to the (Customizable)CalendarDay ([#1521](https://github.com/airbnb/react-dates/pull/1521))
-- [new] Add `startDateOffset` and `endDateOffset` props to the DRP ([#1252](https://github.com/airbnb/react-dates/pull/1252))
+- [fix] Add `aria-disabled` attribute to the (Customizable)CalendarDay ([#1521](https://github.com/react-dates/react-dates/pull/1521))
+- [new] Add `startDateOffset` and `endDateOffset` props to the DRP ([#1252](https://github.com/react-dates/react-dates/pull/1252))
 
 ## 18.4.1
-- [fix] Make DRP and SDP calendars tabbable from the inputs ([#1499](https://github.com/airbnb/react-dates/pull/1499))
+- [fix] Make DRP and SDP calendars tabbable from the inputs ([#1499](https://github.com/react-dates/react-dates/pull/1499))
 
 ## 18.4.0
-- [new] Clarify VoiceOver text for dates selected as start-date and end-date ([#1501](https://github.com/airbnb/react-dates/pull/1501))
+- [new] Clarify VoiceOver text for dates selected as start-date and end-date ([#1501](https://github.com/react-dates/react-dates/pull/1501))
 
 ## 18.3.1
-- [fix][RTL] Fix the SDP and DRP noflip util function ([#1492](https://github.com/airbnb/react-dates/pull/1492))
+- [fix][RTL] Fix the SDP and DRP noflip util function ([#1492](https://github.com/react-dates/react-dates/pull/1492))
 
 ## 18.3.0
-- [fix] Update the SDP and DRP to be compatible with `react-with-direction` ([#1482](https://github.com/airbnb/react-dates/pull/1482))
-- [new] Add `minDate` and `maxDate` props to block month navigation ([#1311](https://github.com/airbnb/react-dates/pull/1311))
-- [fix][a11y] Remove space/enter onKeyDown handling for open/close keyboard shortcuts panel ([#1464](https://github.com/airbnb/react-dates/pull/1464))
-- [fix][a11y] Fix lack of visible focus in Firefox and IE on "?" keyboard shortcuts button ([#1463](https://github.com/airbnb/react-dates/pull/1463))
+- [fix] Update the SDP and DRP to be compatible with `react-with-direction` ([#1482](https://github.com/react-dates/react-dates/pull/1482))
+- [new] Add `minDate` and `maxDate` props to block month navigation ([#1311](https://github.com/react-dates/react-dates/pull/1311))
+- [fix][a11y] Remove space/enter onKeyDown handling for open/close keyboard shortcuts panel ([#1464](https://github.com/react-dates/react-dates/pull/1464))
+- [fix][a11y] Fix lack of visible focus in Firefox and IE on "?" keyboard shortcuts button ([#1463](https://github.com/react-dates/react-dates/pull/1463))
 
 ## 18.2.2
-- [fix] Conditionally apply the `shouldComponentUpdate` method in the babel transform ([#1457](https://github.com/airbnb/react-dates/pull/1457))
-- [fix] Fix incorrect VO for selected check-in date  ([#1451](https://github.com/airbnb/react-dates/pull/1451))
+- [fix] Conditionally apply the `shouldComponentUpdate` method in the babel transform ([#1457](https://github.com/react-dates/react-dates/pull/1457))
+- [fix] Fix incorrect VO for selected check-in date  ([#1451](https://github.com/react-dates/react-dates/pull/1451))
 
 ## 18.2.1
-- [fix] Add babel transform to handle PureComponent fallbacks ([#1452](https://github.com/airbnb/react-dates/pull/1452))
+- [fix] Add babel transform to handle PureComponent fallbacks ([#1452](https://github.com/react-dates/react-dates/pull/1452))
 
 ## 18.2.0
-- [new] Add `onTab`/`onShiftTab` callbacks to the DayPicker (and its controllers) ([#1427](https://github.com/airbnb/react-dates/pull/1427))
+- [new] Add `onTab`/`onShiftTab` callbacks to the DayPicker (and its controllers) ([#1427](https://github.com/react-dates/react-dates/pull/1427))
 
 ## 18.1.1
-- [fix] Prevent outside range dates from being selected by typing ([#1370](https://github.com/airbnb/react-dates/pull/1370))
+- [fix] Prevent outside range dates from being selected by typing ([#1370](https://github.com/react-dates/react-dates/pull/1370))
 
 ## 18.1.0
-- [fix] Default the `calendarMonthPadding` theme variable to 0 when undefined ([#1355](https://github.com/airbnb/react-dates/pull/1355))
-- [new] Add `SingleDatePickerInputController` component ([#1360](https://github.com/airbnb/react-dates/pull/1360))
-- [new] Add `horizontalMonthPadding` as a prop to the DRP ([#1364](https://github.com/airbnb/react-dates/pull/1364))
-- [fix] Fix unnecessary rerender in `DayPickerNavigation` ([#1363](https://github.com/airbnb/react-dates/pull/1363))
+- [fix] Default the `calendarMonthPadding` theme variable to 0 when undefined ([#1355](https://github.com/react-dates/react-dates/pull/1355))
+- [new] Add `SingleDatePickerInputController` component ([#1360](https://github.com/react-dates/react-dates/pull/1360))
+- [new] Add `horizontalMonthPadding` as a prop to the DRP ([#1364](https://github.com/react-dates/react-dates/pull/1364))
+- [fix] Fix unnecessary rerender in `DayPickerNavigation` ([#1363](https://github.com/react-dates/react-dates/pull/1363))
 
 ## 18.0.4
-- [fix] revert 'revert 'Conditionally use `PureComponent` instead of `Component`'' ([4f8eb01](https://github.com/airbnb/react-dates/commit/4f8eb01168ef6c4ae7d74e95ad14acb28960e43e))
+- [fix] revert 'revert 'Conditionally use `PureComponent` instead of `Component`'' ([4f8eb01](https://github.com/react-dates/react-dates/commit/4f8eb01168ef6c4ae7d74e95ad14acb28960e43e))
 
 ## 18.0.3
-- [fix] revert 'Conditionally use `PureComponent` instead of `Component`' ([50c382f](https://github.com/airbnb/react-dates/commit/50c382f7cf3e3ba60f4fdaa00eae53cf06d3c97b))
+- [fix] revert 'Conditionally use `PureComponent` instead of `Component`' ([50c382f](https://github.com/react-dates/react-dates/commit/50c382f7cf3e3ba60f4fdaa00eae53cf06d3c97b))
 
 ## 18.0.2
-- [fix] Remove svgo from "inline-react-svg" babel plugin options ([#1350](https://github.com/airbnb/react-dates/pull/1350))
+- [fix] Remove svgo from "inline-react-svg" babel plugin options ([#1350](https://github.com/react-dates/react-dates/pull/1350))
 
 ## 18.0.1
-- [fix] Center vertical month navigation ([#1347](https://github.com/airbnb/react-dates/pull/1347))
+- [fix] Center vertical month navigation ([#1347](https://github.com/react-dates/react-dates/pull/1347))
 
 ## 18.0.0
-- [fix] Conditionally use `PureComponent` instead of `Component` ([#1335](https://github.com/airbnb/react-dates/pull/1335))
-- [breaking] Remove propTypes in production ([#1322](https://github.com/airbnb/react-dates/pull/1322))
-- [fix] Change border-styles to minimise overlap ([#1328](https://github.com/airbnb/react-dates/pull/1328))
-- [fix] Only blur the `activeElement` when available ([#1345](https://github.com/airbnb/react-dates/pull/1345))
+- [fix] Conditionally use `PureComponent` instead of `Component` ([#1335](https://github.com/react-dates/react-dates/pull/1335))
+- [breaking] Remove propTypes in production ([#1322](https://github.com/react-dates/react-dates/pull/1322))
+- [fix] Change border-styles to minimise overlap ([#1328](https://github.com/react-dates/react-dates/pull/1328))
+- [fix] Only blur the `activeElement` when available ([#1345](https://github.com/react-dates/react-dates/pull/1345))
 
 ## 17.2.0
-- [fix] Add modifiers for next months in the vertical scrollable datepickers ([#1293](https://github.com/airbnb/react-dates/pull/1293))
-- [fix] Fix cursor jumping to the end of the controlled input when typing ([#1287](https://github.com/airbnb/react-dates/pull/1287))
-- [new] Add `horizontalMonthPadding` prop and `dayPickerHorizontalPadding` and `noScrollBarOnVerticalScrollable` theme variables ([#1298](https://github.com/airbnb/react-dates/pull/1298))
-- [fix] Fix issue where custom month navigation was not clickable in FF ([#1305](https://github.com/airbnb/react-dates/pull/1305))
+- [fix] Add modifiers for next months in the vertical scrollable datepickers ([#1293](https://github.com/react-dates/react-dates/pull/1293))
+- [fix] Fix cursor jumping to the end of the controlled input when typing ([#1287](https://github.com/react-dates/react-dates/pull/1287))
+- [new] Add `horizontalMonthPadding` prop and `dayPickerHorizontalPadding` and `noScrollBarOnVerticalScrollable` theme variables ([#1298](https://github.com/react-dates/react-dates/pull/1298))
+- [fix] Fix issue where custom month navigation was not clickable in FF ([#1305](https://github.com/react-dates/react-dates/pull/1305))
 
 ## 17.1.1
-- [fix] Set `DayPickerNavigation__horizontal` height to zero ([#1265](https://github.com/airbnb/react-dates/pull/1265))
+- [fix] Set `DayPickerNavigation__horizontal` height to zero ([#1265](https://github.com/react-dates/react-dates/pull/1265))
 
 ## 17.1.0
-- [new] Add `ModifiersShape` and use throughout the codebase ([#1231](https://github.com/airbnb/react-dates/pull/1231))
-- [fix] Fix minimum nights `blocked` modifiers being applied incorrectly ([#1259](https://github.com/airbnb/react-dates/pull/1259))
-- [fix] Update conditions where `adjustDayPickerHeight` is called ([#1241](https://github.com/airbnb/react-dates/pull/1241))
-- [fix] Do not render `OutsideClickHandler` unnecessarily ([#1256](https://github.com/airbnb/react-dates/pull/1256))
+- [new] Add `ModifiersShape` and use throughout the codebase ([#1231](https://github.com/react-dates/react-dates/pull/1231))
+- [fix] Fix minimum nights `blocked` modifiers being applied incorrectly ([#1259](https://github.com/react-dates/react-dates/pull/1259))
+- [fix] Update conditions where `adjustDayPickerHeight` is called ([#1241](https://github.com/react-dates/react-dates/pull/1241))
+- [fix] Do not render `OutsideClickHandler` unnecessarily ([#1256](https://github.com/react-dates/react-dates/pull/1256))
 
 ## 17.0.0
-- [fix] Replace dumb quotes with smart quotes in default phrases ([#1168](https://github.com/airbnb/react-dates/pull/1168))
-- [fix] Fix outside day movement on hover ([#1178](https://github.com/airbnb/react-dates/pull/1178))
-- [fix] Add `focusable="false"` to SVGs ([#1190](https://github.com/airbnb/react-dates/pull/1190))
-- [fix] Use `react-outside-click-handler` instead of the internal component ([#1191](https://github.com/airbnb/react-dates/pull/1191))
-- [breaking] Change the way month heights are calculated and update the name of some `CalendarMonth`/`CalendarMonthGrid` props ([#1192](https://github.com/airbnb/react-dates/pull/1192))
-- [new] Pass nextMonth to `onPrevMonthClick`/`onNextMonthClick` ([#1207](https://github.com/airbnb/react-dates/pull/1207))
-- [new] Allow input border styles to be overridden in the theme ([#1201](https://github.com/airbnb/react-dates/pull/1201))
-- [new] Allow consolidated-events@2.0.0 ([#1218](https://github.com/airbnb/react-dates/pull/1218))
-- [fix] Remove input.blur() call to fix a focus trap in Safari/IE ([#1214](https://github.com/airbnb/react-dates/pull/1214))
-- [new] Add support for month/year transitions ([#1106](https://github.com/airbnb/react-dates/pull/1106))
-- [breaking] Rename renderMonth=>renderMonthText and renderCaption=>renderMonthElement ([#1220](https://github.com/airbnb/react-dates/pull/1220))
-- [breaking] Remove default styling *completely* from the `navNext`/`navPrev` props, including position ([#1204](https://github.com/airbnb/react-dates/pull/1204))
-- [fix] Fix propType warnings for `onMonthChange`/`onYearChange` ([#1222](https://github.com/airbnb/react-dates/pull/1222))
-- [breaking] Remove `OutsideClickHandler` export entirely ([#1225](https://github.com/airbnb/react-dates/pull/1225))
+- [fix] Replace dumb quotes with smart quotes in default phrases ([#1168](https://github.com/react-dates/react-dates/pull/1168))
+- [fix] Fix outside day movement on hover ([#1178](https://github.com/react-dates/react-dates/pull/1178))
+- [fix] Add `focusable="false"` to SVGs ([#1190](https://github.com/react-dates/react-dates/pull/1190))
+- [fix] Use `react-outside-click-handler` instead of the internal component ([#1191](https://github.com/react-dates/react-dates/pull/1191))
+- [breaking] Change the way month heights are calculated and update the name of some `CalendarMonth`/`CalendarMonthGrid` props ([#1192](https://github.com/react-dates/react-dates/pull/1192))
+- [new] Pass nextMonth to `onPrevMonthClick`/`onNextMonthClick` ([#1207](https://github.com/react-dates/react-dates/pull/1207))
+- [new] Allow input border styles to be overridden in the theme ([#1201](https://github.com/react-dates/react-dates/pull/1201))
+- [new] Allow consolidated-events@2.0.0 ([#1218](https://github.com/react-dates/react-dates/pull/1218))
+- [fix] Remove input.blur() call to fix a focus trap in Safari/IE ([#1214](https://github.com/react-dates/react-dates/pull/1214))
+- [new] Add support for month/year transitions ([#1106](https://github.com/react-dates/react-dates/pull/1106))
+- [breaking] Rename renderMonth=>renderMonthText and renderCaption=>renderMonthElement ([#1220](https://github.com/react-dates/react-dates/pull/1220))
+- [breaking] Remove default styling *completely* from the `navNext`/`navPrev` props, including position ([#1204](https://github.com/react-dates/react-dates/pull/1204))
+- [fix] Fix propType warnings for `onMonthChange`/`onYearChange` ([#1222](https://github.com/react-dates/react-dates/pull/1222))
+- [breaking] Remove `OutsideClickHandler` export entirely ([#1225](https://github.com/react-dates/react-dates/pull/1225))
 
 ## 16.7.1
-- [fix] react-with-styles v3 requires react-with-direction as a peer dep; this provides it but forwards the peer dep requirement ([#1348](https://github.com/airbnb/react-dates/issues/1348))
+- [fix] react-with-styles v3 requires react-with-direction as a peer dep; this provides it but forwards the peer dep requirement ([#1348](https://github.com/react-dates/react-dates/issues/1348))
 
 ## 16.7.0
-- [fix] Force border-radius to be 0 on the inputs ([#1157](https://github.com/airbnb/react-dates/pull/1157))
-- [fix] Clear previous min nights modifiers, not current ([#994](https://github.com/airbnb/react-dates/pull/994))
-- [fix] Tweak default input styling ([#1158](https://github.com/airbnb/react-dates/pull/1158))
-- [fix] Round transform3d values to fix font blur ([#1155](https://github.com/airbnb/react-dates/pull/1155))
-- [new] Add `noNavButtons` prop ([#1160](https://github.com/airbnb/react-dates/pull/1160))
+- [fix] Force border-radius to be 0 on the inputs ([#1157](https://github.com/react-dates/react-dates/pull/1157))
+- [fix] Clear previous min nights modifiers, not current ([#994](https://github.com/react-dates/react-dates/pull/994))
+- [fix] Tweak default input styling ([#1158](https://github.com/react-dates/react-dates/pull/1158))
+- [fix] Round transform3d values to fix font blur ([#1155](https://github.com/react-dates/react-dates/pull/1155))
+- [new] Add `noNavButtons` prop ([#1160](https://github.com/react-dates/react-dates/pull/1160))
 
 ## 16.6.1
-- [fix] Fix selective disabling of the `DateRangePicker` ([#1116](https://github.com/airbnb/react-dates/pull/1116))
-- [fix] Fix `onOutsideClick` refactor ([#1115](https://github.com/airbnb/react-dates/pull/1115))
+- [fix] Fix selective disabling of the `DateRangePicker` ([#1116](https://github.com/react-dates/react-dates/pull/1116))
+- [fix] Fix `onOutsideClick` refactor ([#1115](https://github.com/react-dates/react-dates/pull/1115))
 
 ## 16.6.0
-- [new] Add `appendToBody`/`disableScroll` props ([#1069](https://github.com/airbnb/react-dates/pull/1069))
-- [fix] Address unexpected blur call ([#1107](https://github.com/airbnb/react-dates/pull/1107))
-- [new] Add `verticalBorderSpacing` prop to `DayPickerSingleDateController`/`DayPickerRangeController` ([#1096](https://github.com/airbnb/react-dates/pull/1096))
-- [fix] Move focus to `DayPicker` when readOnly is true ([#961](https://github.com/airbnb/react-dates/pull/961))
+- [new] Add `appendToBody`/`disableScroll` props ([#1069](https://github.com/react-dates/react-dates/pull/1069))
+- [fix] Address unexpected blur call ([#1107](https://github.com/react-dates/react-dates/pull/1107))
+- [new] Add `verticalBorderSpacing` prop to `DayPickerSingleDateController`/`DayPickerRangeController` ([#1096](https://github.com/react-dates/react-dates/pull/1096))
+- [fix] Move focus to `DayPicker` when readOnly is true ([#961](https://github.com/react-dates/react-dates/pull/961))
 
 ## 16.5.0
-- [new] Export `CustomizeableCalendarDay` default styles ([#1095](https://github.com/airbnb/react-dates/pull/1095))
-- [new] Allow selectively disabling either input in the DRP ([#](https://github.com/airbnb/react-dates/pull/606))
-- [new] Add `dayAriaLabelFormat` prop to the SDP/DRP ([#](https://github.com/airbnb/react-dates/pull/984))
+- [new] Export `CustomizeableCalendarDay` default styles ([#1095](https://github.com/react-dates/react-dates/pull/1095))
+- [new] Allow selectively disabling either input in the DRP ([#](https://github.com/react-dates/react-dates/pull/606))
+- [new] Add `dayAriaLabelFormat` prop to the SDP/DRP ([#](https://github.com/react-dates/react-dates/pull/984))
 
 ## 16.4.0
-- [new] Export `OutsideClickHandler` in index.js ([#1089](https://github.com/airbnb/react-dates/pull/1089))
-- [fix] Do not apply `verticalSpacing` when `withPortal` or `withFullScreenPortal` is true ([#980](https://github.com/airbnb/react-dates/pull/980))
-- [fix] Handle minimum nights when selecting `startDate` ([#1015](https://github.com/airbnb/react-dates/pull/1015))
-- [fix] Fix style of `CloseIcon` in the SDP ([#1058](https://github.com/airbnb/react-dates/pull/1058))
+- [new] Export `OutsideClickHandler` in index.js ([#1089](https://github.com/react-dates/react-dates/pull/1089))
+- [fix] Do not apply `verticalSpacing` when `withPortal` or `withFullScreenPortal` is true ([#980](https://github.com/react-dates/react-dates/pull/980))
+- [fix] Handle minimum nights when selecting `startDate` ([#1015](https://github.com/react-dates/react-dates/pull/1015))
+- [fix] Fix style of `CloseIcon` in the SDP ([#1058](https://github.com/react-dates/react-dates/pull/1058))
 
 ## 16.3.6
-- [fix] Address width issues for vertical DayPickers ([#1055](https://github.com/airbnb/react-dates/pull/1055))
+- [fix] Address width issues for vertical DayPickers ([#1055](https://github.com/react-dates/react-dates/pull/1055))
 
 ## 16.3.5 (I promise this one is good)
-- [fix] Includes all necessary CSS ([c965348](https://github.com/airbnb/react-dates/commit/c96534896d8fe5c28ddc1f1090ef43dfaeebb5d6))
+- [fix] Includes all necessary CSS ([c965348](https://github.com/react-dates/react-dates/commit/c96534896d8fe5c28ddc1f1090ef43dfaeebb5d6))
 
 ## 16.3.4
 - [fix] Bumps all the RWS libraries again, now with less breakage!
 
 ## 16.3.3
-- [revert] Reverts 'Bump react-with-style-interface-css dependency ([#1043](https://github.com/airbnb/react-dates/pull/1043))'
+- [revert] Reverts 'Bump react-with-style-interface-css dependency ([#1043](https://github.com/react-dates/react-dates/pull/1043))'
 
 ## 16.3.2
-- [revert] Reverts 'Bump react-with-styles dependency ([#1041](https://github.com/airbnb/react-dates/pull/1041))'
+- [revert] Reverts 'Bump react-with-styles dependency ([#1041](https://github.com/react-dates/react-dates/pull/1041))'
 
 ## 16.3.1
-- [deps] Bump react-with-styles dependency ([#1041](https://github.com/airbnb/react-dates/pull/1041))
-- [deps] Bump react-with-style-interface-css dependency ([#1043](https://github.com/airbnb/react-dates/pull/1043))
+- [deps] Bump react-with-styles dependency ([#1041](https://github.com/react-dates/react-dates/pull/1041))
+- [deps] Bump react-with-style-interface-css dependency ([#1043](https://github.com/react-dates/react-dates/pull/1043))
 
 ## 16.3.0
-- [new] customInfoPanel position prop ([#989](https://github.com/airbnb/react-dates/pull/989))
-- [fix] Fix CustomizableCalendarDay selected/selected-start/selected-end specificity issues ([#979](https://github.com/airbnb/react-dates/pull/979))
-- [fix] Add modifiers for `firstDayOfWeek` and `lastDayOfWeek` ([#988](https://github.com/airbnb/react-dates/pull/988))
-- [fix] Ensure callbacks only trigger after state has been updates ([#990](https://github.com/airbnb/react-dates/pull/990))
+- [new] customInfoPanel position prop ([#989](https://github.com/react-dates/react-dates/pull/989))
+- [fix] Fix CustomizableCalendarDay selected/selected-start/selected-end specificity issues ([#979](https://github.com/react-dates/react-dates/pull/979))
+- [fix] Add modifiers for `firstDayOfWeek` and `lastDayOfWeek` ([#988](https://github.com/react-dates/react-dates/pull/988))
+- [fix] Ensure callbacks only trigger after state has been updates ([#990](https://github.com/react-dates/react-dates/pull/990))
 
 ## 16.2.1
-- [fix] SDP `block` styling also makes the input full width ([#972](https://github.com/airbnb/react-dates/pull/972))
+- [fix] SDP `block` styling also makes the input full width ([#972](https://github.com/react-dates/react-dates/pull/972))
 
 ## 16.2.0
-- [new] Add `startDateOffset`/`endDateOffset` props to `DayPickerRangeController` ([#884](https://github.com/airbnb/react-dates/pull/884))
-- [fix] Make all styles inline in `CustomizableCalendarDay` ([#964](https://github.com/airbnb/react-dates/pull/964))
+- [new] Add `startDateOffset`/`endDateOffset` props to `DayPickerRangeController` ([#884](https://github.com/react-dates/react-dates/pull/884))
+- [fix] Make all styles inline in `CustomizableCalendarDay` ([#964](https://github.com/react-dates/react-dates/pull/964))
 
 ## 16.1.1
-- [fix] Address some small bugs with `CustomizableCalendarDay` ([#962](https://github.com/airbnb/react-dates/pull/962))
+- [fix] Address some small bugs with `CustomizableCalendarDay` ([#962](https://github.com/react-dates/react-dates/pull/962))
 
 ## 16.1.0
-- [fix] Allow for changing of the input value via highlight and replace ([#955](https://github.com/airbnb/react-dates/pull/955))
-- [fix] Fix OPEN_UP styling ([#925](https://github.com/airbnb/react-dates/pull/925))
-- [fix] Don't read invisible months to the screen reader ([#940](https://github.com/airbnb/react-dates/pull/940))
-- [new] Add phrase for aria-label for the selected day ([#905](https://github.com/airbnb/react-dates/pull/905))
+- [fix] Allow for changing of the input value via highlight and replace ([#955](https://github.com/react-dates/react-dates/pull/955))
+- [fix] Fix OPEN_UP styling ([#925](https://github.com/react-dates/react-dates/pull/925))
+- [fix] Don't read invisible months to the screen reader ([#940](https://github.com/react-dates/react-dates/pull/940))
+- [new] Add phrase for aria-label for the selected day ([#905](https://github.com/react-dates/react-dates/pull/905))
 
 ## 16.0.2
-- [fix] Fix keyboard navigation issues ([#916](https://github.com/airbnb/react-dates/pull/916))
-- [fix] Fix React warnings when events are referenced later ([#682](https://github.com/airbnb/react-dates/pull/682))
+- [fix] Fix keyboard navigation issues ([#916](https://github.com/react-dates/react-dates/pull/916))
+- [fix] Fix React warnings when events are referenced later ([#682](https://github.com/react-dates/react-dates/pull/682))
 
 ## 16.0.1
-- [fix] Add back missing onKeyDown method to `CalendarDay` ([#901](https://github.com/airbnb/react-dates/pull/901))
+- [fix] Add back missing onKeyDown method to `CalendarDay` ([#901](https://github.com/react-dates/react-dates/pull/901))
 
 ## 16.0.0
-- [breaking] Simplify `CalendarDay` component ([#894](https://github.com/airbnb/react-dates/pull/894))
-- [breaking] rename `renderDay` prop to `renderDayContents` ([#894](https://github.com/airbnb/react-dates/pull/894))
-- [new] Add `renderCalendarDay` component to allow for easy one-off customization of `CalendarDay` ([#894](https://github.com/airbnb/react-dates/pull/894))
+- [breaking] Simplify `CalendarDay` component ([#894](https://github.com/react-dates/react-dates/pull/894))
+- [breaking] rename `renderDay` prop to `renderDayContents` ([#894](https://github.com/react-dates/react-dates/pull/894))
+- [new] Add `renderCalendarDay` component to allow for easy one-off customization of `CalendarDay` ([#894](https://github.com/react-dates/react-dates/pull/894))
 
 ## 15.5.2
-- revert [#866](https://github.com/airbnb/react-dates/pull/866); it turned out to be semver-major
+- revert [#866](https://github.com/react-dates/react-dates/pull/866); it turned out to be semver-major
 
 ## 15.5.1
-- [fix] Adjust `small` variant height to be 36px ([#892](https://github.com/airbnb/react-dates/pull/892))
+- [fix] Adjust `small` variant height to be 36px ([#892](https://github.com/react-dates/react-dates/pull/892))
 
 ## 15.5.0
-- [new] Add `small` variant ([#891](https://github.com/airbnb/react-dates/pull/891))
+- [new] Add `small` variant ([#891](https://github.com/react-dates/react-dates/pull/891))
 
 ## 15.4.0
-- [fix] Set font sizes according to theme variable ([#885](https://github.com/airbnb/react-dates/pull/885))
-- [new] Add `verticalSpacing` prop ([#883](https://github.com/airbnb/react-dates/pull/883))
+- [fix] Set font sizes according to theme variable ([#885](https://github.com/react-dates/react-dates/pull/885))
+- [new] Add `verticalSpacing` prop ([#883](https://github.com/react-dates/react-dates/pull/883))
 
 ## 15.3.0
-- [new] Add `transitionDuration` prop ([#865](https://github.com/airbnb/react-dates/pull/865))
-- [fix] Remove default prop values for required startDateId and endDateId props ([#866](https://github.com/airbnb/react-dates/pull/866))
-- [new] Add `block` styling prop ([#871](https://github.com/airbnb/react-dates/pull/871))
-- [new] Add `noBorder` prop to `DayPicker` variations ([#869](https://github.com/airbnb/react-dates/pull/869))
-- [new] Add `noBorder` prop to inputs ([#870](https://github.com/airbnb/react-dates/pull/870))
-- [fix] Remove unused width style in `KeyboardShortcutsRow` ([#867](https://github.com/airbnb/react-dates/pull/867))
+- [new] Add `transitionDuration` prop ([#865](https://github.com/react-dates/react-dates/pull/865))
+- [fix] Remove default prop values for required startDateId and endDateId props ([#866](https://github.com/react-dates/react-dates/pull/866))
+- [new] Add `block` styling prop ([#871](https://github.com/react-dates/react-dates/pull/871))
+- [new] Add `noBorder` prop to `DayPicker` variations ([#869](https://github.com/react-dates/react-dates/pull/869))
+- [new] Add `noBorder` prop to inputs ([#870](https://github.com/react-dates/react-dates/pull/870))
+- [fix] Remove unused width style in `KeyboardShortcutsRow` ([#867](https://github.com/react-dates/react-dates/pull/867))
 
 ## 15.2.1
 - [fix] Republish `_datepicker.css`
 
 ## 15.2.0
-- [new] Add back today modifier (and class) ([#861](https://github.com/airbnb/react-dates/pull/861))
-- [new] Add ariaLabelFormat prop to CalendarDay ([#842](https://github.com/airbnb/react-dates/pull/842), [#857](https://github.com/airbnb/react-dates/pull/857))
-- [fix] Reset `after-hover-start` in `componentWillReceiveProps` instead of only on click ([#843](https://github.com/airbnb/react-dates/pull/843))
-- [fix] Use `color.background` variable instead of hardcoded #fff for theming ([#852](https://github.com/airbnb/react-dates/pull/852))
-- [fix] Update CalendarMonthGrid months based on locale change ([#795](https://github.com/airbnb/react-dates/pull/795))
+- [new] Add back today modifier (and class) ([#861](https://github.com/react-dates/react-dates/pull/861))
+- [new] Add ariaLabelFormat prop to CalendarDay ([#842](https://github.com/react-dates/react-dates/pull/842), [#857](https://github.com/react-dates/react-dates/pull/857))
+- [fix] Reset `after-hover-start` in `componentWillReceiveProps` instead of only on click ([#843](https://github.com/react-dates/react-dates/pull/843))
+- [fix] Use `color.background` variable instead of hardcoded #fff for theming ([#852](https://github.com/react-dates/react-dates/pull/852))
+- [fix] Update CalendarMonthGrid months based on locale change ([#795](https://github.com/react-dates/react-dates/pull/795))
 
 ## 15.1.0
-- [fix] Add explicit border-radius on KeyboardShortcuts button ([#792](https://github.com/airbnb/react-dates/pull/792))
-- [fix] Pass onClose from SingleDatePicker to DayPickerSingleDateController ([#816](https://github.com/airbnb/react-dates/pull/816))
-- [new] Pass modifiers to `renderDay` as second arg ([#829](https://github.com/airbnb/react-dates/pull/829))
-- [fix] Fix KeyboardShortcutsPanel focus issues ([#825](https://github.com/airbnb/react-dates/pull/825))
+- [fix] Add explicit border-radius on KeyboardShortcuts button ([#792](https://github.com/react-dates/react-dates/pull/792))
+- [fix] Pass onClose from SingleDatePicker to DayPickerSingleDateController ([#816](https://github.com/react-dates/react-dates/pull/816))
+- [new] Pass modifiers to `renderDay` as second arg ([#829](https://github.com/react-dates/react-dates/pull/829))
+- [fix] Fix KeyboardShortcutsPanel focus issues ([#825](https://github.com/react-dates/react-dates/pull/825))
 
 ## 15.0.0
-- [breaking] Rename SDP keydown callback props so that they match the DRP ([#800](https://github.com/airbnb/react-dates/pull/800))
-- [fix] Explicitly set the border-radius on the keyboard shortcuts button ([#792](https://github.com/airbnb/react-dates/pull/792))
+- [breaking] Rename SDP keydown callback props so that they match the DRP ([#800](https://github.com/react-dates/react-dates/pull/800))
+- [fix] Explicitly set the border-radius on the keyboard shortcuts button ([#792](https://github.com/react-dates/react-dates/pull/792))
 
 ## 14.1.0
-- [new] Add esm build ([#791](https://github.com/airbnb/react-dates/pull/791))
-- [new] Add back `selected-start`/`selected-end` modifiers to `CalendarDay` ([#796](https://github.com/airbnb/react-dates/pull/796))
+- [new] Add esm build ([#791](https://github.com/react-dates/react-dates/pull/791))
+- [new] Add back `selected-start`/`selected-end` modifiers to `CalendarDay` ([#796](https://github.com/react-dates/react-dates/pull/796))
 
 ## 14.0.0
-- [fix] Flip arrow navigation in RTL context ([#775](https://github.com/airbnb/react-dates/pull/775))
-- [new] Add `verticalHeight` prop to SDP, DRP and DayPicker ([#773](https://github.com/airbnb/react-dates/pull/773))
-- [breaking] Modify default `DateInput` styling, convert inputs to actual inputs, and remove caption ids ([#780](https://github.com/airbnb/react-dates/pull/780))
+- [fix] Flip arrow navigation in RTL context ([#775](https://github.com/react-dates/react-dates/pull/775))
+- [new] Add `verticalHeight` prop to SDP, DRP and DayPicker ([#773](https://github.com/react-dates/react-dates/pull/773))
+- [breaking] Modify default `DateInput` styling, convert inputs to actual inputs, and remove caption ids ([#780](https://github.com/react-dates/react-dates/pull/780))
 
 ## 13.0.6
-- [fix] Update `react-with-styles-interface-css` dependency ([#777](https://github.com/airbnb/react-dates/pull/777))
+- [fix] Update `react-with-styles-interface-css` dependency ([#777](https://github.com/react-dates/react-dates/pull/777))
 
 ## 13.0.5
 - [fix] Add back missing built CSS file
 
 ## 13.0.4
-- [fix] Pass through `customCloseIcon` prop from the SDP to the SDPInput ([#767](https://github.com/airbnb/react-dates/pull/767))
-- [fix] Fix incorrect available/unavailable phrase being read on `CalendarDay` components ([#771](https://github.com/airbnb/react-dates/pull/771))
+- [fix] Pass through `customCloseIcon` prop from the SDP to the SDPInput ([#767](https://github.com/react-dates/react-dates/pull/767))
+- [fix] Fix incorrect available/unavailable phrase being read on `CalendarDay` components ([#771](https://github.com/react-dates/react-dates/pull/771))
 
 ## 13.0.3
-- [fix] Change CSS style specificity to 0 for the default stylesheet ([#753](https://github.com/airbnb/react-dates/pull/753))
-- [fix] Remove unnecessary caption object from `CalendarMonth` styles ([#757](https://github.com/airbnb/react-dates/pull/757))
+- [fix] Change CSS style specificity to 0 for the default stylesheet ([#753](https://github.com/react-dates/react-dates/pull/753))
+- [fix] Remove unnecessary caption object from `CalendarMonth` styles ([#757](https://github.com/react-dates/react-dates/pull/757))
 
 ## 13.0.2
 - [fix] Use default export of `registerCSSInterfaceWithDefaultTheme` in `initialize`
 
 ## 13.0.1
-- [fix] Move caption div back outside of `CalendarMonth` table ([#748](https://github.com/airbnb/react-dates/pull/748))
+- [fix] Move caption div back outside of `CalendarMonth` table ([#748](https://github.com/react-dates/react-dates/pull/748))
 
 ## 13.0.0
-- [breaking] Convert react-dates to rely on `react-with-styles` in place of CSS stylesheets ([#722](https://github.com/airbnb/react-dates/pull/722))
+- [breaking] Convert react-dates to rely on `react-with-styles` in place of CSS stylesheets ([#722](https://github.com/react-dates/react-dates/pull/722))
 
 ## 12.7.1
-- [fix] set explicit border radius on shortcuts button ([#792](https://github.com/airbnb/react-dates/pull/792))
+- [fix] set explicit border radius on shortcuts button ([#792](https://github.com/react-dates/react-dates/pull/792))
 
 ## 12.7.0
-- [new] Some accessibility improvements and patches ([#715](https://github.com/airbnb/react-dates/pull/715))
+- [new] Some accessibility improvements and patches ([#715](https://github.com/react-dates/react-dates/pull/715))
 
 ## 12.6.0
-- [new] Add `weekDayFormat` prop to SDP/DRP ([#650](https://github.com/airbnb/react-dates/pull/650))
-- [new] Add `openDirection` prop to SDP/DRP ([#653](https://github.com/airbnb/react-dates/pull/653))
-- [fix] Reset visibleDays/currentMonth state when `enableOutsideDays` or `numberOfMonths` has changed ([#702](https://github.com/airbnb/react-dates/pull/702))
-- [new] Add $react-dates-color-primary-dark CSS variable ([#704](https://github.com/airbnb/react-dates/pull/704))
+- [new] Add `weekDayFormat` prop to SDP/DRP ([#650](https://github.com/react-dates/react-dates/pull/650))
+- [new] Add `openDirection` prop to SDP/DRP ([#653](https://github.com/react-dates/react-dates/pull/653))
+- [fix] Reset visibleDays/currentMonth state when `enableOutsideDays` or `numberOfMonths` has changed ([#702](https://github.com/react-dates/react-dates/pull/702))
+- [new] Add $react-dates-color-primary-dark CSS variable ([#704](https://github.com/react-dates/react-dates/pull/704))
 
 ## 12.5.1
-- [fix] Ensure `this.childNode` exists in the `OutsideClickHandler` ([e330839](https://github.com/airbnb/react-dates/commit/e3308395212bef07d1f3c05f413cac3dd245ac98))
-- [fix] Remove `minimumNights` prop from the `DayPickerSingleDateController` ([#686](https://github.com/airbnb/react-dates/pull/686))
+- [fix] Ensure `this.childNode` exists in the `OutsideClickHandler` ([e330839](https://github.com/react-dates/react-dates/commit/e3308395212bef07d1f3c05f413cac3dd245ac98))
+- [fix] Remove `minimumNights` prop from the `DayPickerSingleDateController` ([#686](https://github.com/react-dates/react-dates/pull/686))
 
 ## 12.5.0
-- [fix] Fix `onOutsideClick` prop functionality in the SDP ([#666](https://github.com/airbnb/react-dates/pull/666))
-- [new] Add `inputIconPosition` prop ([#627](https://github.com/airbnb/react-dates/pull/627))
-- [fix] Adjust DayPicker styles when portal status is set ([#659](https://github.com/airbnb/react-dates/pull/659))
+- [fix] Fix `onOutsideClick` prop functionality in the SDP ([#666](https://github.com/react-dates/react-dates/pull/666))
+- [new] Add `inputIconPosition` prop ([#627](https://github.com/react-dates/react-dates/pull/627))
+- [fix] Adjust DayPicker styles when portal status is set ([#659](https://github.com/react-dates/react-dates/pull/659))
 
 ## 12.4.0
-- [fix] Pass `onPrevMonthClick`/`onNextMonthClick` props through the SDP ([#657](https://github.com/airbnb/react-dates/pull/657))
-- [fix] Recalculate modifiers when prop modifiers change ([#668](https://github.com/airbnb/react-dates/pull/668))
-- [new] Pass back month as argument to `onPrevMonthClick`/`onNextMonthClick` props ([#667](https://github.com/airbnb/react-dates/pull/667))
+- [fix] Pass `onPrevMonthClick`/`onNextMonthClick` props through the SDP ([#657](https://github.com/react-dates/react-dates/pull/657))
+- [fix] Recalculate modifiers when prop modifiers change ([#668](https://github.com/react-dates/react-dates/pull/668))
+- [new] Pass back month as argument to `onPrevMonthClick`/`onNextMonthClick` props ([#667](https://github.com/react-dates/react-dates/pull/667))
 
 ## 12.3.0
-- [fix] Allows users to type in same-day start date and end date when `minimumNights` is 0 ([#555](https://github.com/airbnb/react-dates/pull/555))
-- [new] Add `firstDayOfWeek` prop ([#371](https://github.com/airbnb/react-dates/pull/371))
-- [fix] Add back `phrases` support for `SingleDatePicker` ([#623](https://github.com/airbnb/react-dates/pull/623))
+- [fix] Allows users to type in same-day start date and end date when `minimumNights` is 0 ([#555](https://github.com/react-dates/react-dates/pull/555))
+- [new] Add `firstDayOfWeek` prop ([#371](https://github.com/react-dates/react-dates/pull/371))
+- [fix] Add back `phrases` support for `SingleDatePicker` ([#623](https://github.com/react-dates/react-dates/pull/623))
 
 ## 12.2.4
-- [fix] Fix `initialVisibleMonth` error in the `DayPickerRangeController` component ([#617](https://github.com/airbnb/react-dates/pull/617))
-- [fix] Pass through missing `keepOpenOnDateSelect` prop to the `DayPickerSingleDateController` component ([#620](https://github.com/airbnb/react-dates/pull/620))
+- [fix] Fix `initialVisibleMonth` error in the `DayPickerRangeController` component ([#617](https://github.com/react-dates/react-dates/pull/617))
+- [fix] Pass through missing `keepOpenOnDateSelect` prop to the `DayPickerSingleDateController` component ([#620](https://github.com/react-dates/react-dates/pull/620))
 
 ## 12.2.3
-- [fix] Export `DayPickerSingleDateController` in index.js ([#609](https://github.com/airbnb/react-dates/pull/609))
+- [fix] Export `DayPickerSingleDateController` in index.js ([#609](https://github.com/react-dates/react-dates/pull/609))
 
 ## 12.2.2
-- [fix] Reevaluate `--blocked` and `--blocked-outside-range` modifiers in the SDP componentWilLReceiveProps ([#550](https://github.com/airbnb/react-dates/pull/550))
+- [fix] Reevaluate `--blocked` and `--blocked-outside-range` modifiers in the SDP componentWilLReceiveProps ([#550](https://github.com/react-dates/react-dates/pull/550))
 
 ## 12.2.1
-- [fix] Fix `isTouchDevice` warning in `DayPickerSingleDateController` ([77e2135](https://github.com/airbnb/react-dates/commit/77e2135d2009994fbf2c62e3ff68ce82e5786194))
+- [fix] Fix `isTouchDevice` warning in `DayPickerSingleDateController` ([77e2135](https://github.com/react-dates/react-dates/commit/77e2135d2009994fbf2c62e3ff68ce82e5786194))
 
 ## v12.2.0
-- [fix] Deprecate `isTouchDevice` in favor of `is-touch-device` ([#576](https://github.com/airbnb/react-dates/pull/576))
-- [fix] Disable calendar icon when component is disabled ([#591](https://github.com/airbnb/react-dates/pull/591))
-- [fix] Fix issue where range does not clear on invisible months ([#575](https://github.com/airbnb/react-dates/pull/575))
-- [new] Add `DayPickerSingleDateController` component ([#573](https://github.com/airbnb/react-dates/pull/573))
+- [fix] Deprecate `isTouchDevice` in favor of `is-touch-device` ([#576](https://github.com/react-dates/react-dates/pull/576))
+- [fix] Disable calendar icon when component is disabled ([#591](https://github.com/react-dates/react-dates/pull/591))
+- [fix] Fix issue where range does not clear on invisible months ([#575](https://github.com/react-dates/react-dates/pull/575))
+- [new] Add `DayPickerSingleDateController` component ([#573](https://github.com/react-dates/react-dates/pull/573))
 
 ## v12.1.2
-- [fix] Add null check for calendarMonthGrid ref ([#552](https://github.com/airbnb/react-dates/pull/552))
+- [fix] Add null check for calendarMonthGrid ref ([#552](https://github.com/react-dates/react-dates/pull/552))
 
 ## v12.1.1
-- [fix] Remove `--hovered-span` modifier when selecting a new end date ([#523](https://github.com/airbnb/react-dates/pull/523))
-- [fix] Improve `isTouchDevice` detection logic ([#516](https://github.com/airbnb/react-dates/pull/516))
-- [fix] Recompute `--blocked` and `--blocked-outside-range` when `focusedInput` changes ([#522](https://github.com/airbnb/react-dates/pull/522))
+- [fix] Remove `--hovered-span` modifier when selecting a new end date ([#523](https://github.com/react-dates/react-dates/pull/523))
+- [fix] Improve `isTouchDevice` detection logic ([#516](https://github.com/react-dates/react-dates/pull/516))
+- [fix] Recompute `--blocked` and `--blocked-outside-range` when `focusedInput` changes ([#522](https://github.com/react-dates/react-dates/pull/522))
 
 ## v12.1.0
-- [new] Add `showDefaultInputIcon` and `customInputIcon` props to SDP ([#513](https://github.com/airbnb/react-dates/pull/513))
+- [new] Add `showDefaultInputIcon` and `customInputIcon` props to SDP ([#513](https://github.com/react-dates/react-dates/pull/513))
 
 ## v12.0.0
-- [breaking] Updates moment peer dependency to ^2.18.1 ([#505](https://github.com/airbnb/react-dates/pull/505))
+- [breaking] Updates moment peer dependency to ^2.18.1 ([#505](https://github.com/react-dates/react-dates/pull/505))
 
 ## v11.1.0
-- [fix] Patch issues with vertical scrollable datepickers, after-hovered-start and month transitions ([#503](https://github.com/airbnb/react-dates/pull/503))
-- [new] Adds a `readOnly` prop on the DRP and SDP ([#501](https://github.com/airbnb/react-dates/pull/501))
-- [fix] Disable hover when `focusedInput` is falsy ([#483](https://github.com/airbnb/react-dates/pull/483))
+- [fix] Patch issues with vertical scrollable datepickers, after-hovered-start and month transitions ([#503](https://github.com/react-dates/react-dates/pull/503))
+- [new] Adds a `readOnly` prop on the DRP and SDP ([#501](https://github.com/react-dates/react-dates/pull/501))
+- [fix] Disable hover when `focusedInput` is falsy ([#483](https://github.com/react-dates/react-dates/pull/483))
 
 ## v11.0.1
-- [fix] Fixes small modifier issues in the DRP after rearchitecture ([#489](https://github.com/airbnb/react-dates/pull/489))
+- [fix] Fixes small modifier issues in the DRP after rearchitecture ([#489](https://github.com/react-dates/react-dates/pull/489))
 
 ## v11.0.0
-- [breaking] Dramatic rearchitecture of modifiers with the goal of improved performance ([#450](https://github.com/airbnb/react-dates/pull/450))
+- [breaking] Dramatic rearchitecture of modifiers with the goal of improved performance ([#450](https://github.com/react-dates/react-dates/pull/450))
 
 ## v10.2.0
-- [new] Add RTL support to the DRP and the SDP with the `isRTL` prop ([#454](https://github.com/airbnb/react-dates/pull/454))
-- [new] Add `renderMonth` prop to DRP and SDP([#449](https://github.com/airbnb/react-dates/pull/449))
+- [new] Add RTL support to the DRP and the SDP with the `isRTL` prop ([#454](https://github.com/react-dates/react-dates/pull/454))
+- [new] Add `renderMonth` prop to DRP and SDP([#449](https://github.com/react-dates/react-dates/pull/449))
 
 ## v10.1.3
 - [Fix] OutsideClickHandler: ensure this.childNode exists (#437)
 
 ## v10.1.2
-- [fix] Remove unused scss variables ([#475](https://github.com/airbnb/react-dates/pull/475))
-- [fix] Address some issues introduced by the accessibility PR in v10.0.0 ([#477](https://github.com/airbnb/react-dates/pull/477))
-- [fix] Only update phrase object in the DRP when necessary ([#448](https://github.com/airbnb/react-dates/pull/448))
+- [fix] Remove unused scss variables ([#475](https://github.com/react-dates/react-dates/pull/475))
+- [fix] Address some issues introduced by the accessibility PR in v10.0.0 ([#477](https://github.com/react-dates/react-dates/pull/477))
+- [fix] Only update phrase object in the DRP when necessary ([#448](https://github.com/react-dates/react-dates/pull/448))
 
 ## v10.1.1
 - [fix] Remove unnecessary `onClose` instances on the `SDPInput` and `DateInput` components
 
 ## v10.1.0
-- [new] Add `onClose` callback ([#397](https://github.com/airbnb/react-dates/pull/397))
+- [new] Add `onClose` callback ([#397](https://github.com/react-dates/react-dates/pull/397))
 
 ## v10.0.1
-- [fix] Fix a few nits as a result of the accessibility PR ([#429](https://github.com/airbnb/react-dates/pull/429))
+- [fix] Fix a few nits as a result of the accessibility PR ([#429](https://github.com/react-dates/react-dates/pull/429))
 
 ## v10.0.0
-- [breaking] Add keyboard accessibility to react-dates ([#301](https://github.com/airbnb/react-dates/pull/301))
+- [breaking] Add keyboard accessibility to react-dates ([#301](https://github.com/react-dates/react-dates/pull/301))
 
 ## v9.0.1
-- [fix] Fixes `withPortal` implementation in Firefox ([#421](https://github.com/airbnb/react-dates/pull/421))
+- [fix] Fixes `withPortal` implementation in Firefox ([#421](https://github.com/react-dates/react-dates/pull/421))
 
 ## v9.0.0
-- [fix] Only send down relevant modifiers down the tree ([#412](https://github.com/airbnb/react-dates/pull/412))
-- [fix] Optimise `isSameDay` method ([#415](https://github.com/airbnb/react-dates/pull/415))
-- [fix] Blur input for portal implementations (and on touch devices) ([#410](https://github.com/airbnb/react-dates/pull/410))
-- [breaking] Add `daySize` prop to scale the pickers properly ([#406](https://github.com/airbnb/react-dates/pull/406))
+- [fix] Only send down relevant modifiers down the tree ([#412](https://github.com/react-dates/react-dates/pull/412))
+- [fix] Optimise `isSameDay` method ([#415](https://github.com/react-dates/react-dates/pull/415))
+- [fix] Blur input for portal implementations (and on touch devices) ([#410](https://github.com/react-dates/react-dates/pull/410))
+- [breaking] Add `daySize` prop to scale the pickers properly ([#406](https://github.com/react-dates/react-dates/pull/406))
 
 ## v8.2.1
-- [fix] Add `needsclick` to inputs to disable fastclick ([#377](https://github.com/airbnb/react-dates/pull/377))
-- [deps] Update `style-loader`, `sinon`, `babel-loader`, `coveralls`, and `karma-webpack` ([#379](https://github.com/airbnb/react-dates/pull/379), [#372](https://github.com/airbnb/react-dates/pull/372), [#373](https://github.com/airbnb/react-dates/pull/373))
+- [fix] Add `needsclick` to inputs to disable fastclick ([#377](https://github.com/react-dates/react-dates/pull/377))
+- [deps] Update `style-loader`, `sinon`, `babel-loader`, `coveralls`, and `karma-webpack` ([#379](https://github.com/react-dates/react-dates/pull/379), [#372](https://github.com/react-dates/react-dates/pull/372), [#373](https://github.com/react-dates/react-dates/pull/373))
 
 ## v8.2.0
-- [new] Add `renderCalendarInfo` prop to DRP and SDP ([#341](https://github.com/airbnb/react-dates/pull/341))
+- [new] Add `renderCalendarInfo` prop to DRP and SDP ([#341](https://github.com/react-dates/react-dates/pull/341))
 
 ## v8.1.1
-- [fix] Add missing `customCloseIcon` propType declarations ([#367](https://github.com/airbnb/react-dates/pull/367))
+- [fix] Add missing `customCloseIcon` propType declarations ([#367](https://github.com/react-dates/react-dates/pull/367))
 
 ## v8.1.0
-- [new] Add `customCloseIcon` prop ([#356](https://github.com/airbnb/react-dates/pull/356))
+- [new] Add `customCloseIcon` prop ([#356](https://github.com/react-dates/react-dates/pull/356))
 
 ## v8.0.0
-- [fix] Remove `$react-dates-width-day-picker` variable from `CalendarMonthGrid.scss`, allowing overrides ([#352](https://github.com/airbnb/react-dates/pull/352))
-- [new] Create `defaultPhrases` file for i18n ([#351](https://github.com/airbnb/react-dates/pull/351))
-- [fix] Set `isTouchDevice` on `componentDidMount` ([#336](https://github.com/airbnb/react-dates/pull/336))
-- [fix] Change `CalendarMonthGrid` background to use `$react-dates-color-white` ([#342](https://github.com/airbnb/react-dates/pull/342))
-- [breaking] Make `onFocusChange` and `onDate(s)Change` props required and `forbidExtraProps` on all components ([#332](https://github.com/airbnb/react-dates/pull/332))
-- [fix] Fix caption alignment when using bootstrap ([#323](https://github.com/airbnb/react-dates/pull/323))
+- [fix] Remove `$react-dates-width-day-picker` variable from `CalendarMonthGrid.scss`, allowing overrides ([#352](https://github.com/react-dates/react-dates/pull/352))
+- [new] Create `defaultPhrases` file for i18n ([#351](https://github.com/react-dates/react-dates/pull/351))
+- [fix] Set `isTouchDevice` on `componentDidMount` ([#336](https://github.com/react-dates/react-dates/pull/336))
+- [fix] Change `CalendarMonthGrid` background to use `$react-dates-color-white` ([#342](https://github.com/react-dates/react-dates/pull/342))
+- [breaking] Make `onFocusChange` and `onDate(s)Change` props required and `forbidExtraProps` on all components ([#332](https://github.com/react-dates/react-dates/pull/332))
+- [fix] Fix caption alignment when using bootstrap ([#323](https://github.com/react-dates/react-dates/pull/323))
 
 ## v7.0.1
-- [fix] Fix minimum nights issues for startDates/endDates with time ([#310](https://github.com/airbnb/react-dates/pull/310))
+- [fix] Fix minimum nights issues for startDates/endDates with time ([#310](https://github.com/react-dates/react-dates/pull/310))
 
 ## v7.0.0
-- [breaking] Simplify `CalendarDay` DOM ([#291](https://github.com/airbnb/react-dates/pull/291))
+- [breaking] Simplify `CalendarDay` DOM ([#291](https://github.com/react-dates/react-dates/pull/291))
 
 ## v6.1.0
-- [fix] Revert "Simplify `CalendarDay` DOM ([#291](https://github.com/airbnb/react-dates/pull/291))"
-- [new] Add `renderDay` prop to customize the content of the `CalendarDay` component ([#307](https://github.com/airbnb/react-dates/pull/307))
+- [fix] Revert "Simplify `CalendarDay` DOM ([#291](https://github.com/react-dates/react-dates/pull/291))"
+- [new] Add `renderDay` prop to customize the content of the `CalendarDay` component ([#307](https://github.com/react-dates/react-dates/pull/307))
 
 ## v6.0.2
-- [fix] Fix `day` prop type warning to `CalendarDay` ([#305](https://github.com/airbnb/react-dates/pull/305))
-- [fix] Remove blinking cursor in iOS ([#304](https://github.com/airbnb/react-dates/pull/304))
-- [fix] Do not render `DayPicker` when not visible ([#286](https://github.com/airbnb/react-dates/pull/286))
-- [breaking] Simplify `CalendarDay` DOM ([#291](https://github.com/airbnb/react-dates/pull/291))
+- [fix] Fix `day` prop type warning to `CalendarDay` ([#305](https://github.com/react-dates/react-dates/pull/305))
+- [fix] Remove blinking cursor in iOS ([#304](https://github.com/react-dates/react-dates/pull/304))
+- [fix] Do not render `DayPicker` when not visible ([#286](https://github.com/react-dates/react-dates/pull/286))
+- [breaking] Simplify `CalendarDay` DOM ([#291](https://github.com/react-dates/react-dates/pull/291))
 
 ## v6.0.1
- - [fix] Attached SDP closes on outside click again ([#288](https://github.com/airbnb/react-dates/pull/288))
- - [fix] SDP display value defaults to moment's `L` format again instead of ISO ([#285](https://github.com/airbnb/react-dates/pull/285))
+ - [fix] Attached SDP closes on outside click again ([#288](https://github.com/react-dates/react-dates/pull/288))
+ - [fix] SDP display value defaults to moment's `L` format again instead of ISO ([#285](https://github.com/react-dates/react-dates/pull/285))
 
 ## v6.0.0
- - [breaking] Remove hidden `label` element in favor of an `aria-label` property ([#280](https://github.com/airbnb/react-dates/pull/280))
- - [new] Add `customArrowIcon` prop ([#277](https://github.com/airbnb/react-dates/pull/277))
- - [breaking] Remove mousedown/mouseup/touchstart/touchend/touchtap handlers in favor of click ([#275](https://github.com/airbnb/react-dates/pull/275))
- - [fix] Fix duplicate months created when increasing `numberOfMonths` and include year in `CalendarMonth` key ([#279](https://github.com/airbnb/react-dates/pull/279))
- - [new] Add `screenReaderInputMessage` to populate the `aria-describedby` attribute on the input ([#266](https://github.com/airbnb/react-dates/pull/266))
+ - [breaking] Remove hidden `label` element in favor of an `aria-label` property ([#280](https://github.com/react-dates/react-dates/pull/280))
+ - [new] Add `customArrowIcon` prop ([#277](https://github.com/react-dates/react-dates/pull/277))
+ - [breaking] Remove mousedown/mouseup/touchstart/touchend/touchtap handlers in favor of click ([#275](https://github.com/react-dates/react-dates/pull/275))
+ - [fix] Fix duplicate months created when increasing `numberOfMonths` and include year in `CalendarMonth` key ([#279](https://github.com/react-dates/react-dates/pull/279))
+ - [new] Add `screenReaderInputMessage` to populate the `aria-describedby` attribute on the input ([#266](https://github.com/react-dates/react-dates/pull/266))
 
 ## v5.2.0
- - [new] Add `VERTICAL_SCROLLABLE` orientation to the `DayPickerRangeController` and child components ([#250](https://github.com/airbnb/react-dates/pull/250))
+ - [new] Add `VERTICAL_SCROLLABLE` orientation to the `DayPickerRangeController` and child components ([#250](https://github.com/react-dates/react-dates/pull/250))
 
 ## v5.1.1
- - [fix] Fix regression where user was no longer able to type into input ([#269](https://github.com/airbnb/react-dates/pull/269))
+ - [fix] Fix regression where user was no longer able to type into input ([#269](https://github.com/react-dates/react-dates/pull/269))
 
 ## v5.1.0
- - [new] Add `showDefaultInputIcon` and `customInputIcon` prop to show an icon at the beginning of the input field ([#222](https://github.com/airbnb/react-dates/pull/222))
+ - [new] Add `showDefaultInputIcon` and `customInputIcon` prop to show an icon at the beginning of the input field ([#222](https://github.com/react-dates/react-dates/pull/222))
 
 ## v5.0.0
- - [breaking] Update input value to use ISO format instead of the display format ([#229](https://github.com/airbnb/react-dates/pull/229))
- - [breaking] Performance improvements, including the removal of the modifiers prop from `CalendarDay` ([#217](https://github.com/airbnb/react-dates/pull/217))
+ - [breaking] Update input value to use ISO format instead of the display format ([#229](https://github.com/react-dates/react-dates/pull/229))
+ - [breaking] Performance improvements, including the removal of the modifiers prop from `CalendarDay` ([#217](https://github.com/react-dates/react-dates/pull/217))
 
 ## v4.3.3
- - [fix] Force DayPicker and CalendarMonthGrid alignment to the left ([#257](https://github.com/airbnb/react-dates/pull/257),[#258](https://github.com/airbnb/react-dates/pull/258))
+ - [fix] Force DayPicker and CalendarMonthGrid alignment to the left ([#257](https://github.com/react-dates/react-dates/pull/257),[#258](https://github.com/react-dates/react-dates/pull/258))
 
 ## v4.3.2
- - [fix] Finish refactor from 471bd602302f4dfe4f1e66b79d50b22f7511d8ba ([#233](https://github.com/airbnb/react-dates/pull/233))
+ - [fix] Finish refactor from 471bd602302f4dfe4f1e66b79d50b22f7511d8ba ([#233](https://github.com/react-dates/react-dates/pull/233))
 
 ## v4.3.1 (unpublished)
- - [fix] Don’t create an unnecessary array from a NodeList, which avoids needing `Array.from` ([#233](https://github.com/airbnb/react-dates/pull/233))
+ - [fix] Don’t create an unnecessary array from a NodeList, which avoids needing `Array.from` ([#233](https://github.com/react-dates/react-dates/pull/233))
 
 ## v4.3.0
- - [new] Add today modifier to the `SingleDatePicker` component ([#218](https://github.com/airbnb/react-dates/pull/218))
- - [fix] Fix week header alignment when `numberOfMonths` is greater than 2 ([#221](https://github.com/airbnb/react-dates/pull/221))
- - [fix] Fix `transition`/`transform` prefixing on `.CalendarMonthGrid--animating` class ([#220](https://github.com/airbnb/react-dates/pull/220))
- - [fix] Do not allow `pointer-events` on invisible first month ([#227](https://github.com/airbnb/react-dates/pull/227))
- - [fix] Remove `maxLength` attribute from inputs ([#219](https://github.com/airbnb/react-dates/pull/219))
+ - [new] Add today modifier to the `SingleDatePicker` component ([#218](https://github.com/react-dates/react-dates/pull/218))
+ - [fix] Fix week header alignment when `numberOfMonths` is greater than 2 ([#221](https://github.com/react-dates/react-dates/pull/221))
+ - [fix] Fix `transition`/`transform` prefixing on `.CalendarMonthGrid--animating` class ([#220](https://github.com/react-dates/react-dates/pull/220))
+ - [fix] Do not allow `pointer-events` on invisible first month ([#227](https://github.com/react-dates/react-dates/pull/227))
+ - [fix] Remove `maxLength` attribute from inputs ([#219](https://github.com/react-dates/react-dates/pull/219))
 
 ## v4.2.0
- - [new] Add `isDayHighlighted` prop to the DRP/SDP which applies a `highlighted-calendar` to the relevant days ([#206](https://github.com/airbnb/react-dates/pull/206))
- - [new] Add `today` modifier to the `DayPickerRangeController` component ([#213](https://github.com/airbnb/react-dates/pull/213))
+ - [new] Add `isDayHighlighted` prop to the DRP/SDP which applies a `highlighted-calendar` to the relevant days ([#206](https://github.com/react-dates/react-dates/pull/206))
+ - [new] Add `today` modifier to the `DayPickerRangeController` component ([#213](https://github.com/react-dates/react-dates/pull/213))
 
 ## v4.1.2
- - [fix] `DayPicker` now has initial width set, even before any other interaction ([#215](https://github.com/airbnb/react-dates/pull/215))
+ - [fix] `DayPicker` now has initial width set, even before any other interaction ([#215](https://github.com/react-dates/react-dates/pull/215))
 
 ## v4.1.1
- - [fix] Fix issue where the DayPicker height and width were not always being set initially ([#196](https://github.com/airbnb/react-dates/pull/196))
- - [fix] Fix closed DRP/SDP refocus issue on window blur and refocus ([#212](https://github.com/airbnb/react-dates/pull/212))
+ - [fix] Fix issue where the DayPicker height and width were not always being set initially ([#196](https://github.com/react-dates/react-dates/pull/196))
+ - [fix] Fix closed DRP/SDP refocus issue on window blur and refocus ([#212](https://github.com/react-dates/react-dates/pull/212))
 
 ## v4.1.0
- - [new] Separate out date range input event handling logic into the `DateRangePickerInputController` component ([#180](https://github.com/airbnb/react-dates/pull/180))
- - [fix] Only responsivize the DRP and SDP when `withPortal` and `withFullScreenPortal` options are false ([#183](https://github.com/airbnb/react-dates/pull/183))
- - [new] Separate out date range calendar event handling logic and styles into the `DayPickerRangeController` component ([#167](https://github.com/airbnb/react-dates/pull/167))
+ - [new] Separate out date range input event handling logic into the `DateRangePickerInputController` component ([#180](https://github.com/react-dates/react-dates/pull/180))
+ - [fix] Only responsivize the DRP and SDP when `withPortal` and `withFullScreenPortal` options are false ([#183](https://github.com/react-dates/react-dates/pull/183))
+ - [new] Separate out date range calendar event handling logic and styles into the `DayPickerRangeController` component ([#167](https://github.com/react-dates/react-dates/pull/167))
 
 ## v4.0.2
- - [patch] Revert [#176](https://github.com/airbnb/react-dates/pull/176) ([#189](https://github.com/airbnb/react-dates/pull/189))
+ - [patch] Revert [#176](https://github.com/react-dates/react-dates/pull/176) ([#189](https://github.com/react-dates/react-dates/pull/189))
 
 ## v4.0.1
- - [patch] `initialVisibleMonth` prop will now be called every time the `DayPicker` is opened ([#176](https://github.com/airbnb/react-dates/pull/176))
- - [patch] Use the `readOnly` prop on inputs instead of the `disabled` prop on touch devices ([#174](https://github.com/airbnb/react-dates/pull/174))
+ - [patch] `initialVisibleMonth` prop will now be called every time the `DayPicker` is opened ([#176](https://github.com/react-dates/react-dates/pull/176))
+ - [patch] Use the `readOnly` prop on inputs instead of the `disabled` prop on touch devices ([#174](https://github.com/react-dates/react-dates/pull/174))
 
 ## v4.0.0
- - [breaking] Cut the tether dependency from react-dates ([#163](https://github.com/airbnb/react-dates/pull/163))
+ - [breaking] Cut the tether dependency from react-dates ([#163](https://github.com/react-dates/react-dates/pull/163))
 
 ## v3.6.0
- - [new] Add `navPrev`/`navNext` props for custom month navigation ([#161](https://github.com/airbnb/react-dates/pull/161))
- - [fix] Add missing right border on caret ([#160](https://github.com/airbnb/react-dates/pull/160))
- - [fix] Adjust `DayPicker` height when `initialVisibleMonth` height is different from the current month's ([#159](https://github.com/airbnb/react-dates/pull/159))
- - [new] Add `keepOpenOnDateSelect` prop to the `DateRangePicker` and `SingleDatePicker` ([#157](https://github.com/airbnb/react-dates/pull/157))
+ - [new] Add `navPrev`/`navNext` props for custom month navigation ([#161](https://github.com/react-dates/react-dates/pull/161))
+ - [fix] Add missing right border on caret ([#160](https://github.com/react-dates/react-dates/pull/160))
+ - [fix] Adjust `DayPicker` height when `initialVisibleMonth` height is different from the current month's ([#159](https://github.com/react-dates/react-dates/pull/159))
+ - [new] Add `keepOpenOnDateSelect` prop to the `DateRangePicker` and `SingleDatePicker` ([#157](https://github.com/react-dates/react-dates/pull/157))
 
 ## v3.5.0
- - [new] Add support for clear date button on the `SingleDatePicker` ([#155](https://github.com/airbnb/react-dates/pull/155))
- - [fix] Fix focus behavior for vertically attached datepickers ([#121](https://github.com/airbnb/react-dates/pull/121))
+ - [new] Add support for clear date button on the `SingleDatePicker` ([#155](https://github.com/react-dates/react-dates/pull/155))
+ - [fix] Fix focus behavior for vertically attached datepickers ([#121](https://github.com/react-dates/react-dates/pull/121))
 
 ## v3.4.0
- - [new] Add support for `required` attribute on inputs ([#142](https://github.com/airbnb/react-dates/pull/142))
+ - [new] Add support for `required` attribute on inputs ([#142](https://github.com/react-dates/react-dates/pull/142))
 
 ## v3.3.4
- - [fix] Fix same tether overlay issue for the `SingleDatePicker` component ([#133](https://github.com/airbnb/react-dates/pull/133))
+ - [fix] Fix same tether overlay issue for the `SingleDatePicker` component ([#133](https://github.com/react-dates/react-dates/pull/133))
 
 ## v3.3.3
- - [fix] Allow for elements to be interacted with when rendered beneath the tether component ([#131](https://github.com/airbnb/react-dates/pull/131))
+ - [fix] Allow for elements to be interacted with when rendered beneath the tether component ([#131](https://github.com/react-dates/react-dates/pull/131))
 
 ## v3.3.2
- - [fix] Responsive the `DateRangePicker` and `SingleDatePicker` components ([#80](https://github.com/airbnb/react-dates/pull/83))
+ - [fix] Responsive the `DateRangePicker` and `SingleDatePicker` components ([#80](https://github.com/react-dates/react-dates/pull/83))
 
 ## v3.3.1
- - [fix] Update all days to use noon as their time stamp to fix a number of DST issues ([#114](https://github.com/airbnb/react-dates/pull/114))
+ - [fix] Update all days to use noon as their time stamp to fix a number of DST issues ([#114](https://github.com/react-dates/react-dates/pull/114))
 
 ## v3.3.0
- - [new] Add `anchorDirection` prop to the SingleDatePicker and DateRangePicker components ([#72](https://github.com/airbnb/react-dates/pull/72))
+ - [new] Add `anchorDirection` prop to the SingleDatePicker and DateRangePicker components ([#72](https://github.com/react-dates/react-dates/pull/72))
 
 ## v3.2.0
- - [new] Add `initialVisibleMonth` prop to the SingleDatePicker, DateRangePicker, and DayPicker components ([#70](https://github.com/airbnb/react-dates/pull/70))
+ - [new] Add `initialVisibleMonth` prop to the SingleDatePicker, DateRangePicker, and DayPicker components ([#70](https://github.com/react-dates/react-dates/pull/70))
 
 ## v3.1.1
  - [fix] Fix moment dependencies to allow v2.10 - v2.14
 
 ## v3.1.0
- - [new] Allow `displayFormat` prop to take a function as well as a string ([#98](https://github.com/airbnb/react-dates/pull/98))
- - [fix] Default value for `displayFormat` now actually returns moment's `L` format based on the locale ([#98](https://github.com/airbnb/react-dates/pull/98)))
+ - [new] Allow `displayFormat` prop to take a function as well as a string ([#98](https://github.com/react-dates/react-dates/pull/98))
+ - [fix] Default value for `displayFormat` now actually returns moment's `L` format based on the locale ([#98](https://github.com/react-dates/react-dates/pull/98)))
 
 ## v3.0.0
- - [breaking] Move the constants file to the top-level ([#53](https://github.com/airbnb/react-dates/pull/53))
- - [breaking] Add `reopenPickerOnClearDates` prop so that the DateRangePicker no longer automatically reopens when clearing dates ([#75](https://github.com/airbnb/react-dates/pull/75))
+ - [breaking] Move the constants file to the top-level ([#53](https://github.com/react-dates/react-dates/pull/53))
+ - [breaking] Add `reopenPickerOnClearDates` prop so that the DateRangePicker no longer automatically reopens when clearing dates ([#75](https://github.com/react-dates/react-dates/pull/75))
 
 ## v2.2.0
- - [fix] Fix height issue where an extra table row was being rendered for some months ([#57](https://github.com/airbnb/react-dates/pull/57))
- - [fix] Disables user-select on navigation ([#74](https://github.com/airbnb/react-dates/pull/74))
- - [new] Allows for a custom date display format ([#52](https://github.com/airbnb/react-dates/pull/52))
+ - [fix] Fix height issue where an extra table row was being rendered for some months ([#57](https://github.com/react-dates/react-dates/pull/57))
+ - [fix] Disables user-select on navigation ([#74](https://github.com/react-dates/react-dates/pull/74))
+ - [new] Allows for a custom date display format ([#52](https://github.com/react-dates/react-dates/pull/52))
 
 ## v2.1.1
  - [fix] Fix initial day of month to utc to fix daylight savings time problem in Brazil and other locales
diff --git a/INTHEWILD.md b/INTHEWILD.md
index 636d59c2cc..741d8e9856 100644
--- a/INTHEWILD.md
+++ b/INTHEWILD.md
@@ -1,4 +1,4 @@
-Please use [pull requests](https://github.com/airbnb/react-dates/pull/new/master) to add your organization and/or project to this document!
+Please use [pull requests](https://github.com/react-dates/react-dates/pull/new) to add your organization and/or project to this document!
 
 Organizations
 ----------
diff --git a/README.md b/README.md
index da8f6c36e2..0a37ef1f3b 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@
 
 > An easily internationalizable, accessible, mobile-friendly datepicker library for the web.
 
-![react-dates in action](https://raw.githubusercontent.com/airbnb/react-dates/master/react-dates-demo.gif)
+![react-dates in action](https://raw.githubusercontent.com/react-dates/react-dates/HEAD/react-dates-demo.gif)
 
 ## Live Playground
 
@@ -113,7 +113,7 @@ This would override the background and text colors applied to highlighted calend
 ### Make some awesome datepickers
 
 We provide a handful of components for your use. If you supply essential props to each component, you'll get a full featured interactive date picker. With additional optional props, you can customize the look and feel of the inputs, calendar, etc. You can see what each of the props do in the [live demo](http://airbnb.io/react-dates/) or explore
-how to properly wrap the pickers in the [examples folder](https://github.com/airbnb/react-dates/tree/master/examples).
+how to properly wrap the pickers in the [examples folder](https://github.com/react-dates/react-dates/tree/HEAD/examples).
 
 #### DateRangePicker
 The `DateRangePicker` is a fully controlled component that allows users to select a date range. You can control the selected
@@ -356,7 +356,7 @@ The following is a list of other *OPTIONAL* props you may provide to the `DayPic
 moment.locale('pl'); // Polish
 ```
 
-However, this only solves date localization. For complete internationalization of the components, `react-dates` defines a certain amount of [user interface strings](https://github.com/airbnb/react-dates/blob/master/src/defaultPhrases.js) in English which can be changed through the `phrases` prop (explore the [storybook](http://airbnb.io/react-dates/?selectedKind=DateRangePicker%20%28DRP%29&selectedStory=non-english%20locale&full=0&addons=1&stories=1&panelRight=0&addonPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel) for examples). For accessibility and usability concerns, **all these UI elements should be translated**.
+However, this only solves date localization. For complete internationalization of the components, `react-dates` defines a certain amount of [user interface strings](https://github.com/react-dates/react-dates/blob/HEAD/src/defaultPhrases.js) in English which can be changed through the `phrases` prop (explore the [storybook](http://airbnb.io/react-dates/?selectedKind=DateRangePicker%20%28DRP%29&selectedStory=non-english%20locale&full=0&addons=1&stories=1&panelRight=0&addonPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel) for examples). For accessibility and usability concerns, **all these UI elements should be translated**.
 
 ## Advanced
 
@@ -364,7 +364,7 @@ However, this only solves date localization. For complete internationalization o
 
 ### Interfaces
 
-The `react-dates/initialize` script actually relies on [react-with-styles-interface-css](https://github.com/airbnb/react-with-styles-interface-css) under the hood. If you are interested in a different solution for styling in your project, you can do your own initialization of a another [interface](https://github.com/airbnb/react-with-styles/blob/master/README.md#interfaces). At Airbnb, for instance, we rely on [Aphrodite](https://github.com/Khan/aphrodite) under the hood and therefore use the Aphrodite interface for `react-with-styles`. If you want to do the same, you would use the following pattern:
+The `react-dates/initialize` script actually relies on [react-with-styles-interface-css](https://github.com/airbnb/react-with-styles-interface-css) under the hood. If you are interested in a different solution for styling in your project, you can do your own initialization of a another [interface](https://github.com/airbnb/react-with-styles/blob/HEAD/README.md#interfaces). At Airbnb, for instance, we rely on [Aphrodite](https://github.com/Khan/aphrodite) under the hood and therefore use the Aphrodite interface for `react-with-styles`. If you want to do the same, you would use the following pattern:
 ```js
 import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
 import aphroditeInterface from 'react-with-styles-interface-aphrodite';
@@ -377,7 +377,7 @@ ThemedStyleSheet.registerTheme(DefaultTheme);
 The above code has to be run before any `react-dates` component is imported. Otherwise, you will get an error. Also note that if you register any custom interface manually, you *must* also manually register a theme.
 
 ### Theming
-`react-dates` also now supports a different way to theme. You can see the default theme values in [this file](https://github.com/airbnb/react-dates/blob/master/src/theme/DefaultTheme.js) and you would override them in the following manner:
+`react-dates` also now supports a different way to theme. You can see the default theme values in [this file](https://github.com/react-dates/react-dates/blob/HEAD/src/theme/DefaultTheme.js) and you would override them in the following manner:
 ```js
 import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
 import aphroditeInterface from 'react-with-styles-interface-aphrodite';
@@ -405,16 +405,16 @@ ThemedStyleSheet.registerTheme({
 The above code would use shades of green instead of shades of yellow for the highlight color on `CalendarDay` components. Note that you *must* register an interface if you manually register a theme. One will not work without the other.
 
 #### A note on using `react-with-styles-interface-css`
-The default interface that `react-dates` ships with is the [CSS interface](https://github.com/airbnb/react-with-styles-interface-css). If you want to use this interface along with the theme registration method, you will need to rebuild the core `_datepicker.css` file. We do not currently expose a utility method to build this file, but you can follow along with the code in https://github.com/airbnb/react-dates/blob/master/scripts/buildCSS.js to build your own custom themed CSS file.
+The default interface that `react-dates` ships with is the [CSS interface](https://github.com/airbnb/react-with-styles-interface-css). If you want to use this interface along with the theme registration method, you will need to rebuild the core `_datepicker.css` file. We do not currently expose a utility method to build this file, but you can follow along with the code in https://github.com/react-dates/react-dates/blob/HEAD/scripts/buildCSS.js to build your own custom themed CSS file.
 
 [package-url]: https://npmjs.org/package/react-dates
-[npm-version-svg]: http://versionbadg.es/airbnb/react-dates.svg
-[travis-svg]: https://travis-ci.org/airbnb/react-dates.svg
-[travis-url]: https://travis-ci.org/airbnb/react-dates
-[deps-svg]: https://david-dm.org/airbnb/react-dates.svg
-[deps-url]: https://david-dm.org/airbnb/react-dates
-[dev-deps-svg]: https://david-dm.org/airbnb/react-dates/dev-status.svg
-[dev-deps-url]: https://david-dm.org/airbnb/react-dates#info=devDependencies
+[npm-version-svg]: http://versionbadg.es/react-dates/react-dates.svg
+[travis-svg]: https://travis-ci.org/react-dates/react-dates.svg
+[travis-url]: https://travis-ci.org/react-dates/react-dates
+[deps-svg]: https://david-dm.org/react-dates/react-dates.svg
+[deps-url]: https://david-dm.org/react-dates/react-dates
+[dev-deps-svg]: https://david-dm.org/react-dates/react-dates/dev-status.svg
+[dev-deps-url]: https://david-dm.org/react-dates/react-dates#info=devDependencies
 [npm-badge-png]: https://nodei.co/npm/react-dates.png?downloads=true&stars=true
 [license-image]: http://img.shields.io/npm/l/react-dates.svg
 [license-url]: LICENSE
diff --git a/package.json b/package.json
index b052d45f12..519e8886be 100644
--- a/package.json
+++ b/package.json
@@ -40,14 +40,14 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/airbnb/react-dates.git"
+    "url": "git+https://github.com/react-dates/react-dates.git"
   },
   "author": "Maja Wichrowska <maja.wichrowska@airbnb.com>",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/airbnb/react-dates/issues"
+    "url": "https://github.com/react-dates/react-dates/issues"
   },
-  "homepage": "https://github.com/airbnb/react-dates#readme",
+  "homepage": "https://github.com/react-dates/react-dates#readme",
   "devDependencies": {
     "@babel/cli": "^7.12.10",
     "@babel/core": "^7.12.10",
diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
index 47b4ecca04..39bb9716a9 100644
--- a/stories/DayPickerRangeController.js
+++ b/stories/DayPickerRangeController.js
@@ -24,7 +24,7 @@ const dayPickerRangeControllerInfo = `The ${monospace('DayPickerRangeController'
   ${monospace('startDate')}, and ${monospace('endDate')} values in state and then pass these down as
   props along with ${monospace('onFocusChange')} and ${monospace('onDatesChange')} callbacks that
   update them appropriately. You can see an example of this implementation <a href=
-  "https://github.com/airbnb/react-dates/blob/master/examples/DayPickerRangeControllerWrapper.jsx">
+  "https://github.com/react-dates/react-dates/blob/HEAD/examples/DayPickerRangeControllerWrapper.jsx">
   here</a>. <br/><br/>
   Note that the ${monospace('focusedInput')} prop may be ${monospace('null')}, but if this is the
   case, dates are not selectable. As a result, in the example wrapper, we always force
diff --git a/stories/DayPickerSingleDateController.js b/stories/DayPickerSingleDateController.js
index ef05c08305..7126f75420 100644
--- a/stories/DayPickerSingleDateController.js
+++ b/stories/DayPickerSingleDateController.js
@@ -22,7 +22,7 @@ const dayPickerSingleDateControllerInfo = `The ${monospace('DayPickerSingleDateC
   ${monospace('date')} values in state and then pass these down as props along with
   ${monospace('onFocusChange')} and ${monospace('onDateChange')} callbacks that
   update them appropriately. You can see an example of this implementation <a href=
-  "https://github.com/airbnb/react-dates/blob/master/examples/DayPickerSingleDateControllerWrapper.jsx">
+  "https://github.com/react-dates/react-dates/blob/HEAD/examples/DayPickerSingleDateControllerWrapper.jsx">
   here</a>. <br/><br/>
   Note that the ${monospace('focused')} prop may be ${monospace('false')}, but if this is the
   case, dates are not selectable. As a result, in the example wrapper, we always force
diff --git a/stories/PresetDateRangePicker.js b/stories/PresetDateRangePicker.js
index 0063a3a257..2d2660327a 100644
--- a/stories/PresetDateRangePicker.js
+++ b/stories/PresetDateRangePicker.js
@@ -11,9 +11,9 @@ const presetDateRangePickerControllerInfo = `The ${monospace('PresetDateRangePic
   exported by ${monospace('react-dates')}. It is instead an example of how you might use the
   ${monospace('DateRangePicker')} along with the ${monospace('renderCalendarInfo')} prop in
   order to add preset range buttons for easy range selection. You can see the example code
-  <a href="https://github.com/airbnb/react-dates/blob/master/examples/PresetDateRangePicker.jsx">
+  <a href="https://github.com/react-dates/react-dates/blob/HEAD/examples/PresetDateRangePicker.jsx">
   here</a> and
-  <a href="https://github.com/airbnb/react-dates/blob/master/stories/PresetDateRangePicker.js">
+  <a href="https://github.com/react-dates/react-dates/blob/HEAD/stories/PresetDateRangePicker.js">
   here</a>.`;
 
 const today = moment();

From 0061fadfe321a42beeb7ec35d6ff8fab2898a227 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Sat, 22 Jan 2022 08:43:16 -0800
Subject: [PATCH 609/618] [Dev Deps] update `@babel/cli`, `@babel/core`,
 `@babel/register`, `@babel/runtime`

---
 package.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 519e8886be..fe55816653 100644
--- a/package.json
+++ b/package.json
@@ -49,10 +49,10 @@
   },
   "homepage": "https://github.com/react-dates/react-dates#readme",
   "devDependencies": {
-    "@babel/cli": "^7.12.10",
-    "@babel/core": "^7.12.10",
-    "@babel/register": "^7.12.10",
-    "@babel/runtime": "^7.12.5",
+    "@babel/cli": "^7.16.8",
+    "@babel/core": "^7.16.12",
+    "@babel/register": "^7.16.9",
+    "@babel/runtime": "^7.16.7",
     "@storybook/addon-actions": "^5.3.21",
     "@storybook/addon-info": "^5.3.21",
     "@storybook/addon-links": "^5.3.21",

From 9cf2c97a8794d5f45ee074e0f8414728ee761b74 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Sat, 22 Jan 2022 08:49:04 -0800
Subject: [PATCH 610/618] [Dev Deps] use `@babel/eslint-parser` instead of
 `babel-eslint`

---
 .eslintignore                           |  4 ----
 .eslintrc                               | 19 +++++++++++++------
 package.json                            |  2 +-
 src/components/DateRangePickerInput.jsx | 16 +++++++---------
 4 files changed, 21 insertions(+), 20 deletions(-)
 delete mode 100644 .eslintignore

diff --git a/.eslintignore b/.eslintignore
deleted file mode 100644
index edfe81afba..0000000000
--- a/.eslintignore
+++ /dev/null
@@ -1,4 +0,0 @@
-lib/
-.storybook/
-test/_helpers/
-webpack.config.js
diff --git a/.eslintrc b/.eslintrc
index bcb6102a29..5961c32bbb 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,19 +3,26 @@
 
   "extends": [
     "airbnb",
-    "plugin:react-with-styles/recommended"
+    "plugin:react-with-styles/recommended",
   ],
 
   "plugins": [
-    "react-with-styles"
+    "react-with-styles",
   ],
 
   "env": {
     "browser": true,
-    "node": true
+    "node": true,
   },
 
-  "parser": "babel-eslint",
+  "ignorePatterns": [
+    "lib/",
+    ".storybook/",
+    "test/_helpers/",
+    "webpack.config.js",
+  ],
+
+  "parser": "@babel/eslint-parser",
 
   "rules": {
     "react/forbid-foreign-prop-types": 2, // For babel-plugin-transform-react-remove-prop-types
@@ -44,7 +51,7 @@
           //"devDependencies": true
         //}],
         "indent": [2, 2, {
-          "MemberExpression": "off"
+          "MemberExpression": "off",
         }],
       },
     },
@@ -52,5 +59,5 @@
 
   "settings": {
     "propWrapperFunctions": ["forbidExtraProps", "exact", "Object.freeze"],
-  }
+  },
 }
diff --git a/package.json b/package.json
index fe55816653..530d17ef0c 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
   "devDependencies": {
     "@babel/cli": "^7.16.8",
     "@babel/core": "^7.16.12",
+    "@babel/eslint-parser": "^7.16.5",
     "@babel/register": "^7.16.9",
     "@babel/runtime": "^7.16.7",
     "@storybook/addon-actions": "^5.3.21",
@@ -62,7 +63,6 @@
     "@welldone-software/why-did-you-render": "^3.6.0",
     "airbnb-js-shims": "^2.2.1",
     "aphrodite": "^2.4.0",
-    "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-inline-react-svg": "^1.1.2",
     "babel-plugin-inline-svg": "^1.2.0",
diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index 09e2ef7d82..b175915310 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -260,15 +260,13 @@ function DateRangePickerInput({
 
       {!isEndDateFocused && children}
 
-      {
-        <div
-          {...css(styles.DateRangePickerInput_arrow)}
-          aria-hidden="true"
-          role="presentation"
-        >
-          {arrowIcon}
-        </div>
-      }
+      <div
+        {...css(styles.DateRangePickerInput_arrow)}
+        aria-hidden="true"
+        role="presentation"
+      >
+        {arrowIcon}
+      </div>
 
       <DateInput
         id={endDateId}

From 0772b778b4506947c17ecdd438b0bec78a9d32ba Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Fri, 21 Jan 2022 18:14:34 -0800
Subject: [PATCH 611/618] [Dev Deps] update `eslint`, `eslint-config-airbnb`,
 `eslint-plugin-import`, `eslint-plugin-jsx-a11y`, `eslint-plugin-react`,
 `eslint-plugin-react-hooks`, `eslint-plugin-react-with-styles`

---
 .eslintrc                                        |  3 +++
 package.json                                     | 14 +++++++-------
 src/components/DayPickerRangeController.jsx      |  4 +---
 src/components/DayPickerSingleDateController.jsx |  4 +---
 4 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 5961c32bbb..d5780077d5 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -25,6 +25,8 @@
   "parser": "@babel/eslint-parser",
 
   "rules": {
+    "max-len": "off",
+
     "react/forbid-foreign-prop-types": 2, // For babel-plugin-transform-react-remove-prop-types
 
     "jsx-a11y/click-events-have-key-events": 1, // TODO: enable
@@ -53,6 +55,7 @@
         "indent": [2, 2, {
           "MemberExpression": "off",
         }],
+        "react/function-component-definition": "off",
       },
     },
   ],
diff --git a/package.json b/package.json
index 530d17ef0c..1d6f8a97cc 100644
--- a/package.json
+++ b/package.json
@@ -74,13 +74,13 @@
     "cross-env": "^5.2.1",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-helper": "^1.3.9",
-    "eslint": "^7.18.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.22.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-react-with-styles": "^2.3.0",
+    "eslint": "^8.7.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-react-with-styles": "^2.4.0",
     "git-directory-deploy": "^1.5.1",
     "imports-loader": "^0.8.0",
     "in-publish": "^2.0.1",
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 881c4e75ea..6b5cb732b1 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -1023,9 +1023,7 @@ export default class DayPickerRangeController extends React.PureComponent {
     const { currentMonth, visibleDays } = this.state;
 
     const firstPreviousMonth = currentMonth.clone().subtract(numberOfMonths, 'month');
-    const newVisibleDays = getVisibleDays(
-      firstPreviousMonth, numberOfMonths, enableOutsideDays, true,
-    );
+    const newVisibleDays = getVisibleDays(firstPreviousMonth, numberOfMonths, enableOutsideDays, true);
 
     this.setState({
       currentMonth: firstPreviousMonth.clone(),
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index d4fae53608..1bf1a1d719 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -529,9 +529,7 @@ export default class DayPickerSingleDateController extends React.PureComponent {
     const { currentMonth, visibleDays } = this.state;
 
     const firstPreviousMonth = currentMonth.clone().subtract(numberOfMonths, 'month');
-    const newVisibleDays = getVisibleDays(
-      firstPreviousMonth, numberOfMonths, enableOutsideDays, true,
-    );
+    const newVisibleDays = getVisibleDays(firstPreviousMonth, numberOfMonths, enableOutsideDays, true);
 
     this.setState({
       currentMonth: firstPreviousMonth.clone(),

From d96761af0a204a56a51089ef5d4375bad222a4ff Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Sat, 22 Jan 2022 11:31:14 -0800
Subject: [PATCH 612/618] [Dev Deps] update `karma`

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 1d6f8a97cc..a227f5ce22 100644
--- a/package.json
+++ b/package.json
@@ -84,7 +84,7 @@
     "git-directory-deploy": "^1.5.1",
     "imports-loader": "^0.8.0",
     "in-publish": "^2.0.1",
-    "karma": "^4.2.0",
+    "karma": "^6.3.11",
     "karma-chai": "^0.1.0",
     "karma-firefox-launcher": "^1.2.0",
     "karma-mocha": "^1.3.0",

From 116cc83da34c3570644305dcc1deb1b5a27dc403 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Sat, 22 Jan 2022 11:31:54 -0800
Subject: [PATCH 613/618] [Dev Deps] update `karma-mocha`

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a227f5ce22..96b06cd2ae 100644
--- a/package.json
+++ b/package.json
@@ -87,7 +87,7 @@
     "karma": "^6.3.11",
     "karma-chai": "^0.1.0",
     "karma-firefox-launcher": "^1.2.0",
-    "karma-mocha": "^1.3.0",
+    "karma-mocha": "^2.0.1",
     "karma-sinon": "^1.0.5",
     "karma-webpack": "^4.0.2",
     "mkdirp": "^0.5.5",

From fede38af4655075bab1cc35d3dadc38e314e4a88 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Sat, 22 Jan 2022 11:34:24 -0800
Subject: [PATCH 614/618] [Dev Deps] update `sinon`

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 96b06cd2ae..13ce0456d8 100644
--- a/package.json
+++ b/package.json
@@ -104,7 +104,7 @@
     "rimraf": "^2.7.1",
     "safe-publish-latest": "^1.1.4",
     "sass-loader": "^7.3.1",
-    "sinon": "^7.5.0",
+    "sinon": "^8.1.1",
     "sinon-sandbox": "^2.0.6",
     "style-loader": "^0.20.3",
     "typescript": "*",

From 9c570e6745d5444c721bd5f21619bb8d559fc631 Mon Sep 17 00:00:00 2001
From: Mohsen Azimi <me@azimi.me>
Date: Sat, 22 Jan 2022 00:06:13 -0300
Subject: [PATCH 615/618] [readme] Update the link to demo

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 0a37ef1f3b..ffa3f4973d 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,7 @@
 
 ## Live Playground
 
-For examples of the datepicker in action, go to http://airbnb.io/react-dates.
+For examples of the datepicker in action, go to [react-dates.github.io](https://react-dates.github.io/react-dates/).
 
 OR
 

From 6a65043b79871c60b97ac9d19eb1f5b62e684ab2 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Sun, 23 Jan 2022 14:15:01 -0800
Subject: [PATCH 616/618] [Fix] pin `color2k` to ~1.1, to restore node 4 compat

See https://github.com/ricokahler/color2k/issues/413
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 13ce0456d8..ad6bfc80d3 100644
--- a/package.json
+++ b/package.json
@@ -112,7 +112,7 @@
   },
   "dependencies": {
     "airbnb-prop-types": "^2.16.0",
-    "color2k": "^1.2.4",
+    "color2k": "~1.1.1",
     "consolidated-events": "^1.1.1 || ^2.0.0",
     "enzyme-shallow-equal": "^1.0.4",
     "is-touch-device": "^1.0.1",

From 2cb51c1f68e54ce1b58e6c5d58c38d4c97fe6d85 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Wed, 26 Jan 2022 12:58:53 -0800
Subject: [PATCH 617/618] [Tests] actually test on react versions in the
 matrix; add some more versions

---
 .github/workflows/node.yml | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/node.yml b/.github/workflows/node.yml
index 64fd778928..7b9fb66f96 100644
--- a/.github/workflows/node.yml
+++ b/.github/workflows/node.yml
@@ -27,9 +27,14 @@ jobs:
       matrix:
         node-version: ${{ fromJson(needs.matrix.outputs.latest) }}
         react:
-          - 16
-          - 15
-          - 0.14
+          - '16'
+          - '16.9'
+          - '16.3'
+          - '16.0'
+          - '15'
+          - '15.5'
+          - '15.0'
+          # - '0.14' # TODO: fix pure-component-fallbacl
 
     steps:
       - uses: actions/checkout@v2
@@ -38,6 +43,8 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
       - run: npm run tests-only
+        env:
+          REACT: ${{ matrix.react }}
       - uses: codecov/codecov-action@v2
 
   node:

From b7bad38dcff024d374ee98f972b55b3de9e61289 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Wed, 26 Jan 2022 12:44:40 -0800
Subject: [PATCH 618/618] [Tests] build tests first, so CI can build/test in
 different stages

---
 .babelrc                   |  8 ++++++++
 .github/workflows/node.yml | 42 +++++++++++++++++++++++++++++++++-----
 .gitignore                 |  1 +
 .npmignore                 |  1 +
 .nycrc                     |  1 -
 package.json               | 15 ++++++++------
 test/mocha.opts            |  3 +--
 7 files changed, 57 insertions(+), 14 deletions(-)

diff --git a/.babelrc b/.babelrc
index 4e91c4584c..cc5885df62 100644
--- a/.babelrc
+++ b/.babelrc
@@ -3,6 +3,14 @@
     "test": {
       "presets": [["airbnb", { looseClasses: true }]],
       "plugins": [
+        ["import-path-replace", {
+          "rules": [
+            {
+              "match": "../src/",
+              "replacement": "../lib/"
+            }
+          ]
+        }],
         ["inline-react-svg", {
           "svgo": false
         }],
diff --git a/.github/workflows/node.yml b/.github/workflows/node.yml
index 7b9fb66f96..1f5467ef3e 100644
--- a/.github/workflows/node.yml
+++ b/.github/workflows/node.yml
@@ -14,11 +14,31 @@ jobs:
         with:
           type: 'majors'
           versionsAsRoot: true
-          preset: '>=6'
-          # to test in node < 6, we need to run the build in one stage, including the tests, and then run the tests in the desired node version later
+          preset: '>=4'
+
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: ljharb/actions/node/install@main
+        with:
+          node-version: 'lts/*'
+      - uses: actions/cache@v2
+        id: cache
+        with:
+          path: |
+            lib
+            esm
+            test-build
+          key: ${{ runner.os }}-${{ hashFiles('package.json', 'src/**', 'test/**', 'scripts/buildCSS.js') }}
+      - run: npm run build
+        if: steps.cache.outputs.cache-hit != 'true'
+      - run: npm run build:test
+        if: steps.cache.outputs.cache-hit != 'true'
+
 
   majors:
-    needs: [matrix]
+    needs: [build, matrix]
     name: 'latest minors'
     runs-on: ubuntu-latest
 
@@ -34,7 +54,7 @@ jobs:
           - '15'
           - '15.5'
           - '15.0'
-          # - '0.14' # TODO: fix pure-component-fallbacl
+          - '0.14'
 
     steps:
       - uses: actions/checkout@v2
@@ -42,13 +62,25 @@ jobs:
         name: 'nvm install ${{ matrix.node-version }} && npm install'
         with:
           node-version: ${{ matrix.node-version }}
+          skip-ls-check: ${{ !startsWith(matrix.node-version, '5.') && !startsWith(matrix.node-version, '4.') && 'true' || 'false' }}
+      - uses: actions/cache@v2
+        id: cache
+        with:
+          path: |
+            lib
+            esm
+            test-build
+          key: ${{ runner.os }}-${{ hashFiles('package.json', 'src/**', 'test/**', 'scripts/buildCSS.js') }}
+      - run: npm run react
+        env:
+          REACT: ${{ matrix.react }}
       - run: npm run tests-only
         env:
           REACT: ${{ matrix.react }}
       - uses: codecov/codecov-action@v2
 
   node:
-    name: 'node 6+'
+    name: 'node.js'
     needs: [majors]
     runs-on: ubuntu-latest
     steps:
diff --git a/.gitignore b/.gitignore
index 6374bef436..3d7cb404f7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -35,6 +35,7 @@ node_modules
 # build folder
 lib
 esm
+test-build
 .idea
 
 # gh-pages
diff --git a/.npmignore b/.npmignore
index f88e53c229..f27011d803 100644
--- a/.npmignore
+++ b/.npmignore
@@ -44,5 +44,6 @@ public
 react-dates-demo.gif
 stories
 test
+test-build
 css
 !lib/css
diff --git a/.nycrc b/.nycrc
index 90d79055a2..33fbfd6d2a 100644
--- a/.nycrc
+++ b/.nycrc
@@ -7,7 +7,6 @@
     "src"
   ],
   "require": [
-    "@babel/register"
   ],
   "reporter": [
     "text",
diff --git a/package.json b/package.json
index ad6bfc80d3..d6c29274c5 100644
--- a/package.json
+++ b/package.json
@@ -5,22 +5,23 @@
   "main": "index.js",
   "scripts": {
     "prebuild": "npm run clean",
-    "build": "npm run build:cjs && npm run build:esm && npm run build:css -- --optimize ",
+    "build": "npm run build:cjs && npm run build:esm && npm run build:css -- --optimize",
+    "postbuild": "npm run build:test",
     "build:cjs": "BABEL_ENV=cjs babel src/ -d lib/",
     "build:esm": "BABEL_ENV=esm babel src/ -d esm/",
+    "build:test": "BABEL_ENV=test babel test/ -d test-build/",
     "prebuild:css": "rimraf lib/css && mkdirp lib/css",
     "build:css": "node scripts/buildCSS.js",
-    "clean": "rimraf lib esm",
+    "clean": "rimraf lib esm test-build",
     "lint": "eslint --ext .js,.jsx src test",
-    "mocha": "mocha ./test/_helpers",
+    "mocha": "mocha ./test-build/_helpers",
     "storybook:uninstall": "npm uninstall --no-save @storybook/react && rimraf node_modules/@storybook node_modules/react-modal node_modules/react-dom-factories",
     "react": "NPM_CONFIG_LEGACY_PEER_DEPS=true enzyme-adapter-react-install 16",
     "pretest": "npm run --silent lint",
-    "pretests-only": "npm run react",
     "tests-only": "cross-env NODE_ENV=test nyc npm run mocha --silent",
     "pretests-karma": "npm run react",
     "tests-karma": "karma start",
-    "test": "npm run build && npm run tests-only",
+    "test": "npm run react && npm run build && npm run build:test && npm run tests-only",
     "storybook": "start-storybook -p 6006",
     "storybook:css": "npm run build:css && start-storybook -p 6006 -c .storybook-css",
     "tag": "git tag v$npm_package_version",
@@ -64,12 +65,14 @@
     "airbnb-js-shims": "^2.2.1",
     "aphrodite": "^2.4.0",
     "babel-loader": "^8.2.2",
+    "babel-plugin-import-path-replace": "^0.1.0",
     "babel-plugin-inline-react-svg": "^1.1.2",
     "babel-plugin-inline-svg": "^1.2.0",
     "babel-plugin-istanbul": "^5.2.0",
     "babel-plugin-transform-replace-object-assign": "^2.0.0",
     "babel-preset-airbnb": "^4.5.0",
     "chai": "^4.2.0",
+    "cheerio": "=1.0.0-rc.3",
     "clean-css": "^4.2.3",
     "cross-env": "^5.2.1",
     "enzyme": "^3.11.0",
@@ -104,7 +107,7 @@
     "rimraf": "^2.7.1",
     "safe-publish-latest": "^1.1.4",
     "sass-loader": "^7.3.1",
-    "sinon": "^8.1.1",
+    "sinon": "^7.5.0",
     "sinon-sandbox": "^2.0.6",
     "style-loader": "^0.20.3",
     "typescript": "*",
diff --git a/test/mocha.opts b/test/mocha.opts
index 6f1ab8e673..22acddc5ba 100644
--- a/test/mocha.opts
+++ b/test/mocha.opts
@@ -1,3 +1,2 @@
---require @babel/register
 --require airbnb-js-shims
-test/**/*.{js,jsx}
+test-build/**/*.js