Object.defineProperty(exports, "__esModule", {
exports.BOTTOM_RIGHT = exports.TOP_RIGHT = exports.TOP_LEFT = undefined;
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _object = __webpack_require__("Koq/");
var _object2 = _interopRequireDefault(_object);
var _react = __webpack_require__("cDcd");
var _react2 = _interopRequireDefault(_react);
var _propTypes = __webpack_require__("17x9");
var _propTypes2 = _interopRequireDefault(_propTypes);
var _airbnbPropTypes = __webpack_require__("Hsqg");
var _reactWithStyles = __webpack_require__("TG4+");
var _defaultPhrases = __webpack_require__("vV+G");
var _getPhrasePropTypes = __webpack_require__("yc2e");
var _getPhrasePropTypes2 = _interopRequireDefault(_getPhrasePropTypes);
var _KeyboardShortcutRow = __webpack_require__("zN8g");
var _KeyboardShortcutRow2 = _interopRequireDefault(_KeyboardShortcutRow);
var _CloseButton = __webpack_require__("xEte");
var _CloseButton2 = _interopRequireDefault(_CloseButton);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var TOP_LEFT = exports.TOP_LEFT = 'top-left';
var TOP_RIGHT = exports.TOP_RIGHT = 'top-right';
var BOTTOM_RIGHT = exports.BOTTOM_RIGHT = 'bottom-right';
var propTypes = (0, _airbnbPropTypes.forbidExtraProps)((0, _object2['default'])({}, _reactWithStyles.withStylesPropTypes, {
block: _propTypes2['default'].bool,
buttonLocation: _propTypes2['default'].oneOf([TOP_LEFT, TOP_RIGHT, BOTTOM_RIGHT]),
showKeyboardShortcutsPanel: _propTypes2['default'].bool,
openKeyboardShortcutsPanel: _propTypes2['default'].func,
closeKeyboardShortcutsPanel: _propTypes2['default'].func,
phrases: _propTypes2['default'].shape((0, _getPhrasePropTypes2['default'])(_defaultPhrases.DayPickerKeyboardShortcutsPhrases))
buttonLocation: BOTTOM_RIGHT,
showKeyboardShortcutsPanel: false,
openKeyboardShortcutsPanel: function () {
function openKeyboardShortcutsPanel() {}
return openKeyboardShortcutsPanel;
closeKeyboardShortcutsPanel: function () {
function closeKeyboardShortcutsPanel() {}
return closeKeyboardShortcutsPanel;
phrases: _defaultPhrases.DayPickerKeyboardShortcutsPhrases
function getKeyboardShortcuts(phrases) {
action: phrases.selectFocusedDate
label: phrases.leftArrowRightArrow,
action: phrases.moveFocusByOneDay
label: phrases.upArrowDownArrow,
action: phrases.moveFocusByOneWeek
label: phrases.pageUpPageDown,
action: phrases.moveFocusByOneMonth
action: phrases.moveFocustoStartAndEndOfWeek
action: phrases.returnFocusToInput
label: phrases.questionMark,
action: phrases.openThisPanel
var DayPickerKeyboardShortcuts = function (_React$Component) {
_inherits(DayPickerKeyboardShortcuts, _React$Component);
function DayPickerKeyboardShortcuts() {
_classCallCheck(this, DayPickerKeyboardShortcuts);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
var _this = _possibleConstructorReturn(this, (_ref = DayPickerKeyboardShortcuts.__proto__ || Object.getPrototypeOf(DayPickerKeyboardShortcuts)).call.apply(_ref, [this].concat(args)));
var phrases = _this.props.phrases;
_this.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);
_createClass(DayPickerKeyboardShortcuts, [{
key: 'componentWillReceiveProps',
function componentWillReceiveProps(nextProps) {
var phrases = this.props.phrases;
if (nextProps.phrases !== phrases) {
this.keyboardShortcuts = getKeyboardShortcuts(nextProps.phrases);
return componentWillReceiveProps;
key: 'componentDidUpdate',
function componentDidUpdate() {
return componentDidUpdate;
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
case 'Spacebar': // for older browsers
closeKeyboardShortcutsPanel();
// 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.
// completely block the rest of the keys that have functionality outside of this panel
key: 'onShowKeyboardShortcutsButtonClick',
function onShowKeyboardShortcutsButtonClick() {
var openKeyboardShortcutsPanel = this.props.openKeyboardShortcutsPanel;
// we want to return focus to this button after closing the keyboard shortcuts panel
openKeyboardShortcutsPanel(function () {
_this2.showKeyboardShortcutsButton.focus();
return onShowKeyboardShortcutsButtonClick;
key: 'setShowKeyboardShortcutsButtonRef',
function setShowKeyboardShortcutsButtonRef(ref) {
this.showKeyboardShortcutsButton = ref;
return setShowKeyboardShortcutsButtonRef;
key: 'setHideKeyboardShortcutsButtonRef',
function setHideKeyboardShortcutsButtonRef(ref) {
this.hideKeyboardShortcutsButton = ref;
return setHideKeyboardShortcutsButtonRef;
if (this.hideKeyboardShortcutsButton) {
// automatically move focus into the dialog by moving
// to the only interactive element, the hide button
this.hideKeyboardShortcutsButton.focus();
buttonLocation = _props.buttonLocation,
showKeyboardShortcutsPanel = _props.showKeyboardShortcutsPanel,
closeKeyboardShortcutsPanel = _props.closeKeyboardShortcutsPanel,
phrases = _props.phrases;
var toggleButtonText = showKeyboardShortcutsPanel ? phrases.hideKeyboardShortcutsPanel : phrases.showKeyboardShortcutsPanel;
var bottomRight = buttonLocation === BOTTOM_RIGHT;
var topRight = buttonLocation === TOP_RIGHT;
var topLeft = buttonLocation === TOP_LEFT;
return _react2['default'].createElement(
_react2['default'].createElement(
ref: this.setShowKeyboardShortcutsButtonRef
}, (0, _reactWithStyles.css)(styles.DayPickerKeyboardShortcuts_buttonReset, styles.DayPickerKeyboardShortcuts_show, bottomRight && styles.DayPickerKeyboardShortcuts_show__bottomRight, topRight && styles.DayPickerKeyboardShortcuts_show__topRight, topLeft && styles.DayPickerKeyboardShortcuts_show__topLeft), {
'aria-label': toggleButtonText,
onClick: this.onShowKeyboardShortcutsButtonClick,
} else if (e.key === 'Space') {
_this3.onShowKeyboardShortcutsButtonClick(e);
_react2['default'].createElement(
(0, _reactWithStyles.css)(styles.DayPickerKeyboardShortcuts_showSpan, bottomRight && styles.DayPickerKeyboardShortcuts_showSpan__bottomRight, topRight && styles.DayPickerKeyboardShortcuts_showSpan__topRight, topLeft && styles.DayPickerKeyboardShortcuts_showSpan__topLeft),
showKeyboardShortcutsPanel && _react2['default'].createElement(
_extends({}, (0, _reactWithStyles.css)(styles.DayPickerKeyboardShortcuts_panel), {
'aria-labelledby': 'DayPickerKeyboardShortcuts_title',
'aria-describedby': 'DayPickerKeyboardShortcuts_description'
_react2['default'].createElement(
_extends({}, (0, _reactWithStyles.css)(styles.DayPickerKeyboardShortcuts_title), {
id: 'DayPickerKeyboardShortcuts_title'
phrases.keyboardShortcuts
_react2['default'].createElement(
ref: this.setHideKeyboardShortcutsButtonRef
}, (0, _reactWithStyles.css)(styles.DayPickerKeyboardShortcuts_buttonReset, styles.DayPickerKeyboardShortcuts_close), {
'aria-label': phrases.hideKeyboardShortcutsPanel,
onClick: closeKeyboardShortcutsPanel,
onKeyDown: this.onKeyDown
_react2['default'].createElement(_CloseButton2['default'], (0, _reactWithStyles.css)(styles.DayPickerKeyboardShortcuts_closeSvg))
_react2['default'].createElement(
_extends({}, (0, _reactWithStyles.css)(styles.DayPickerKeyboardShortcuts_list), {
id: 'DayPickerKeyboardShortcuts_description'
this.keyboardShortcuts.map(function (_ref2) {
var unicode = _ref2.unicode,
return _react2['default'].createElement(_KeyboardShortcutRow2['default'], {
return DayPickerKeyboardShortcuts;
}(_react2['default'].Component);
DayPickerKeyboardShortcuts.propTypes = propTypes;
DayPickerKeyboardShortcuts.defaultProps = defaultProps;
exports['default'] = (0, _reactWithStyles.withStyles)(function (_ref3) {
var _ref3$reactDates = _ref3.reactDates,
color = _ref3$reactDates.color,
font = _ref3$reactDates.font,
zIndex = _ref3$reactDates.zIndex;
DayPickerKeyboardShortcuts_buttonReset: {
DayPickerKeyboardShortcuts_show: {
DayPickerKeyboardShortcuts_show__bottomRight: {
borderTop: '26px solid transparent',
borderRight: '33px solid ' + String(color.core.primary),
borderRight: '33px solid ' + String(color.core.primary_dark)
DayPickerKeyboardShortcuts_show__topRight: {
borderBottom: '26px solid transparent',
borderRight: '33px solid ' + String(color.core.primary),
borderRight: '33px solid ' + String(color.core.primary_dark)
DayPickerKeyboardShortcuts_show__topLeft: {
borderBottom: '26px solid transparent',
borderLeft: '33px solid ' + String(color.core.primary),
borderLeft: '33px solid ' + String(color.core.primary_dark)
DayPickerKeyboardShortcuts_showSpan: {
DayPickerKeyboardShortcuts_showSpan__bottomRight: {
DayPickerKeyboardShortcuts_showSpan__topRight: {
DayPickerKeyboardShortcuts_showSpan__topLeft: {
DayPickerKeyboardShortcuts_panel: {
background: color.background,
border: '1px solid ' + String(color.core.border),
DayPickerKeyboardShortcuts_title: {
DayPickerKeyboardShortcuts_list: {
DayPickerKeyboardShortcuts_close: {
DayPickerKeyboardShortcuts_closeSvg: {
fill: color.core.grayLighter,
fill: color.core.grayLight
fill: color.core.grayLight