@splunk/react-ui 4.5.2 → 4.7.0

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 = 118);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,14 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 114:
+/***/ 10:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/ui-utils/id");
+
+/***/ }),
+
+/***/ 118:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -126,11 +133,14 @@ 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__(77);
 var ModalLayer_default = /*#__PURE__*/__webpack_require__.n(ModalLayer_);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/focus"
-var focus_ = __webpack_require__(25);
+var focus_ = __webpack_require__(26);
+
+// EXTERNAL MODULE: external "@splunk/ui-utils/id"
+var id_ = __webpack_require__(10);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ScrollContainerContext"
 var ScrollContainerContext_ = __webpack_require__(35);
@@ -153,7 +163,7 @@ var themes_ = __webpack_require__(0);
 var StyledBox = external_styled_components_default()(Box_default.a).withConfig({
   displayName: "BodyStyles__StyledBox",
   componentId: "lv54z7-0"
-})(["background-color:", ";", " ", " flex:0 1 auto;overflow:auto;@media all and (-ms-high-contrast:none){*::-ms-backdrop,&{max-height:calc(100vh - 180px);}}"], Object(themes_["pick"])({
+})(["background-color:", ";", " flex:0 1 auto;overflow:auto;@media all and (-ms-high-contrast:none){*::-ms-backdrop,&{max-height:calc(100vh - 180px);}}"], Object(themes_["pick"])({
   enterprise: themes_["variables"].backgroundColor,
   prisma: themes_["variables"].backgroundColorDialog
 }), Object(themes_["pick"])({
@@ -165,8 +175,6 @@ var StyledBox = external_styled_components_default()(Box_default.a).withConfig({
     comfortable: Object(external_styled_components_["css"])(["padding:12px 24px;&:first-child{padding-top:36px;}&:last-child{padding-bottom:36px;}"]),
     compact: Object(external_styled_components_["css"])(["padding:8px 24px;&:first-child{padding-top:26px;}&:last-child{padding-bottom:26px;}"])
   }
-}), Object(themes_["pick"])({
-  prisma: Object(external_styled_components_["css"])(["color:", ";"], themes_["variables"].contentColorActive)
 }));
 
 // CONCATENATED MODULE: ./src/Modal/Body.tsx
@@ -271,7 +279,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__(67);
 var CloseButton_default = /*#__PURE__*/__webpack_require__.n(CloseButton_);
 
 // CONCATENATED MODULE: ./src/Modal/HeaderStyles.ts
@@ -312,10 +320,10 @@ var StyledTitleWrapper = external_styled_components_default.a.div.withConfig({
   displayName: "HeaderStyles__StyledTitleWrapper",
   componentId: "sc-1y722ut-1"
 })(["", ";flex-direction:column;"], themes_["mixins"].reset('flex'));
-var StyledIcon = external_styled_components_default.a.svg.withConfig({
+var StyledIcon = external_styled_components_default.a.div.withConfig({
   displayName: "HeaderStyles__StyledIcon",
   componentId: "sc-1y722ut-2"
-})(["margin-right:16px;", " width:", ";height:", ";padding:2px;border-radius:4px;flex-shrink:0;"], Object(themes_["pick"])({
+})(["display:inline-flex;align-items:center;justify-content:center;margin-right:", ";", " width:", ";height:", ";flex-shrink:0;"], themes_["variables"].spacingLarge, Object(themes_["pick"])({
   prisma: Object(external_styled_components_["css"])(["background-color:", ";"], themes_["variables"].transparent)
 }), Object(themes_["pick"])({
   comfortable: '40px',
@@ -364,6 +372,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 +387,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 +408,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"
@@ -422,7 +439,7 @@ var Styled = external_styled_components_default()(external_react_spring_["animat
   componentId: "sc-5fn8ds-0"
 })(["", ";flex-direction:column;position:fixed;left:50%;transform:translateX(-50%);z-index:", ";", ""], themes_["mixins"].reset('flex'), themes_["variables"].zindexModal, Object(themes_["pick"])({
   enterprise: Object(external_styled_components_["css"])(["box-shadow:0 1px 5px ", ";max-height:calc(100vh - ", " * 4);max-width:calc(100vw - ", " * 4);"], themes_["variables"].black, themes_["variables"].spacing, themes_["variables"].spacing),
-  prisma: Object(external_styled_components_["css"])(["box-shadow:", ";max-height:calc(100vh - ", " * 4);max-width:calc(100vw - ", " * 4);"], themes_["variables"].modalShadow, themes_["variables"].spacingXLarge, themes_["variables"].spacingXLarge)
+  prisma: Object(external_styled_components_["css"])(["box-shadow:", ";max-height:calc(100vh - ", " * 4);max-width:calc(100vw - ", " * 4);border-radius:", ";overflow:hidden;"], themes_["variables"].modalShadow, themes_["variables"].spacingXLarge, themes_["variables"].spacingXLarge, themes_["variables"].borderRadius)
 }));
 
 // CONCATENATED MODULE: ./src/Modal/Modal.tsx
@@ -477,6 +494,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 +514,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 +529,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
@@ -529,35 +550,43 @@ 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
+      var _this$props = _this.props,
+          initialFocus = _this$props.initialFocus,
+          open = _this$props.open;
 
+      if (open) {
+        _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();
+            }
 
-          if (focusTarget != null && 'focus' in focusTarget) {
-            focusTarget.focus();
+            _this.initialFocus = initialFocus;
           }
-
-          _this.initialFocus = initialFocus;
-        }
-      });
+        });
+      } else {
+        _this.initialFocus = null;
+        clearTimeout(_this.initialFocusTimeoutId);
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleModalMount", function (element) {
@@ -571,16 +600,16 @@ var Modal_Modal = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleRequestClose", function (e) {
-      var _this$props$onRequest, _this$props;
+      var _this$props$onRequest, _this$props2;
 
       _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);
+      (_this$props$onRequest = (_this$props2 = _this.props).onRequestClose) === null || _this$props$onRequest === void 0 ? void 0 : _this$props$onRequest.call(_this$props2, e);
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderModal", function (interpolatedStyle) {
-      var _this$props2 = _this.props,
-          style = _this$props2.style,
-          children = _this$props2.children;
+      var _this$props3 = _this.props,
+          style = _this$props3.style,
+          children = _this$props3.children;
       var top = interpolatedStyle.top,
           opacity = interpolatedStyle.opacity;
       var clonedChildren = external_react_["Children"].toArray(children).filter(external_react_["isValidElement"]);
@@ -594,19 +623,28 @@ 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;
   }
 
   _createClass(Modal, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.handleInitialFocus();
+    }
+  }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _this$props3 = this.props,
-          initialFocus = _this$props3.initialFocus,
-          open = _this$props3.open;
+      var initialFocus = this.props.initialFocus;
 
       if (prevProps.initialFocus !== initialFocus) {
         // cancel the defer() set up in handleInitialFocus()
@@ -614,11 +652,7 @@ var Modal_Modal = /*#__PURE__*/function (_Component) {
         clearTimeout(this.initialFocusTimeoutId);
       }
 
-      if (open) {
-        this.handleInitialFocus();
-      } else {
-        this.initialFocus = null;
-      }
+      this.handleInitialFocus();
     }
   }, {
     key: "render",
@@ -668,7 +702,7 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 25:
+/***/ 26:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/ui-utils/focus");
@@ -696,14 +730,14 @@ module.exports = require("lodash");
 
 /***/ }),
 
