@splunk/react-ui 4.4.1 → 4.5.2

package/Menu.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 106);
+/******/ 	return __webpack_require__(__webpack_require__.s = 110);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,34 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 106:
+/***/ 11:
+/***/ (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
+    }
+  }
+}
+
+
+
+/***/ }),
+
+/***/ 110:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -124,14 +151,14 @@ var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "lodash/omit"
-var omit_ = __webpack_require__(32);
+var omit_ = __webpack_require__(42);
 var omit_default = /*#__PURE__*/__webpack_require__.n(omit_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Popover"
-var Popover_ = __webpack_require__(17);
+var Popover_ = __webpack_require__(16);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/focus"
-var focus_ = __webpack_require__(24);
+var focus_ = __webpack_require__(25);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/keyboard"
 var keyboard_ = __webpack_require__(9);
@@ -206,7 +233,7 @@ Divider.filterConsecutive = true;
 Divider.filterLast = true;
 /* harmony default export */ var Menu_Divider = (Divider);
 // EXTERNAL MODULE: external "@splunk/react-ui/Heading"
-var Heading_ = __webpack_require__(61);
+var Heading_ = __webpack_require__(64);
 var Heading_default = /*#__PURE__*/__webpack_require__.n(Heading_);
 
 // EXTERNAL MODULE: external "@splunk/themes/useSplunkTheme"
@@ -310,10 +337,10 @@ Heading.filterLast = true;
 var external_lodash_ = __webpack_require__(4);
 
 // EXTERNAL MODULE: ./src/icons/Check.tsx
-var Check = __webpack_require__(47);
+var Check = __webpack_require__(48);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/TriangleRightSmall"
-var TriangleRightSmall_ = __webpack_require__(86);
+var TriangleRightSmall_ = __webpack_require__(89);
 var TriangleRightSmall_default = /*#__PURE__*/__webpack_require__.n(TriangleRightSmall_);
 
 // EXTERNAL MODULE: ./src/icons/ThemedIcon.tsx
@@ -351,11 +378,11 @@ function CaretRight(props) {
 var ChevronRight = __webpack_require__(27);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Clickable"
-var Clickable_ = __webpack_require__(11);
+var Clickable_ = __webpack_require__(12);
 var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Switch"
-var Switch_ = __webpack_require__(62);
+var Switch_ = __webpack_require__(65);
 var Switch_default = /*#__PURE__*/__webpack_require__.n(Switch_);
 
 // CONCATENATED MODULE: ./src/Menu/ItemStyles.ts
@@ -536,7 +563,7 @@ var StyledSubmenu = external_styled_components_default.a.span.withConfig({
 }));
 
 // EXTERNAL MODULE: ./src/utils/updateReactRef.ts
-var updateReactRef = __webpack_require__(12);
+var updateReactRef = __webpack_require__(11);
 
 // CONCATENATED MODULE: ./src/Menu/Item.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); }
@@ -753,7 +780,7 @@ var Item_Item = /*#__PURE__*/function (_Component) {
           openInNewContext = _this$props3.openInNewContext,
           otherProps = Item_objectWithoutProperties(_this$props3, ["active", "children", "hasSubmenu", "selectable", "selectableAppearance", "selected", "icon", "description", "disabled", "onClick", "preventFocus", "role", "splunkTheme", "to", "truncate", "descriptionPosition", "openInNewContext"]);
 
-      var family = splunkTheme.family;
+      var isPrisma = splunkTheme.isPrisma;
       var isSelectable = selectable || selected;
       var defaultRole = {
         nonselectable: 'menuitem',
@@ -765,13 +792,19 @@ var Item_Item = /*#__PURE__*/function (_Component) {
         'aria-haspopup': hasSubmenu ? true : undefined,
         'aria-checked': selectableAppearance === 'checkmark' && selected ? true : undefined
       };
-      var selectablePosition = family === 'prisma' ? 'right' : 'left';
+      var selectablePosition = isPrisma ? 'right' : 'left';
       var descriptionRight = description && descriptionPosition === 'right' && selectablePosition !== 'right';
       var descriptionBottom = description && !descriptionRight;
       var selectableCheckmark = selected && selectableAppearance === 'checkmark' && /*#__PURE__*/external_react_default.a.createElement(StyledItemSelectedIcon, null, /*#__PURE__*/external_react_default.a.createElement(Check["a" /* default */], {
         enterpriseSize: 0.85,
         prismaSize: "small",
-        inline: true
+        inline: true,
+        style: // eslint-disable-next-line no-nested-ternary
+        isPrisma ? icon ? {
+          verticalAlign: 'sub'
+        } : {
+          verticalAlign: 'text-top'
+        } : undefined
       }));
       return /*#__PURE__*/external_react_default.a.createElement(StyledClickable, Item_extends({
         $isSelectable: isSelectable,
@@ -802,7 +835,7 @@ var Item_Item = /*#__PURE__*/function (_Component) {
         selectedLabel: "Selected",
         unselectedLabel: "",
         value: "menu-item"
-      }), hasSubmenu && /*#__PURE__*/external_react_default.a.createElement(StyledSubmenu, null, family === 'prisma' ? /*#__PURE__*/external_react_default.a.createElement(CaretRight, null) : /*#__PURE__*/external_react_default.a.createElement(ChevronRight["a" /* default */], null)), descriptionRight && /*#__PURE__*/external_react_default.a.createElement(StyledItemDescriptionRight, {
+      }), hasSubmenu && /*#__PURE__*/external_react_default.a.createElement(StyledSubmenu, null, isPrisma ? /*#__PURE__*/external_react_default.a.createElement(CaretRight, null) : /*#__PURE__*/external_react_default.a.createElement(ChevronRight["a" /* default */], null)), descriptionRight && /*#__PURE__*/external_react_default.a.createElement(StyledItemDescriptionRight, {
         "data-test": "description"
       }, description), /*#__PURE__*/external_react_default.a.createElement(StyledInnerWrapper, null, icon && /*#__PURE__*/external_react_default.a.createElement(StyledItemIcon, null, icon), /*#__PURE__*/external_react_default.a.createElement(StyledTitleAndDescriptionWrapper, {
         $truncate: truncate
@@ -826,7 +859,7 @@ var ItemWithTheme = Object(themes_["withSplunkTheme"])(Item_Item);
 ItemWithTheme.propTypes = Item_Item.propTypes;
 /* harmony default export */ var Menu_Item = (ItemWithTheme);
 // EXTERNAL MODULE: external "@splunk/react-ui/Scroll"
-var Scroll_ = __webpack_require__(58);
+var Scroll_ = __webpack_require__(61);
 var Scroll_default = /*#__PURE__*/__webpack_require__.n(Scroll_);
 
 // CONCATENATED MODULE: ./src/Menu/MenuStyles.ts
@@ -1042,41 +1075,14 @@ Menu.Heading = Menu_Heading;
 
 /***/ }),
 
-/***/ 11:
+/***/ 12:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Clickable");
 
 /***/ }),
 
-/***/ 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
-    }
-  }
-}
-
-
-
-/***/ }),
-
-/***/ 17:
+/***/ 16:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Popover");
@@ -1090,7 +1096,7 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 24:
+/***/ 25:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/ui-utils/focus");
@@ -1161,42 +1167,42 @@ module.exports = require("@splunk/react-icons/ChevronRight");
 
 /***/ }),
 
