@splunk/react-ui 4.12.1 → 4.14.0

package/Date.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 138);
+/******/ 	return __webpack_require__(__webpack_require__.s = 143);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -102,13 +102,6 @@ module.exports = require("prop-types");
 /***/ }),
 
 /***/ 10:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/ui-utils/id");
-
-/***/ }),
-
-/***/ 11:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -135,7 +128,14 @@ function updateReactRef(ref, current) {
 
 /***/ }),
 
-/***/ 138:
+/***/ 11:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/ui-utils/id");
+
+/***/ }),
+
+/***/ 143:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -158,21 +158,21 @@ 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/ui-utils/keyboard"
 var keyboard_ = __webpack_require__(9);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Calendar"
-var Calendar_ = __webpack_require__(85);
+var Calendar_ = __webpack_require__(88);
 var Calendar_default = /*#__PURE__*/__webpack_require__.n(Calendar_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Popover"
-var Popover_ = __webpack_require__(17);
+var Popover_ = __webpack_require__(18);
 var Popover_default = /*#__PURE__*/__webpack_require__.n(Popover_);
 
 // EXTERNAL MODULE: external "@splunk/themes"
@@ -183,7 +183,7 @@ var external_styled_components_ = __webpack_require__(3);
 var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Text"
-var Text_ = __webpack_require__(23);
+var Text_ = __webpack_require__(24);
 var Text_default = /*#__PURE__*/__webpack_require__.n(Text_);
 
 // CONCATENATED MODULE: ./src/Date/DateStyles.ts
@@ -193,25 +193,25 @@ var Text_default = /*#__PURE__*/__webpack_require__.n(Text_);
 var StyledText = external_styled_components_default()(Text_default.a).withConfig({
   displayName: "DateStyles__StyledText",
   componentId: "kacgdc-0"
-})(["&[data-inline]{width:", ";flex-basis:", ";}"], Object(themes_["pick"])({
+})(["cursor:text;&[data-inline]{flex-basis:", ";width:", ";}"], Object(themes_["pick"])({
+  enterprise: '105px',
+  prisma: '150px'
+}), Object(themes_["pick"])({
   enterprise: {
     comfortable: '105px',
     compact: '80px'
   },
   prisma: '150px'
-}), Object(themes_["pick"])({
-  enterprise: '105px',
-  prisma: '150px'
 }));
 var IconContainer = external_styled_components_default.a.div.withConfig({
   displayName: "DateStyles__IconContainer",
   componentId: "kacgdc-1"
-})(["display:flex;align-items:center;padding:", ";color:", ";pointer-events:none;"], Object(themes_["pick"])({
-  comfortable: '0 8px',
-  compact: '0 6px'
-}), Object(themes_["pickVariant"])('$disabled', {
+})(["align-items:center;color:", ";display:flex;padding:", ";pointer-events:none;"], Object(themes_["pickVariant"])('$disabled', {
   "false": themes_["variables"].contentColorMuted,
   "true": themes_["variables"].contentColorDisabled
+}), Object(themes_["pick"])({
+  comfortable: '0 8px',
+  compact: '0 6px'
 }));
 
 // CONCATENATED MODULE: ./src/Date/Icon.tsx
@@ -235,7 +235,7 @@ function CalendarIcon(props) {
   }));
 }
 // EXTERNAL MODULE: ./src/utils/updateReactRef.ts
-var updateReactRef = __webpack_require__(11);
+var updateReactRef = __webpack_require__(10);
 
 // CONCATENATED MODULE: ./src/Date/Date.tsx
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -285,6 +285,7 @@ var propTypes = {
   highlightToday: external_prop_types_default.a.bool,
   inline: external_prop_types_default.a.bool,
   inputId: external_prop_types_default.a.string,
+  inputOnly: external_prop_types_default.a.bool,
   labelledBy: external_prop_types_default.a.string,
   locale: external_prop_types_default.a.string,
   name: external_prop_types_default.a.string,
@@ -303,6 +304,7 @@ var defaultProps = {
   error: false,
   highlightToday: false,
   inline: true,
+  inputOnly: false,
   locale: 'en_US'
 };
 
@@ -337,6 +339,10 @@ var _Date = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "popoverId", void 0);
 
