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

package/esm/components/DayPickerKeyboardShortcuts.js

@@ -0,0 +1,364 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+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 } from 'airbnb-prop-types';
+import { withStyles, withStylesPropTypes } from 'react-with-styles';
+import { DayPickerKeyboardShortcutsPhrases } from '../defaultPhrases';
+import getPhrasePropTypes from '../utils/getPhrasePropTypes';
+import KeyboardShortcutRow from './KeyboardShortcutRow';
+import CloseButton from './CloseButton';
+export var TOP_LEFT = 'top-left';
+export var TOP_RIGHT = 'top-right';
+export var BOTTOM_RIGHT = 'bottom-right';
+var propTypes = process.env.NODE_ENV !== "production" ? forbidExtraProps(_objectSpread(_objectSpread({}, withStylesPropTypes), {}, {
+  block: PropTypes.bool,
+  // TODO: rename button location to be direction-agnostic
+  buttonLocation: PropTypes.oneOf([TOP_LEFT, TOP_RIGHT, BOTTOM_RIGHT]),
+  showKeyboardShortcutsPanel: PropTypes.bool,
+  openKeyboardShortcutsPanel: PropTypes.func,
+  closeKeyboardShortcutsPanel: PropTypes.func,
+  phrases: PropTypes.shape(getPhrasePropTypes(DayPickerKeyboardShortcutsPhrases)),
+  renderKeyboardShortcutsButton: PropTypes.func,
+  renderKeyboardShortcutsPanel: PropTypes.func
+})) : {};
+var defaultProps = {
+  block: false,
+  buttonLocation: BOTTOM_RIGHT,
+  showKeyboardShortcutsPanel: false,
+  openKeyboardShortcutsPanel: function openKeyboardShortcutsPanel() {},
+  closeKeyboardShortcutsPanel: function closeKeyboardShortcutsPanel() {},
+  phrases: DayPickerKeyboardShortcutsPhrases,
+  renderKeyboardShortcutsButton: undefined,
+  renderKeyboardShortcutsPanel: undefined
+};
+function getKeyboardShortcuts(phrases) {
+  return [{
+    unicode: '↵',
+    label: phrases.enterKey,
+    action: phrases.selectFocusedDate
+  }, {
+    unicode: '←/→',
+    label: phrases.leftArrowRightArrow,
+    action: phrases.moveFocusByOneDay
+  }, {
+    unicode: '↑/↓',
+    label: phrases.upArrowDownArrow,
+    action: phrases.moveFocusByOneWeek
+  }, {
+    unicode: 'PgUp/PgDn',
+    label: phrases.pageUpPageDown,
+    action: phrases.moveFocusByOneMonth
+  }, {
+    unicode: 'Home/End',
+    label: phrases.homeEnd,
+    action: phrases.moveFocustoStartAndEndOfWeek
+  }, {
+    unicode: 'Esc',
+    label: phrases.escape,
+    action: phrases.returnFocusToInput
+  }, {
+    unicode: '?',
+    label: phrases.questionMark,
+    action: phrases.openThisPanel
+  }];
+}
+var DayPickerKeyboardShortcuts = /*#__PURE__*/function (_ref2, _ref) {
+  function DayPickerKeyboardShortcuts() {
+    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;
+    var phrases = _this.props.phrases;
+    _this.state = {
+      phrases: phrases,
+      keyboardShortcuts: getKeyboardShortcuts(phrases)
+    };
+    _this.onShowKeyboardShortcutsButtonClick = _this.onShowKeyboardShortcutsButtonClick.bind(_this);
+    _this.setShowKeyboardShortcutsButtonRef = _this.setShowKeyboardShortcutsButtonRef.bind(_this);
+    _this.setHideKeyboardShortcutsButtonRef = _this.setHideKeyboardShortcutsButtonRef.bind(_this);
+    _this.handleFocus = _this.handleFocus.bind(_this);
+    _this.onKeyDown = _this.onKeyDown.bind(_this);
+    return _this;
+  }
+  _inheritsLoose(DayPickerKeyboardShortcuts, _ref2);
+  var _proto = DayPickerKeyboardShortcuts.prototype;
+  _proto[_ref] = function (nextProps, nextState) {
+    return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState);
+  };
+  DayPickerKeyboardShortcuts.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
+    if (props.phrases !== state.phrases) {
+      return {
+        phrases: props.phrases,
+        keyboardShortcuts: getKeyboardShortcuts(props.phrases)
+      };
+    }
+    return null;
+  };
+  _proto.componentDidUpdate = function componentDidUpdate() {
+    this.handleFocus();
+  };
+  _proto.handleFocus = function handleFocus() {
+    if (this.hideKeyboardShortcutsButton) {
+      // automatically move focus into the dialog by moving
+      // to the only interactive element, the hide button
+      this.hideKeyboardShortcutsButton.focus();
+    }
+  };
+  _proto.onKeyDown = function onKeyDown(e) {
+    e.stopPropagation();
+    var closeKeyboardShortcutsPanel = this.props.closeKeyboardShortcutsPanel;
+    // Because the close button is the only focusable element inside of the panel, this
+    // amounts to a very basic focus trap. The user can exit the panel by "pressing" the
+    // close button or hitting escape
+    switch (e.key) {
+      case 'Escape':
+        closeKeyboardShortcutsPanel();
+        break;
+
+      // do nothing - this allows the up and down arrows continue their
+      // default behavior of scrolling the content of the Keyboard Shortcuts Panel
+      // which is needed when only a single month is shown for instance.
+      case 'ArrowUp':
+      case 'ArrowDown':
+        break;
+
+      // completely block the rest of the keys that have functionality outside of this panel
+      case 'Tab':
+      case 'Home':
+      case 'End':
+      case 'PageUp':
+      case 'PageDown':
+      case 'ArrowLeft':
+      case 'ArrowRight':
+        e.preventDefault();
+        break;
+      default:
+        break;
+    }
+  };
+  _proto.onShowKeyboardShortcutsButtonClick = function onShowKeyboardShortcutsButtonClick() {
+    var _this2 = this;
+    var openKeyboardShortcutsPanel = this.props.openKeyboardShortcutsPanel;
+
+    // we want to return focus to this button after closing the keyboard shortcuts panel
+    openKeyboardShortcutsPanel(function () {
+      _this2.showKeyboardShortcutsButton.focus();
+    });
+  };
+  _proto.setShowKeyboardShortcutsButtonRef = function setShowKeyboardShortcutsButtonRef(ref) {
+    this.showKeyboardShortcutsButton = ref;
+  };
+  _proto.setHideKeyboardShortcutsButtonRef = function setHideKeyboardShortcutsButtonRef(ref) {
+    this.hideKeyboardShortcutsButton = ref;
+  };
+  _proto.render = function render() {
+    var _this$props = this.props,
+      block = _this$props.block,
+      buttonLocation = _this$props.buttonLocation,
+      showKeyboardShortcutsPanel = _this$props.showKeyboardShortcutsPanel,
+      closeKeyboardShortcutsPanel = _this$props.closeKeyboardShortcutsPanel,
+      css = _this$props.css,
+      styles = _this$props.styles,
+      phrases = _this$props.phrases,
+      renderKeyboardShortcutsButton = _this$props.renderKeyboardShortcutsButton,
+      renderKeyboardShortcutsPanel = _this$props.renderKeyboardShortcutsPanel;
+    var keyboardShortcuts = this.state.keyboardShortcuts;
+    var toggleButtonText = showKeyboardShortcutsPanel ? phrases.hideKeyboardShortcutsPanel : phrases.showKeyboardShortcutsPanel;
+    var bottomRight = buttonLocation === BOTTOM_RIGHT;
+    var topRight = buttonLocation === TOP_RIGHT;
+    var topLeft = buttonLocation === TOP_LEFT;
+    return /*#__PURE__*/React.createElement("div", null, renderKeyboardShortcutsButton && renderKeyboardShortcutsButton({
+      // passing in context-specific props
+      ref: this.setShowKeyboardShortcutsButtonRef,
+      onClick: this.onShowKeyboardShortcutsButtonClick,
+      ariaLabel: toggleButtonText
+    }), !renderKeyboardShortcutsButton && /*#__PURE__*/React.createElement("button", _extends({
+      ref: this.setShowKeyboardShortcutsButtonRef
+    }, css(styles.DayPickerKeyboardShortcuts_buttonReset, styles.DayPickerKeyboardShortcuts_show, bottomRight && styles.DayPickerKeyboardShortcuts_show__bottomRight, topRight && styles.DayPickerKeyboardShortcuts_show__topRight, topLeft && styles.DayPickerKeyboardShortcuts_show__topLeft), {
+      type: "button",
+      "aria-label": toggleButtonText,
+      onClick: this.onShowKeyboardShortcutsButtonClick,
+      onMouseUp: function onMouseUp(e) {
+        e.currentTarget.blur();
+      }
+    }), /*#__PURE__*/React.createElement("span", css(styles.DayPickerKeyboardShortcuts_showSpan, bottomRight && styles.DayPickerKeyboardShortcuts_showSpan__bottomRight, topRight && styles.DayPickerKeyboardShortcuts_showSpan__topRight, topLeft && styles.DayPickerKeyboardShortcuts_showSpan__topLeft), "?")), showKeyboardShortcutsPanel && (renderKeyboardShortcutsPanel ? renderKeyboardShortcutsPanel({
+      closeButtonAriaLabel: phrases.hideKeyboardShortcutsPanel,
+      keyboardShortcuts: keyboardShortcuts,
+      onCloseButtonClick: closeKeyboardShortcutsPanel,
+      onKeyDown: this.onKeyDown,
+      title: phrases.keyboardShortcuts
+    }) : /*#__PURE__*/React.createElement("div", _extends({}, css(styles.DayPickerKeyboardShortcuts_panel), {
+      role: "dialog",
+      "aria-labelledby": "DayPickerKeyboardShortcuts_title",
+      "aria-describedby": "DayPickerKeyboardShortcuts_description"
+    }), /*#__PURE__*/React.createElement("div", _extends({}, css(styles.DayPickerKeyboardShortcuts_title), {
+      id: "DayPickerKeyboardShortcuts_title"
+    }), phrases.keyboardShortcuts), /*#__PURE__*/React.createElement("button", _extends({
+      ref: this.setHideKeyboardShortcutsButtonRef
+    }, css(styles.DayPickerKeyboardShortcuts_buttonReset, styles.DayPickerKeyboardShortcuts_close), {
+      type: "button",
+      tabIndex: "0",
+      "aria-label": phrases.hideKeyboardShortcutsPanel,
+      onClick: closeKeyboardShortcutsPanel,
+      onKeyDown: this.onKeyDown
+    }), /*#__PURE__*/React.createElement(CloseButton, css(styles.DayPickerKeyboardShortcuts_closeSvg))), /*#__PURE__*/React.createElement("ul", _extends({}, css(styles.DayPickerKeyboardShortcuts_list), {
+      id: "DayPickerKeyboardShortcuts_description"
+    }), keyboardShortcuts.map(function (_ref3) {
+      var unicode = _ref3.unicode,
+        label = _ref3.label,
+        action = _ref3.action;
+      return /*#__PURE__*/React.createElement(KeyboardShortcutRow, {
+        key: label,
+        unicode: unicode,
+        label: label,
+        action: action,
+        block: block
+      });
+    })))));
+  };
+  return DayPickerKeyboardShortcuts;
+}(React.PureComponent || React.Component, !React.PureComponent && "shouldComponentUpdate");
+DayPickerKeyboardShortcuts.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
+DayPickerKeyboardShortcuts.defaultProps = defaultProps;
+export default withStyles(function (_ref4) {
+  var _ref4$reactDates = _ref4.reactDates,
+    color = _ref4$reactDates.color,
+    font = _ref4$reactDates.font,
+    zIndex = _ref4$reactDates.zIndex;
+  return {
+    DayPickerKeyboardShortcuts_buttonReset: {
+      background: 'none',
+      border: 0,
+      borderRadius: 0,
+      color: 'inherit',
+      font: 'inherit',
+      lineHeight: 'normal',
+      overflow: 'visible',
+      padding: 0,
+      cursor: 'pointer',
+      fontSize: font.size,
+      ':active': {
+        outline: 'none'
+      }
+    },
+    DayPickerKeyboardShortcuts_show: {
+      width: 33,
+      height: 26,
+      position: 'absolute',
+      zIndex: zIndex + 2,
+      '::before': {
+        content: '""',
+        display: 'block',
+        position: 'absolute'
+      }
+    },
+    DayPickerKeyboardShortcuts_show__bottomRight: {
+      bottom: 0,
+      right: 0,
+      '::before': {
+        borderTop: '26px solid transparent',
+        borderRight: "33px solid ".concat(color.core.primary),
+        bottom: 0,
+        right: 0
+      },
+      ':hover::before': {
+        borderRight: "33px solid ".concat(color.core.primary_dark)
+      }
+    },
+    DayPickerKeyboardShortcuts_show__topRight: {
+      top: 0,
+      right: 0,
+      '::before': {
+        borderBottom: '26px solid transparent',
+        borderRight: "33px solid ".concat(color.core.primary),
+        top: 0,
+        right: 0
+      },
+      ':hover::before': {
+        borderRight: "33px solid ".concat(color.core.primary_dark)
+      }
+    },
+    DayPickerKeyboardShortcuts_show__topLeft: {
+      top: 0,
+      left: 0,
+      '::before': {
+        borderBottom: '26px solid transparent',
+        borderLeft: "33px solid ".concat(color.core.primary),
+        top: 0,
+        left: 0
+      },
+      ':hover::before': {
+        borderLeft: "33px solid ".concat(color.core.primary_dark)
+      }
+    },
+    DayPickerKeyboardShortcuts_showSpan: {
+      color: color.core.white,
+      position: 'absolute'
+    },
+    DayPickerKeyboardShortcuts_showSpan__bottomRight: {
+      bottom: 0,
+      right: 5
+    },
+    DayPickerKeyboardShortcuts_showSpan__topRight: {
+      top: 1,
+      right: 5
+    },
+    DayPickerKeyboardShortcuts_showSpan__topLeft: {
+      top: 1,
+      left: 5
+    },
+    DayPickerKeyboardShortcuts_panel: {
+      overflow: 'auto',
+      background: color.background,
+      border: "1px solid ".concat(color.core.border),
+      borderRadius: 2,
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      right: 0,
+      left: 0,
+      zIndex: zIndex + 2,
+      padding: 22,
+      margin: 33,
+      textAlign: 'left' // TODO: investigate use of text-align throughout the library
+    },
+    DayPickerKeyboardShortcuts_title: {
+      fontSize: 16,
+      fontWeight: 'bold',
+      margin: 0
+    },
+    DayPickerKeyboardShortcuts_list: {
+      listStyle: 'none',
+      padding: 0,
+      fontSize: font.size
+    },
+    DayPickerKeyboardShortcuts_close: {
+      position: 'absolute',
+      right: 22,
+      top: 22,
+      zIndex: zIndex + 2,
+      ':active': {
+        outline: 'none'
+      }
+    },
+    DayPickerKeyboardShortcuts_closeSvg: {
+      height: 15,
+      width: 15,
+      fill: color.core.grayLighter,
+      ':hover': {
+        fill: color.core.grayLight
+      },
+      ':focus': {
+        fill: color.core.grayLight
+      }
+    }
+  };
+}, {
+  pureComponent: typeof React.PureComponent !== 'undefined'
+})(DayPickerKeyboardShortcuts);

package/esm/components/DayPickerNavigation.js

@@ -0,0 +1,314 @@
+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(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 } from 'airbnb-prop-types';
+import { 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 (_ref2, _ref) {
+  function DayPickerNavigation() {
+    return _ref2.apply(this, arguments) || this;
+  }
+  _inheritsLoose(DayPickerNavigation, _ref2);
+  var _proto = DayPickerNavigation.prototype;
+  _proto[_ref] = 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,
+      css = _this$props.css,
+      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, !React.PureComponent && "shouldComponentUpdate");
+DayPickerNavigation.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
+DayPickerNavigation.defaultProps = defaultProps;
+export default withStyles(function (_ref3) {
+  var _ref3$reactDates = _ref3.reactDates,
+    color = _ref3$reactDates.color,
+    zIndex = _ref3$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);