@splunk/react-ui 4.13.0 → 4.15.0

package/Calendar.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 117);
+/******/ 	return __webpack_require__(__webpack_require__.s = 169);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -104,11 +104,52 @@ module.exports = require("prop-types");
 /***/ 10:
 /***/ (function(module, exports) {
 
+module.exports = require("lodash/keys");
+
+/***/ }),
+
+/***/ 12:
+/***/ (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
+    }
+  }
+}
+
+
+
+/***/ }),
+
+/***/ 13:
+/***/ (function(module, exports) {
+
 module.exports = require("@splunk/ui-utils/id");
 
 /***/ }),
 
-/***/ 117:
+/***/ 16:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/ScreenReaderContent");
+
+/***/ }),
+
+/***/ 169:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -117,6 +158,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);
@@ -126,19 +168,35 @@ var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_)
 var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
-// EXTERNAL MODULE: external "lodash"
-var external_lodash_ = __webpack_require__(4);
+// EXTERNAL MODULE: external "lodash/keys"
+var keys_ = __webpack_require__(10);
+var keys_default = /*#__PURE__*/__webpack_require__.n(keys_);
+
+// EXTERNAL MODULE: external "lodash/omit"
+var omit_ = __webpack_require__(5);
+var omit_default = /*#__PURE__*/__webpack_require__.n(omit_);
 
 // EXTERNAL MODULE: external "moment"
 var external_moment_ = __webpack_require__(22);
 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__(13);
+
+// EXTERNAL MODULE: external "lodash/times"
+var times_ = __webpack_require__(78);
+var times_default = /*#__PURE__*/__webpack_require__.n(times_);
 
 // 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__(16);
+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 +204,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 +229,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 +288,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 +342,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 +367,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,18 +380,21 @@ 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
 };
 
 function renderPaddingCells(count) {
-  return Object(external_lodash_["times"])(count, function (i) {
+  return times_default()(count, function (i) {
     return /*#__PURE__*/external_react_default.a.createElement("td", {
       key: "".concat(i)
     });
@@ -299,11 +402,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 +418,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');
   }
@@ -331,7 +441,7 @@ function renderRows(cells) {
     var row = Math.floor(i / 7);
     accum[row].push(el);
     return accum;
-  }, Object(external_lodash_["times"])(7, function () {
+  }, times_default()(7, function () {
     return [];
   })).map(function (row, i) {
     return (
@@ -345,11 +455,14 @@ 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);
+  return /*#__PURE__*/external_react_default.a.createElement("thead", null, /*#__PURE__*/external_react_default.a.createElement("tr", null, times_default()(7, function (i) {
+    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 +474,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,40 +487,180 @@ 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_default = /*#__PURE__*/__webpack_require__.n(omit_);
-
 // EXTERNAL MODULE: external "@splunk/react-ui/Button"
-var Button_ = __webpack_require__(16);
+var Button_ = __webpack_require__(19);
 var Button_default = /*#__PURE__*/__webpack_require__.n(Button_);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
-var i18n_ = __webpack_require__(5);
+var i18n_ = __webpack_require__(4);
 
 // EXTERNAL MODULE: ./src/icons/ChevronLeft.tsx
-var ChevronLeft = __webpack_require__(60);
+var ChevronLeft = __webpack_require__(83);
 
 // EXTERNAL MODULE: ./src/icons/ChevronRight.tsx
-var ChevronRight = __webpack_require__(27);
+var ChevronRight = __webpack_require__(37);
 
 // CONCATENATED MODULE: ./src/Calendar/MonthHeaderStyles.ts
 
@@ -509,6 +763,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 +868,9 @@ var CalendarStyles_StyledBox = external_styled_components_default()(Box_default.
   prisma: themes_["variables"].spacingLarge
 }));
 
+// EXTERNAL MODULE: ./src/utils/updateReactRef.ts
+var updateReactRef = __webpack_require__(12);
+
 // 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 +906,20 @@ 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
+
+  /** @private. */
+  required: external_prop_types_default.a.bool,
+  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 +942,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 +1004,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",
@@ -738,6 +1038,7 @@ var Calendar_Calendar = /*#__PURE__*/function (_Component) {
           labelledBy = _this$props.labelledBy,
           locale = _this$props.locale,
           onChange = _this$props.onChange,
+          required = _this$props.required,
           value = _this$props.value;
       var _this$state = this.state,
           internalValue = _this$state.internalValue,
@@ -745,8 +1046,11 @@ var Calendar_Calendar = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/external_react_default.a.createElement(CalendarStyles_StyledBox, Calendar_extends({
         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, {
+        "aria-describedby": describedBy,
+        "aria-required": required
+      }, omit_default()(this.props, keys_default()(Calendar.propTypes)), {
+        elementRef: this.handleCalendarMount
+      }), /*#__PURE__*/external_react_default.a.createElement(Calendar_MonthHeader, {
         headingId: this.monthHeaderId,
         locale: locale,
         onChange: this.handleMonthChange,
@@ -757,6 +1061,7 @@ var Calendar_Calendar = /*#__PURE__*/function (_Component) {
         labelledBy: this.monthHeaderId,
         locale: locale,
         onChange: onChange,
+        onInternalChange: this.handleDayChange,
         selectedValue: value,
         todayValue: todayValue
       }));
@@ -780,13 +1085,14 @@ 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
 
 
 
 /***/ }),
 
-/***/ 16:
+/***/ 19:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Button");
@@ -807,14 +1113,21 @@ module.exports = require("moment");
 
 /***/ }),
 
-/***/ 27:
+/***/ 3:
+/***/ (function(module, exports) {
+
+module.exports = require("styled-components");
+
+/***/ }),
+
+/***/ 37:
 /***/ (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__(44);
 /* 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);
@@ -857,38 +1170,24 @@ function ChevronRight(props) {
 
 /***/ }),
 
-/***/ 3:
-/***/ (function(module, exports) {
-
-module.exports = require("styled-components");
-
-/***/ }),
-
-/***/ 33:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-icons/ChevronRight");
-
-/***/ }),
-
 /***/ 4:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash");
+module.exports = require("@splunk/ui-utils/i18n");
 
 /***/ }),
 
-/***/ 45:
+/***/ 44:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash/omit");
+module.exports = require("@splunk/react-icons/ChevronRight");
 
 /***/ }),
 
 /***/ 5:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/ui-utils/i18n");
