@splunk/react-ui 4.3.0 → 4.5.0

package/Number.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 130);
+/******/ 	return __webpack_require__(__webpack_require__.s = 138);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,14 +101,14 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 11:
+/***/ 12:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Clickable");
 
 /***/ }),
 
-/***/ 130:
+/***/ 138:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -139,7 +139,7 @@ var keyboard_ = __webpack_require__(9);
 var i18n_ = __webpack_require__(5);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/SVG"
-var SVG_ = __webpack_require__(22);
+var SVG_ = __webpack_require__(23);
 var SVG_default = /*#__PURE__*/__webpack_require__.n(SVG_);
 
 // CONCATENATED MODULE: ./src/Number/IncrementIcon.tsx
@@ -162,15 +162,15 @@ 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/Button"
-var Button_ = __webpack_require__(16);
+var Button_ = __webpack_require__(17);
 var Button_default = /*#__PURE__*/__webpack_require__.n(Button_);
 
 // 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/Text"
-var Text_ = __webpack_require__(26);
+var Text_ = __webpack_require__(21);
 var Text_default = /*#__PURE__*/__webpack_require__.n(Text_);
 
 // CONCATENATED MODULE: ./src/Number/NumberStyles.ts
@@ -192,7 +192,7 @@ var StyledText = external_styled_components_default()(Text_default.a).withConfig
 var StyledControls = external_styled_components_default.a.div.withConfig({
   displayName: "NumberStyles__StyledControls",
   componentId: "sc-2ekj9s-1"
-})(["position:absolute;top:0;bottom:0;z-index:1;width:", ";", ""], Object(themes_["pick"])({
+})(["width:", ";height:100%;", " ", ""], Object(themes_["pick"])({
   enterprise: {
     comfortable: '20px',
     compact: '16px'
@@ -201,11 +201,19 @@ var StyledControls = external_styled_components_default.a.div.withConfig({
     comfortable: '24px',
     compact: '24px'
   }
+}), Object(themes_["pick"])({
+  enterprise: Object(external_styled_components_["css"])(["transform:translateY(-1px);"]),
+  prisma: Object(external_styled_components_["css"])(["transform:translateX(1px);"])
 }), function (_ref) {
   var $isAppend = _ref.$isAppend;
-  return $isAppend ? Object(external_styled_components_["css"])(["left:0;"]) : Object(external_styled_components_["css"])(["right:0;"]);
+  return $isAppend ? Object(external_styled_components_["css"])(["margin-right:8px;", ""], Object(themes_["pick"])({
+    prisma: Object(external_styled_components_["css"])(["transform:translateX(-1px);"])
+  })) : Object(external_styled_components_["css"])(["margin-left:8px;"]);
 });
-var incrementor = Object(external_styled_components_["css"])(["position:absolute;padding:3px;font-size:inherit;min-width:0;min-height:0;height:calc(50% + 0.5px);width:100%;"]);
+var incrementor = Object(external_styled_components_["css"])(["position:relative;padding:3px;font-size:inherit;min-width:0;min-height:0;height:", ";width:100%;"], Object(themes_["pick"])({
+  enterprise: 'calc(50% + 1.5px)',
+  prisma: '50%'
+}));
 var StyledPlusButton = external_styled_components_default()(Button_default.a).withConfig({
   displayName: "NumberStyles__StyledPlusButton",
   componentId: "sc-2ekj9s-2"
@@ -225,7 +233,7 @@ var StyledPlusButton = external_styled_components_default()(Button_default.a).wi
 var StyledMinusButton = external_styled_components_default()(Button_default.a).withConfig({
   displayName: "NumberStyles__StyledMinusButton",
   componentId: "sc-2ekj9s-3"
-})(["", ";bottom:0;border-top-left-radius:0;border-top-right-radius:0;", " &:not([disabled]){&,&:hover{", ";}}"], incrementor, function (_ref3) {
+})(["", ";bottom:1px;border-top-left-radius:0;border-top-right-radius:0;", " &:not([disabled]){&,&:hover{", ";}}"], incrementor, function (_ref3) {
   var append = _ref3.append;
   return append && Object(themes_["pick"])({
     enterprise: {
@@ -251,11 +259,11 @@ var prismaButton = external_styled_components_default()(Clickable_default.a).wit
 var StyledPrismaPlusButton = external_styled_components_default()(prismaButton).withConfig({
   displayName: "NumberStyles__StyledPrismaPlusButton",
   componentId: "sc-2ekj9s-5"
-})(["top:0;border-top-right-radius:4px;padding-top:5px;"]);
+})(["border-top-right-radius:4px;"]);
 var StyledPrismaMinusButton = external_styled_components_default()(prismaButton).withConfig({
   displayName: "NumberStyles__StyledPrismaMinusButton",
   componentId: "sc-2ekj9s-6"
-})(["bottom:0;border-bottom-right-radius:4px;padding-bottom:5px;"]);
+})(["border-bottom-right-radius:4px;padding-bottom:5px;"]);
 
 // CONCATENATED MODULE: ./src/Number/Number.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); }
@@ -338,8 +346,7 @@ var defaultProps = {
   placeholder: '',
   prepend: false,
   roundTo: 5,
-  step: 1,
-  useSyntheticPlaceholder: false
+  step: 1
 };
 
 var Number_Number = /*#__PURE__*/function (_Component) {
@@ -522,6 +529,11 @@ var Number_Number = /*#__PURE__*/function (_Component) {
 
     if (false) {}
 
+    if (Object(external_lodash_["has"])(props, 'useSyntheticPlaceholder')) {
+      // eslint-disable-next-line no-console
+      console.warn("The 'Number' prop 'useSyntheticPlaceholder' has been marked for deprecation.");
+    }
+
     Number.validatePrependAppend(_this.props.append, _this.props.prepend);
     return _this;
   }
@@ -650,16 +662,8 @@ var Number_Number = /*#__PURE__*/function (_Component) {
           min = _this$props4.min,
           prepend = _this$props4.prepend,
           splunkTheme = _this$props4.splunkTheme;
-      var family = splunkTheme.family,
-          density = splunkTheme.density;
       var textProps = Object(external_lodash_["omit"])(this.props, ['defaultValue', 'hideStepButtons', 'max', 'min', 'roundTo', 'spellCheck', 'step']);
-      var isPrisma = family === 'prisma';
-      var padding = density === 'compact' ? '16px' : '20px';
-      var inputStyle = append && !prepend ? {
-        paddingLeft: padding
-      } : {
-        paddingRight: padding
-      };
+      var isPrisma = splunkTheme.isPrisma;
       var buttonProps = isPrisma ? {} : {
         append: append,
         prepend: !append,
@@ -699,6 +703,13 @@ var Number_Number = /*#__PURE__*/function (_Component) {
       }, buttonProps);
 
       var styledMinus = isPrisma ? /*#__PURE__*/external_react_default.a.createElement(StyledPrismaMinusButton, minusProps, minusIcon) : /*#__PURE__*/external_react_default.a.createElement(StyledMinusButton, minusProps, minusIcon);
+      var isAppend = append && !prepend;
+      var startAdornment = (!disabled || isPrisma) && isAppend && !hideStepButtons && /*#__PURE__*/external_react_default.a.createElement(StyledControls, {
+        $isAppend: isAppend
+      }, styledPlus, styledMinus);
+      var endAdornment = (!disabled || isPrisma) && !isAppend && !hideStepButtons && /*#__PURE__*/external_react_default.a.createElement(StyledControls, {
+        $isAppend: isAppend
+      }, styledPlus, styledMinus);
       return /*#__PURE__*/external_react_default.a.createElement(StyledText, Number_extends({
         autoCapitalize: "off",
         autoComplete: "off",
@@ -710,7 +721,6 @@ var Number_Number = /*#__PURE__*/function (_Component) {
         }
       }, textProps, {
         inline: inline,
-        inputStyle: !hideStepButtons ? inputStyle : undefined,
         onChange: this.handleInputChange,
         onBlur: this.handleInputBlur,
         onKeyDown: this.handleKeyDown,
@@ -718,10 +728,10 @@ var Number_Number = /*#__PURE__*/function (_Component) {
         value: this.state.stringValue,
         "aria-describedby": describedBy,
         error: error,
-        "data-test-value": value
-      }), (isPrisma || !disabled) && !hideStepButtons && /*#__PURE__*/external_react_default.a.createElement(StyledControls, {
-        $isAppend: append && !prepend
-      }, styledPlus, styledMinus));
+        "data-test-value": value,
+        startAdornment: startAdornment,
+        endAdornment: endAdornment
+      }));
     }
   }]);
 
@@ -755,7 +765,7 @@ NumberWithTheme.propTypes = Number_Number.propTypes;
 
 /***/ }),
 
