Responsivizes the DayPicker container

css/DateInput.scss

@@ -14,8 +14,8 @@
   vertical-align: middle;
 }
 
-.DateInput--focused::before,
-.DateInput--focused::after {
+.DateInput--with-caret::before,
+.DateInput--with-caret::after {
   content: "";
   display: inline-block;
   position: absolute;
@@ -26,12 +26,12 @@
   z-index: 2;
 }
 
-.DateInput--focused::before {
+.DateInput--with-caret::before {
   left: 22px;
   border-bottom-color: rgba(0, 0, 0, 0.1);
 }
 
-.DateInput--focused::after {
+.DateInput--with-caret::after {
   left: 23px;
   border-bottom-color: $react-dates-color-white;
 }

css/DateRangePicker.scss

@@ -17,10 +17,7 @@
 }
 
 .DateRangePicker__picker {
-  background-color: $react-dates-color-white;
   z-index: 1;
-  position: absolute;
-  top: $react-dates-spacing-vertical-picker;
 }
 
 .DateRangePicker__picker--direction-left {

css/SingleDatePicker.scss

@@ -6,52 +6,15 @@
 }
 
 .SingleDatePicker__picker {
-  background-color: $react-dates-color-white;
   z-index: 1;
-  position: absolute;
-  top: 145%;
-
-  &::before,
-  &::after {
-    content: "";
-    display: inline-block;
-    position: absolute;
-    bottom: auto;
-  }
-
-  &::before {
-    top: -10px;
-    border: 10px solid transparent;
-    border-top: 0;
-    border-bottom-color: rgba(0, 0, 0, 0.1);
-  }
-
-  &::after {
-    top: -9px;
-    border: 9px solid transparent;
-    border-top: 0;
-    border-bottom-color: #fff;
-  }
 }
 
 .SingleDatePicker__picker--direction-left {
-    left: 0;
-    &::before {
-        left: 22px;
-    }
-    &::after {
-        left: 23px;
-    }
+  left: 0;
 }
 
 .SingleDatePicker__picker--direction-right {
-    right: 0;
-    &::before {
-        right: 22px;
-    }
-    &::after {
-        right: 23px;
-    }
+  right: 0;
 }
 
 .SingleDatePicker__picker--show {

package.json

@@ -97,7 +97,8 @@
     "array-includes": "^3.0.2",
     "classnames": "^2.2.5",
     "react-moment-proptypes": "^1.2.0",
-    "react-portal": "^2.2.1"
+    "react-portal": "^2.2.1",
+    "react-tether": "^0.5.2"
   },
   "peerDependencies": {
     "moment": "2.10 - 2.14 || ^2.15.1",

src/components/DateInput.jsx

@@ -10,6 +10,7 @@ const propTypes = {
   dateValue: PropTypes.string,
   focused: PropTypes.bool,
   disabled: PropTypes.bool,
+  showCaret: PropTypes.bool,
 
   onChange: PropTypes.func,
   onFocus: PropTypes.func,
@@ -22,6 +23,7 @@ const defaultProps = {
   dateValue: '',
   focused: false,
   disabled: false,
+  showCaret: false,
 
   onChange() {},
   onFocus() {},
@@ -84,6 +86,7 @@ export default class DateInput extends React.Component {
       placeholder,
       dateValue,
       focused,
+      showCaret,
       onFocus,
       disabled,
     } = this.props;
@@ -93,7 +96,7 @@ export default class DateInput extends React.Component {
     return (
       <div
         className={cx('DateInput', {
-          'DateInput--focused': focused,
+          'DateInput--with-caret': showCaret && focused,
           'DateInput--disabled': disabled,
         })}
         onClick={onFocus}

src/components/DateRangePicker.jsx

@@ -4,6 +4,7 @@ import moment from 'moment';
 import cx from 'classnames';
 import Portal from 'react-portal';
 import includes from 'array-includes';
+import TetherComponent from 'react-tether';
 
 import isTouchDevice from '../utils/isTouchDevice';
 import toMomentObject from '../utils/toMomentObject';
@@ -14,7 +15,6 @@ import isInclusivelyBeforeDay from '../utils/isInclusivelyBeforeDay';
 import isNextDay from '../utils/isNextDay';
 import isSameDay from '../utils/isSameDay';
 
-import OutsideClickHandler from './OutsideClickHandler';
 import DateRangePickerInput from './DateRangePickerInput';
 import DayPicker from './DayPicker';
 
@@ -364,7 +364,7 @@ export default class DateRangePicker extends React.Component {
       'selected-span': day => this.isInSelectedSpan(day),
     };
 
-    const onOutsideClick = withPortal ? this.onOutsideClick : () => {};
+    const onOutsideClick = !withFullScreenPortal ? this.onOutsideClick : undefined;
 
     return (
       <div className={this.getDayPickerContainerClasses()}>
@@ -413,19 +413,30 @@ export default class DateRangePicker extends React.Component {
       startDateId,
       endDateId,
       phrases,
+      anchorDirection,
       withPortal,
       withFullScreenPortal,
     } = this.props;
 
     const startDateString = this.getDateString(startDate);
     const endDateString = this.getDateString(endDate);
 
-    const onOutsideClick = !withPortal && !withFullScreenPortal ? this.onOutsideClick : () => {};
+    const tetherPinDirection = anchorDirection === ANCHOR_LEFT ? ANCHOR_RIGHT : ANCHOR_LEFT;
 
     return (
       <div className="DateRangePicker">
-        <OutsideClickHandler onOutsideClick={onOutsideClick}>
+        <TetherComponent
+          attachment={`top ${anchorDirection}`}
+          targetAttachment={`bottom ${anchorDirection}`}
+          offset="-23px 0"
+          constraints={[{
+            to: 'scrollParent',
+            attachment: 'none',
+            pin: [tetherPinDirection],
+          }]}
+        >
           <DateRangePickerInput
+            ref={(ref) => { this.input = ref; }}
             startDateId={startDateId}
             startDatePlaceholderText={this.props.startDatePlaceholderText}
             isStartDateFocused={focusedInput === START_DATE}
@@ -443,11 +454,12 @@ export default class DateRangePicker extends React.Component {
             showClearDates={showClearDates}
             onClearDates={this.clearDates}
             disabled={disabled}
+            showCaret={!withPortal && !withFullScreenPortal}
             phrases={phrases}
           />
 
           {this.maybeRenderDayPickerWithPortal()}
-        </OutsideClickHandler>
+        </TetherComponent>
       </div>
     );
   }

src/components/DateRangePickerInput.jsx

@@ -29,6 +29,7 @@ const propTypes = {
   isEndDateFocused: PropTypes.bool,
   showClearDates: PropTypes.bool,
   disabled: PropTypes.bool,
+  showCaret: PropTypes.bool,
 
   // i18n
   phrases: PropTypes.shape({
@@ -52,6 +53,7 @@ const defaultProps = {
   isEndDateFocused: false,
   showClearDates: false,
   disabled: false,
+  showCaret: false,
 
   // i18n
   phrases: {
@@ -102,6 +104,7 @@ export default class DateRangePickerInput extends React.Component {
       onClearDates,
       showClearDates,
       disabled,
+      showCaret,
       phrases,
     } = this.props;
 
@@ -120,6 +123,7 @@ export default class DateRangePickerInput extends React.Component {
           dateValue={startDateValue}
           focused={isStartDateFocused}
           disabled={disabled}
+          showCaret={showCaret}
 
           onChange={onStartDateChange}
           onFocus={onStartDateFocus}
@@ -136,6 +140,7 @@ export default class DateRangePickerInput extends React.Component {
           dateValue={endDateValue}
           focused={isEndDateFocused}
           disabled={disabled}
+          showCaret={showCaret}
 
           onChange={onEndDateChange}
           onFocus={onEndDateFocus}

src/components/SingleDatePicker.jsx

@@ -3,11 +3,11 @@ import moment from 'moment';
 import cx from 'classnames';
 import Portal from 'react-portal';
 import includes from 'array-includes';
+import TetherComponent from 'react-tether';
 
 import toMomentObject from '../utils/toMomentObject';
 import toLocalizedDateString from '../utils/toLocalizedDateString';
 
-import OutsideClickHandler from './OutsideClickHandler';
 import SingleDatePickerInput from './SingleDatePickerInput';
 import DayPicker from './DayPicker';
 
@@ -204,7 +204,7 @@ export default class SingleDatePicker extends React.Component {
       selected: day => this.isSelected(day),
     };
 
-    const onOutsideClick = withPortal ? this.onClearFocus : () => {};
+    const onOutsideClick = !withFullScreenPortal ? this.onClearFocus : undefined;
 
     return (
       <div className={this.getDayPickerContainerClasses()}>
@@ -249,22 +249,33 @@ export default class SingleDatePicker extends React.Component {
       focused,
       disabled,
       date,
+      anchorDirection,
       withPortal,
       withFullScreenPortal,
     } = this.props;
 
-    const onOutsideClick = withPortal || withFullScreenPortal ? () => {} : this.onClearFocus;
-
     const dateString = this.getDateString(date);
 
+    const tetherPinDirection = anchorDirection === ANCHOR_LEFT ? ANCHOR_RIGHT : ANCHOR_LEFT;
+
     return (
       <div className="SingleDatePicker">
-        <OutsideClickHandler onOutsideClick={onOutsideClick}>
+        <TetherComponent
+          attachment={`top ${anchorDirection}`}
+          targetAttachment={`bottom ${anchorDirection}`}
+          offset="-23px 0"
+          constraints={[{
+            to: 'scrollParent',
+            attachment: 'none',
+            pin: [tetherPinDirection],
+          }]}
+        >
           <SingleDatePickerInput
             id={id}
             placeholder={placeholder}
             focused={focused}
             disabled={disabled}
+            showCaret={!withPortal && !withFullScreenPortal}
             dateValue={dateString}
             onChange={this.onChange}
             onFocus={this.onFocus}
@@ -274,7 +285,7 @@ export default class SingleDatePicker extends React.Component {
           />
 
           {this.maybeRenderDayPickerWithPortal()}
-        </OutsideClickHandler>
+        </TetherComponent>
       </div>
     );
   }

src/components/SingleDatePickerInput.jsx

@@ -9,6 +9,7 @@ const propTypes = {
   border: PropTypes.bool,
   focused: PropTypes.bool,
   disabled: PropTypes.bool,
+  showCaret: PropTypes.bool,
 
   onChange: PropTypes.func,
   onFocus: PropTypes.func,
@@ -22,6 +23,7 @@ const defaultProps = {
   border: false,
   focused: false,
   disabled: false,
+  showCaret: false,
 
   onChange() {},
   onFocus() {},
@@ -36,6 +38,7 @@ export default function SingleDatePickerInput(props) {
     dateValue,
     focused,
     disabled,
+    showCaret,
     onChange,
     onFocus,
     onKeyDownShiftTab,
@@ -50,6 +53,7 @@ export default function SingleDatePickerInput(props) {
         dateValue={dateValue}
         focused={focused}
         disabled={disabled}
+        showCaret={showCaret}
 
         onChange={onChange}
         onFocus={onFocus}

test/components/DateRangePicker_spec.jsx

@@ -4,14 +4,13 @@ import moment from 'moment';
 import sinon from 'sinon-sandbox';
 import { shallow } from 'enzyme';
 import Portal from 'react-portal';
+import TetherComponent from 'react-tether';
 
 import DateRangePicker from '../../src/components/DateRangePicker';
 
 import DateRangePickerInput from '../../src/components/DateRangePickerInput';
 import DayPicker from '../../src/components/DayPicker';
 
-import OutsideClickHandler from '../../src/components/OutsideClickHandler';
-
 import isSameDay from '../../src/utils/isSameDay';
 import isInclusivelyAfterDay from '../../src/utils/isInclusivelyAfterDay';
 
@@ -38,9 +37,9 @@ describe('DateRangePicker', () => {
       expect(wrapper.find('.DateRangePicker__picker')).to.have.length(1);
     });
 
-    it('renders <OutsideClickHandler />', () => {
+    it('renders <TetherComponent />', () => {
       const wrapper = shallow(<DateRangePicker />);
-      expect(wrapper.find(OutsideClickHandler)).to.have.length(1);
+      expect(wrapper.find(TetherComponent)).to.have.length(1);
     });
 
     it('renders <DateRangePickerInput />', () => {