+module.exports = require("lodash/omit");
 
 /***/ }),
 
@@ -917,63 +1216,6 @@ function SVG(props) {
 
 /***/ }),
 
-/***/ 60:
-/***/ (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__(61);
-/* 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);
-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 Prisma24(_ref) {
-  var otherProps = _extends({}, _ref);
-
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_SVG__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"], _extends({
-    viewBox: "0 0 24 24"
-  }, otherProps), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("path", {
-    d: "M9.21394 12L15.5141 5.69985C15.9046 5.30933 15.9046 4.67616 15.5141 4.28564C15.1236 3.89511 14.4904 3.89511 14.0999 4.28564L7.44618 10.9394C6.86039 11.5252 6.86039 12.4749 7.44618 13.0607L14.0999 19.7144C14.4904 20.105 15.1236 20.105 15.5141 19.7144C15.9046 19.3239 15.9046 18.6907 15.5141 18.3002L9.21394 12Z",
-    fill: "currentColor"
-  }));
-}
-
-function Prisma16(_ref2) {
-  var otherProps = _extends({}, _ref2);
-
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_SVG__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"], _extends({
-    viewBox: "0 0 16 16"
-  }, otherProps), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("path", {
-    d: "M4.28906 7.9976L10.2898 13.9983L11.704 12.5841L7.11086 7.99095L11.6552 3.40363L10.2343 1.99609L4.28906 7.9976Z",
-    fill: "currentColor"
-  }));
-}
-
-function ChevronLeft(props) {
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_ThemedIcon__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"], _extends({
-    Enterprise: _splunk_react_icons_ChevronLeft__WEBPACK_IMPORTED_MODULE_1___default.a,
-    Prisma16: Prisma16,
-    Prisma24: Prisma24
-  }, props));
-}
-
-/***/ }),
-
-/***/ 61:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-icons/ChevronLeft");
-
-/***/ }),
-
 /***/ 7:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -1092,11 +1334,82 @@ Icon.defaultProps = defaultProps;
 
 /***/ }),
 
+/***/ 78:
+/***/ (function(module, exports) {
+
+module.exports = require("lodash/times");
+
+/***/ }),
+
 /***/ 8:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Box");
 
+/***/ }),
+
+/***/ 83:
+/***/ (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__(84);
+/* 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);
+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 Prisma24(_ref) {
+  var otherProps = _extends({}, _ref);
+
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_SVG__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"], _extends({
+    viewBox: "0 0 24 24"
+  }, otherProps), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("path", {
+    d: "M9.21394 12L15.5141 5.69985C15.9046 5.30933 15.9046 4.67616 15.5141 4.28564C15.1236 3.89511 14.4904 3.89511 14.0999 4.28564L7.44618 10.9394C6.86039 11.5252 6.86039 12.4749 7.44618 13.0607L14.0999 19.7144C14.4904 20.105 15.1236 20.105 15.5141 19.7144C15.9046 19.3239 15.9046 18.6907 15.5141 18.3002L9.21394 12Z",
+    fill: "currentColor"
+  }));
+}
+
+function Prisma16(_ref2) {
+  var otherProps = _extends({}, _ref2);
+
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_SVG__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"], _extends({
+    viewBox: "0 0 16 16"
+  }, otherProps), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("path", {
+    d: "M4.28906 7.9976L10.2898 13.9983L11.704 12.5841L7.11086 7.99095L11.6552 3.40363L10.2343 1.99609L4.28906 7.9976Z",
+    fill: "currentColor"
+  }));
+}
+
+function ChevronLeft(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_ThemedIcon__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"], _extends({
+    Enterprise: _splunk_react_icons_ChevronLeft__WEBPACK_IMPORTED_MODULE_1___default.a,
+    Prisma16: Prisma16,
+    Prisma24: Prisma24
+  }, props));
+}
+
+/***/ }),
+
+/***/ 84:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-icons/ChevronLeft");
+
+/***/ }),
+
+/***/ 9:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/ui-utils/keyboard");
+
 /***/ })
 
 /******/ });