text: import _extends from "@babel/runtime/helpers/esm/extends";
  import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
  
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
  
  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 { SingleDatePickerInputPhrases } from '../defaultPhrases';
  import getPhrasePropTypes from '../utils/getPhrasePropTypes';
  import noflip from '../utils/noflip';
  import DateInput from './DateInput';
  import IconPositionShape from '../shapes/IconPositionShape';
  import CloseButton from './CloseButton';
  import CalendarIcon from './CalendarIcon';
  import openDirectionShape from '../shapes/OpenDirectionShape';
  import { ICON_BEFORE_POSITION, ICON_AFTER_POSITION, OPEN_DOWN } from '../constants';
  var propTypes = process.env.NODE_ENV !== "production" ? forbidExtraProps(_objectSpread({}, withStylesPropTypes, {
    id: PropTypes.string.isRequired,
    children: PropTypes.node,
    placeholder: PropTypes.string,
    ariaLabel: PropTypes.string,
    displayValue: PropTypes.string,
    screenReaderMessage: PropTypes.string,
    focused: PropTypes.bool,
    isFocused: PropTypes.bool,
    // describes actual DOM focus
    disabled: PropTypes.bool,
    required: PropTypes.bool,
    readOnly: PropTypes.bool,
    openDirection: openDirectionShape,
    showCaret: PropTypes.bool,
    showClearDate: PropTypes.bool,
    customCloseIcon: PropTypes.node,
    showDefaultInputIcon: PropTypes.bool,
    inputIconPosition: IconPositionShape,
    customInputIcon: PropTypes.node,
    isRTL: PropTypes.bool,
    noBorder: PropTypes.bool,
    block: PropTypes.bool,
    small: PropTypes.bool,
    regular: PropTypes.bool,
    verticalSpacing: nonNegativeInteger,
    onChange: PropTypes.func,
    onClearDate: PropTypes.func,
    onFocus: PropTypes.func,
    onKeyDownShiftTab: PropTypes.func,
    onKeyDownTab: PropTypes.func,
    onKeyDownArrowDown: PropTypes.func,
    onKeyDownQuestionMark: PropTypes.func,
    // i18n
    phrases: PropTypes.shape(getPhrasePropTypes(SingleDatePickerInputPhrases))
  })) : {};
  var defaultProps = {
    children: null,
    placeholder: 'Select Date',
    ariaLabel: undefined,
    displayValue: '',
    screenReaderMessage: '',
    focused: false,
    isFocused: false,
    disabled: false,
    required: false,
    readOnly: false,
    openDirection: OPEN_DOWN,
    showCaret: false,
    showClearDate: false,
    showDefaultInputIcon: false,
    inputIconPosition: ICON_BEFORE_POSITION,
    customCloseIcon: null,
    customInputIcon: null,
    isRTL: false,
    noBorder: false,
    block: false,
    small: false,
    regular: false,
    verticalSpacing: undefined,
    onChange: function onChange() {},
    onClearDate: function onClearDate() {},
    onFocus: function onFocus() {},
    onKeyDownShiftTab: function onKeyDownShiftTab() {},
    onKeyDownTab: function onKeyDownTab() {},
    onKeyDownArrowDown: function onKeyDownArrowDown() {},
    onKeyDownQuestionMark: function onKeyDownQuestionMark() {},
    // i18n
    phrases: SingleDatePickerInputPhrases
  };
  
  function SingleDatePickerInput(_ref) {
    var id = _ref.id,
        children = _ref.children,
        placeholder = _ref.placeholder,
        ariaLabel = _ref.ariaLabel,
        displayValue = _ref.displayValue,
        focused = _ref.focused,
        isFocused = _ref.isFocused,
        disabled = _ref.disabled,
        required = _ref.required,
        readOnly = _ref.readOnly,
        showCaret = _ref.showCaret,
        showClearDate = _ref.showClearDate,
        showDefaultInputIcon = _ref.showDefaultInputIcon,
        inputIconPosition = _ref.inputIconPosition,
        phrases = _ref.phrases,
        onClearDate = _ref.onClearDate,
        onChange = _ref.onChange,
        onFocus = _ref.onFocus,
        onKeyDownShiftTab = _ref.onKeyDownShiftTab,
        onKeyDownTab = _ref.onKeyDownTab,
        onKeyDownArrowDown = _ref.onKeyDownArrowDown,
        onKeyDownQuestionMark = _ref.onKeyDownQuestionMark,
        screenReaderMessage = _ref.screenReaderMessage,
        customCloseIcon = _ref.customCloseIcon,
        customInputIcon = _ref.customInputIcon,
        openDirection = _ref.openDirection,
        isRTL = _ref.isRTL,
        noBorder = _ref.noBorder,
        block = _ref.block,
        small = _ref.small,
        regular = _ref.regular,
        verticalSpacing = _ref.verticalSpacing,
        styles = _ref.styles;
    var calendarIcon = customInputIcon || React.createElement(CalendarIcon, css(styles.SingleDatePickerInput_calendarIcon_svg));
    var closeIcon = customCloseIcon || React.createElement(CloseButton, css(styles.SingleDatePickerInput_clearDate_svg, small && styles.SingleDatePickerInput_clearDate_svg__small));
    var screenReaderText = screenReaderMessage || phrases.keyboardForwardNavigationInstructions;
    var inputIcon = (showDefaultInputIcon || customInputIcon !== null) && React.createElement("button", _extends({}, css(styles.SingleDatePickerInput_calendarIcon), {
      type: "button",
      disabled: disabled,
      "aria-label": phrases.focusStartDate,
      onClick: onFocus
    }), calendarIcon);
    return React.createElement("div", css(styles.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, React.createElement(DateInput, {
      id: id,
      placeholder: placeholder,
      ariaLabel: ariaLabel,
      displayValue: displayValue,
      screenReaderMessage: screenReaderText,
      focused: focused,
      isFocused: isFocused,
      disabled: disabled,
      required: required,
      readOnly: readOnly,
      showCaret: showCaret,
      onChange: onChange,
      onFocus: onFocus,
      onKeyDownShiftTab: onKeyDownShiftTab,
      onKeyDownTab: onKeyDownTab,
      onKeyDownArrowDown: onKeyDownArrowDown,
      onKeyDownQuestionMark: onKeyDownQuestionMark,
      openDirection: openDirection,
      verticalSpacing: verticalSpacing,
      small: small,
      regular: regular,
      block: block
    }), children, showClearDate && React.createElement("button", _extends({}, css(styles.SingleDatePickerInput_clearDate, small && styles.SingleDatePickerInput_clearDate__small, !customCloseIcon && styles.SingleDatePickerInput_clearDate__default, !displayValue && styles.SingleDatePickerInput_clearDate__hide), {
      type: "button",
      "aria-label": phrases.clearDate,
      disabled: disabled,
      onClick: onClearDate
    }), closeIcon), inputIconPosition === ICON_AFTER_POSITION && inputIcon);
  }
  
  SingleDatePickerInput.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
  SingleDatePickerInput.defaultProps = defaultProps;
  export default withStyles(function (_ref2) {
    var _ref2$reactDates = _ref2.reactDates,
        border = _ref2$reactDates.border,
        color = _ref2$reactDates.color;
    return {
      SingleDatePickerInput: {
        display: 'inline-block',
        backgroundColor: color.background
      },
      SingleDatePickerInput__withBorder: {
        borderColor: color.border,
        borderWidth: border.pickerInput.borderWidth,
        borderStyle: border.pickerInput.borderStyle,
        borderRadius: border.pickerInput.borderRadius
      },
      SingleDatePickerInput__rtl: {
        direction: noflip('rtl')
      },
      SingleDatePickerInput__disabled: {
        backgroundColor: color.disabled
      },
      SingleDatePickerInput__block: {
        display: 'block'
      },
      SingleDatePickerInput__showClearDate: {
        paddingRight: 30 // TODO: should be noflip wrapped and handled by an isRTL prop
  
      },
      SingleDatePickerInput_clearDate: {
        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%)'
      },
      SingleDatePickerInput_clearDate__default: {
        ':focus': {
          background: color.core.border,
          borderRadius: '50%'
        },
        ':hover': {
          background: color.core.border,
          borderRadius: '50%'
        }
      },
      SingleDatePickerInput_clearDate__small: {
        padding: 6
      },
      SingleDatePickerInput_clearDate__hide: {
        visibility: 'hidden'
      },
      SingleDatePickerInput_clearDate_svg: {
        fill: color.core.grayLight,
        height: 12,
        width: 15,
        verticalAlign: 'middle'
      },
      SingleDatePickerInput_clearDate_svg__small: {
        height: 9
      },
      SingleDatePickerInput_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
  
      },
      SingleDatePickerInput_calendarIcon_svg: {
        fill: color.core.grayLight,
        height: 15,
        width: 14,
        verticalAlign: 'middle'
      }
    };
  }, {
    pureComponent: typeof React.PureComponent !== 'undefined'
  })(SingleDatePickerInput);