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

package/esm/components/DateRangePickerInput.js

@@ -0,0 +1,341 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import PropTypes from 'prop-types';
+import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
+import { 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';
+import IconPositionShape from '../shapes/IconPositionShape';
+import DisabledShape from '../shapes/DisabledShape';
+import RightArrow from './RightArrow';
+import LeftArrow from './LeftArrow';
+import CloseButton from './CloseButton';
+import CalendarIcon from './CalendarIcon';
+import { START_DATE, END_DATE, ICON_BEFORE_POSITION, ICON_AFTER_POSITION, OPEN_DOWN } from '../constants';
+var propTypes = process.env.NODE_ENV !== "production" ? forbidExtraProps(_objectSpread(_objectSpread({}, withStylesPropTypes), {}, {
+  children: PropTypes.node,
+  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,
+  onStartDateChange: PropTypes.func,
+  onEndDateChange: PropTypes.func,
+  onStartDateShiftTab: PropTypes.func,
+  onEndDateTab: PropTypes.func,
+  onClearDates: PropTypes.func,
+  onKeyDownArrowDown: PropTypes.func,
+  onKeyDownQuestionMark: PropTypes.func,
+  startDate: PropTypes.string,
+  endDate: PropTypes.string,
+  isStartDateFocused: PropTypes.bool,
+  isEndDateFocused: PropTypes.bool,
+  showClearDates: PropTypes.bool,
+  disabled: DisabledShape,
+  required: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  openDirection: openDirectionShape,
+  showCaret: PropTypes.bool,
+  showDefaultInputIcon: PropTypes.bool,
+  inputIconPosition: IconPositionShape,
+  customInputIcon: PropTypes.node,
+  customArrowIcon: PropTypes.node,
+  customCloseIcon: PropTypes.node,
+  noBorder: PropTypes.bool,
+  block: PropTypes.bool,
+  small: PropTypes.bool,
+  regular: PropTypes.bool,
+  verticalSpacing: nonNegativeInteger,
+  autoComplete: PropTypes.string,
+  // accessibility
+  isFocused: PropTypes.bool,
+  // describes actual DOM focus
+
+  // i18n
+  phrases: PropTypes.shape(getPhrasePropTypes(DateRangePickerInputPhrases)),
+  isRTL: PropTypes.bool
+})) : {};
+var defaultProps = {
+  children: null,
+  startDateId: START_DATE,
+  endDateId: END_DATE,
+  startDatePlaceholderText: 'Start Date',
+  endDatePlaceholderText: 'End Date',
+  startDateAriaLabel: undefined,
+  endDateAriaLabel: undefined,
+  startDateTitleText: undefined,
+  endDateTitleText: undefined,
+  screenReaderMessage: '',
+  autoComplete: 'off',
+  onStartDateFocus: function onStartDateFocus() {},
+  onEndDateFocus: function onEndDateFocus() {},
+  onStartDateChange: function onStartDateChange() {},
+  onEndDateChange: function onEndDateChange() {},
+  onStartDateShiftTab: function onStartDateShiftTab() {},
+  onEndDateTab: function onEndDateTab() {},
+  onClearDates: function onClearDates() {},
+  onKeyDownArrowDown: function onKeyDownArrowDown() {},
+  onKeyDownQuestionMark: function onKeyDownQuestionMark() {},
+  startDate: '',
+  endDate: '',
+  isStartDateFocused: false,
+  isEndDateFocused: false,
+  showClearDates: false,
+  disabled: false,
+  required: false,
+  readOnly: false,
+  openDirection: OPEN_DOWN,
+  showCaret: false,
+  showDefaultInputIcon: false,
+  inputIconPosition: ICON_BEFORE_POSITION,
+  customInputIcon: null,
+  customArrowIcon: null,
+  customCloseIcon: null,
+  noBorder: false,
+  block: false,
+  small: false,
+  regular: false,
+  verticalSpacing: undefined,
+  // accessibility
+  isFocused: false,
+  // i18n
+  phrases: DateRangePickerInputPhrases,
+  isRTL: false
+};
+function DateRangePickerInput(_ref) {
+  var children = _ref.children,
+    startDate = _ref.startDate,
+    startDateId = _ref.startDateId,
+    startDatePlaceholderText = _ref.startDatePlaceholderText,
+    screenReaderMessage = _ref.screenReaderMessage,
+    isStartDateFocused = _ref.isStartDateFocused,
+    onStartDateChange = _ref.onStartDateChange,
+    onStartDateFocus = _ref.onStartDateFocus,
+    onStartDateShiftTab = _ref.onStartDateShiftTab,
+    startDateAriaLabel = _ref.startDateAriaLabel,
+    startDateTitleText = _ref.startDateTitleText,
+    endDate = _ref.endDate,
+    endDateId = _ref.endDateId,
+    endDatePlaceholderText = _ref.endDatePlaceholderText,
+    isEndDateFocused = _ref.isEndDateFocused,
+    onEndDateChange = _ref.onEndDateChange,
+    onEndDateFocus = _ref.onEndDateFocus,
+    onEndDateTab = _ref.onEndDateTab,
+    endDateAriaLabel = _ref.endDateAriaLabel,
+    endDateTitleText = _ref.endDateTitleText,
+    onKeyDownArrowDown = _ref.onKeyDownArrowDown,
+    onKeyDownQuestionMark = _ref.onKeyDownQuestionMark,
+    onClearDates = _ref.onClearDates,
+    showClearDates = _ref.showClearDates,
+    disabled = _ref.disabled,
+    required = _ref.required,
+    readOnly = _ref.readOnly,
+    autoComplete = _ref.autoComplete,
+    showCaret = _ref.showCaret,
+    openDirection = _ref.openDirection,
+    showDefaultInputIcon = _ref.showDefaultInputIcon,
+    inputIconPosition = _ref.inputIconPosition,
+    customInputIcon = _ref.customInputIcon,
+    customArrowIcon = _ref.customArrowIcon,
+    customCloseIcon = _ref.customCloseIcon,
+    isFocused = _ref.isFocused,
+    phrases = _ref.phrases,
+    isRTL = _ref.isRTL,
+    noBorder = _ref.noBorder,
+    block = _ref.block,
+    verticalSpacing = _ref.verticalSpacing,
+    small = _ref.small,
+    regular = _ref.regular,
+    css = _ref.css,
+    styles = _ref.styles;
+  var calendarIcon = customInputIcon || /*#__PURE__*/React.createElement(CalendarIcon, css(styles.DateRangePickerInput_calendarIcon_svg));
+  var arrowIcon = /*#__PURE__*/React.createElement(RightArrow, css(styles.DateRangePickerInput_arrow_svg));
+  if (isRTL) arrowIcon = /*#__PURE__*/React.createElement(LeftArrow, css(styles.DateRangePickerInput_arrow_svg));
+  if (small) arrowIcon = '-';
+  if (customArrowIcon) arrowIcon = customArrowIcon;
+  var closeIcon = customCloseIcon || /*#__PURE__*/React.createElement(CloseButton, css(styles.DateRangePickerInput_clearDates_svg, small && styles.DateRangePickerInput_clearDates_svg__small));
+  var screenReaderStartDateText = screenReaderMessage || phrases.keyboardForwardNavigationInstructions;
+  var screenReaderEndDateText = screenReaderMessage || phrases.keyboardBackwardNavigationInstructions;
+  var inputIcon = (showDefaultInputIcon || customInputIcon !== null) && /*#__PURE__*/React.createElement("button", _extends({}, css(styles.DateRangePickerInput_calendarIcon), {
+    type: "button",
+    disabled: disabled,
+    "aria-label": phrases.focusStartDate,
+    onClick: onKeyDownArrowDown
+  }), calendarIcon);
+  var startDateDisabled = disabled === START_DATE || disabled === true;
+  var endDateDisabled = disabled === END_DATE || disabled === true;
+  return /*#__PURE__*/React.createElement("div", css(styles.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, /*#__PURE__*/React.createElement(DateInput, {
+    id: startDateId,
+    placeholder: startDatePlaceholderText,
+    ariaLabel: startDateAriaLabel,
+    autoComplete: autoComplete,
+    titleText: startDateTitleText,
+    displayValue: startDate,
+    screenReaderMessage: screenReaderStartDateText,
+    focused: isStartDateFocused,
+    isFocused: isFocused,
+    disabled: startDateDisabled,
+    required: required,
+    readOnly: readOnly,
+    showCaret: showCaret,
+    openDirection: openDirection,
+    onChange: onStartDateChange,
+    onFocus: onStartDateFocus,
+    onKeyDownShiftTab: onStartDateShiftTab,
+    onKeyDownArrowDown: onKeyDownArrowDown,
+    onKeyDownQuestionMark: onKeyDownQuestionMark,
+    verticalSpacing: verticalSpacing,
+    small: small,
+    regular: regular
+  }), !isEndDateFocused && children, /*#__PURE__*/React.createElement("div", _extends({}, css(styles.DateRangePickerInput_arrow), {
+    "aria-hidden": "true",
+    role: "presentation"
+  }), arrowIcon), /*#__PURE__*/React.createElement(DateInput, {
+    id: endDateId,
+    placeholder: endDatePlaceholderText,
+    ariaLabel: endDateAriaLabel,
+    autoComplete: autoComplete,
+    titleText: endDateTitleText,
+    displayValue: endDate,
+    screenReaderMessage: screenReaderEndDateText,
+    focused: isEndDateFocused,
+    isFocused: isFocused,
+    disabled: endDateDisabled,
+    required: required,
+    readOnly: readOnly,
+    showCaret: showCaret,
+    openDirection: openDirection,
+    onChange: onEndDateChange,
+    onFocus: onEndDateFocus,
+    onKeyDownArrowDown: onKeyDownArrowDown,
+    onKeyDownQuestionMark: onKeyDownQuestionMark,
+    onKeyDownTab: onEndDateTab,
+    verticalSpacing: verticalSpacing,
+    small: small,
+    regular: regular
+  }), isEndDateFocused && children, showClearDates && /*#__PURE__*/React.createElement("button", _extends({
+    type: "button",
+    "aria-label": phrases.clearDates
+  }, css(styles.DateRangePickerInput_clearDates, small && styles.DateRangePickerInput_clearDates__small, !customCloseIcon && styles.DateRangePickerInput_clearDates_default, !(startDate || endDate) && styles.DateRangePickerInput_clearDates__hide), {
+    onClick: onClearDates,
+    disabled: disabled
+  }), closeIcon), inputIconPosition === ICON_AFTER_POSITION && inputIcon);
+}
+DateRangePickerInput.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
+DateRangePickerInput.defaultProps = defaultProps;
+export default withStyles(function (_ref2) {
+  var _ref2$reactDates = _ref2.reactDates,
+    border = _ref2$reactDates.border,
+    color = _ref2$reactDates.color,
+    sizing = _ref2$reactDates.sizing;
+  return {
+    DateRangePickerInput: {
+      backgroundColor: color.background,
+      display: 'inline-block'
+    },
+    DateRangePickerInput__disabled: {
+      background: color.disabled
+    },
+    DateRangePickerInput__withBorder: {
+      borderColor: color.border,
+      borderWidth: border.pickerInput.borderWidth,
+      borderStyle: border.pickerInput.borderStyle,
+      borderRadius: border.pickerInput.borderRadius
+    },
+    DateRangePickerInput__rtl: {
+      direction: noflip('rtl')
+    },
+    DateRangePickerInput__block: {
+      display: 'block'
+    },
+    DateRangePickerInput__showClearDates: {
+      paddingRight: 30 // TODO: should be noflip wrapped and handled by an isRTL prop
+    },
+    DateRangePickerInput_arrow: {
+      display: 'inline-block',
+      verticalAlign: 'middle',
+      color: color.text
+    },
+    DateRangePickerInput_arrow_svg: {
+      verticalAlign: 'middle',
+      fill: color.text,
+      height: sizing.arrowWidth,
+      width: sizing.arrowWidth
+    },
+    DateRangePickerInput_clearDates: {
+      background: 'none',
+      border: 0,
+      color: 'inherit',
+      font: 'inherit',
+      lineHeight: 'normal',
+      overflow: 'visible',
+      cursor: 'pointer',
+      padding: 10,
+      margin: '0 10px 0 5px',
+      // TODO: should be noflip wrapped and handled by an isRTL prop
+      position: 'absolute',
+      right: 0,
+      // TODO: should be noflip wrapped and handled by an isRTL prop
+      top: '50%',
+      transform: 'translateY(-50%)'
+    },
+    DateRangePickerInput_clearDates__small: {
+      padding: 6
+    },
+    DateRangePickerInput_clearDates_default: {
+      ':focus': {
+        background: color.core.border,
+        borderRadius: '50%'
+      },
+      ':hover': {
+        background: color.core.border,
+        borderRadius: '50%'
+      }
+    },
+    DateRangePickerInput_clearDates__hide: {
+      visibility: 'hidden'
+    },
+    DateRangePickerInput_clearDates_svg: {
+      fill: color.core.grayLight,
+      height: 12,
+      width: 15,
+      verticalAlign: 'middle'
+    },
+    DateRangePickerInput_clearDates_svg__small: {
+      height: 9
+    },
+    DateRangePickerInput_calendarIcon: {
+      background: 'none',
+      border: 0,
+      color: 'inherit',
+      font: 'inherit',
+      lineHeight: 'normal',
+      overflow: 'visible',
+      cursor: 'pointer',
+      display: 'inline-block',
+      verticalAlign: 'middle',
+      padding: 10,
+      margin: '0 5px 0 10px' // TODO: should be noflip wrapped and handled by an isRTL prop
+    },
+    DateRangePickerInput_calendarIcon_svg: {
+      fill: color.core.grayLight,
+      height: 15,
+      width: 14,
+      verticalAlign: 'middle'
+    }
+  };
+}, {
+  pureComponent: typeof React.PureComponent !== 'undefined'
+})(DateRangePickerInput);

package/esm/components/DateRangePickerInputController.js

@@ -0,0 +1,348 @@
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import shallowEqual from "enzyme-shallow-equal";
+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 { DateRangePickerInputPhrases } from '../defaultPhrases';
+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';
+import isInclusivelyAfterDay from '../utils/isInclusivelyAfterDay';
+import isBeforeDay from '../utils/isBeforeDay';
+import { START_DATE, END_DATE, ICON_BEFORE_POSITION, OPEN_DOWN } from '../constants';
+var propTypes = process.env.NODE_ENV !== "production" ? forbidExtraProps({
+  children: PropTypes.node,
+  startDate: momentPropTypes.momentObj,
+  startDateId: PropTypes.string,
+  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,
+  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,
+  autoComplete: PropTypes.string,
+  keepOpenOnDateSelect: PropTypes.bool,
+  reopenPickerOnClearDates: PropTypes.bool,
+  withFullScreenPortal: PropTypes.bool,
+  minimumNights: nonNegativeInteger,
+  isOutsideRange: PropTypes.func,
+  isDayBlocked: PropTypes.func,
+  displayFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  onFocusChange: PropTypes.func,
+  onClose: PropTypes.func,
+  onDatesChange: PropTypes.func,
+  onKeyDownArrowDown: PropTypes.func,
+  onKeyDownQuestionMark: PropTypes.func,
+  customInputIcon: PropTypes.node,
+  customArrowIcon: PropTypes.node,
+  customCloseIcon: PropTypes.node,
+  // accessibility
+  isFocused: PropTypes.bool,
+  // i18n
+  phrases: PropTypes.shape(getPhrasePropTypes(DateRangePickerInputPhrases)),
+  isRTL: PropTypes.bool
+}) : {};
+var defaultProps = {
+  children: null,
+  startDate: null,
+  startDateId: START_DATE,
+  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,
+  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,
+  autoComplete: 'off',
+  keepOpenOnDateSelect: false,
+  reopenPickerOnClearDates: false,
+  withFullScreenPortal: false,
+  minimumNights: 1,
+  isOutsideRange: function isOutsideRange(day) {
+    return !isInclusivelyAfterDay(day, moment());
+  },
+  isDayBlocked: function isDayBlocked() {
+    return false;
+  },
+  displayFormat: function displayFormat() {
+    return moment.localeData().longDateFormat('L');
+  },
+  onFocusChange: function onFocusChange() {},
+  onClose: function onClose() {},
+  onDatesChange: function onDatesChange() {},
+  onKeyDownArrowDown: function onKeyDownArrowDown() {},
+  onKeyDownQuestionMark: function onKeyDownQuestionMark() {},
+  customInputIcon: null,
+  customArrowIcon: null,
+  customCloseIcon: null,
+  // accessibility
+  isFocused: false,
+  // i18n
+  phrases: DateRangePickerInputPhrases,
+  isRTL: false
+};
+var DateRangePickerInputController = /*#__PURE__*/function (_ref2, _ref) {
+  function DateRangePickerInputController(props) {
+    var _this;
+    _this = _ref2.call(this, props) || this;
+    _this.onClearFocus = _this.onClearFocus.bind(_this);
+    _this.onStartDateChange = _this.onStartDateChange.bind(_this);
+    _this.onStartDateFocus = _this.onStartDateFocus.bind(_this);
+    _this.onEndDateChange = _this.onEndDateChange.bind(_this);
+    _this.onEndDateFocus = _this.onEndDateFocus.bind(_this);
+    _this.clearDates = _this.clearDates.bind(_this);
+    return _this;
+  }
+  _inheritsLoose(DateRangePickerInputController, _ref2);
+  var _proto = DateRangePickerInputController.prototype;
+  _proto[_ref] = function (nextProps, nextState) {
+    return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState);
+  };
+  _proto.onClearFocus = function onClearFocus() {
+    var _this$props = this.props,
+      onFocusChange = _this$props.onFocusChange,
+      onClose = _this$props.onClose,
+      startDate = _this$props.startDate,
+      endDate = _this$props.endDate;
+    onFocusChange(null);
+    onClose({
+      startDate: startDate,
+      endDate: endDate
+    });
+  };
+  _proto.onEndDateChange = function onEndDateChange(endDateString) {
+    var _this$props2 = this.props,
+      startDate = _this$props2.startDate,
+      isOutsideRange = _this$props2.isOutsideRange,
+      isDayBlocked = _this$props2.isDayBlocked,
+      minimumNights = _this$props2.minimumNights,
+      keepOpenOnDateSelect = _this$props2.keepOpenOnDateSelect,
+      onDatesChange = _this$props2.onDatesChange,
+      onClose = _this$props2.onClose,
+      onFocusChange = _this$props2.onFocusChange;
+    var endDate = toMomentObject(endDateString, this.getDisplayFormat());
+    var isEndDateValid = endDate && !isOutsideRange(endDate) && !isDayBlocked(endDate) && !(startDate && isBeforeDay(endDate, startDate.clone().add(minimumNights, 'days')));
+    if (isEndDateValid) {
+      onDatesChange({
+        startDate: startDate,
+        endDate: endDate
+      });
+      if (!keepOpenOnDateSelect) {
+        onFocusChange(null);
+        onClose({
+          startDate: startDate,
+          endDate: endDate
+        });
+      }
+    } else {
+      onDatesChange({
+        startDate: startDate,
+        endDate: null
+      });
+    }
+  };
+  _proto.onEndDateFocus = function onEndDateFocus() {
+    var _this$props3 = this.props,
+      startDate = _this$props3.startDate,
+      onFocusChange = _this$props3.onFocusChange,
+      withFullScreenPortal = _this$props3.withFullScreenPortal,
+      disabled = _this$props3.disabled;
+    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 || disabled === START_DATE) {
+      onFocusChange(END_DATE);
+    }
+  };
+  _proto.onStartDateChange = function onStartDateChange(startDateString) {
+    var endDate = this.props.endDate;
+    var _this$props4 = this.props,
+      isOutsideRange = _this$props4.isOutsideRange,
+      isDayBlocked = _this$props4.isDayBlocked,
+      minimumNights = _this$props4.minimumNights,
+      onDatesChange = _this$props4.onDatesChange,
+      onFocusChange = _this$props4.onFocusChange,
+      disabled = _this$props4.disabled;
+    var startDate = toMomentObject(startDateString, this.getDisplayFormat());
+    var isEndDateBeforeStartDate = startDate && isBeforeDay(endDate, startDate.clone().add(minimumNights, 'days'));
+    var isStartDateValid = startDate && !isOutsideRange(startDate) && !isDayBlocked(startDate) && !(disabled === END_DATE && isEndDateBeforeStartDate);
+    if (isStartDateValid) {
+      if (isEndDateBeforeStartDate) {
+        endDate = null;
+      }
+      onDatesChange({
+        startDate: startDate,
+        endDate: endDate
+      });
+      onFocusChange(END_DATE);
+    } else {
+      onDatesChange({
+        startDate: null,
+        endDate: endDate
+      });
+    }
+  };
+  _proto.onStartDateFocus = function onStartDateFocus() {
+    var _this$props5 = this.props,
+      disabled = _this$props5.disabled,
+      onFocusChange = _this$props5.onFocusChange;
+    if (!disabled || disabled === END_DATE) {
+      onFocusChange(START_DATE);
+    }
+  };
+  _proto.getDisplayFormat = function getDisplayFormat() {
+    var displayFormat = this.props.displayFormat;
+    return typeof displayFormat === 'string' ? displayFormat : displayFormat();
+  };
+  _proto.getDateString = function getDateString(date) {
+    var displayFormat = this.getDisplayFormat();
+    if (date && displayFormat) {
+      return date && date.format(displayFormat);
+    }
+    return toLocalizedDateString(date);
+  };
+  _proto.clearDates = function clearDates() {
+    var _this$props6 = this.props,
+      onDatesChange = _this$props6.onDatesChange,
+      reopenPickerOnClearDates = _this$props6.reopenPickerOnClearDates,
+      onFocusChange = _this$props6.onFocusChange;
+    onDatesChange({
+      startDate: null,
+      endDate: null
+    });
+    if (reopenPickerOnClearDates) {
+      onFocusChange(START_DATE);
+    }
+  };
+  _proto.render = function render() {
+    var _this$props7 = this.props,
+      children = _this$props7.children,
+      startDate = _this$props7.startDate,
+      startDateId = _this$props7.startDateId,
+      startDatePlaceholderText = _this$props7.startDatePlaceholderText,
+      isStartDateFocused = _this$props7.isStartDateFocused,
+      startDateAriaLabel = _this$props7.startDateAriaLabel,
+      startDateTitleText = _this$props7.startDateTitleText,
+      endDate = _this$props7.endDate,
+      endDateId = _this$props7.endDateId,
+      endDatePlaceholderText = _this$props7.endDatePlaceholderText,
+      endDateAriaLabel = _this$props7.endDateAriaLabel,
+      endDateTitleText = _this$props7.endDateTitleText,
+      isEndDateFocused = _this$props7.isEndDateFocused,
+      screenReaderMessage = _this$props7.screenReaderMessage,
+      showClearDates = _this$props7.showClearDates,
+      showCaret = _this$props7.showCaret,
+      showDefaultInputIcon = _this$props7.showDefaultInputIcon,
+      inputIconPosition = _this$props7.inputIconPosition,
+      customInputIcon = _this$props7.customInputIcon,
+      customArrowIcon = _this$props7.customArrowIcon,
+      customCloseIcon = _this$props7.customCloseIcon,
+      disabled = _this$props7.disabled,
+      required = _this$props7.required,
+      readOnly = _this$props7.readOnly,
+      openDirection = _this$props7.openDirection,
+      isFocused = _this$props7.isFocused,
+      phrases = _this$props7.phrases,
+      onKeyDownArrowDown = _this$props7.onKeyDownArrowDown,
+      onKeyDownQuestionMark = _this$props7.onKeyDownQuestionMark,
+      isRTL = _this$props7.isRTL,
+      noBorder = _this$props7.noBorder,
+      block = _this$props7.block,
+      small = _this$props7.small,
+      regular = _this$props7.regular,
+      verticalSpacing = _this$props7.verticalSpacing,
+      autoComplete = _this$props7.autoComplete;
+    var startDateString = this.getDateString(startDate);
+    var endDateString = this.getDateString(endDate);
+    return /*#__PURE__*/React.createElement(DateRangePickerInput, {
+      startDate: startDateString,
+      startDateId: startDateId,
+      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,
+      readOnly: readOnly,
+      openDirection: openDirection,
+      showCaret: showCaret,
+      showDefaultInputIcon: showDefaultInputIcon,
+      inputIconPosition: inputIconPosition,
+      customInputIcon: customInputIcon,
+      customArrowIcon: customArrowIcon,
+      customCloseIcon: customCloseIcon,
+      phrases: phrases,
+      onStartDateChange: this.onStartDateChange,
+      onStartDateFocus: this.onStartDateFocus,
+      onStartDateShiftTab: this.onClearFocus,
+      onEndDateChange: this.onEndDateChange,
+      onEndDateFocus: this.onEndDateFocus,
+      showClearDates: showClearDates,
+      onClearDates: this.clearDates,
+      screenReaderMessage: screenReaderMessage,
+      onKeyDownArrowDown: onKeyDownArrowDown,
+      onKeyDownQuestionMark: onKeyDownQuestionMark,
+      isRTL: isRTL,
+      noBorder: noBorder,
+      block: block,
+      small: small,
+      regular: regular,
+      verticalSpacing: verticalSpacing,
+      autoComplete: autoComplete
+    }, children);
+  };
+  return DateRangePickerInputController;
+}(React.PureComponent || React.Component, !React.PureComponent && "shouldComponentUpdate");
+export { DateRangePickerInputController as default };
+DateRangePickerInputController.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
+DateRangePickerInputController.defaultProps = defaultProps;