-/***/ 16:
+/***/ 17:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Button");
@@ -769,17 +779,17 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 22:
+/***/ 21:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-icons/SVG");
+module.exports = require("@splunk/react-ui/Text");
 
 /***/ }),
 
-/***/ 26:
+/***/ 23:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-ui/Text");
+module.exports = require("@splunk/react-icons/SVG");
 
 /***/ }),
 

package/Paginator.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 112);
+/******/ 	return __webpack_require__(__webpack_require__.s = 116);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 112:
+/***/ 116:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -120,7 +120,7 @@ var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/format"
-var format_ = __webpack_require__(41);
+var format_ = __webpack_require__(40);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
 var i18n_ = __webpack_require__(5);
@@ -133,7 +133,7 @@ var Box_default = /*#__PURE__*/__webpack_require__.n(Box_);
 var themes_ = __webpack_require__(0);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/More"
-var More_ = __webpack_require__(90);
+var More_ = __webpack_require__(93);
 var More_default = /*#__PURE__*/__webpack_require__.n(More_);
 
 // EXTERNAL MODULE: ./src/icons/ThemedIcon.tsx
@@ -341,7 +341,7 @@ _defineProperty(Button_PaginatorButton, "defaultProps", defaultProps);
 
 /* harmony default export */ var Button = (Button_PaginatorButton);
 // EXTERNAL MODULE: ./src/icons/ChevronLeft.tsx
