@splunk/react-ui 4.5.3 → 4.6.0

package/Menu.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 = 111);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -128,7 +128,7 @@ function updateReactRef(ref, current) {
 
 /***/ }),
 
-/***/ 110:
+/***/ 111:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -233,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__(64);
+var Heading_ = __webpack_require__(66);
 var Heading_default = /*#__PURE__*/__webpack_require__.n(Heading_);
 
 // EXTERNAL MODULE: external "@splunk/themes/useSplunkTheme"
@@ -337,10 +337,10 @@ Heading.filterLast = true;
 var external_lodash_ = __webpack_require__(4);
 
 // EXTERNAL MODULE: ./src/icons/Check.tsx
-var Check = __webpack_require__(48);
+var Check = __webpack_require__(50);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/TriangleRightSmall"
-var TriangleRightSmall_ = __webpack_require__(89);
+var TriangleRightSmall_ = __webpack_require__(91);
 var TriangleRightSmall_default = /*#__PURE__*/__webpack_require__.n(TriangleRightSmall_);
 
 // EXTERNAL MODULE: ./src/icons/ThemedIcon.tsx
@@ -382,7 +382,7 @@ var Clickable_ = __webpack_require__(12);
 var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Switch"
-var Switch_ = __webpack_require__(65);
+var Switch_ = __webpack_require__(67);
 var Switch_default = /*#__PURE__*/__webpack_require__.n(Switch_);
 
 // CONCATENATED MODULE: ./src/Menu/ItemStyles.ts
@@ -859,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__(61);
+var Scroll_ = __webpack_require__(63);
 var Scroll_default = /*#__PURE__*/__webpack_require__.n(Scroll_);
 
 // CONCATENATED MODULE: ./src/Menu/MenuStyles.ts
@@ -1188,21 +1188,21 @@ module.exports = require("lodash/omit");
 
 /***/ }),
 
-/***/ 45:
+/***/ 46:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/Check");
 
 /***/ }),
 
-/***/ 48:
+/***/ 50:
 /***/ (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__(45);
+/* harmony import */ var _splunk_react_icons_Check__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(46);
 /* 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);
@@ -1270,21 +1270,21 @@ function SVG(props) {
 
 /***/ }),
 
-/***/ 61:
+/***/ 63:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Scroll");
 
 /***/ }),
 
-/***/ 64:
+/***/ 66:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Heading");
 
 /***/ }),
 
-/***/ 65:
+/***/ 67:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Switch");
@@ -1409,17 +1409,17 @@ Icon.defaultProps = defaultProps;
 
 /***/ }),
 
-/***/ 89:
+/***/ 9:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-icons/TriangleRightSmall");
+module.exports = require("@splunk/ui-utils/keyboard");
 
 /***/ }),
 
-/***/ 9:
+/***/ 91:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/ui-utils/keyboard");
+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 = 109);
+/******/ 	return __webpack_require__(__webpack_require__.s = 110);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 109:
+/***/ 110:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -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__(66);
+var Error_ = __webpack_require__(68);
 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__(90);
+var InfoCircle_ = __webpack_require__(92);
 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__(67);
+var Success_ = __webpack_require__(69);
 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__(91);
+var Warning_ = __webpack_require__(93);
 var Warning_default = /*#__PURE__*/__webpack_require__.n(Warning_);
 
 // CONCATENATED MODULE: ./src/icons/WarningFilled.tsx
@@ -807,14 +807,14 @@ function SVG(props) {
 
 /***/ }),
 
-/***/ 66:
+/***/ 68:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/Error");
 
 /***/ }),
 
-/***/ 67:
+/***/ 69:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/Success");
@@ -946,14 +946,14 @@ module.exports = require("@splunk/react-ui/Box");
 
 /***/ }),
 
-/***/ 90:
+/***/ 92:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/InfoCircle");
 
 /***/ }),
 
-/***/ 91:
+/***/ 93:
 /***/ (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 = 114);
+/******/ 	return __webpack_require__(__webpack_require__.s = 113);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,14 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 114:
+/***/ 10:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/ui-utils/id");
+
+/***/ }),
+
+/***/ 113:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -126,12 +133,15 @@ 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__(68);
+var ModalLayer_ = __webpack_require__(70);
 var ModalLayer_default = /*#__PURE__*/__webpack_require__.n(ModalLayer_);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/focus"
 var focus_ = __webpack_require__(25);
 
+// EXTERNAL MODULE: external "@splunk/ui-utils/id"
+var id_ = __webpack_require__(10);
+
 // EXTERNAL MODULE: external "@splunk/react-ui/ScrollContainerContext"
 var ScrollContainerContext_ = __webpack_require__(35);
 
@@ -271,7 +281,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__(62);
+var CloseButton_ = __webpack_require__(64);
 var CloseButton_default = /*#__PURE__*/__webpack_require__.n(CloseButton_);
 
 // CONCATENATED MODULE: ./src/Modal/HeaderStyles.ts
