@splunk/react-ui 4.12.1 → 4.14.0

package/Calendar.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 115);
+/******/ 	return __webpack_require__(__webpack_require__.s = 120);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -102,13 +102,40 @@ module.exports = require("prop-types");
 /***/ }),
 
 /***/ 10:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return updateReactRef; });
+/**
+ * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
+ *
+ * @param ref - The React callback or object ref. Can be `null` or `undefined`.
+ * @param current - The new value of the ref.
+ */
+function updateReactRef(ref, current) {
+  if (ref) {
+    if (typeof ref === 'function') {
+      ref(current);
+    } else {
+      // the public signature of this util uses React.Ref<T> to mirror the way React types refs.
+      // the intention here is to signal "we will take care of setting 'current', not you".
+      ref.current = current; // eslint-disable-line no-param-reassign
+    }
+  }
+}
+
+
+
+/***/ }),
+
+/***/ 11:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/ui-utils/id");
 
 /***/ }),
 
-/***/ 115:
+/***/ 120:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -117,6 +144,7 @@ __webpack_require__.r(__webpack_exports__);
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, "default", function() { return /* reexport */ src_Calendar_Calendar; });
+__webpack_require__.d(__webpack_exports__, "calendarActiveSelector", function() { return /* reexport */ calendarActiveSelector; });
 
 // EXTERNAL MODULE: external "react"
 var external_react_ = __webpack_require__(2);
@@ -130,15 +158,22 @@ var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_pr
 var external_lodash_ = __webpack_require__(4);
 
 // EXTERNAL MODULE: external "moment"
-var external_moment_ = __webpack_require__(22);
+var external_moment_ = __webpack_require__(17);
 var external_moment_default = /*#__PURE__*/__webpack_require__.n(external_moment_);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/id"
-var id_ = __webpack_require__(10);
+var id_ = __webpack_require__(11);
 
 // EXTERNAL MODULE: external "@splunk/themes"
 var themes_ = __webpack_require__(0);
 
+// EXTERNAL MODULE: external "@splunk/ui-utils/keyboard"
+var keyboard_ = __webpack_require__(9);
+
+// EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
+var ScreenReaderContent_ = __webpack_require__(14);
+var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReaderContent_);
+
 // EXTERNAL MODULE: external "styled-components"
 var external_styled_components_ = __webpack_require__(3);
 var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