+    _defineProperty(_assertThisInitialized(_this), "calendar", null);
+
+    _defineProperty(_assertThisInitialized(_this), "openWithFocus", false);
+
     _defineProperty(_assertThisInitialized(_this), "applyTextChange", function (e) {
       var date = external_moment_default()(_this.state.tempTextInputDate, 'l', _this.props.locale);
 
@@ -385,12 +391,9 @@ var _Date = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "handleFocus", function (e) {
       var _this$props$onFocus, _this$props2;
 
-      /* SUI-930 On IE 11 this handler is essentially deferred after calling
-       * this.textInput.focus(). this.focusCalledInternally enables the focus event to be ignored
-       * when the menu closes. */
       if (_this.focusCalledInternally) {
         _this.focusCalledInternally = false;
-      } else {
+      } else if (!_this.props.inputOnly) {
         _this.setState({
           calendarOpen: true
         });
@@ -400,9 +403,13 @@ var _Date = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleClick", function (e) {
-      var _this$props$onClick, _this$props3;
+      var _this$state$anchor, _this$props$onClick, _this$props3;
+
+      if (document.activeElement !== _this.state.input && ((_this$state$anchor = _this.state.anchor) === null || _this$state$anchor === void 0 ? void 0 : _this$state$anchor.contains(e.target))) {
+        _this.focus();
+      }
 
-      if (!_this.state.calendarOpen) {
+      if (!_this.props.inputOnly && !_this.state.calendarOpen) {
         _this.setState({
           calendarOpen: true
         });
@@ -416,7 +423,7 @@ var _Date = /*#__PURE__*/function (_Component) {
 
       _this.setState({
         tempTextInputDate: value,
-        calendarOpen: true
+        calendarOpen: !_this.props.inputOnly
       });
     });
 
@@ -427,10 +434,18 @@ var _Date = /*#__PURE__*/function (_Component) {
 
       if (eventKeyCode === 'enter' || eventKeyCode === 'tab') {
         _this.applyTextChange(e);
-      } else if ((eventKeyCode === 'up' || eventKeyCode === 'down') && !_this.state.calendarOpen) {
-        _this.setState({
-          calendarOpen: true
-        });
+      } else if (!_this.props.inputOnly && eventKeyCode === 'down') {
+        e.preventDefault();
+
+        if (!_this.state.calendarOpen) {
+          _this.openWithFocus = true;
+
+          _this.setState({
+            calendarOpen: true
+          });
+        } else if (_this.calendar) {
+          _this.calendar.focusActiveDay();
+        }
       } else if (eventKeyCode === 'esc') {
         _this.setState({
           calendarOpen: false,
@@ -457,12 +472,22 @@ var _Date = /*#__PURE__*/function (_Component) {
       });
     });
 
+    _defineProperty(_assertThisInitialized(_this), "handleCalendarMount", function (el) {
+      _this.calendar = el;
+    });
+
     _defineProperty(_assertThisInitialized(_this), "handleRequestClose", function (_ref3) {
       var event = _ref3.event,
           reason = _ref3.reason;
 
       if ((reason === 'clickAway' || reason === 'escapeKey') && event !== undefined && event.target !== _this.state.anchor) {
         _this.applyTextChange(event);
+
+        if (reason === 'escapeKey') {
+          _this.focusCalledInternally = true;
+
+          _this.focus();
+        }
       }
     });
 
@@ -474,7 +499,9 @@ var _Date = /*#__PURE__*/function (_Component) {
       input: null,
       value: _this.isControlled() ? undefined : dateString
     };
-    _this.popoverId = Object(id_["createDOMID"])('calender');
+    _this.popoverId = Object(id_["createDOMID"])('calendar');
+
+    if (false) {}
 
     if (false) {}
 
@@ -483,10 +510,24 @@ var _Date = /*#__PURE__*/function (_Component) {
 
   _createClass(Date, [{
     key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
+    value: function componentDidUpdate(prevProps, prevState) {
       if (false) {}
 
       if (false) {}
+
+      if (false) {}
+      /**
+       * If `openWithFocus` and `calendarOpen` are set the user is attempting to navigate to the dropdown, but it's closed.
+       * On the first update following the state change set focus to the active day within the calendar.
+       */
+
+
+      if (this.openWithFocus && this.state.calendarOpen && prevState.calendarOpen !== this.state.calendarOpen) {
+        var _this$calendar;
+
+        this.openWithFocus = false;
+        (_this$calendar = this.calendar) === null || _this$calendar === void 0 ? void 0 : _this$calendar.focusActiveDay();
+      }
     }
   }, {
     key: "getValue",
@@ -519,12 +560,37 @@ var _Date = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this$props5 = this.props,
           highlightToday = _this$props5.highlightToday,
+          inputOnly = _this$props5.inputOnly,
+          locale = _this$props5.locale,
           splunkTheme = _this$props5.splunkTheme;
       var isPrisma = splunkTheme.isPrisma;
       var currentValue = this.getValue();
-      var startAdornment = isPrisma && /*#__PURE__*/external_react_default.a.createElement(IconContainer, {
+      var startAdornment = isPrisma && !inputOnly && /*#__PURE__*/external_react_default.a.createElement(IconContainer, {
+        "aria-hidden": true,
         $disabled: this.props.disabled
       }, /*#__PURE__*/external_react_default.a.createElement(CalendarIcon, null));
+      var children;
+      var ariaProps = {};
+
+      if (!inputOnly) {
+        ariaProps.role = 'combobox';
+        ariaProps['aria-controls'] = this.state.calendarOpen ? this.popoverId : undefined;
+        ariaProps['aria-expanded'] = this.props.disabled ? false : this.state.calendarOpen;
+        ariaProps['aria-haspopup'] = true;
+        children = /*#__PURE__*/external_react_default.a.createElement(Popover_default.a, {
+          anchor: this.state.anchor,
+          id: this.popoverId,
+          open: this.props.disabled ? false : this.state.calendarOpen,
+          onRequestClose: this.handleRequestClose
+        }, /*#__PURE__*/external_react_default.a.createElement(Calendar_default.a, {
+          ref: this.handleCalendarMount,
+          highlightToday: highlightToday,
+          locale: locale,
+          onChange: this.handleDateChange,
+          value: currentValue
+        }));
+      }
+
       return /*#__PURE__*/external_react_default.a.createElement(StyledText, Date_extends({
         autoCapitalize: "off",
         autoComplete: "off",
@@ -541,17 +607,7 @@ var _Date = /*#__PURE__*/function (_Component) {
         onKeyDown: this.handleKeyDown,
         value: this.getTextInputValue(),
         startAdornment: startAdornment
-      }, Object(external_lodash_["omit"])(this.props, 'className', 'defaultValue', 'elementRef', 'multiline', 'locale', 'onChange', 'onClick', 'onFocus', 'onKeyDown', 'onSelect', 'spellCheck', 'value')), /*#__PURE__*/external_react_default.a.createElement(Popover_default.a, {
-        anchor: this.state.anchor,
-        id: this.popoverId,
-        open: this.props.disabled ? false : this.state.calendarOpen,
-        onRequestClose: this.handleRequestClose
-      }, /*#__PURE__*/external_react_default.a.createElement(Calendar_default.a, {
-        highlightToday: highlightToday,
-        locale: this.props.locale,
-        onChange: this.handleDateChange,
-        value: currentValue
-      })));
+      }, ariaProps, Object(external_lodash_["omit"])(this.props, 'className', 'defaultValue', 'elementRef', 'inputOnly', 'multiline', 'locale', 'onChange', 'onClick', 'onFocus', 'onKeyDown', 'onSelect', 'spellCheck', 'value')), children);
     }
   }]);
 
@@ -564,6 +620,13 @@ _defineProperty(_Date, "defaultProps", defaultProps);
 
 _defineProperty(_Date, "momentFormat", 'YYYY-MM-DD');
 
+_defineProperty(_Date, "validateValue", function (value) {
+  if (!external_moment_default()(value, _Date.momentFormat).isValid()) {
+    // eslint-disable-next-line no-console
+    console.error("Invalid date string value \"".concat(value, "\" provided to Moment."));
+  }
+});
+
 var DateWithThemeBase = Object(themes_["withSplunkTheme"])(_Date);
 var DateWithTheme = DateWithThemeBase;
 DateWithTheme.propTypes = _Date.propTypes;
@@ -579,25 +642,25 @@ DateWithTheme.momentFormat = _Date.momentFormat;
 /***/ 17:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-ui/Popover");
+module.exports = require("moment");
 
 /***/ }),
 
-/***/ 2:
+/***/ 18:
 /***/ (function(module, exports) {
 
-module.exports = require("react");
+module.exports = require("@splunk/react-ui/Popover");
 
 /***/ }),
 
-/***/ 22:
+/***/ 2:
 /***/ (function(module, exports) {
 
-module.exports = require("moment");
+module.exports = require("react");
 
 /***/ }),
 
-/***/ 23:
+/***/ 24:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Text");
@@ -618,7 +681,7 @@ module.exports = require("lodash");
 
 /***/ }),
 
-/***/ 85:
+/***/ 88:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Calendar");

package/DefinitionList.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 121);
+/******/ 	return __webpack_require__(__webpack_require__.s = 126);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 121:
+/***/ 126:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

package/Divider.js

@@ -0,0 +1,194 @@
+module.exports =
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 162);
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ 0:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/themes");
+
+/***/ }),
+
+/***/ 1:
+/***/ (function(module, exports) {
+
+module.exports = require("prop-types");
+
+/***/ }),
+
+/***/ 162:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, "default", function() { return /* reexport */ Divider_Divider; });
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(2);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+
+// EXTERNAL MODULE: external "prop-types"
+var external_prop_types_ = __webpack_require__(1);
+var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
+
+// EXTERNAL MODULE: external "styled-components"
+var external_styled_components_ = __webpack_require__(3);
+var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
+
+// EXTERNAL MODULE: external "@splunk/themes"
+var themes_ = __webpack_require__(0);
+
+// CONCATENATED MODULE: ./src/Divider/DividerStyles.ts
+
+
+var StyledRule = external_styled_components_default.a.hr.withConfig({
+  displayName: "DividerStyles__StyledRule",
+  componentId: "gl6kyz-0"
+})(["", ";", ";border-color:", ";"], themes_["mixins"].reset('block'), Object(themes_["pickVariant"])('$orientation', {
+  horizontal: Object(external_styled_components_["css"])(["border-top-style:solid;border-width:1px;"]),
+  vertical: Object(external_styled_components_["css"])(["display:inline;border-left-style:solid;border-width:1px;"])
+}), Object(themes_["pick"])({
+  enterprise: themes_["variables"].borderColor,
+  prisma: themes_["variables"].neutral200
+}));
+
+// CONCATENATED MODULE: ./src/Divider/Divider.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; }
+
+
+
+
+var propTypes = {
+  elementRef: external_prop_types_default.a.oneOfType([external_prop_types_default.a.func, external_prop_types_default.a.object]),
+  orientation: external_prop_types_default.a.oneOf(['horizontal', 'vertical'])
+};
+
+function Divider(_ref) {
+  var elementRef = _ref.elementRef,
+      _ref$orientation = _ref.orientation,
+      orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation,
+      otherProps = _objectWithoutProperties(_ref, ["elementRef", "orientation"]);
+
+  // @docs-props-type DividerPropsBase
+  return /*#__PURE__*/external_react_default.a.createElement(StyledRule, _extends({
+    "data-test": "divider",
+    ref: elementRef,
+    "aria-orientation": orientation,
+    $orientation: orientation
+  }, otherProps));
+}
+
+Divider.propTypes = propTypes;
+/* harmony default export */ var Divider_Divider = (Divider);
+// CONCATENATED MODULE: ./src/Divider/index.ts
+
+
+/***/ }),
+
+/***/ 2:
+/***/ (function(module, exports) {
+
+module.exports = require("react");
+
+/***/ }),
+
+/***/ 3:
+/***/ (function(module, exports) {
+
+module.exports = require("styled-components");
+
+/***/ })
+
+/******/ });

