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

package/esm/components/CustomizableCalendarDay.js

@@ -0,0 +1,341 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _readOnlyError from "@babel/runtime/helpers/esm/readOnlyError";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import shallowEqual from "enzyme-shallow-equal";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import PropTypes from 'prop-types';
+import momentPropTypes from 'react-moment-proptypes';
+import { forbidExtraProps, nonNegativeInteger, or } from 'airbnb-prop-types';
+import { withStyles, withStylesPropTypes } from 'react-with-styles';
+import moment from 'moment';
+import raf from 'raf';
+import { CalendarDayPhrases } from '../defaultPhrases';
+import getPhrasePropTypes from '../utils/getPhrasePropTypes';
+import getCalendarDaySettings from '../utils/getCalendarDaySettings';
+import { DAY_SIZE } from '../constants';
+import DefaultTheme from '../theme/DefaultTheme';
+var color = DefaultTheme.reactDates.color;
+function getStyles(stylesObj, isHovered) {
+  if (!stylesObj) return null;
+  var hover = stylesObj.hover;
+  if (isHovered && hover) {
+    return hover;
+  }
+  return stylesObj;
+}
+var DayStyleShape = process.env.NODE_ENV !== "production" ? PropTypes.shape({
+  background: PropTypes.string,
+  border: or([PropTypes.string, PropTypes.number]),
+  color: PropTypes.string,
+  hover: PropTypes.shape({
+    background: PropTypes.string,
+    border: or([PropTypes.string, PropTypes.number]),
+    color: PropTypes.string
+  })
+}) : {};
+var propTypes = process.env.NODE_ENV !== "production" ? forbidExtraProps(_objectSpread(_objectSpread({}, 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,
+  firstDayOfWeekStyles: DayStyleShape,
+  lastDayOfWeekStyles: DayStyleShape,
+  highlightedCalendarStyles: DayStyleShape,
+  blockedMinNightsStyles: DayStyleShape,
+  blockedCalendarStyles: DayStyleShape,
+  blockedOutOfRangeStyles: DayStyleShape,
+  hoveredSpanStyles: DayStyleShape,
+  selectedSpanStyles: DayStyleShape,
+  lastInRangeStyles: DayStyleShape,
+  selectedStyles: DayStyleShape,
+  selectedStartStyles: DayStyleShape,
+  selectedEndStyles: DayStyleShape,
+  afterHoveredStartStyles: DayStyleShape,
+  hoveredStartFirstPossibleEndStyles: DayStyleShape,
+  hoveredStartBlockedMinNightsStyles: DayStyleShape,
+  // internationalization
+  phrases: PropTypes.shape(getPhrasePropTypes(CalendarDayPhrases))
+})) : {};
+export var defaultStyles = {
+  border: "1px solid ".concat(color.core.borderLight),
+  color: color.text,
+  background: color.background,
+  hover: {
+    background: color.core.borderLight,
+    border: "1px solid ".concat(color.core.borderLight),
+    color: 'inherit'
+  }
+};
+export var outsideStyles = {
+  background: color.outside.backgroundColor,
+  border: 0,
+  color: color.outside.color
+};
+export var highlightedCalendarStyles = {
+  background: color.highlighted.backgroundColor,
+  color: color.highlighted.color,
+  hover: {
+    background: color.highlighted.backgroundColor_hover,
+    color: color.highlighted.color_active
+  }
+};
+export var blockedMinNightsStyles = {
+  background: color.minimumNights.backgroundColor,
+  border: "1px solid ".concat(color.minimumNights.borderColor),
+  color: color.minimumNights.color,
+  hover: {
+    background: color.minimumNights.backgroundColor_hover,
+    color: color.minimumNights.color_active
+  }
+};
+export var blockedCalendarStyles = {
+  background: color.blocked_calendar.backgroundColor,
+  border: "1px solid ".concat(color.blocked_calendar.borderColor),
+  color: color.blocked_calendar.color,
+  hover: {
+    background: color.blocked_calendar.backgroundColor_hover,
+    border: "1px solid ".concat(color.blocked_calendar.borderColor),
+    color: color.blocked_calendar.color_active
+  }
+};
+export var blockedOutOfRangeStyles = {
+  background: color.blocked_out_of_range.backgroundColor,
+  border: "1px solid ".concat(color.blocked_out_of_range.borderColor),
+  color: color.blocked_out_of_range.color,
+  hover: {
+    background: color.blocked_out_of_range.backgroundColor_hover,
+    border: "1px solid ".concat(color.blocked_out_of_range.borderColor),
+    color: color.blocked_out_of_range.color_active
+  }
+};
+export var hoveredSpanStyles = {
+  background: color.hoveredSpan.backgroundColor,
+  border: "1px double ".concat(color.hoveredSpan.borderColor),
+  color: color.hoveredSpan.color,
+  hover: {
+    background: color.hoveredSpan.backgroundColor_hover,
+    border: "1px double ".concat(color.hoveredSpan.borderColor),
+    color: color.hoveredSpan.color_active
+  }
+};
+export var selectedSpanStyles = {
+  background: color.selectedSpan.backgroundColor,
+  border: "1px double ".concat(color.selectedSpan.borderColor),
+  color: color.selectedSpan.color,
+  hover: {
+    background: color.selectedSpan.backgroundColor_hover,
+    border: "1px double ".concat(color.selectedSpan.borderColor),
+    color: color.selectedSpan.color_active
+  }
+};
+export var lastInRangeStyles = {};
+export var selectedStyles = {
+  background: color.selected.backgroundColor,
+  border: "1px double ".concat(color.selected.borderColor),
+  color: color.selected.color,
+  hover: {
+    background: color.selected.backgroundColor_hover,
+    border: "1px double ".concat(color.selected.borderColor),
+    color: color.selected.color_active
+  }
+};
+var defaultProps = {
+  day: moment(),
+  daySize: DAY_SIZE,
+  isOutsideDay: false,
+  modifiers: new Set(),
+  isFocused: false,
+  tabIndex: -1,
+  onDayClick: function onDayClick() {},
+  onDayMouseEnter: function onDayMouseEnter() {},
+  onDayMouseLeave: function onDayMouseLeave() {},
+  renderDayContents: null,
+  ariaLabelFormat: 'dddd, LL',
+  // style defaults
+  defaultStyles: defaultStyles,
+  outsideStyles: outsideStyles,
+  todayStyles: {},
+  highlightedCalendarStyles: highlightedCalendarStyles,
+  blockedMinNightsStyles: blockedMinNightsStyles,
+  blockedCalendarStyles: blockedCalendarStyles,
+  blockedOutOfRangeStyles: blockedOutOfRangeStyles,
+  hoveredSpanStyles: hoveredSpanStyles,
+  selectedSpanStyles: selectedSpanStyles,
+  lastInRangeStyles: lastInRangeStyles,
+  selectedStyles: selectedStyles,
+  selectedStartStyles: {},
+  selectedEndStyles: {},
+  afterHoveredStartStyles: {},
+  firstDayOfWeekStyles: {},
+  lastDayOfWeekStyles: {},
+  hoveredStartFirstPossibleEndStyles: {},
+  hoveredStartBlockedMinNightsStyles: {},
+  // internationalization
+  phrases: CalendarDayPhrases
+};
+var CustomizableCalendarDay = /*#__PURE__*/function (_ref2, _ref) {
+  function CustomizableCalendarDay() {
+    var _this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _ref2.call.apply(_ref2, [this].concat(args)) || this;
+    _this.state = {
+      isHovered: false
+    };
+    _this.setButtonRef = _this.setButtonRef.bind(_this);
+    return _this;
+  }
+  _inheritsLoose(CustomizableCalendarDay, _ref2);
+  var _proto = CustomizableCalendarDay.prototype;
+  _proto[_ref] = function (nextProps, nextState) {
+    return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState);
+  };
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    var _this2 = this;
+    var _this$props = this.props,
+      isFocused = _this$props.isFocused,
+      tabIndex = _this$props.tabIndex;
+    if (tabIndex === 0) {
+      if (isFocused || tabIndex !== prevProps.tabIndex) {
+        raf(function () {
+          if (_this2.buttonRef) {
+            _this2.buttonRef.focus();
+          }
+        });
+      }
+    }
+  };
+  _proto.onDayClick = function onDayClick(day, e) {
+    var onDayClick = this.props.onDayClick;
+    onDayClick(day, e);
+  };
+  _proto.onDayMouseEnter = function onDayMouseEnter(day, e) {
+    var onDayMouseEnter = this.props.onDayMouseEnter;
+    this.setState({
+      isHovered: true
+    });
+    onDayMouseEnter(day, e);
+  };
+  _proto.onDayMouseLeave = function onDayMouseLeave(day, e) {
+    var onDayMouseLeave = this.props.onDayMouseLeave;
+    this.setState({
+      isHovered: false
+    });
+    onDayMouseLeave(day, e);
+  };
+  _proto.onKeyDown = function onKeyDown(day, e) {
+    var onDayClick = this.props.onDayClick;
+    var key = e.key;
+    if (key === 'Enter' || key === ' ') {
+      onDayClick(day, e);
+    }
+  };
+  _proto.setButtonRef = function setButtonRef(ref) {
+    this.buttonRef = ref;
+  };
+  _proto.render = function render() {
+    var _this3 = this;
+    var _this$props2 = this.props,
+      day = _this$props2.day,
+      ariaLabelFormat = _this$props2.ariaLabelFormat,
+      daySize = _this$props2.daySize,
+      isOutsideDay = _this$props2.isOutsideDay,
+      modifiers = _this$props2.modifiers,
+      tabIndex = _this$props2.tabIndex,
+      renderDayContents = _this$props2.renderDayContents,
+      css = _this$props2.css,
+      styles = _this$props2.styles,
+      phrases = _this$props2.phrases,
+      defaultStylesWithHover = _this$props2.defaultStyles,
+      outsideStylesWithHover = _this$props2.outsideStyles,
+      todayStylesWithHover = _this$props2.todayStyles,
+      firstDayOfWeekStylesWithHover = _this$props2.firstDayOfWeekStyles,
+      lastDayOfWeekStylesWithHover = _this$props2.lastDayOfWeekStyles,
+      highlightedCalendarStylesWithHover = _this$props2.highlightedCalendarStyles,
+      blockedMinNightsStylesWithHover = _this$props2.blockedMinNightsStyles,
+      blockedCalendarStylesWithHover = _this$props2.blockedCalendarStyles,
+      blockedOutOfRangeStylesWithHover = _this$props2.blockedOutOfRangeStyles,
+      hoveredSpanStylesWithHover = _this$props2.hoveredSpanStyles,
+      selectedSpanStylesWithHover = _this$props2.selectedSpanStyles,
+      lastInRangeStylesWithHover = _this$props2.lastInRangeStyles,
+      selectedStylesWithHover = _this$props2.selectedStyles,
+      selectedStartStylesWithHover = _this$props2.selectedStartStyles,
+      selectedEndStylesWithHover = _this$props2.selectedEndStyles,
+      afterHoveredStartStylesWithHover = _this$props2.afterHoveredStartStyles,
+      hoveredStartFirstPossibleEndStylesWithHover = _this$props2.hoveredStartFirstPossibleEndStyles,
+      hoveredStartBlockedMinNightsStylesWithHover = _this$props2.hoveredStartBlockedMinNightsStyles;
+    var isHovered = this.state.isHovered;
+
+    // empty placeholder cell (no day to render); nothing to label
+    // eslint-disable-next-line jsx-a11y/control-has-associated-label
+    if (!day) return /*#__PURE__*/React.createElement("td", null);
+    var _getCalendarDaySettin = getCalendarDaySettings(day, ariaLabelFormat, daySize, modifiers, phrases),
+      daySizeStyles = _getCalendarDaySettin.daySizeStyles,
+      useDefaultCursor = _getCalendarDaySettin.useDefaultCursor,
+      selected = _getCalendarDaySettin.selected,
+      hoveredSpan = _getCalendarDaySettin.hoveredSpan,
+      isOutsideRange = _getCalendarDaySettin.isOutsideRange,
+      ariaLabel = _getCalendarDaySettin.ariaLabel;
+    return /*#__PURE__*/React.createElement("td", _extends({}, css(styles.CalendarDay, useDefaultCursor && styles.CalendarDay__defaultCursor, daySizeStyles, 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('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), 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,
+      "aria-disabled": modifiers.has('blocked'),
+      "aria-label": ariaLabel,
+      onMouseEnter: function onMouseEnter(e) {
+        _this3.onDayMouseEnter(day, e);
+      },
+      onMouseLeave: function onMouseLeave(e) {
+        _this3.onDayMouseLeave(day, e);
+      },
+      onMouseUp: function onMouseUp(e) {
+        e.currentTarget.blur();
+      },
+      onClick: function onClick(e) {
+        _this3.onDayClick(day, e);
+      },
+      onKeyDown: function onKeyDown(e) {
+        _this3.onKeyDown(day, e);
+      },
+      tabIndex: tabIndex
+    }), renderDayContents ? renderDayContents(day, modifiers) : day.format('D'));
+  };
+  return CustomizableCalendarDay;
+}(React.PureComponent || React.Component, !React.PureComponent && "shouldComponentUpdate");
+CustomizableCalendarDay.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
+CustomizableCalendarDay.defaultProps = defaultProps;
+export { CustomizableCalendarDay as PureCustomizableCalendarDay };
+export default withStyles(function (_ref3) {
+  var font = _ref3.reactDates.font;
+  return {
+    CalendarDay: {
+      boxSizing: 'border-box',
+      cursor: 'pointer',
+      fontSize: font.size,
+      textAlign: 'center',
+      ':active': {
+        outline: 0
+      }
+    },
+    CalendarDay__defaultCursor: {
+      cursor: 'default'
+    }
+  };
+}, {
+  pureComponent: typeof React.PureComponent !== 'undefined'
+})(CustomizableCalendarDay);