-var ChevronLeft = __webpack_require__(52);
+var ChevronLeft = __webpack_require__(54);
 
 // EXTERNAL MODULE: ./src/icons/ChevronRight.tsx
 var ChevronRight = __webpack_require__(27);
@@ -603,7 +603,7 @@ module.exports = require("lodash");
 
 /***/ }),
 
-/***/ 41:
+/***/ 40:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/ui-utils/format");
@@ -624,14 +624,14 @@ module.exports = require("@splunk/ui-utils/i18n");
 
 /***/ }),
 
-/***/ 52:
+/***/ 54:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ChevronLeft; });
 /* 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_ChevronLeft__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(53);
+/* harmony import */ var _splunk_react_icons_ChevronLeft__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(55);
 /* harmony import */ var _splunk_react_icons_ChevronLeft__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_ChevronLeft__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);
@@ -674,7 +674,7 @@ function ChevronLeft(props) {
 
 /***/ }),
 
-/***/ 53:
+/***/ 55:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/ChevronLeft");
@@ -831,7 +831,7 @@ module.exports = require("@splunk/react-ui/Box");
 
 /***/ }),
 
-/***/ 90:
+/***/ 93:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/More");

package/Paragraph.js

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

package/Popover.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 126);
+/******/ 	return __webpack_require__(__webpack_require__.s = 132);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 12:
+/***/ 11:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -128,7 +128,7 @@ function updateReactRef(ref, current) {
 
 /***/ }),
 
-/***/ 126:
+/***/ 132:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -148,11 +148,7 @@ var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "react-dom"
-var external_react_dom_ = __webpack_require__(60);
-
-// EXTERNAL MODULE: external "react-event-listener"
-var external_react_event_listener_ = __webpack_require__(15);
-var external_react_event_listener_default = /*#__PURE__*/__webpack_require__.n(external_react_event_listener_);
+var external_react_dom_ = __webpack_require__(63);
 
 // EXTERNAL MODULE: external "lodash"
 var external_lodash_ = __webpack_require__(4);
@@ -163,8 +159,12 @@ var themes_ = __webpack_require__(0);
 // EXTERNAL MODULE: external "@splunk/react-ui/Animation"
 var Animation_ = __webpack_require__(30);
 
+// EXTERNAL MODULE: external "@splunk/react-ui/EventListener"
+var EventListener_ = __webpack_require__(14);
+var EventListener_default = /*#__PURE__*/__webpack_require__.n(EventListener_);
+
 // 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 "@splunk/react-ui/ScrollContainerContext"
@@ -172,7 +172,7 @@ var ScrollContainerContext_ = __webpack_require__(35);
 var ScrollContainerContext_default = /*#__PURE__*/__webpack_require__.n(ScrollContainerContext_);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/focus"
