text: import _extends from "@babel/runtime/helpers/esm/extends";
  import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
  import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
  import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  import shallowEqual from "enzyme-shallow-equal";
  
  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 } from 'airbnb-prop-types';
  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';
  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';
  var propTypes = process.env.NODE_ENV !== "production" ? forbidExtraProps(_objectSpread(_objectSpread({}, withStylesPropTypes), {}, {
    disablePrev: PropTypes.bool,
    disableNext: PropTypes.bool,
    inlineStyles: PropTypes.object,
    isRTL: PropTypes.bool,
    navPosition: NavPositionShape,
    navPrev: PropTypes.node,
    navNext: PropTypes.node,
    orientation: ScrollableOrientationShape,
    onPrevMonthClick: PropTypes.func,
    onNextMonthClick: PropTypes.func,
    // internationalization
    phrases: PropTypes.shape(getPhrasePropTypes(DayPickerNavigationPhrases)),
    renderNavPrevButton: PropTypes.func,
    renderNavNextButton: PropTypes.func,
    showNavPrevButton: PropTypes.bool,
    showNavNextButton: PropTypes.bool
  })) : {};
  var defaultProps = {
    disablePrev: false,
    disableNext: false,
    inlineStyles: null,
    isRTL: false,
    navPosition: NAV_POSITION_TOP,
    navPrev: null,
    navNext: null,
    orientation: HORIZONTAL_ORIENTATION,
    onPrevMonthClick: function onPrevMonthClick() {},
    onNextMonthClick: function onNextMonthClick() {},
    // internationalization
    phrases: DayPickerNavigationPhrases,
    renderNavPrevButton: null,
    renderNavNextButton: null,
    showNavPrevButton: true,
    showNavNextButton: true
  };
  
  var DayPickerNavigation = /*#__PURE__*/function (_ref) {
    _inheritsLoose(DayPickerNavigation, _ref);
  
    function DayPickerNavigation() {
      return _ref.apply(this, arguments) || this;
    }
  
    var _proto = DayPickerNavigation.prototype;
  
    _proto[!React.PureComponent && "shouldComponentUpdate"] = function (nextProps, nextState) {
      return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState);
    };
  
    _proto.render = function render() {
      var _this$props = this.props,
          inlineStyles = _this$props.inlineStyles,
          isRTL = _this$props.isRTL,
          disablePrev = _this$props.disablePrev,
          disableNext = _this$props.disableNext,
          navPosition = _this$props.navPosition,
          navPrev = _this$props.navPrev,
          navNext = _this$props.navNext,
          onPrevMonthClick = _this$props.onPrevMonthClick,
          onNextMonthClick = _this$props.onNextMonthClick,
          orientation = _this$props.orientation,
          phrases = _this$props.phrases,
          renderNavPrevButton = _this$props.renderNavPrevButton,
          renderNavNextButton = _this$props.renderNavNextButton,
          showNavPrevButton = _this$props.showNavPrevButton,
          showNavNextButton = _this$props.showNavNextButton,
          styles = _this$props.styles;
  
      if (!showNavNextButton && !showNavPrevButton) {
        return null;
      }
  
      var isHorizontal = orientation === HORIZONTAL_ORIENTATION;
      var isVertical = orientation !== HORIZONTAL_ORIENTATION;
      var isVerticalScrollable = orientation === VERTICAL_SCROLLABLE;
      var isBottomNavPosition = navPosition === NAV_POSITION_BOTTOM;
      var hasInlineStyles = !!inlineStyles;
      var navPrevIcon = navPrev;
      var navNextIcon = navNext;
      var isDefaultNavPrev = false;
      var isDefaultNavNext = false;
      var navPrevTabIndex = {};
      var navNextTabIndex = {};
  
      if (!navPrevIcon && !renderNavPrevButton && showNavPrevButton) {
        navPrevTabIndex = {
          tabIndex: '0'
        };
        isDefaultNavPrev = true;
        var Icon = isVertical ? ChevronUp : LeftArrow;
  
        if (isRTL && !isVertical) {
          Icon = RightArrow;
        }
  
        navPrevIcon = /*#__PURE__*/React.createElement(Icon, css(isHorizontal && styles.DayPickerNavigation_svg__horizontal, isVertical && styles.DayPickerNavigation_svg__vertical, disablePrev && styles.DayPickerNavigation_svg__disabled));
      }
  
      if (!navNextIcon && !renderNavNextButton && showNavNextButton) {
        navNextTabIndex = {
          tabIndex: '0'
        };
        isDefaultNavNext = true;
  
        var _Icon = isVertical ? ChevronDown : RightArrow;
  
        if (isRTL && !isVertical) {
          _Icon = LeftArrow;
        }
  
        navNextIcon = /*#__PURE__*/React.createElement(_Icon, css(isHorizontal && styles.DayPickerNavigation_svg__horizontal, isVertical && styles.DayPickerNavigation_svg__vertical, disableNext && styles.DayPickerNavigation_svg__disabled));
      }
  
      var isDefaultNav = isDefaultNavNext || isDefaultNavPrev;
      return /*#__PURE__*/React.createElement("div", css.apply(void 0, [styles.DayPickerNavigation, isHorizontal && styles.DayPickerNavigation__horizontal].concat(_toConsumableArray(isVertical ? [styles.DayPickerNavigation__vertical, isDefaultNav && styles.DayPickerNavigation__verticalDefault] : []), _toConsumableArray(isVerticalScrollable ? [styles.DayPickerNavigation__verticalScrollable, isDefaultNav && styles.DayPickerNavigation__verticalScrollableDefault, showNavPrevButton && styles.DayPickerNavigation__verticalScrollable_prevNav] : []), _toConsumableArray(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 : function (e) {
          var key = e.key;
  
          if (key === 'Enter' || key === ' ') {
            onPrevMonthClick(e);
          }
        },
        onMouseUp: disablePrev ? undefined : function (e) {
          e.currentTarget.blur();
        }
      }) : /*#__PURE__*/React.createElement("div", _extends({
        // eslint-disable-line jsx-a11y/interactive-supports-focus
        role: "button"
      }, navPrevTabIndex, css.apply(void 0, [styles.DayPickerNavigation_button, isDefaultNavPrev && styles.DayPickerNavigation_button__default, disablePrev && styles.DayPickerNavigation_button__disabled].concat(_toConsumableArray(isHorizontal ? [styles.DayPickerNavigation_button__horizontal].concat(_toConsumableArray(isDefaultNavPrev ? [styles.DayPickerNavigation_button__horizontalDefault, isBottomNavPosition && styles.DayPickerNavigation_bottomButton__horizontalDefault, !isRTL && styles.DayPickerNavigation_leftButton__horizontalDefault, isRTL && styles.DayPickerNavigation_rightButton__horizontalDefault] : [])) : []), _toConsumableArray(isVertical ? [styles.DayPickerNavigation_button__vertical].concat(_toConsumableArray(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 : function (e) {
          var key = e.key;
  
          if (key === 'Enter' || key === ' ') {
            onPrevMonthClick(e);
          }
        },
        onMouseUp: disablePrev ? undefined : function (e) {
          e.currentTarget.blur();
        }
      }), navPrevIcon)), showNavNextButton && (renderNavNextButton ? renderNavNextButton({
        ariaLabel: phrases.jumpToNextMonth,
        disabled: disableNext,
        onClick: disableNext ? undefined : onNextMonthClick,
        onKeyUp: disableNext ? undefined : function (e) {
          var key = e.key;
  
          if (key === 'Enter' || key === ' ') {
            onNextMonthClick(e);
          }
        },
        onMouseUp: disableNext ? undefined : function (e) {
          e.currentTarget.blur();
        }
      }) : /*#__PURE__*/React.createElement("div", _extends({
        // eslint-disable-line jsx-a11y/interactive-supports-focus
        role: "button"
      }, navNextTabIndex, css.apply(void 0, [styles.DayPickerNavigation_button, isDefaultNavNext && styles.DayPickerNavigation_button__default, disableNext && styles.DayPickerNavigation_button__disabled].concat(_toConsumableArray(isHorizontal ? [styles.DayPickerNavigation_button__horizontal].concat(_toConsumableArray(isDefaultNavNext ? [styles.DayPickerNavigation_button__horizontalDefault, isBottomNavPosition && styles.DayPickerNavigation_bottomButton__horizontalDefault, isRTL && styles.DayPickerNavigation_leftButton__horizontalDefault, !isRTL && styles.DayPickerNavigation_rightButton__horizontalDefault] : [])) : []), _toConsumableArray(isVertical ? [styles.DayPickerNavigation_button__vertical].concat(_toConsumableArray(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 : function (e) {
          var key = e.key;
  
          if (key === 'Enter' || key === ' ') {
            onNextMonthClick(e);
          }
        },
        onMouseUp: disableNext ? undefined : function (e) {
          e.currentTarget.blur();
        }
      }), navNextIcon)));
    };
  
    return DayPickerNavigation;
  }(React.PureComponent || React.Component);
  
  DayPickerNavigation.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
  DayPickerNavigation.defaultProps = defaultProps;
  export default withStyles(function (_ref2) {
    var _ref2$reactDates = _ref2.reactDates,
        color = _ref2$reactDates.color,
        zIndex = _ref2$reactDates.zIndex;
    return {
      DayPickerNavigation: {
        position: 'relative',
        zIndex: zIndex + 2
      },
      DayPickerNavigation__horizontal: {
        height: 0
      },
      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',
        width: '100%',
        height: 52,
        bottom: 0,
        left: noflip(0)
      },
      DayPickerNavigation__verticalScrollableDefault: {
        position: 'relative'
      },
      DayPickerNavigation__bottom: {
        height: 'auto'
      },
      DayPickerNavigation__bottomDefault: {
        display: 'flex',
        justifyContent: 'space-between'
      },
      DayPickerNavigation_button: {
        cursor: 'pointer',
        userSelect: 'none',
        border: 0,
        padding: 0,
        margin: 0
      },
      DayPickerNavigation_button__default: {
        border: "1px solid ".concat(color.core.borderLight),
        backgroundColor: color.background,
        color: color.placeholderText,
        ':focus': {
          border: "1px solid ".concat(color.core.borderMedium)
        },
        ':hover': {
          border: "1px solid ".concat(color.core.borderMedium)
        },
        ':active': {
          background: color.backgroundDark
        }
      },
      DayPickerNavigation_button__disabled: {
        cursor: 'default',
        border: "1px solid ".concat(color.disabled),
        ':focus': {
          border: "1px solid ".concat(color.disabled)
        },
        ':hover': {
          border: "1px solid ".concat(color.disabled)
        },
        ':active': {
          background: 'none'
        }
      },
      DayPickerNavigation_button__horizontal: {},
      DayPickerNavigation_button__horizontalDefault: {
        position: 'absolute',
        top: 18,
        lineHeight: 0.78,
        borderRadius: 3,
        padding: '6px 9px'
      },
      DayPickerNavigation_bottomButton__horizontalDefault: {
        position: 'static',
        marginLeft: 22,
        marginRight: 22,
        marginBottom: 30,
        marginTop: -10
      },
      DayPickerNavigation_leftButton__horizontalDefault: {
        left: noflip(22)
      },
      DayPickerNavigation_rightButton__horizontalDefault: {
        right: noflip(22)
      },
      DayPickerNavigation_button__vertical: {},
      DayPickerNavigation_button__verticalDefault: {
        padding: 5,
        background: color.background,
        boxShadow: noflip('0 0 5px 2px rgba(0, 0, 0, 0.1)'),
        position: 'relative',
        display: 'inline-block',
        textAlign: 'center',
        height: '100%',
        width: '50%'
      },
      DayPickerNavigation_prevButton__verticalDefault: {},
      DayPickerNavigation_nextButton__verticalDefault: {
        borderLeft: noflip(0)
      },
      DayPickerNavigation_nextButton__verticalScrollableDefault: {
        width: '100%'
      },
      DayPickerNavigation_prevButton__verticalScrollableDefault: {
        width: '100%'
      },
      DayPickerNavigation_svg__horizontal: {
        height: 19,
        width: 19,
        fill: color.core.grayLight,
        display: 'block'
      },
      DayPickerNavigation_svg__vertical: {
        height: 42,
        width: 42,
        fill: color.text
      },
      DayPickerNavigation_svg__disabled: {
        fill: color.disabled
      }
    };
  }, {
    pureComponent: typeof React.PureComponent !== 'undefined'
  })(DayPickerNavigation);