-/***/ 32:
+/***/ 38:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash/omit");
+module.exports = require("@splunk/themes/useSplunkTheme");
 
 /***/ }),
 
-/***/ 38:
+/***/ 4:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/themes/useSplunkTheme");
+module.exports = require("lodash");
 
 /***/ }),
 
-/***/ 4:
+/***/ 42:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash");
+module.exports = require("lodash/omit");
 
 /***/ }),
 
-/***/ 44:
+/***/ 45:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/Check");
 
 /***/ }),
 
-/***/ 47:
+/***/ 48:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Check; });
 /* 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_Check__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(44);
+/* harmony import */ var _splunk_react_icons_Check__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(45);
 /* harmony import */ var _splunk_react_icons_Check__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_Check__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);
@@ -1239,13 +1245,6 @@ function Check(props) {
 
 /***/ }),
 
-/***/ 58:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-ui/Scroll");
-
-/***/ }),
-
 /***/ 6:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -1274,11 +1273,18 @@ function SVG(props) {
 /***/ 61:
 /***/ (function(module, exports) {
 
+module.exports = require("@splunk/react-ui/Scroll");
+
+/***/ }),
+
+/***/ 64:
+/***/ (function(module, exports) {
+
 module.exports = require("@splunk/react-ui/Heading");
 
 /***/ }),
 
-/***/ 62:
+/***/ 65:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Switch");
@@ -1403,7 +1409,7 @@ Icon.defaultProps = defaultProps;
 
 /***/ }),
 
