@splunk/react-ui 4.9.0 → 4.12.0

package/MessageBar.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 162);
+/******/ 	return __webpack_require__(__webpack_require__.s = 160);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 11:
+/***/ 12:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Clickable");
@@ -115,7 +115,7 @@ module.exports = require("@splunk/react-ui/ScreenReaderContent");
 
 /***/ }),
 
-/***/ 162:
+/***/ 160:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -141,19 +141,19 @@ var ScreenReaderContent_ = __webpack_require__(14);
 var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReaderContent_);
 
 // EXTERNAL MODULE: ./src/icons/AlertFilled.tsx
-var AlertFilled = __webpack_require__(72);
+var AlertFilled = __webpack_require__(71);
 
 // EXTERNAL MODULE: ./src/icons/CrossMark.tsx
-var CrossMark = __webpack_require__(20);
+var CrossMark = __webpack_require__(19);
 
 // EXTERNAL MODULE: ./src/icons/InfoFilled.tsx
-var InfoFilled = __webpack_require__(73);
+var InfoFilled = __webpack_require__(72);
 
 // EXTERNAL MODULE: ./src/icons/SuccessFilled.tsx
-var SuccessFilled = __webpack_require__(75);
+var SuccessFilled = __webpack_require__(74);
 
 // EXTERNAL MODULE: ./src/icons/WarningFilled.tsx
-var WarningFilled = __webpack_require__(76);
+var WarningFilled = __webpack_require__(75);
 
 // EXTERNAL MODULE: external "styled-components"
 var external_styled_components_ = __webpack_require__(3);
@@ -164,7 +164,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"
@@ -240,10 +240,16 @@ var MessageBarIconWrapper = external_styled_components_default.a.div.withConfig(
 var MessageBarWrapper = external_styled_components_default()(Box_default.a).withConfig({
   displayName: "MessageBarStyles__MessageBarWrapper",
   componentId: "sc-1uyhzza-3"
-})(["", ";display:flex;align-items:center;justify-content:center;min-height:40px;margin-bottom:", ";padding:", ";word-wrap:break-word;color:", ";", ";"], themes_["mixins"].reset('block'), themes_["variables"].spacingSmall, Object(themes_["pick"])({
-  prisma: '0 8px 0 32px',
-  enterprise: '0 8px 0 38px'
-}), Object(themes_["pick"])({
+})(["", ";display:flex;align-items:center;justify-content:center;min-height:40px;margin-bottom:", ";", ";word-wrap:break-word;color:", ";", ";"], themes_["mixins"].reset('block'), themes_["variables"].spacingSmall, function (_ref) {
+  var $hasCloseButton = _ref.$hasCloseButton;
+  return $hasCloseButton ? Object(external_styled_components_["css"])(["", ""], Object(themes_["pick"])({
+    prisma: Object(external_styled_components_["css"])(["padding:0 8px 0 32px;"]),
+    enterprise: Object(external_styled_components_["css"])(["padding:0 8px 0 38px;"])
+  })) : Object(external_styled_components_["css"])(["", ""], Object(themes_["pick"])({
+    prisma: Object(external_styled_components_["css"])(["padding:0 33px 0 32px;"]),
+    enterprise: Object(external_styled_components_["css"])(["padding:0 26px 0 32px;"])
+  }));
+}, Object(themes_["pick"])({
   prisma: Object(themes_["pickVariant"])('$type', {
     info: {
       light: themes_["variables"].contentColorActive,
@@ -342,7 +348,8 @@ function MessageBar(_ref) {
     "data-test": "message-bar",
     "data-test-type": type
   }, otherProps, {
-    role: "region"
+    role: "region",
+    $hasCloseButton: Boolean(onRequestClose)
   }), /*#__PURE__*/external_react_default.a.createElement(MessageBarIconWrapper, {
     $type: type
   }, /*#__PURE__*/external_react_default.a.createElement(Icon, {
@@ -370,21 +377,14 @@ MessageBar.propTypes = propTypes;
 
 /***/ }),
 
-/***/ 2:
-/***/ (function(module, exports) {
-
-module.exports = require("react");
-
-/***/ }),
-
-/***/ 20:
+/***/ 19:
 /***/ (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__(22);
+/* harmony import */ var _splunk_react_icons_Close__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(21);
 /* 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);
@@ -427,24 +427,24 @@ function CrossMark(props) {
 
 /***/ }),
 
-/***/ 22:
+/***/ 2:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-icons/Close");
+module.exports = require("react");
 
 /***/ }),
 
-/***/ 3:
+/***/ 21:
 /***/ (function(module, exports) {
 
-module.exports = require("styled-components");
+module.exports = require("@splunk/react-icons/Close");
 
 /***/ }),
 
-/***/ 49:
+/***/ 3:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-icons/Error");
+module.exports = require("styled-components");
 
 /***/ }),
 
@@ -458,6 +458,13 @@ module.exports = require("@splunk/ui-utils/i18n");
 /***/ 50:
 /***/ (function(module, exports) {
 
+module.exports = require("@splunk/react-icons/Error");
+
+/***/ }),
+
+/***/ 51:
+/***/ (function(module, exports) {
+
 module.exports = require("@splunk/react-icons/Success");
 
 /***/ }),
@@ -605,14 +612,14 @@ Icon.defaultProps = defaultProps;
 
 /***/ }),
 
-/***/ 72:
+/***/ 71:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return AlertFilled; });
 /* 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_Error__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(49);
+/* harmony import */ var _splunk_react_icons_Error__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(50);
 /* harmony import */ var _splunk_react_icons_Error__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_Error__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);