package/Dropdown.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 176);
+/******/ 	return __webpack_require__(__webpack_require__.s = 183);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -95,13 +95,6 @@ module.exports = require("prop-types");
 /***/ }),
 
 /***/ 10:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/ui-utils/id");
-
-/***/ }),
-
-/***/ 11:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -128,14 +121,21 @@ function updateReactRef(ref, current) {
 
 /***/ }),
 
-/***/ 17:
+/***/ 11:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/ui-utils/id");
+
+/***/ }),
+
+/***/ 18:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Popover");
 
 /***/ }),
 
-/***/ 176:
+/***/ 183:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -158,14 +158,14 @@ var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_pr
 var external_lodash_ = __webpack_require__(4);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/id"
-var id_ = __webpack_require__(10);
+var id_ = __webpack_require__(11);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Popover"
-var Popover_ = __webpack_require__(17);
+var Popover_ = __webpack_require__(18);
 var Popover_default = /*#__PURE__*/__webpack_require__.n(Popover_);
 
 // EXTERNAL MODULE: ./src/utils/updateReactRef.ts
-var updateReactRef = __webpack_require__(11);
+var updateReactRef = __webpack_require__(10);
 
 // CONCATENATED MODULE: ./src/Dropdown/Dropdown.tsx
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -206,6 +206,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 var possibleCloseReasons = ['clickAway', 'contentClick', 'escapeKey', 'offScreen', 'tabKey', 'toggleClick'];
 var propTypes = {
+  align: external_prop_types_default.a.oneOf(['center', 'edge', 'theme', 'end']),
   canCoverAnchor: external_prop_types_default.a.bool,
   children: external_prop_types_default.a.oneOfType([external_prop_types_default.a.node, external_prop_types_default.a.func]),
   closeReasons: external_prop_types_default.a.arrayOf(external_prop_types_default.a.oneOf(possibleCloseReasons)),
@@ -222,6 +223,7 @@ var propTypes = {
   toggle: external_prop_types_default.a.element.isRequired
 };
 var defaultProps = {
+  align: 'theme',
   canCoverAnchor: true,
   closeReasons: possibleCloseReasons,
   defaultPlacement: 'below',
@@ -397,6 +399,7 @@ var Dropdown_Dropdown = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this$props3 = this.props,
+          align = _this$props3.align,
           canCoverAnchor = _this$props3.canCoverAnchor,
           children = _this$props3.children,
           closeReasons = _this$props3.closeReasons,
@@ -410,6 +413,7 @@ var Dropdown_Dropdown = /*#__PURE__*/function (_Component) {
           handleContentClick = this.handleContentClick;
       var toggle = this.renderToggle();
       return /*#__PURE__*/external_react_default.a.createElement(external_react_default.a.Fragment, null, toggle, /*#__PURE__*/external_react_default.a.createElement(Popover_default.a, {
+        align: align,
         open: !!anchor && this.isOpen(),
         autoCloseWhenOffScreen: Object(external_lodash_["includes"])(closeReasons, 'offScreen'),
         anchor: anchor,