-/***/ 86:
+/***/ 89:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/TriangleRightSmall");

package/Message.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 105);
+/******/ 	return __webpack_require__(__webpack_require__.s = 109);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 105:
+/***/ 109:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -121,7 +121,7 @@ var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: ./src/icons/CrossMark.tsx
-var CrossMark = __webpack_require__(21);
+var CrossMark = __webpack_require__(22);
 
 // EXTERNAL MODULE: external "styled-components"
 var external_styled_components_ = __webpack_require__(3);
@@ -132,7 +132,7 @@ var Box_ = __webpack_require__(8);
 var Box_default = /*#__PURE__*/__webpack_require__.n(Box_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Clickable"
-var Clickable_ = __webpack_require__(11);
+var Clickable_ = __webpack_require__(12);
 var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
 
 // EXTERNAL MODULE: external "@splunk/themes"
@@ -194,7 +194,7 @@ var BannerWrapper = external_styled_components_default()(Box_default.a).withConf
   enterprise: '0 8px 0 38px'
 }), Object(themes_["pickVariant"])('$type', {
   info: Object(external_styled_components_["css"])(["background-color:", ";"], Object(themes_["pick"])({
-    prisma: themes_["variables"].contentColorMuted,
+    prisma: themes_["variables"].contentColorActive,
     enterprise: {
       dark: themes_["mixins"].colorWithAlpha(themes_["variables"].infoColor, 0.5),
       light: themes_["variables"].infoColorL50
@@ -433,7 +433,7 @@ var StyledBox = external_styled_components_default()(Box_default.a).withConfig({
   },
   "false": {
     prisma: '10px 8px 10px 36px',
-    enterprise: '10px 0 10px 40px'
+    enterprise: '10px 10px 10px 40px'
   }
 }), function (_ref3) {
   var $fillStyle = _ref3.$fillStyle;
@@ -474,7 +474,7 @@ var StyledBox = external_styled_components_default()(Box_default.a).withConfig({
 }));
 
 // EXTERNAL MODULE: external "@splunk/react-icons/Error"
-var Error_ = __webpack_require__(63);
+var Error_ = __webpack_require__(66);
 var Error_default = /*#__PURE__*/__webpack_require__.n(Error_);
 
 // EXTERNAL MODULE: ./src/icons/ThemedIcon.tsx
@@ -511,7 +511,7 @@ function AlertFilled(props) {
   }, props));
 }
 // EXTERNAL MODULE: external "@splunk/react-icons/InfoCircle"
-var InfoCircle_ = __webpack_require__(87);
+var InfoCircle_ = __webpack_require__(90);
 var InfoCircle_default = /*#__PURE__*/__webpack_require__.n(InfoCircle_);
 
 // CONCATENATED MODULE: ./src/icons/InfoFilled.tsx
@@ -542,7 +542,7 @@ function InfoFilled(props) {
   }, props));
 }
 // EXTERNAL MODULE: external "@splunk/react-icons/Success"
-var Success_ = __webpack_require__(64);
+var Success_ = __webpack_require__(67);
 var Success_default = /*#__PURE__*/__webpack_require__.n(Success_);
 
 // CONCATENATED MODULE: ./src/icons/SuccessFilled.tsx