@@ -146,19 +181,24 @@ var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(exte
 // CONCATENATED MODULE: ./src/Calendar/DayStyles.ts
 
 
-var Styled = external_styled_components_default.a.td.withConfig({
-  displayName: "DayStyles__Styled",
+/* Element used to prevent vertical shift on firefox when the font-weight is increased with $selected */
+
+var StyledValue = external_styled_components_default.a.div.withConfig({
+  displayName: "DayStyles__StyledValue",
   componentId: "sc-1nryhyt-0"
-})(["", ";"], themes_["mixins"].reset('table-cell'));
-var StyledButton = external_styled_components_default.a.button.withConfig({
-  displayName: "DayStyles__StyledButton",
-  componentId: "sc-1nryhyt-1"
-})(["", ";width:", ";text-align:center;line-height:", ";color:", ";border-radius:", ";border:", ";cursor:pointer;", ";", ";"], themes_["mixins"].reset('block'), Object(themes_["pick"])({
-  enterprise: '2em',
-  prisma: '36px'
-}), Object(themes_["pick"])({
+})(["left:0;line-height:", ";position:absolute;top:0;width:100%;"], Object(themes_["pick"])({
   enterprise: '2em',
   prisma: '36px '
+}));
+var StyledInner = external_styled_components_default.a.div.withConfig({
+  displayName: "DayStyles__StyledInner",
+  componentId: "sc-1nryhyt-1"
+})(["border:", ";border-radius:", ";color:", ";height:", ";position:relative;text-align:center;width:", ";"], Object(themes_["pick"])({
+  enterprise: '1px solid transparent',
+  prisma: 'none'
+}), Object(themes_["pick"])({
+  enterprise: themes_["variables"].borderRadius,
+  prisma: '50%'
 }), Object(themes_["pick"])({
   enterprise: {
     light: themes_["variables"].gray45,
@@ -166,32 +206,56 @@ var StyledButton = external_styled_components_default.a.button.withConfig({
   },
   prisma: themes_["variables"].contentColorActive
 }), Object(themes_["pick"])({
-  enterprise: themes_["variables"].borderRadius,
-  prisma: '50%'
+  enterprise: '2em',
+  prisma: '36px '
 }), Object(themes_["pick"])({
-  enterprise: '1px solid transparent',
-  prisma: 'none'
-}), Object(themes_["pickVariant"])('$today', {
+  enterprise: 'calc(2em - 2px)',
+  prisma: '36px'
+}));
+var StyledCell = external_styled_components_default.a.td.withConfig({
+  displayName: "DayStyles__StyledCell",
+  componentId: "sc-1nryhyt-2"
+})(["", ";cursor:pointer;", ";", ";"], themes_["mixins"].reset('table-cell'), Object(themes_["pickVariant"])('$today', {
   "true": {
-    enterprise: Object(external_styled_components_["css"])(["background-color:", ";&:focus{box-shadow:", ";}"], Object(themes_["pick"])({
+    enterprise: Object(external_styled_components_["css"])(["& > ", "{background-color:", ";}&:focus{& > ", "{box-shadow:", ";}}"],
+    /* sc-sel */
+    StyledInner, Object(themes_["pick"])({
       light: themes_["variables"].gray92,
       dark: themes_["variables"].gray45
-    }), themes_["variables"].focusShadow),
-    prisma: Object(external_styled_components_["css"])(["box-shadow:inset 0 0 0 1px ", ";&:focus{box-shadow:inset 0 0 0 1px ", ",", ";}"], themes_["variables"].interactiveColorBorder, themes_["variables"].interactiveColorBorder, themes_["variables"].focusShadow)
+    }),
+    /* sc-sel */
+    StyledInner, themes_["variables"].focusShadow),
+    prisma: Object(external_styled_components_["css"])(["& > ", "{box-shadow:inset 0 0 0 1px ", ";}&:focus{& > ", "{box-shadow:inset 0 0 0 1px ", ",", ";}}"],
+    /* sc-sel */
+    StyledInner, themes_["variables"].interactiveColorBorder,
+    /* sc-sel */
+    StyledInner, themes_["variables"].interactiveColorBorder, themes_["variables"].focusShadow)
   },
-  "false": Object(external_styled_components_["css"])(["&:focus{box-shadow:", ";}"], themes_["variables"].focusShadow)
+  "false": Object(external_styled_components_["css"])(["&:focus{& > ", "{box-shadow:", ";}}"],
+  /* sc-sel */
+  StyledInner, themes_["variables"].focusShadow)
 }), Object(themes_["pickVariant"])('$selected', {
   "true": Object(themes_["pick"])({
-    enterprise: Object(external_styled_components_["css"])(["border-color:", ";"], themes_["variables"].linkColor),
-    prisma: Object(external_styled_components_["css"])(["font-weight:", ";background-color:", ";"], themes_["variables"].fontWeightBold, themes_["variables"].interactiveColorOverlaySelected)
+    enterprise: Object(external_styled_components_["css"])(["& > ", "{border-color:", ";}"],
+    /* sc-sel */
+    StyledInner, themes_["variables"].linkColor),
+    prisma: Object(external_styled_components_["css"])(["& > ", "{background-color:", ";font-weight:", ";}"],
+    /* sc-sel */
+    StyledInner, themes_["variables"].interactiveColorOverlaySelected, themes_["variables"].fontWeightBold)
   }),
   "false": Object(themes_["pick"])({
-    enterprise: Object(external_styled_components_["css"])(["&:hover{color:", ";background-color:", ";}"], themes_["variables"].linkColor, themes_["variables"].backgroundColorHover),
-    prisma: Object(external_styled_components_["css"])(["&:hover{background-color:", ";}"], themes_["variables"].interactiveColorOverlayHover)
+    enterprise: Object(external_styled_components_["css"])(["&:hover{& > ", "{background-color:", ";color:", ";}}"],
+    /* sc-sel */
+    StyledInner, themes_["variables"].backgroundColorHover, themes_["variables"].linkColor),
+    prisma: Object(external_styled_components_["css"])(["&:hover{& > ", "{background-color:", ";}}"],
+    /* sc-sel */
+    StyledInner, themes_["variables"].interactiveColorOverlayHover)
   })
 }));
 
 // CONCATENATED MODULE: ./src/Calendar/Day.tsx
+function _extends() { _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; }; return _extends.apply(this, arguments); }
+
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -201,40 +265,53 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 
 var propTypes = {
+  active: external_prop_types_default.a.bool,
   locale: external_prop_types_default.a.string,
   onClick: external_prop_types_default.a.func,
+  onKeydown: external_prop_types_default.a.func,
   selected: external_prop_types_default.a.bool,
   today: external_prop_types_default.a.bool,
   value: external_prop_types_default.a.string
 };
 
 function Day(_ref) {
-  var _ref$locale = _ref.locale,
+  var _ref$active = _ref.active,
+      active = _ref$active === void 0 ? false : _ref$active,
+      _ref$locale = _ref.locale,
       locale = _ref$locale === void 0 ? 'en_US' : _ref$locale,
       onClick = _ref.onClick,
+      onKeyDown = _ref.onKeyDown,
       _ref$selected = _ref.selected,
       selected = _ref$selected === void 0 ? false : _ref$selected,
       _ref$today = _ref.today,
       today = _ref$today === void 0 ? false : _ref$today,
       value = _ref.value,
-      otherProps = _objectWithoutProperties(_ref, ["locale", "onClick", "selected", "today", "value"]);
+      otherProps = _objectWithoutProperties(_ref, ["active", "locale", "onClick", "onKeyDown", "selected", "today", "value"]);
 
   var handleClick = Object(external_react_["useCallback"])(function (e) {
+    e.preventDefault();
     onClick === null || onClick === void 0 ? void 0 : onClick(e, {
       value: value
     });
   }, [onClick, value]);
+  var handleKeyDown = Object(external_react_["useCallback"])(function (e) {
+    e.preventDefault();
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e, {
+      value: value
+    });
+  }, [onKeyDown, value]);
   var day = value && external_moment_default()(value, 'YYYY-MM-DD', locale).format('D');
-  return /*#__PURE__*/external_react_default.a.createElement(Styled, otherProps, /*#__PURE__*/external_react_default.a.createElement(StyledButton, {
-    tabIndex: selected ? -1 : undefined,
-    "aria-checked": selected,
+  return /*#__PURE__*/external_react_default.a.createElement(StyledCell, _extends({
+    tabIndex: active ? 0 : -1,
+    "aria-selected": selected,
     "data-test-day": day,
     "data-test": "day-of-month",
+    "data-active-day": active,
     onClick: handleClick,
+    onKeyDown: handleKeyDown,
     $today: today,
-    $selected: selected,
-    role: "menuitemradio"
-  }, day));
+    $selected: selected
+  }, otherProps), /*#__PURE__*/external_react_default.a.createElement(StyledInner, null, /*#__PURE__*/external_react_default.a.createElement(StyledValue, null, day)));
 }
 
 Day.propTypes = propTypes;
@@ -242,7 +319,7 @@ Day.propTypes = propTypes;
 // CONCATENATED MODULE: ./src/Calendar/DateTableStyles.ts
 
 
-var DateTableStyles_Styled = external_styled_components_default.a.table.withConfig({
+var Styled = external_styled_components_default.a.table.withConfig({
   displayName: "DateTableStyles__Styled",
   componentId: "sc-1lbrjq0-0"
 })(["", ";table-layout:fixed;border-spacing:", ";width:", ";margin:", ";"], themes_["mixins"].reset('table'), Object(themes_["pick"])({
@@ -267,7 +344,7 @@ var StyledTableHeader = external_styled_components_default.a.th.withConfig({
 }));
 
 // CONCATENATED MODULE: ./src/Calendar/DateTable.tsx
-function _extends() { _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; }; return _extends.apply(this, arguments); }
+function DateTable_extends() { DateTable_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; }; return DateTable_extends.apply(this, arguments); }
 
 function DateTable_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = DateTable_objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
@@ -280,12 +357,15 @@ function DateTable_objectWithoutPropertiesLoose(source, excluded) { if (source =
 
 
 
+
+
 var DateTable_propTypes = {
   displayValue: external_prop_types_default.a.string.isRequired,
   highlightToday: external_prop_types_default.a.bool,
   labelledBy: external_prop_types_default.a.string,
   locale: external_prop_types_default.a.string,
   onChange: external_prop_types_default.a.func,
+  onInternalChange: external_prop_types_default.a.func,
   selectedValue: external_prop_types_default.a.string.isRequired,
   todayValue: external_prop_types_default.a.string
 };
@@ -299,11 +379,14 @@ function renderPaddingCells(count) {
 }
 
 function renderDays(_ref) {
-  var endDate = _ref.endDate,
+  var displayValue = _ref.displayValue,
+      endDate = _ref.endDate,
       highlightToday = _ref.highlightToday,
       locale = _ref.locale,
       onChange = _ref.onChange,
+      onKeyDown = _ref.onKeyDown,
       selectedDate = _ref.selectedDate,
+      selectedValue = _ref.selectedValue,
       startDate = _ref.startDate,
       todayValue = _ref.todayValue;
   var cursor = external_moment_default()(startDate).locale(locale).startOf('month');
@@ -312,13 +395,17 @@ function renderDays(_ref) {
   while (cursor.isSameOrBefore(endDate)) {
     var cursorString = cursor.format('YYYY-MM-DD');
     var isToday = cursorString === todayValue;
+    var isSelected = cursorString === selectedValue;
+    var isActive = cursorString === displayValue;
     days.push( /*#__PURE__*/external_react_default.a.createElement(Calendar_Day, {
       key: cursorString,
       locale: locale,
       onClick: onChange,
-      selected: selectedDate.isSame(cursor),
+      onKeyDown: onKeyDown,
+      active: selectedDate ? isActive : isToday,
       today: highlightToday && isToday,
-      value: cursorString
+      value: cursorString,
+      selected: isSelected
     }));
     cursor.add(1, 'day');
   }
@@ -346,10 +433,13 @@ function renderRows(cells) {
 
 function renderHeader(locale, dayFormat) {
   return /*#__PURE__*/external_react_default.a.createElement("thead", null, /*#__PURE__*/external_react_default.a.createElement("tr", null, Object(external_lodash_["times"])(7, function (i) {
-    var label = external_moment_default()().locale(locale).weekday(i).format(dayFormat);
+    var text = external_moment_default()().locale(locale).weekday(i).format(dayFormat);
+    var label = external_moment_default()().locale(locale).weekday(i).format('dddd');
     return /*#__PURE__*/external_react_default.a.createElement(StyledTableHeader, {
-      key: label
-    }, label);
+      key: text
+    }, /*#__PURE__*/external_react_default.a.createElement(ScreenReaderContent_default.a, null, label), /*#__PURE__*/external_react_default.a.createElement("span", {
+      "aria-hidden": true
+    }, text));
   })));
 }
 
@@ -361,9 +451,10 @@ function DateTable(_ref2) {
       _ref2$locale = _ref2.locale,
       locale = _ref2$locale === void 0 ? 'en_US' : _ref2$locale,
       onChange = _ref2.onChange,
+      onInternalChange = _ref2.onInternalChange,
       selectedValue = _ref2.selectedValue,
       todayValue = _ref2.todayValue,
-      otherProps = DateTable_objectWithoutProperties(_ref2, ["displayValue", "highlightToday", "labelledBy", "locale", "onChange", "selectedValue", "todayValue"]);
+      otherProps = DateTable_objectWithoutProperties(_ref2, ["displayValue", "highlightToday", "labelledBy", "locale", "onChange", "onInternalChange", "selectedValue", "todayValue"]);
 
   var _useSplunkTheme = Object(themes_["useSplunkTheme"])(),
       family = _useSplunkTheme.family;
@@ -373,26 +464,170 @@ function DateTable(_ref2) {
   var selectedDate = external_moment_default()(selectedValue, 'YYYY-MM-DD', locale);
   var startDate = external_moment_default()(displayDate).startOf('month');
   var endDate = external_moment_default()(displayDate).endOf('month').startOf('day');
+
+  var handleOnChange = function handleOnChange(event, data) {
+    event.preventDefault();
+    onChange === null || onChange === void 0 ? void 0 : onChange(event, data);
+  };
+
+  var handlePreviousDay = function handlePreviousDay(event, _ref3) {
+    var value = _ref3.value;
+    event.preventDefault();
+    onInternalChange === null || onInternalChange === void 0 ? void 0 : onInternalChange(event, {
+      value: external_moment_default()(value, 'YYYY-MM-DD').add(-1, 'd').format('YYYY-MM-DD')
+    });
+  };
+
+  var handleNextDay = function handleNextDay(event, _ref4) {
+    var value = _ref4.value;
+    event.preventDefault();
+    onInternalChange === null || onInternalChange === void 0 ? void 0 : onInternalChange(event, {
+      value: external_moment_default()(value, 'YYYY-MM-DD').add(1, 'd').format('YYYY-MM-DD')
+    });
+  };
+
+  var handlePreviousWeek = function handlePreviousWeek(event, _ref5) {
+    var value = _ref5.value;
+    event.preventDefault();
+    onInternalChange === null || onInternalChange === void 0 ? void 0 : onInternalChange(event, {
+      value: external_moment_default()(value, 'YYYY-MM-DD').add(-1, 'w').format('YYYY-MM-DD')
+    });
+  };
+
+  var handleNextWeek = function handleNextWeek(event, _ref6) {
+    var value = _ref6.value;
+    event.preventDefault();
+    onInternalChange === null || onInternalChange === void 0 ? void 0 : onInternalChange(event, {
+      value: external_moment_default()(value, 'YYYY-MM-DD').add(1, 'w').format('YYYY-MM-DD')
+    });
+  };
+
+  var handlePreviousMonth = function handlePreviousMonth(event, _ref7) {
+    var value = _ref7.value;
+    event.preventDefault();
+    onInternalChange === null || onInternalChange === void 0 ? void 0 : onInternalChange(event, {
+      value: external_moment_default()(value, 'YYYY-MM-DD').add(-1, 'M').format('YYYY-MM-DD')
+    });
+  };
+
+  var handleNextMonth = function handleNextMonth(event, _ref8) {
+    var value = _ref8.value;
+    event.preventDefault();
+    onInternalChange === null || onInternalChange === void 0 ? void 0 : onInternalChange(event, {
+      value: external_moment_default()(value, 'YYYY-MM-DD').add(1, 'M').format('YYYY-MM-DD')
+    });
+  };
+
+  var handlePreviousYear = function handlePreviousYear(event, _ref9) {
+    var value = _ref9.value;
+    event.preventDefault();
+    onInternalChange === null || onInternalChange === void 0 ? void 0 : onInternalChange(event, {
+      value: external_moment_default()(value, 'YYYY-MM-DD').add(-1, 'y').format('YYYY-MM-DD')
+    });
+  };
+
+  var handleNextYear = function handleNextYear(event, _ref10) {
+    var value = _ref10.value;
+    event.preventDefault();
+    onInternalChange === null || onInternalChange === void 0 ? void 0 : onInternalChange(event, {
+      value: external_moment_default()(value, 'YYYY-MM-DD').add(1, 'y').format('YYYY-MM-DD')
+    });
+  };
+
+  var handleStartOfWeek = function handleStartOfWeek(event, _ref11) {
+    var value = _ref11.value;
+    event.preventDefault();
+    onInternalChange === null || onInternalChange === void 0 ? void 0 : onInternalChange(event, {
+      value: external_moment_default()(value, 'YYYY-MM-DD').startOf('week').format('YYYY-MM-DD')
+    });
+  };
+
+  var handleEndOfWeek = function handleEndOfWeek(event, _ref12) {
+    var value = _ref12.value;
+    event.preventDefault();
+    onInternalChange === null || onInternalChange === void 0 ? void 0 : onInternalChange(event, {
+      value: external_moment_default()(value, 'YYYY-MM-DD').endOf('week').format('YYYY-MM-DD')
+    });
+  };
+
+  var handleKeyDown = function handleKeyDown(event, data) {
+    var eventKeyCode = Object(keyboard_["keycode"])(event.nativeEvent);
+
+    switch (eventKeyCode) {
+      case 'enter':
+      case 'space':
+        handleOnChange(event, data);
+        break;
+
+      case 'up':
+        handlePreviousWeek(event, data);
+        break;
+
+      case 'down':
+        handleNextWeek(event, data);
+        break;
+
+      case 'left':
+        handlePreviousDay(event, data);
+        break;
+
+      case 'right':
+        handleNextDay(event, data);
+        break;
+
+      case 'page up':
+        if (event.shiftKey) {
+          handlePreviousYear(event, data);
+        } else {
+          handlePreviousMonth(event, data);
+        }
+
+        break;
+
+      case 'page down':
+        if (event.shiftKey) {
+          handleNextYear(event, data);
+        } else {
+          handleNextMonth(event, data);
+        }
+
+        break;
+
+      case 'home':
+        handleStartOfWeek(event, data);
+        break;
+
+      case 'end':
+        handleEndOfWeek(event, data);
+        break;
+
+      default: // do nothing
+
+    }
+  };
+
   var cells = renderPaddingCells(startDate.format('e')).concat(renderDays({
-    highlightToday: highlightToday,
-    selectedDate: selectedDate,
-    startDate: startDate,
+    displayValue: displayValue,
     endDate: endDate,
+    highlightToday: highlightToday,
     locale: locale,
     onChange: onChange,
+    onKeyDown: handleKeyDown,
+    selectedDate: selectedDate,
+    selectedValue: selectedValue,
+    startDate: startDate,
     todayValue: todayValue
   })).concat(renderPaddingCells(6 - endDate.format('e')));
-  return /*#__PURE__*/external_react_default.a.createElement("div", {
-    role: "menu"
-  }, /*#__PURE__*/external_react_default.a.createElement(DateTableStyles_Styled, _extends({
+  return /*#__PURE__*/external_react_default.a.createElement(Styled, DateTable_extends({
+    role: "grid",
     "aria-labelledby": labelledBy
-  }, otherProps), renderHeader(locale, dayFormat), /*#__PURE__*/external_react_default.a.createElement("tbody", null, renderRows(cells))));
+  }, otherProps), renderHeader(locale, dayFormat), /*#__PURE__*/external_react_default.a.createElement("tbody", null, renderRows(cells)));
 }
 
 DateTable.propTypes = DateTable_propTypes;
 /* harmony default export */ var Calendar_DateTable = (DateTable);
 // EXTERNAL MODULE: external "lodash/omit"
-var omit_ = __webpack_require__(45);
+var omit_ = __webpack_require__(47);
 var omit_default = /*#__PURE__*/__webpack_require__.n(omit_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Button"
@@ -403,10 +638,10 @@ var Button_default = /*#__PURE__*/__webpack_require__.n(Button_);
 var i18n_ = __webpack_require__(5);
 
 // EXTERNAL MODULE: ./src/icons/ChevronLeft.tsx
-var ChevronLeft = __webpack_require__(59);
+var ChevronLeft = __webpack_require__(62);
 
 // EXTERNAL MODULE: ./src/icons/ChevronRight.tsx
-var ChevronRight = __webpack_require__(27);
+var ChevronRight = __webpack_require__(29);
 
 // CONCATENATED MODULE: ./src/Calendar/MonthHeaderStyles.ts
 
@@ -509,6 +744,7 @@ var MonthHeader_MonthHeader = /*#__PURE__*/function (_Component) {
     value: function handleChange(e, diff) {
       var _this$props$onChange, _this$props;
 
+      e.stopPropagation();
       var newValue = external_moment_default()(this.props.value, 'YYYY-MM-DD').add(diff, 'M').format('YYYY-MM-DD');
       (_this$props$onChange = (_this$props = this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, e, {
         value: newValue
@@ -613,6 +849,9 @@ var CalendarStyles_StyledBox = external_styled_components_default()(Box_default.
   prisma: themes_["variables"].spacingLarge
 }));
 
+// EXTERNAL MODULE: ./src/utils/updateReactRef.ts
+var updateReactRef = __webpack_require__(10);
+
 // CONCATENATED MODULE: ./src/Calendar/Calendar.tsx
 function Calendar_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { Calendar_typeof = function _typeof(obj) { return typeof obj; }; } else { Calendar_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return Calendar_typeof(obj); }
 
@@ -648,13 +887,16 @@ function Calendar_defineProperty(obj, key, value) { if (key in obj) { Object.def
 
 
 
+
+var calendarActiveSelector = '[data-active-day="true"]';
 var Calendar_propTypes = {
   describedBy: external_prop_types_default.a.string,
   highlightToday: external_prop_types_default.a.bool,
   labelledBy: external_prop_types_default.a.string,
   locale: external_prop_types_default.a.string,
   onChange: external_prop_types_default.a.func,
-  value: external_prop_types_default.a.string
+  value: external_prop_types_default.a.string,
+  elementRef: external_prop_types_default.a.oneOfType([external_prop_types_default.a.func, external_prop_types_default.a.object])
 };
 var Calendar_defaultProps = {
   locale: 'en_US',
@@ -677,19 +919,38 @@ var Calendar_Calendar = /*#__PURE__*/function (_Component) {
 
     Calendar_defineProperty(Calendar_assertThisInitialized(_this), "todayTimerId", void 0);
 
+    Calendar_defineProperty(Calendar_assertThisInitialized(_this), "calendarRef", void 0);
+
     Calendar_defineProperty(Calendar_assertThisInitialized(_this), "handleMonthChange", function (e, _ref) {
       var value = _ref.value;
 
       _this.setState({
-        internalValue: value
+        internalValue: value,
+        source: 'month'
+      });
+    });
+
+    Calendar_defineProperty(Calendar_assertThisInitialized(_this), "handleDayChange", function (e, _ref2) {
+      var value = _ref2.value;
+
+      _this.setState({
+        internalValue: value,
+        source: 'day'
       });
     });
 
+    Calendar_defineProperty(Calendar_assertThisInitialized(_this), "handleCalendarMount", function (el) {
+      Object(updateReactRef["a" /* updateReactRef */])(_this.calendarRef, el);
+      Object(updateReactRef["a" /* updateReactRef */])(_this.props.elementRef, el);
+    });
+
     _this.state = {
       internalValue: props.value,
-      todayValue: _this.getToday()
+      todayValue: _this.getToday(),
+      source: null
     };
     _this.monthHeaderId = Object(id_["createDOMID"])('header');
+    _this.calendarRef = /*#__PURE__*/external_react_default.a.createRef();
 
     if (false) {}
 
@@ -720,8 +981,24 @@ var Calendar_Calendar = /*#__PURE__*/function (_Component) {
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
+    value: function componentDidUpdate(prevProps, prevState) {
       if (false) {}
+
+      if (this.state.internalValue !== prevState.internalValue && this.state.source === 'day') {
+        this.focusActiveDay();
+      }
+    }
+    /**
+     * Place focus on the active day.
+     */
+
+  }, {
+    key: "focusActiveDay",
+    value: function focusActiveDay() {
+      var _this$calendarRef, _this$calendarRef$cur;
+
+      var current = (_this$calendarRef = this.calendarRef) === null || _this$calendarRef === void 0 ? void 0 : (_this$calendarRef$cur = _this$calendarRef.current) === null || _this$calendarRef$cur === void 0 ? void 0 : _this$calendarRef$cur.querySelector(calendarActiveSelector);
+      current === null || current === void 0 ? void 0 : current.focus();
     }
   }, {
     key: "getToday",
@@ -746,7 +1023,9 @@ var Calendar_Calendar = /*#__PURE__*/function (_Component) {
         inline: true,
         "aria-labelledby": labelledBy,
         "aria-describedby": describedBy
-      }, Object(external_lodash_["omit"])(this.props, Object(external_lodash_["keys"])(Calendar.propTypes))), /*#__PURE__*/external_react_default.a.createElement(Calendar_MonthHeader, {
+      }, Object(external_lodash_["omit"])(this.props, Object(external_lodash_["keys"])(Calendar.propTypes)), {
+        elementRef: this.handleCalendarMount
+      }), /*#__PURE__*/external_react_default.a.createElement(Calendar_MonthHeader, {
         headingId: this.monthHeaderId,
         locale: locale,
         onChange: this.handleMonthChange,
@@ -757,6 +1036,7 @@ var Calendar_Calendar = /*#__PURE__*/function (_Component) {
         labelledBy: this.monthHeaderId,
         locale: locale,
         onChange: onChange,
+        onInternalChange: this.handleDayChange,
         selectedValue: value,
         todayValue: todayValue
       }));
@@ -780,10 +1060,18 @@ Calendar_defineProperty(Calendar_Calendar, "propTypes", Calendar_propTypes);
 Calendar_defineProperty(Calendar_Calendar, "defaultProps", Calendar_defaultProps);
 
 /* harmony default export */ var src_Calendar_Calendar = (Calendar_Calendar);
+
 // CONCATENATED MODULE: ./src/Calendar/index.ts
 
 
 
+/***/ }),
+
+/***/ 14:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/ScreenReaderContent");
+
 /***/ }),
 
 /***/ 16:
@@ -793,28 +1081,28 @@ module.exports = require("@splunk/react-ui/Button");
 
 /***/ }),
 
-/***/ 2:
+/***/ 17:
 /***/ (function(module, exports) {
 
-module.exports = require("react");
+module.exports = require("moment");
 
 /***/ }),
 
-/***/ 22:
+/***/ 2:
 /***/ (function(module, exports) {
 
-module.exports = require("moment");
+module.exports = require("react");
 
 /***/ }),
 
-/***/ 27:
+/***/ 29:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ChevronRight; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_react_icons_ChevronRight__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(33);
+/* harmony import */ var _splunk_react_icons_ChevronRight__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(35);
 /* harmony import */ var _splunk_react_icons_ChevronRight__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_ChevronRight__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _ThemedIcon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
 /* harmony import */ var _SVG__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6);
@@ -864,7 +1152,7 @@ module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 33:
+/***/ 35:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/ChevronRight");
@@ -878,7 +1166,7 @@ module.exports = require("lodash");
 
 /***/ }),
 
-/***/ 45:
+/***/ 47:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/omit");
@@ -892,14 +1180,39 @@ module.exports = require("@splunk/ui-utils/i18n");
 
 /***/ }),
 
-/***/ 59:
+/***/ 6:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return SVG; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_1__);
+function _extends() { _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; }; return _extends.apply(this, arguments); }
+
+
+
+var Styled = styled_components__WEBPACK_IMPORTED_MODULE_1___default.a.svg.withConfig({
+  displayName: "SVG__Styled",
+  componentId: "sc-1bz0ryh-0"
+})(["flex:0 0 auto;"]);
+function SVG(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(Styled, _extends({
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props));
+}
+
+/***/ }),
+
+/***/ 62:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ChevronLeft; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_react_icons_ChevronLeft__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(60);
+/* harmony import */ var _splunk_react_icons_ChevronLeft__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(63);
 /* harmony import */ var _splunk_react_icons_ChevronLeft__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_ChevronLeft__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _ThemedIcon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
 /* harmony import */ var _SVG__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6);
@@ -942,32 +1255,7 @@ function ChevronLeft(props) {
 
 /***/ }),
 
-/***/ 6:
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return SVG; });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_1__);
-function _extends() { _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; }; return _extends.apply(this, arguments); }
-
-
-
-var Styled = styled_components__WEBPACK_IMPORTED_MODULE_1___default.a.svg.withConfig({
-  displayName: "SVG__Styled",
-  componentId: "sc-1bz0ryh-0"
-})(["flex:0 0 auto;"]);
-function SVG(props) {
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(Styled, _extends({
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props));
-}
-
-/***/ }),
-
-/***/ 60:
+/***/ 63:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/ChevronLeft");
@@ -1097,6 +1385,13 @@ Icon.defaultProps = defaultProps;
 
 module.exports = require("@splunk/react-ui/Box");
 
+/***/ }),
+
+/***/ 9:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/ui-utils/keyboard");
+
 /***/ })
 
 /******/ });