-var focus_ = __webpack_require__(24);
+var focus_ = __webpack_require__(25);
 
 // CONCATENATED MODULE: ./src/Popover/getPlacement.ts
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -445,7 +445,7 @@ function getPlacement(args) {
 var PopoverContext = /*#__PURE__*/Object(external_react_["createContext"])({});
 
 // EXTERNAL MODULE: external "react-spring"
-var external_react_spring_ = __webpack_require__(19);
+var external_react_spring_ = __webpack_require__(18);
 
 // EXTERNAL MODULE: external "styled-components"
 var external_styled_components_ = __webpack_require__(3);
@@ -516,7 +516,7 @@ var StyledLowerRightCorner = external_styled_components_default.a.div.withConfig
 })(["position:fixed;right:0;bottom:0;"]);
 
 // EXTERNAL MODULE: ./src/utils/updateReactRef.ts
-var updateReactRef = __webpack_require__(12);
+var updateReactRef = __webpack_require__(11);
 
 // CONCATENATED MODULE: ./src/Popover/Popover.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); }
@@ -733,16 +733,18 @@ var Popover_Popover = /*#__PURE__*/function (_Component) {
     Popover_defineProperty(_assertThisInitialized(_this), "getElPosition", function (anchorEl) {
       var rect = anchorEl.getBoundingClientRect();
       var a = {
-        top: rect.top,
-        left: rect.left,
         width: anchorEl.offsetWidth,
         height: anchorEl.offsetHeight
       };
       var pointTo = _this.props.pointTo;
-      a.right = rect.right || a.left + a.width;
-      a.bottom = rect.bottom || a.top + a.height;
-      a.middle = pointTo && Object(external_lodash_["has"])(pointTo, 'x') ? a.left + (pointTo.x || 0) : a.left + (a.right - a.left) / 2;
-      a.center = pointTo && Object(external_lodash_["has"])(pointTo, 'y') ? a.top + (pointTo.y || 0) : a.top + (a.bottom - a.top) / 2;
+      var pointToHorizontal = pointTo && Object(external_lodash_["has"])(pointTo, 'x');
+      var pointToVertical = pointTo && Object(external_lodash_["has"])(pointTo, 'y');
+      a.left = pointToHorizontal ? rect.left + ((pointTo === null || pointTo === void 0 ? void 0 : pointTo.x) || 0) : rect.left;
+      a.top = pointToVertical ? rect.top + ((pointTo === null || pointTo === void 0 ? void 0 : pointTo.y) || 0) : rect.top;
+      a.right = pointToHorizontal ? a.left + a.width : rect.left + a.width || rect.right;
+      a.bottom = pointToVertical ? a.top + a.height : rect.top + a.height || rect.bottom;
+      a.middle = pointToHorizontal ? a.left : rect.left + (a.right - rect.left) / 2;
+      a.center = pointToVertical ? a.top : rect.top + (a.bottom - rect.top) / 2;
       return a;
     });
 
@@ -759,8 +761,8 @@ var Popover_Popover = /*#__PURE__*/function (_Component) {
             open = _this$props.open,
             repositionMode = _this$props.repositionMode,
             splunkTheme = _this$props.splunkTheme;
-        var scrollContainer = _this.context || 'window';
-        var isPrisma = splunkTheme.family === 'prisma'; // If these conditions are not met, we cannot set the popover.
+        var scrollContainer = _this.context || window;
+        var isPrisma = splunkTheme.isPrisma; // If these conditions are not met, we cannot set the popover.
 
         if (!open || !_this.outerContainerEl || !anchor || !state.anchorEl || !_this.windowSizeMeasurementEl) {
           if (false) {}
@@ -770,7 +772,7 @@ var Popover_Popover = /*#__PURE__*/function (_Component) {
 
         var anchorPos = _this.getElPosition(state.anchorEl);
 
-        var scrollContainerPos = scrollContainer !== 'window' ? _this.getElPosition(scrollContainer) : undefined;
+        var scrollContainerPos = scrollContainer !== window ? _this.getElPosition(scrollContainer) : undefined;
 
         if (scrolling && autoCloseWhenOffScreen) {
           if (_this.autoCloseWhenOffScreen(anchorPos, scrollContainerPos)) {
@@ -907,7 +909,7 @@ var Popover_Popover = /*#__PURE__*/function (_Component) {
           arrowStyle = _this$state.arrowStyle,
           outerContainerStyle = _this$state.outerContainerStyle,
           placement = _this$state.placement;
-      var isPrisma = splunkTheme.family === 'prisma';
+      var isPrisma = splunkTheme.isPrisma;
       var displayAppearance = isPrisma && appearance === 'inverted' ? 'normal' : appearance;
       var _this$state2 = _this.state,
           maxHeight = _this$state2.maxHeight,
@@ -950,6 +952,7 @@ var Popover_Popover = /*#__PURE__*/function (_Component) {
         onRest: _this.handleAnimationEnd
       }, function (interpolatedStyles) {
         return /*#__PURE__*/external_react_default.a.createElement(Styled, {
+          "data-test": "outer-popover",
           style: Popover_objectSpread(Popover_objectSpread({}, outerContainerStyle), interpolatedStyles),
           ref: function ref(c) {
             _this.outerContainerEl = c;
@@ -1063,20 +1066,31 @@ var Popover_Popover = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var open = this.props.open || this.state.animating;
-      var scrollContainer = this.context || 'window';
-      var hasCustomizedScrollContainer = scrollContainer !== 'window';
-      return [hasCustomizedScrollContainer && /*#__PURE__*/external_react_default.a.createElement(external_react_event_listener_default.a, {
+      var scrollContainer = this.context || window;
+      var hasCustomizedScrollContainer = scrollContainer !== window;
+      return [hasCustomizedScrollContainer && /*#__PURE__*/external_react_default.a.createElement(EventListener_default.a, {
         target: scrollContainer,
-        onScroll: this.handleScroll // see constructor
-        ,
+        eventType: "scroll",
+        listener: this.handleScroll,
+        options: {
+          passive: false,
+          capture: true
+        },
         key: "eventListener"
-      }), /*#__PURE__*/external_react_default.a.createElement(external_react_event_listener_default.a, {
-        target: "window",
-        onResize: this.setPlacement // see constructor
-        ,
-        onScroll: this.handleWindowScroll // see constructor
-        ,
-        key: "eventListenerOnWindow"
+      }), /*#__PURE__*/external_react_default.a.createElement(EventListener_default.a, {
+        target: window,
+        eventType: "resize",
+        listener: this.setPlacement,
+        key: "eventListenerOnWindowResize"
+      }), /*#__PURE__*/external_react_default.a.createElement(EventListener_default.a, {
+        target: window,
+        eventType: "scroll",
+        listener: this.handleWindowScroll,
+        options: {
+          passive: false,
+          capture: true
+        },
+        key: "eventListenerOnWindowScroll"
       }), /*#__PURE__*/external_react_default.a.createElement(Layer_default.a, {
         closeReasons: Object(external_lodash_["intersection"])(this.props.closeReasons.filter(function (reason) {
           return reason !== 'offScreen';
@@ -1118,14 +1132,14 @@ PopoverWithTheme.propTypes = Popover_Popover.propTypes;
 
 /***/ }),
 
-/***/ 15:
+/***/ 14:
 /***/ (function(module, exports) {
 
-module.exports = require("react-event-listener");
+module.exports = require("@splunk/react-ui/EventListener");
 
 /***/ }),
 
-/***/ 19:
+/***/ 18:
 /***/ (function(module, exports) {
 
 module.exports = require("react-spring");
@@ -1139,7 +1153,7 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 24:
+/***/ 25:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/ui-utils/focus");
@@ -1174,14 +1188,14 @@ module.exports = require("lodash");
 
 /***/ }),
 
-/***/ 49:
+/***/ 50:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Layer");
 
 /***/ }),
 
-/***/ 60:
+/***/ 63:
 /***/ (function(module, exports) {
 
 module.exports = require("react-dom");

package/Progress.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 = 159);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 144:
+/***/ 159:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -130,11 +130,11 @@ var external_styled_components_ = __webpack_require__(3);
 var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
 
 // EXTERNAL MODULE: external "tinycolor2"
-var external_tinycolor2_ = __webpack_require__(66);
+var external_tinycolor2_ = __webpack_require__(44);
 var external_tinycolor2_default = /*#__PURE__*/__webpack_require__.n(external_tinycolor2_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Tooltip"
-var Tooltip_ = __webpack_require__(45);
+var Tooltip_ = __webpack_require__(46);
 var Tooltip_default = /*#__PURE__*/__webpack_require__.n(Tooltip_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Box"
@@ -340,17 +340,17 @@ module.exports = require("lodash");
 
 /***/ }),
 
-/***/ 45:
+/***/ 44:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-ui/Tooltip");
+module.exports = require("tinycolor2");
 
 /***/ }),
 
-/***/ 66:
+/***/ 46:
 /***/ (function(module, exports) {
 
-module.exports = require("tinycolor2");
+module.exports = require("@splunk/react-ui/Tooltip");
 
 /***/ }),