-/***/ 62:
+/***/ 67:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/CloseButton");
 
 /***/ }),
 
-/***/ 68:
+/***/ 77:
 /***/ (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 = 163);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 155:
+/***/ 163:
 /***/ (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__(55);
 var Layer_default = /*#__PURE__*/__webpack_require__.n(Layer_);
 
 // EXTERNAL MODULE: external "styled-components"
@@ -243,6 +243,7 @@ var ModalLayer_ModalLayer = /*#__PURE__*/function (_Component) {
         return /*#__PURE__*/external_react_default.a.createElement("div", null,
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         renderModal(interpolatedStyle), open && useLayerForClickAway && /*#__PURE__*/external_react_default.a.createElement(StyledClickAwayOverlay, {
+          "data-test": "modal-overlay",
           onMouseDown: _this.handleClickAway,
           key: "clickAway",
           style: {
@@ -328,7 +329,7 @@ module.exports = require("@splunk/react-ui/Animation");
 
 /***/ }),
 
-/***/ 50:
+/***/ 55:
 /***/ (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 = 164);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,14 +101,14 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 12:
+/***/ 11:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Clickable");
 
 /***/ }),
 
-/***/ 156:
+/***/ 164:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -135,7 +135,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/Clickable"
-var Clickable_ = __webpack_require__(12);
+var Clickable_ = __webpack_require__(11);
 var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
 
 // EXTERNAL MODULE: external "@splunk/themes"