@splunk/react-ui 4.11.0 → 4.12.0

package/Progress.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 = 164);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 162:
+/***/ 164:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -123,18 +123,18 @@ var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_pr
 var external_lodash_ = __webpack_require__(4);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/AnimationToggle"
-var AnimationToggle_ = __webpack_require__(34);
+var AnimationToggle_ = __webpack_require__(36);
 
 // EXTERNAL MODULE: external "styled-components"
 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__(46);
+var external_tinycolor2_ = __webpack_require__(47);
 var external_tinycolor2_default = /*#__PURE__*/__webpack_require__.n(external_tinycolor2_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Tooltip"
-var Tooltip_ = __webpack_require__(48);
+var Tooltip_ = __webpack_require__(49);
 var Tooltip_default = /*#__PURE__*/__webpack_require__.n(Tooltip_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Box"
@@ -326,7 +326,7 @@ module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 34:
+/***/ 36:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/AnimationToggle");
@@ -340,14 +340,14 @@ module.exports = require("lodash");
 
 /***/ }),
 
-/***/ 46:
+/***/ 47:
 /***/ (function(module, exports) {
 
 module.exports = require("tinycolor2");
 
 /***/ }),
 
-/***/ 48:
+/***/ 49:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Tooltip");

package/RadioBar.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 124);
+/******/ 	return __webpack_require__(__webpack_require__.s = 125);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -108,7 +108,7 @@ module.exports = require("@splunk/react-ui/Clickable");
 
 /***/ }),
 
-/***/ 124:
+/***/ 125:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -137,7 +137,7 @@ var keyboard_ = __webpack_require__(9);
 var themes_ = __webpack_require__(0);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Button"
-var Button_ = __webpack_require__(17);
+var Button_ = __webpack_require__(16);
 var Button_default = /*#__PURE__*/__webpack_require__.n(Button_);
 
 // EXTERNAL MODULE: external "styled-components"
@@ -595,7 +595,7 @@ RadioBarWithThemeOption.Option = RadioBar_Option;
 
 /***/ }),
 
-/***/ 17:
+/***/ 16:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Button");

package/RadioList.js

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

package/Resize.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 = 165);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -142,7 +142,7 @@ module.exports = require("@splunk/react-ui/EventListener");
 
 /***/ }),
 
-/***/ 163:
+/***/ 165:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

package/ResultsMenu.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 = 166);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,6 +101,13 @@ module.exports = require("prop-types");
 
 /***/ }),
 
+/***/ 100:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/WaitSpinner");
+
+/***/ }),
+
 /***/ 11:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -135,7 +142,7 @@ module.exports = require("@splunk/react-ui/Menu");
 
 /***/ }),
 
-/***/ 164:
+/***/ 166:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -160,7 +167,7 @@ var external_lodash_ = __webpack_require__(4);
 var i18n_ = __webpack_require__(5);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/userAgent"
-var userAgent_ = __webpack_require__(98);
+var userAgent_ = __webpack_require__(99);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Menu"
 var Menu_ = __webpack_require__(13);
@@ -171,7 +178,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/WaitSpinner"
-var WaitSpinner_ = __webpack_require__(99);
+var WaitSpinner_ = __webpack_require__(100);
 var WaitSpinner_default = /*#__PURE__*/__webpack_require__.n(WaitSpinner_);
 
 // EXTERNAL MODULE: external "@splunk/themes"
@@ -282,6 +289,7 @@ var propTypes = {
   loadingMessage: external_prop_types_default.a.node,
   maxHeight: external_prop_types_default.a.number,
   noOptionsMessage: external_prop_types_default.a.node,
+  onScroll: external_prop_types_default.a.func,
   onScrollBottom: external_prop_types_default.a.func,
   placement: external_prop_types_default.a.string
 };