@@ -645,14 +652,14 @@ function AlertFilled(props) {
 
 /***/ }),
 
-/***/ 73:
+/***/ 72:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return InfoFilled; });
 /* 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_InfoCircle__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(74);
+/* harmony import */ var _splunk_react_icons_InfoCircle__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(73);
 /* harmony import */ var _splunk_react_icons_InfoCircle__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_InfoCircle__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);
@@ -685,21 +692,21 @@ function InfoFilled(props) {
 
 /***/ }),
 
-/***/ 74:
+/***/ 73:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/InfoCircle");
 
 /***/ }),
 
-/***/ 75:
+/***/ 74:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return SuccessFilled; });
 /* 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_Success__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(50);
+/* harmony import */ var _splunk_react_icons_Success__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(51);
 /* harmony import */ var _splunk_react_icons_Success__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_Success__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);
@@ -732,14 +739,14 @@ function SuccessFilled(props) {
 
 /***/ }),
 
-/***/ 76:
+/***/ 75:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return WarningFilled; });
 /* 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_Warning__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(77);
+/* harmony import */ var _splunk_react_icons_Warning__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(76);
 /* harmony import */ var _splunk_react_icons_Warning__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_Warning__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);
@@ -772,7 +779,7 @@ function WarningFilled(props) {
 
 /***/ }),
 
-/***/ 77:
+/***/ 76:
 /***/ (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 = 118);
+/******/ 	return __webpack_require__(__webpack_require__.s = 114);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -108,7 +108,7 @@ module.exports = require("@splunk/ui-utils/id");
 
 /***/ }),
 
-/***/ 118:
+/***/ 114:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -133,7 +133,7 @@ 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__(78);
+var ModalLayer_ = __webpack_require__(77);
 var ModalLayer_default = /*#__PURE__*/__webpack_require__.n(ModalLayer_);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/focus"
@@ -143,7 +143,7 @@ var focus_ = __webpack_require__(26);
 var id_ = __webpack_require__(10);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ScrollContainerContext"
-var ScrollContainerContext_ = __webpack_require__(35);
+var ScrollContainerContext_ = __webpack_require__(37);
 
 // EXTERNAL MODULE: external "styled-components"
 var external_styled_components_ = __webpack_require__(3);
@@ -279,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__(69);
+var CloseButton_ = __webpack_require__(67);
 var CloseButton_default = /*#__PURE__*/__webpack_require__.n(CloseButton_);
 
 // CONCATENATED MODULE: ./src/Modal/HeaderStyles.ts
@@ -716,7 +716,7 @@ module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 35:
+/***/ 37:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/ScrollContainerContext");
@@ -730,14 +730,14 @@ module.exports = require("lodash");
 
 /***/ }),
 
-/***/ 69:
+/***/ 67:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/CloseButton");
 
 /***/ }),
 