package/esm/components/DateInput.js

@@ -0,0 +1,344 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _readOnlyError from "@babel/runtime/helpers/esm/readOnlyError";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import shallowEqual from "enzyme-shallow-equal";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import PropTypes from 'prop-types';
+import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
+import { 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';
+import { OPEN_DOWN, OPEN_UP, FANG_HEIGHT_PX, FANG_WIDTH_PX, DEFAULT_VERTICAL_SPACING, MODIFIER_KEY_NAMES } from '../constants';
+var FANG_PATH_TOP = "M0,".concat(FANG_HEIGHT_PX, " ").concat(FANG_WIDTH_PX, ",").concat(FANG_HEIGHT_PX, " ").concat(FANG_WIDTH_PX / 2, ",0z");
+var FANG_STROKE_TOP = "M0,".concat(FANG_HEIGHT_PX, " ").concat(FANG_WIDTH_PX / 2, ",0 ").concat(FANG_WIDTH_PX, ",").concat(FANG_HEIGHT_PX);
+var FANG_PATH_BOTTOM = "M0,0 ".concat(FANG_WIDTH_PX, ",0 ").concat(FANG_WIDTH_PX / 2, ",").concat(FANG_HEIGHT_PX, "z");
+var FANG_STROKE_BOTTOM = "M0,0 ".concat(FANG_WIDTH_PX / 2, ",").concat(FANG_HEIGHT_PX, " ").concat(FANG_WIDTH_PX, ",0");
+var propTypes = process.env.NODE_ENV !== "production" ? forbidExtraProps(_objectSpread(_objectSpread({}, withStylesPropTypes), {}, {
+  id: PropTypes.string.isRequired,
+  placeholder: PropTypes.string,
+  displayValue: PropTypes.string,
+  ariaLabel: PropTypes.string,
+  autoComplete: PropTypes.string,
+  titleText: PropTypes.string,
+  screenReaderMessage: PropTypes.string,
+  focused: PropTypes.bool,
+  disabled: PropTypes.bool,
+  required: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  openDirection: openDirectionShape,
+  showCaret: PropTypes.bool,
+  verticalSpacing: nonNegativeInteger,
+  small: PropTypes.bool,
+  block: PropTypes.bool,
+  regular: PropTypes.bool,
+  onChange: PropTypes.func,
+  onFocus: PropTypes.func,
+  onKeyDownShiftTab: PropTypes.func,
+  onKeyDownTab: PropTypes.func,
+  onKeyDownArrowDown: PropTypes.func,
+  onKeyDownQuestionMark: PropTypes.func,
+  // accessibility
+  isFocused: PropTypes.bool // describes actual DOM focus
+})) : {};
+var defaultProps = {
+  placeholder: 'Select Date',
+  displayValue: '',
+  ariaLabel: undefined,
+  autoComplete: 'off',
+  titleText: undefined,
+  screenReaderMessage: '',
+  focused: false,
+  disabled: false,
+  required: false,
+  readOnly: null,
+  openDirection: OPEN_DOWN,
+  showCaret: false,
+  verticalSpacing: DEFAULT_VERTICAL_SPACING,
+  small: false,
+  block: false,
+  regular: false,
+  onChange: function onChange() {},
+  onFocus: function onFocus() {},
+  onKeyDownShiftTab: function onKeyDownShiftTab() {},
+  onKeyDownTab: function onKeyDownTab() {},
+  onKeyDownArrowDown: function onKeyDownArrowDown() {},
+  onKeyDownQuestionMark: function onKeyDownQuestionMark() {},
+  // accessibility
+  isFocused: false
+};
+var DateInput = /*#__PURE__*/function (_ref2, _ref) {
+  function DateInput(props) {
+    var _this;
+    _this = _ref2.call(this, props) || this;
+    _this.state = {
+      dateString: '',
+      isTouchDevice: false,
+      lastDisplayValue: props.displayValue
+    };
+    _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
+    });
+    return _this;
+  }
+  _inheritsLoose(DateInput, _ref2);
+  var _proto = DateInput.prototype;
+  _proto[_ref] = function (nextProps, nextState) {
+    return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState);
+  };
+  _proto.componentDidMount = function componentDidMount() {
+    this.setState({
+      isTouchDevice: isTouchDevice()
+    });
+  };
+  DateInput.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
+    var displayValue = props.displayValue;
+    // Only react to displayValue changes that arrive via props, not to our own
+    // state updates (e.g. the user typing), so a typed draft is never wiped mid-edit.
+    if (displayValue !== state.lastDisplayValue) {
+      var nextState = {
+        lastDisplayValue: displayValue
+      };
+      if (state.dateString && displayValue) {
+        nextState.dateString = '';
+      }
+      return nextState;
+    }
+    return null;
+  };
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    var _this$props = this.props,
+      focused = _this$props.focused,
+      isFocused = _this$props.isFocused;
+    if (prevProps.focused === focused && prevProps.isFocused === isFocused) return;
+    if (focused && isFocused) {
+      this.inputRef.focus();
+    }
+  };
+  _proto.onChange = function onChange(e) {
+    var _this$props2 = this.props,
+      onChange = _this$props2.onChange,
+      onKeyDownQuestionMark = _this$props2.onKeyDownQuestionMark;
+    var dateString = e.target.value;
+
+    // In Safari, onKeyDown does not consistently fire ahead of onChange. As a result, we need to
+    // special case the `?` key so that it always triggers the appropriate callback, instead of
+    // modifying the input value
+    if (dateString[dateString.length - 1] === '?') {
+      onKeyDownQuestionMark(e);
+    } else {
+      this.setState({
+        dateString: dateString
+      }, function () {
+        return onChange(dateString);
+      });
+    }
+  };
+  _proto.onKeyDown = function onKeyDown(e) {
+    e.stopPropagation();
+    if (!MODIFIER_KEY_NAMES.has(e.key)) {
+      this.throttledKeyDown(e);
+    }
+  };
+  _proto.onFinalKeyDown = function onFinalKeyDown(e) {
+    var _this$props3 = this.props,
+      onKeyDownShiftTab = _this$props3.onKeyDownShiftTab,
+      onKeyDownTab = _this$props3.onKeyDownTab,
+      onKeyDownArrowDown = _this$props3.onKeyDownArrowDown,
+      onKeyDownQuestionMark = _this$props3.onKeyDownQuestionMark;
+    var key = e.key;
+    if (key === 'Tab') {
+      if (e.shiftKey) {
+        onKeyDownShiftTab(e);
+      } else {
+        onKeyDownTab(e);
+      }
+    } else if (key === 'ArrowDown') {
+      onKeyDownArrowDown(e);
+    } else if (key === '?') {
+      e.preventDefault();
+      onKeyDownQuestionMark(e);
+    }
+  };
+  _proto.setInputRef = function setInputRef(ref) {
+    this.inputRef = ref;
+  };
+  _proto.render = function render() {
+    var _this$state = this.state,
+      dateString = _this$state.dateString,
+      isTouch = _this$state.isTouchDevice;
+    var _this$props4 = this.props,
+      id = _this$props4.id,
+      placeholder = _this$props4.placeholder,
+      ariaLabel = _this$props4.ariaLabel,
+      autoComplete = _this$props4.autoComplete,
+      titleText = _this$props4.titleText,
+      displayValue = _this$props4.displayValue,
+      screenReaderMessage = _this$props4.screenReaderMessage,
+      focused = _this$props4.focused,
+      showCaret = _this$props4.showCaret,
+      onFocus = _this$props4.onFocus,
+      disabled = _this$props4.disabled,
+      required = _this$props4.required,
+      readOnly = _this$props4.readOnly,
+      openDirection = _this$props4.openDirection,
+      verticalSpacing = _this$props4.verticalSpacing,
+      small = _this$props4.small,
+      regular = _this$props4.regular,
+      block = _this$props4.block,
+      css = _this$props4.css,
+      styles = _this$props4.styles,
+      reactDates = _this$props4.theme.reactDates;
+    var value = dateString || displayValue || '';
+    var screenReaderMessageId = "DateInput__screen-reader-message-".concat(id);
+    var withFang = showCaret && focused;
+    var inputHeight = getInputHeight(reactDates, small);
+    return /*#__PURE__*/React.createElement("div", 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, withFang && openDirection === OPEN_UP && styles.DateInput__openUp), /*#__PURE__*/React.createElement("input", _extends({}, 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), {
+      "aria-label": ariaLabel === undefined ? placeholder : ariaLabel,
+      title: titleText,
+      type: "text",
+      id: id,
+      name: id,
+      ref: this.setInputRef,
+      value: value,
+      onChange: this.onChange,
+      onKeyDown: this.onKeyDown,
+      onFocus: onFocus,
+      placeholder: placeholder,
+      autoComplete: autoComplete,
+      disabled: disabled,
+      readOnly: typeof readOnly === 'boolean' ? readOnly : isTouch,
+      required: required,
+      "aria-describedby": screenReaderMessage && screenReaderMessageId
+    })), withFang && /*#__PURE__*/React.createElement("svg", _extends({
+      role: "presentation",
+      focusable: "false"
+    }, css(styles.DateInput_fang, openDirection === OPEN_DOWN && {
+      top: inputHeight + verticalSpacing - FANG_HEIGHT_PX - 1
+    }, openDirection === OPEN_UP && {
+      bottom: inputHeight + verticalSpacing - FANG_HEIGHT_PX - 1
+    })), /*#__PURE__*/React.createElement("path", _extends({}, css(styles.DateInput_fangShape), {
+      d: openDirection === OPEN_DOWN ? FANG_PATH_TOP : FANG_PATH_BOTTOM
+    })), /*#__PURE__*/React.createElement("path", _extends({}, css(styles.DateInput_fangStroke), {
+      d: openDirection === OPEN_DOWN ? FANG_STROKE_TOP : FANG_STROKE_BOTTOM
+    }))), screenReaderMessage && /*#__PURE__*/React.createElement("p", _extends({}, css(styles.DateInput_screenReaderMessage), {
+      id: screenReaderMessageId
+    }), screenReaderMessage));
+  };
+  return DateInput;
+}(React.PureComponent || React.Component, !React.PureComponent && "shouldComponentUpdate");
+DateInput.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
+DateInput.defaultProps = defaultProps;
+export default withStyles(function (_ref3) {
+  var _ref3$reactDates = _ref3.reactDates,
+    border = _ref3$reactDates.border,
+    color = _ref3$reactDates.color,
+    sizing = _ref3$reactDates.sizing,
+    spacing = _ref3$reactDates.spacing,
+    font = _ref3$reactDates.font,
+    zIndex = _ref3$reactDates.zIndex;
+  return {
+    DateInput: {
+      margin: 0,
+      padding: spacing.inputPadding,
+      background: color.background,
+      position: 'relative',
+      display: 'inline-block',
+      width: sizing.inputWidth,
+      verticalAlign: 'middle'
+    },
+    DateInput__small: {
+      width: sizing.inputWidth_small
+    },
+    DateInput__block: {
+      width: '100%'
+    },
+    DateInput__disabled: {
+      background: color.disabled,
+      color: color.textDisabled
+    },
+    DateInput_input: {
+      fontWeight: font.input.weight,
+      fontSize: font.input.size,
+      lineHeight: font.input.lineHeight,
+      color: color.text,
+      backgroundColor: color.background,
+      width: '100%',
+      padding: "".concat(spacing.displayTextPaddingVertical, "px ").concat(spacing.displayTextPaddingHorizontal, "px"),
+      paddingTop: spacing.displayTextPaddingTop,
+      paddingBottom: spacing.displayTextPaddingBottom,
+      paddingLeft: noflip(spacing.displayTextPaddingLeft),
+      paddingRight: noflip(spacing.displayTextPaddingRight),
+      border: border.input.border,
+      borderTop: border.input.borderTop,
+      borderRight: noflip(border.input.borderRight),
+      borderBottom: border.input.borderBottom,
+      borderLeft: noflip(border.input.borderLeft),
+      borderRadius: border.input.borderRadius
+    },
+    DateInput_input__small: {
+      fontSize: font.input.size_small,
+      lineHeight: font.input.lineHeight_small,
+      letterSpacing: font.input.letterSpacing_small,
+      padding: "".concat(spacing.displayTextPaddingVertical_small, "px ").concat(spacing.displayTextPaddingHorizontal_small, "px"),
+      paddingTop: spacing.displayTextPaddingTop_small,
+      paddingBottom: spacing.displayTextPaddingBottom_small,
+      paddingLeft: noflip(spacing.displayTextPaddingLeft_small),
+      paddingRight: noflip(spacing.displayTextPaddingRight_small)
+    },
+    DateInput_input__regular: {
+      fontWeight: 'inherit'
+    },
+    DateInput_input__readOnly: {
+      userSelect: 'none'
+    },
+    DateInput_input__focused: {
+      outline: border.input.outlineFocused,
+      background: color.backgroundFocused,
+      border: border.input.borderFocused,
+      borderTop: border.input.borderTopFocused,
+      borderRight: noflip(border.input.borderRightFocused),
+      borderBottom: border.input.borderBottomFocused,
+      borderLeft: noflip(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,
+      // TODO: should be noflip wrapped and handled by an isRTL prop
+      zIndex: zIndex + 2
+    },
+    DateInput_fangShape: {
+      fill: color.background
+    },
+    DateInput_fangStroke: {
+      stroke: color.core.border,
+      fill: 'transparent'
+    }
+  };
+}, {
+  pureComponent: typeof React.PureComponent !== 'undefined'
+})(DateInput);