@@ -336,13 +344,19 @@ var ResultsMenu_ResultsMenu = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleScroll", function (e) {
-      if (e.target && _this.state.menuEl) {
-        var bottomScrollMenu = _this.state.menuEl.scrollHeight - _this.state.menuEl.offsetHeight - _this.scrollBottomOffset; // Adding 1 due to border of menu item.
+      var _this$props$onScroll, _this$props;
 
-        if (_this.state.menuEl.scrollTop + 1 >= bottomScrollMenu) {
-          _this.handleScrollBottom(e);
+      if (_this.props.onScrollBottom != null) {
+        if (e.target && _this.state.menuEl) {
+          var bottomScrollMenu = _this.state.menuEl.scrollHeight - _this.state.menuEl.offsetHeight - _this.scrollBottomOffset; // Adding 1 due to border of menu item.
+
+          if (_this.state.menuEl.scrollTop + 1 >= bottomScrollMenu) {
+            _this.handleScrollBottom(e);
+          }
         }
       }
+
+      (_this$props$onScroll = (_this$props = _this.props).onScroll) === null || _this$props$onScroll === void 0 ? void 0 : _this$props$onScroll.call(_this$props, e);
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleWheelMenu", function (e) {
@@ -355,21 +369,27 @@ var ResultsMenu_ResultsMenu = /*#__PURE__*/function (_Component) {
       var currentChildrenCount = external_react_["Children"].count(_this.props.children);
       var _this$state = _this.state,
           childrenCount = _this$state.childrenCount,
-          menuEl = _this$state.menuEl,
           menuMaxHeight = _this$state.menuMaxHeight; // If menu is full length, load more items.
 
-      if (menuEl && menuEl.scrollHeight === menuEl.offsetHeight) {
-        _this.handleScrollBottom();
-      }
+      if (_this.checkFullHeight()) {
+        _this.handleScrollBottom(null);
+      } // avoid triggering this logic if this.state.childrenCount is null
+      // because that's not a real change in the number of children
+      // and thus we want to avoid resetting the value of scrollBottomTriggered
 
-      if (menuMaxHeight && currentChildrenCount !== childrenCount) {
-        // Update state if children count differs.
+
+      if (menuMaxHeight && currentChildrenCount != null && currentChildrenCount !== childrenCount) {
         _this.setState({
           numberOfItemsLoaded: currentChildrenCount - (childrenCount !== null && childrenCount !== void 0 ? childrenCount : 0),
-          childrenCount: currentChildrenCount,
           scrollBottomTriggered: false
         });
       }
+
+      if (currentChildrenCount !== childrenCount) {
+        _this.setState({
+          childrenCount: currentChildrenCount
+        });
+      }
     });
 
     _this.state = {
@@ -420,14 +440,20 @@ var ResultsMenu_ResultsMenu = /*#__PURE__*/function (_Component) {
     value: function handleScrollBottom(e) {
       // Prevent multiple calls to onScrollBottom.
       if (!this.state.scrollBottomTriggered) {
-        var _this$props$onScrollB, _this$props;
+        var _this$props$onScrollB, _this$props2;
 
         this.setState({
           scrollBottomTriggered: true
         });
-        (_this$props$onScrollB = (_this$props = this.props).onScrollBottom) === null || _this$props$onScrollB === void 0 ? void 0 : _this$props$onScrollB.call(_this$props, e);
+        (_this$props$onScrollB = (_this$props2 = this.props).onScrollBottom) === null || _this$props$onScrollB === void 0 ? void 0 : _this$props$onScrollB.call(_this$props2, e);
       }
     }
+  }, {
+    key: "checkFullHeight",
+    value: function checkFullHeight() {
+      var menuEl = this.state.menuEl;
+      return menuEl && menuEl.scrollHeight === menuEl.offsetHeight;
+    }
   }, {
     key: "renderFooterMessage",
     value: function renderFooterMessage() {
@@ -440,24 +466,25 @@ var ResultsMenu_ResultsMenu = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props2 = this.props,
-          animateLoading = _this$props2.animateLoading,
-          children = _this$props2.children,
-          controlledExternally = _this$props2.controlledExternally,
-          childrenStart = _this$props2.childrenStart,
-          isLoading = _this$props2.isLoading,
-          loadingMessage = _this$props2.loadingMessage,
-          noOptionsMessage = _this$props2.noOptionsMessage,
-          onScrollBottom = _this$props2.onScrollBottom,
-          placement = _this$props2.placement,
-          style = _this$props2.style,
-          tabIndex = _this$props2.tabIndex;
+      var _this$props3 = this.props,
+          animateLoading = _this$props3.animateLoading,
+          children = _this$props3.children,
+          controlledExternally = _this$props3.controlledExternally,
+          childrenStart = _this$props3.childrenStart,
+          isLoading = _this$props3.isLoading,
+          loadingMessage = _this$props3.loadingMessage,
+          noOptionsMessage = _this$props3.noOptionsMessage,
+          onScrollBottom = _this$props3.onScrollBottom,
+          placement = _this$props3.placement,
+          style = _this$props3.style,
+          tabIndex = _this$props3.tabIndex;
       var otherProps = Object(external_lodash_["omit"])(this.props, Object(external_lodash_["keys"])(ResultsMenu.propTypes));
       // Assumption: that you cannot be filtered if you are a result
       var hasResults = external_react_["Children"].toArray(children).filter(external_react_["isValidElement"]).some(function (_ref) {
         var type = _ref.type;
         return !(type === Menu_["Divider"] && type.filterFirst || (type === Menu_["Divider"] || type === Menu_["Heading"]) && (type.filterLast || type.filterConsecutive));
       });
+      var fullHeight = this.checkFullHeight();
       /* eslint-disable jsx-a11y/aria-role */
 
       return /*#__PURE__*/external_react_default.a.createElement(Styled, _extends({
@@ -480,16 +507,17 @@ var ResultsMenu_ResultsMenu = /*#__PURE__*/function (_Component) {
         },
         controlledExternally: controlledExternally,
         elementRef: this.handleMenuMount,
-        onScroll: onScrollBottom ? this.handleScroll : undefined,
+        onScroll: this.handleScroll,
         stopScrollPropagation: true,
         tabIndex: tabIndex
       }, !hasResults && noOptionsMessage && !isLoading && /*#__PURE__*/external_react_default.a.createElement(Menu_default.a.Item, {
         "data-test": "no-results-message",
         disabled: true
-      }, noOptionsMessage), children, onScrollBottom &&
+      }, noOptionsMessage), children, onScrollBottom && !fullHeight &&
       /*#__PURE__*/
       // Bottom spacer fills in the space of new items being loaded by using the minimum possible height x menuItems.
       external_react_default.a.createElement("div", {
+        "data-test": "results-menu-bottom-spacer",
         style: {
           height: this.state.scrollBottomTriggered ? this.state.numberOfItemsLoaded * this.itemMinHeight || 0 : 0
         }
@@ -539,17 +567,10 @@ module.exports = require("@splunk/ui-utils/i18n");
 
 /***/ }),
 
-/***/ 98:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/ui-utils/userAgent");
-
-/***/ }),
-
 /***/ 99:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-ui/WaitSpinner");
+module.exports = require("@splunk/ui-utils/userAgent");
 
 /***/ })
 

package/ScreenReaderContent.js

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

package/Scroll.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 140);
+/******/ 	return __webpack_require__(__webpack_require__.s = 141);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -128,7 +128,7 @@ function updateReactRef(ref, current) {
 
 /***/ }),
 