-/***/ 78:
+/***/ 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 = 163);
+/******/ 	return __webpack_require__(__webpack_require__.s = 161);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 163:
+/***/ 161:
 /***/ (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__(56);
+var Layer_ = __webpack_require__(57);
 var Layer_default = /*#__PURE__*/__webpack_require__.n(Layer_);
 
 // EXTERNAL MODULE: external "styled-components"
@@ -207,6 +207,8 @@ var ModalLayer_ModalLayer = /*#__PURE__*/function (_Component) {
 
     _this = _super.call(this, props);
 
+    _defineProperty(_assertThisInitialized(_this), "allowAnimationUpdates", true);
+
     _defineProperty(_assertThisInitialized(_this), "handleClickAway", function (event) {
       var _this$props$onRequest, _this$props;
 
@@ -217,9 +219,11 @@ var ModalLayer_ModalLayer = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleAnimationEnd", function () {
-      _this.setState({
-        animating: false
-      });
+      if (_this.allowAnimationUpdates) {
+        _this.setState({
+          animating: false
+        });
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderLayer", function () {
@@ -263,6 +267,11 @@ var ModalLayer_ModalLayer = /*#__PURE__*/function (_Component) {
   }
 
   _createClass(ModalLayer, [{
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.allowAnimationUpdates = false;
+    }
+  }, {
     key: "render",
 
     /* eslint-enable jsx-a11y/no-static-element-interactions */
@@ -329,7 +338,7 @@ module.exports = require("@splunk/react-ui/Animation");
 
 /***/ }),
 
-/***/ 56:
+/***/ 57:
 /***/ (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 = 164);
+/******/ 	return __webpack_require__(__webpack_require__.s = 162);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,14 +101,14 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 11:
+/***/ 12:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Clickable");
 
 /***/ }),
 
-/***/ 164:
+/***/ 162:
 /***/ (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__(11);
+var Clickable_ = __webpack_require__(12);
 var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
 
 // EXTERNAL MODULE: external "@splunk/themes"
@@ -160,7 +160,7 @@ var backgroundColors = ['#006d9c', '#ec9960', '#af575a', '#62b3b2', '#4fa484', '
 var Styled = external_styled_components_default.a.div.withConfig({
   displayName: "MonogramStyles__Styled",
   componentId: "r5ud6k-0"
-})(["", ";align-items:center;justify-content:center;border-radius:50%;font-weight:normal;", " background-color:", ";", " & + &{margin-left:4px;}"], themes_["mixins"].reset('inline-flex'), Object(themes_["pick"])({
+})(["", ";align-items:center;justify-content:center;border-radius:50%;font-weight:normal;", " background-color:", ";", ";& + &{margin-left:4px;}"], themes_["mixins"].reset('inline-flex'), Object(themes_["pick"])({
   prisma: Object(external_styled_components_["css"])(["color:", ";"], themes_["variables"].contentColorActive)
 }), function (_ref) {
   var $backgroundColor = _ref.$backgroundColor,
@@ -181,15 +181,27 @@ var Styled = external_styled_components_default.a.div.withConfig({
   }
 
   return $backgroundColor;
-}, Object(themes_["pickVariant"])('$size', {
-  small: Object(external_styled_components_["css"])(["font-size:", ";", ""], themes_["variables"].fontSize, Object(themes_["pick"])({
-    enterprise: Object(external_styled_components_["css"])(["height:32px;width:32px;"]),
-    prisma: Object(external_styled_components_["css"])(["height:24px;width:24px;"])
-  })),
-  medium: Object(external_styled_components_["css"])(["height:48px;width:48px;font-size:", ";"], themes_["variables"].fontSize),
-  large: Object(external_styled_components_["css"])(["height:80px;width:80px;font-size:", ";"], themes_["variables"].fontSizeXXLarge),
-  xlarge: "\n            width: 144px;\n            height: 144px;\n            font-size: 36px;\n            font-weight: 700;\n        "
-}));
+}, function (_ref2) {
+  var $size = _ref2.$size;
+
+  if (typeof $size === 'number') {
+    return Object(external_styled_components_["css"])(["height:", "px;width:", "px;"], $size, $size);
+  }
+
+  if (typeof $size === 'string') {
+    return Object(themes_["pickVariant"])('$size', {
+      small: Object(external_styled_components_["css"])(["font-size:", ";", ""], themes_["variables"].fontSize, Object(themes_["pick"])({
+        enterprise: Object(external_styled_components_["css"])(["height:32px;width:32px;"]),
+        prisma: Object(external_styled_components_["css"])(["height:24px;width:24px;"])
+      })),
+      medium: Object(external_styled_components_["css"])(["height:48px;width:48px;font-size:", ";"], themes_["variables"].fontSize),
+      large: Object(external_styled_components_["css"])(["height:80px;width:80px;font-size:", ";"], themes_["variables"].fontSizeXXLarge),
+      xlarge: "\n                    width: 144px;\n                    height: 144px;\n                    font-size: 36px;\n                    font-weight: 700;\n                "
+    });
+  }
+
+  return Object(external_styled_components_["css"])(["height:48px;width:48px;font-size:", ";"], themes_["variables"].fontSize);
+});
 var StyledClickableComponent = Styled.withComponent(Clickable_default.a);
 var StyledClickable = external_styled_components_default()(StyledClickableComponent).withConfig({
   displayName: "MonogramStyles__StyledClickable",
@@ -238,7 +250,7 @@ var propTypes = {
   initials: external_prop_types_default.a.string.isRequired,
   name: external_prop_types_default.a.string,
   onClick: external_prop_types_default.a.func,
-  size: external_prop_types_default.a.oneOf(['small', 'medium', 'large', 'xlarge'])
+  size: external_prop_types_default.a.oneOfType([external_prop_types_default.a.oneOf(['small', 'medium', 'large', 'xlarge']), external_prop_types_default.a.number])
 };
 var defaultProps = {
   backgroundColor: 'theme',