@@ -364,6 +374,10 @@ var StyledClose = external_styled_components_default.a.div.withConfig({
   componentId: "sc-1y722ut-6"
 })(["", ";position:absolute;right:0;top:0;transform:rotate(90deg) translate(-50%,-50%);"], themes_["mixins"].reset('block'));
 
+// CONCATENATED MODULE: ./src/Modal/ModalContext.tsx
+
+var ModalContext = /*#__PURE__*/Object(external_react_["createContext"])({});
+/* harmony default export */ var Modal_ModalContext = (ModalContext);
 // CONCATENATED MODULE: ./src/Modal/Header.tsx
 function Header_extends() { Header_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 Header_extends.apply(this, arguments); }
 
@@ -375,6 +389,7 @@ function Header_objectWithoutPropertiesLoose(source, excluded) { if (source == n
 
 
 
+
 var Header_propTypes = {
   children: external_prop_types_default.a.node,
   icon: external_prop_types_default.a.node,
@@ -395,10 +410,14 @@ function Header(_ref) {
       otherProps = Header_objectWithoutProperties(_ref, ["children", "icon", "onRequestClose", "subtitle", "title"]);
 
   // @docs-props-type StepPropsBase
+  var _useContext = Object(external_react_["useContext"])(Modal_ModalContext),
+      titleIdContext = _useContext.titleId;
+
   return /*#__PURE__*/external_react_default.a.createElement(HeaderStyles_StyledBox, Header_extends({
     $close: !!onRequestClose,
     "data-test": "header"
   }, otherProps), icon && /*#__PURE__*/external_react_default.a.createElement(StyledIcon, null, icon), title ? /*#__PURE__*/external_react_default.a.createElement(StyledTitleWrapper, null, title && /*#__PURE__*/external_react_default.a.createElement(StyledTitle, {
+    id: titleIdContext,
     "data-test": "title"
   }, title), subtitle && /*#__PURE__*/external_react_default.a.createElement(StyledSubtitle, {
     "data-test": "subtitle"
@@ -477,6 +496,10 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 
 
+
+
+/** @public */
+
 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'])]),
@@ -493,16 +516,14 @@ var Modal_Modal = /*#__PURE__*/function (_Component) {
 
   var _super = _createSuper(Modal);
 
-  function Modal() {
+  // @docs-props-type ModalPropsBase
+  // this timeout ensures that the Modal is finished rendering before setting the focus
+  function Modal(props) {
     var _this;
 
     _classCallCheck(this, Modal);
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call(this, props);
 
     _defineProperty(_assertThisInitialized(_this), "el", null);
 
@@ -510,6 +531,8 @@ var Modal_Modal = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "initialFocus", null);
 
+    _defineProperty(_assertThisInitialized(_this), "headerTitleId", void 0);
+
     _defineProperty(_assertThisInitialized(_this), "getDefaultMotionStyle", function () {
       return {
         top: 0
@@ -594,10 +617,16 @@ var Modal_Modal = /*#__PURE__*/function (_Component) {
         }),
         tabIndex: -1,
         onKeyDown: _this.handleModalKeyDown,
-        role: "dialog"
-      }, Object(external_lodash_["omit"])(_this.props, [].concat(_toConsumableArray(Object(external_lodash_["keys"])(Modal.propTypes)), ['style']))), clonedChildren);
+        role: "dialog",
+        "aria-labelledby": _this.headerTitleId
+      }, Object(external_lodash_["omit"])(_this.props, [].concat(_toConsumableArray(Object(external_lodash_["keys"])(Modal.propTypes)), ['style']))), /*#__PURE__*/external_react_default.a.createElement(Modal_ModalContext.Provider, {
+        value: {
+          titleId: _this.headerTitleId
+        }
+      }, clonedChildren));
     });
 
+    _this.headerTitleId = Object(id_["createDOMID"])('titleId');
     return _this;
   }
 
@@ -696,14 +725,14 @@ module.exports = require("lodash");
 
 /***/ }),
 
-/***/ 62:
+/***/ 64:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/CloseButton");
 
 /***/ }),
 
-/***/ 68:
+/***/ 70:
 /***/ (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 = 155);
+/******/ 	return __webpack_require__(__webpack_require__.s = 156);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 155:
+/***/ 156:
 /***/ (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__(50);
+var Layer_ = __webpack_require__(52);
 var Layer_default = /*#__PURE__*/__webpack_require__.n(Layer_);
 
 // EXTERNAL MODULE: external "styled-components"
@@ -328,7 +328,7 @@ module.exports = require("@splunk/react-ui/Animation");
 
 /***/ }),
 
-/***/ 50:
+/***/ 52:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Layer");

package/Monogram.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 156);
+/******/ 	return __webpack_require__(__webpack_require__.s = 157);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -108,7 +108,7 @@ module.exports = require("@splunk/react-ui/Clickable");
 
 /***/ }),
 
-/***/ 156:
+/***/ 157:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";