-/***/ 140:
+/***/ 141:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -167,7 +167,7 @@ var EventListener_ = __webpack_require__(15);
 var EventListener_default = /*#__PURE__*/__webpack_require__.n(EventListener_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ScrollContainerContext"
-var ScrollContainerContext_ = __webpack_require__(35);
+var ScrollContainerContext_ = __webpack_require__(37);
 
 // EXTERNAL MODULE: ./src/utils/updateReactRef.ts
 var updateReactRef = __webpack_require__(11);
@@ -575,7 +575,7 @@ module.exports = require("@splunk/react-ui/Animation");
 
 /***/ }),
 
-/***/ 35:
+/***/ 37:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/ScrollContainerContext");

package/ScrollContainerContext.js

@@ -82,12 +82,12 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 176);
+/******/ 	return __webpack_require__(__webpack_require__.s = 178);
 /******/ })
 /************************************************************************/
 /******/ ({
 
-/***/ 176:
+/***/ 178:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

package/Search.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 166);
+/******/ 	return __webpack_require__(__webpack_require__.s = 168);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("@splunk/ui-utils/id");
 
 /***/ }),
 
-/***/ 100:
+/***/ 101:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/usePrevious");
@@ -142,14 +142,7 @@ module.exports = require("@splunk/react-ui/Menu");
 
 /***/ }),
 
-/***/ 16:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-ui/Popover");
-
-/***/ }),
-
-/***/ 166:
+/***/ 168:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -186,15 +179,15 @@ var keyboard_ = __webpack_require__(9);
 var Menu_ = __webpack_require__(13);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/usePrevious"
-var usePrevious_ = __webpack_require__(100);
+var usePrevious_ = __webpack_require__(101);
 var usePrevious_default = /*#__PURE__*/__webpack_require__.n(usePrevious_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Popover"
-var Popover_ = __webpack_require__(16);
+var Popover_ = __webpack_require__(17);
 var Popover_default = /*#__PURE__*/__webpack_require__.n(Popover_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ResultsMenu"
-var ResultsMenu_ = __webpack_require__(32);
+var ResultsMenu_ = __webpack_require__(33);
 var ResultsMenu_default = /*#__PURE__*/__webpack_require__.n(ResultsMenu_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Text"
@@ -400,6 +393,7 @@ var Search_propTypes = {
   onFocus: external_prop_types_default.a.func,
   onKeyDown: external_prop_types_default.a.func,
   onOpen: external_prop_types_default.a.func,
+  onScroll: external_prop_types_default.a.func,
   placeholder: external_prop_types_default.a.string,
   value: external_prop_types_default.a.string
 };
@@ -678,7 +672,7 @@ function Search(_ref2) {
       controlledExternally: true,
       maxHeight: maxHeight !== null && maxHeight !== void 0 ? maxHeight : undefined,
       isLoading: isLoadingOptions
-    }, Object(external_lodash_["pick"])(otherProps, 'className'), {
+    }, Object(external_lodash_["pick"])(otherProps, 'className', 'onScroll'), {
       noOptionsMessage: noOptionsMessage,
       footerMessage: footerMessage,
       animateLoading: animateLoading,
@@ -702,7 +696,7 @@ function Search(_ref2) {
 
   return /*#__PURE__*/external_react_default.a.createElement(Text_default.a, Search_extends({
     "data-test": "search"
-  }, Object(external_lodash_["omit"])(otherProps, 'className'), {
+  }, Object(external_lodash_["omit"])(otherProps, 'className', 'onScroll'), {
     appearance: "search",
     autoCapitalize: "off",
     autoComplete: "off",
@@ -750,6 +744,13 @@ Search.Heading = Menu_["Heading"];
 
 
 
+/***/ }),
+
+/***/ 17:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Popover");
+
 /***/ }),
 
 /***/ 2:
@@ -766,7 +767,7 @@ module.exports = require("@splunk/react-ui/Text");
 
 /***/ }),
 
-/***/ 32:
+/***/ 33:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/ResultsMenu");