@@ -573,7 +573,7 @@ function SuccessFilled(props) {
   }, props));
 }
 // EXTERNAL MODULE: external "@splunk/react-icons/Warning"
-var Warning_ = __webpack_require__(88);
+var Warning_ = __webpack_require__(91);
 var Warning_default = /*#__PURE__*/__webpack_require__.n(Warning_);
 
 // CONCATENATED MODULE: ./src/icons/WarningFilled.tsx
@@ -697,7 +697,7 @@ Message.Link = Message_Link;
 
 /***/ }),
 
-/***/ 11:
+/***/ 12:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Clickable");
@@ -711,14 +711,14 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 21:
+/***/ 22:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return CrossMark; });
 /* 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_Close__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(25);
+/* harmony import */ var _splunk_react_icons_Close__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(26);
 /* harmony import */ var _splunk_react_icons_Close__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_Close__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);
@@ -761,7 +761,7 @@ function CrossMark(props) {
 
 /***/ }),
 
-/***/ 25:
+/***/ 26:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/Close");
@@ -807,14 +807,14 @@ function SVG(props) {
 
 /***/ }),
 
-/***/ 63:
+/***/ 66:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/Error");
 
 /***/ }),
 
-/***/ 64:
+/***/ 67:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/Success");
@@ -946,14 +946,14 @@ module.exports = require("@splunk/react-ui/Box");
 
 /***/ }),
 
-/***/ 87:
+/***/ 90:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/InfoCircle");
 
 /***/ }),
 
-/***/ 88:
+/***/ 91:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/Warning");

package/Modal.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 110);
+/******/ 	return __webpack_require__(__webpack_require__.s = 114);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 110:
+/***/ 114:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -126,11 +126,11 @@ var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_pr
 var external_lodash_ = __webpack_require__(4);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ModalLayer"
-var ModalLayer_ = __webpack_require__(65);
+var ModalLayer_ = __webpack_require__(68);
 var ModalLayer_default = /*#__PURE__*/__webpack_require__.n(ModalLayer_);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/focus"
-var focus_ = __webpack_require__(24);
+var focus_ = __webpack_require__(25);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ScrollContainerContext"
 var ScrollContainerContext_ = __webpack_require__(35);
@@ -271,7 +271,7 @@ function Footer(_ref) {
 Footer.propTypes = Footer_propTypes;
 /* harmony default export */ var Modal_Footer = (Footer);
 // EXTERNAL MODULE: external "@splunk/react-ui/CloseButton"
-var CloseButton_ = __webpack_require__(59);
+var CloseButton_ = __webpack_require__(62);
 var CloseButton_default = /*#__PURE__*/__webpack_require__.n(CloseButton_);
 
 // CONCATENATED MODULE: ./src/Modal/HeaderStyles.ts
@@ -426,8 +426,6 @@ var Styled = external_styled_components_default()(external_react_spring_["animat
 }));
 
 // CONCATENATED MODULE: ./src/Modal/Modal.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); }
-
 function Modal_extends() { Modal_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 Modal_extends.apply(this, arguments); }
 
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || Modal_unsupportedIterableToArray(arr) || _nonIterableSpread(); }
@@ -446,6 +444,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
+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); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -479,10 +479,12 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 var Modal_propTypes = {
   children: external_prop_types_default.a.node,
+  initialFocus: external_prop_types_default.a.oneOfType([external_prop_types_default.a.object, external_prop_types_default.a.oneOf(['first', 'container'])]),
   onRequestClose: external_prop_types_default.a.func,
   open: external_prop_types_default.a.bool
 };
 var defaultProps = {
+  initialFocus: 'first',
   open: false
 };
 
@@ -504,6 +506,10 @@ var Modal_Modal = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "el", null);
 
+    _defineProperty(_assertThisInitialized(_this), "initialFocusTimeoutId", undefined);
+
+    _defineProperty(_assertThisInitialized(_this), "initialFocus", null);
+
     _defineProperty(_assertThisInitialized(_this), "getDefaultMotionStyle", function () {
       return {
         top: 0
@@ -522,12 +528,40 @@ var Modal_Modal = /*#__PURE__*/function (_Component) {
       };
     });
 
+    _defineProperty(_assertThisInitialized(_this), "handleInitialFocus", function () {
+      var initialFocus = _this.props.initialFocus;
+      _this.initialFocusTimeoutId = Object(external_lodash_["defer"])(function () {
+        var focusTarget; // not using the takeFocus() util here because it
+        // doesn't work for all values of "initialFocus"
+        // and it has a nested defer() call, which we want to avoid
+
+        if (_this.initialFocus !== initialFocus) {
+          if (initialFocus === 'first') {
+            if (_this.el) {
+              /* eslint-disable prefer-destructuring */
+
+              /* prefer-desturucting leads to harder-to-read syntax in this case */
+              focusTarget = Object(focus_["getSortedTabbableElements"])(_this.el)[0];
+              /* eslint-enable prefer-destructuring */
+            }
+          } else if (initialFocus === 'container') {
+            focusTarget = _this.el;
+          } else if (_typeof(initialFocus) === 'object') {
+            focusTarget = initialFocus;
+          } // Typescript isn't happy with optional chaining here
+
+
+          if (focusTarget != null && 'focus' in focusTarget) {
+            focusTarget.focus();
+          }
+
+          _this.initialFocus = initialFocus;
+        }
+      });
+    });
+
     _defineProperty(_assertThisInitialized(_this), "handleModalMount", function (element) {
       _this.el = element;
-
-      if (element) {
-        Object(external_lodash_["defer"])(focus_["takeFocus"], element);
-      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleModalKeyDown", function (e) {
@@ -539,6 +573,7 @@ var Modal_Modal = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "handleRequestClose", function (e) {
       var _this$props$onRequest, _this$props;
 
+      _this.initialFocus = null;
       (_this$props$onRequest = (_this$props = _this.props).onRequestClose) === null || _this$props$onRequest === void 0 ? void 0 : _this$props$onRequest.call(_this$props, e);
     });
 
@@ -567,6 +602,25 @@ var Modal_Modal = /*#__PURE__*/function (_Component) {
   }
 
   _createClass(Modal, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this$props3 = this.props,
+          initialFocus = _this$props3.initialFocus,
+          open = _this$props3.open;
+
+      if (prevProps.initialFocus !== initialFocus) {
+        // cancel the defer() set up in handleInitialFocus()
+        // so that focus won't jump around if "initialFocus" changes
+        clearTimeout(this.initialFocusTimeoutId);
+      }
+
+      if (open) {
+        this.handleInitialFocus();
+      } else {
+        this.initialFocus = null;
+      }
+    }
+  }, {
     key: "render",
     value: function render() {
       return /*#__PURE__*/external_react_default.a.createElement(ModalLayer_default.a, {
@@ -614,7 +668,7 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 24:
+/***/ 25:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/ui-utils/focus");
@@ -642,14 +696,14 @@ module.exports = require("lodash");
 
 /***/ }),
 
-/***/ 59:
+/***/ 62:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/CloseButton");
 
 /***/ }),
 
-/***/ 65:
+/***/ 68:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/ModalLayer");

package/ModalLayer.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 144);
+/******/ 	return __webpack_require__(__webpack_require__.s = 155);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 144:
+/***/ 155:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -123,7 +123,7 @@ var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_pr
 var Animation_ = __webpack_require__(30);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Layer"
-var Layer_ = __webpack_require__(49);
+var Layer_ = __webpack_require__(50);
 var Layer_default = /*#__PURE__*/__webpack_require__.n(Layer_);
 
 // EXTERNAL MODULE: external "styled-components"
@@ -328,7 +328,7 @@ module.exports = require("@splunk/react-ui/Animation");
 
 /***/ }),
 
-/***/ 49:
+/***/ 50:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Layer");