@splunk/react-ui 4.9.0 → 4.12.0

package/RadioBar.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 129);
+/******/ 	return __webpack_require__(__webpack_require__.s = 125);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,14 +101,14 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 11:
+/***/ 12:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Clickable");
 
 /***/ }),
 
-/***/ 129:
+/***/ 125:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -130,15 +130,14 @@ var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_pr
 // EXTERNAL MODULE: external "lodash"
 var external_lodash_ = __webpack_require__(4);
 
+// EXTERNAL MODULE: external "@splunk/ui-utils/keyboard"
+var keyboard_ = __webpack_require__(9);
+
 // EXTERNAL MODULE: external "@splunk/themes"
 var themes_ = __webpack_require__(0);
 
-// EXTERNAL MODULE: external "@splunk/react-ui/Box"
-var Box_ = __webpack_require__(8);
-var Box_default = /*#__PURE__*/__webpack_require__.n(Box_);
-
 // 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"
@@ -146,7 +145,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_);
 
 // CONCATENATED MODULE: ./src/RadioBar/OptionStyles.ts
@@ -156,10 +155,10 @@ var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
 var StyledClickable = external_styled_components_default()(Clickable_default.a).withConfig({
   displayName: "OptionStyles__StyledClickable",
   componentId: "fyq77p-0"
-})(["border-radius:3px;flex:1 1 auto;display:flex;justify-content:center;align-items:center;color:", ";padding:2px 12px;height:calc(", " - 6px);position:relative;gap:8px;& + &{margin-left:2px;}", " ", " &:focus{color:", ";box-shadow:", ";z-index:2;&:active{background-color:", ";}}", " ", ""], themes_["variables"].contentColorDefault, themes_["variables"].inputHeight, function (_ref) {
+})(["border-radius:3px;flex:1 1 auto;display:flex;justify-content:center;align-items:center;color:", ";padding:2px 12px;height:calc(", " - 6px);position:relative;gap:", ";& + &{margin-left:2px;}", " ", " &:focus{color:", ";box-shadow:", ";z-index:2;&:active{background-color:", ";}}", " ", ""], themes_["variables"].contentColorDefault, themes_["variables"].inputHeight, themes_["variables"].spacingXSmall, function (_ref) {
   var $selected = _ref.$selected;
   return $selected && Object(external_styled_components_["css"])(["color:", ";background-color:", ";box-shadow:", ";"], themes_["variables"].contentColorActive, Object(themes_["pick"])({
-    dark: 'rgba(255, 255, 255, 0.2)',
+    dark: themes_["variables"].interactiveColorOverlaySelected,
     light: themes_["variables"].white
   }), themes_["variables"].embossShadow);
 }, function (_ref2) {
@@ -181,13 +180,15 @@ var StyledIcon = external_styled_components_default.a.div.withConfig({
 var StyledLabel = external_styled_components_default.a.div.withConfig({
   displayName: "OptionStyles__StyledLabel",
   componentId: "fyq77p-2"
-})(["flex:0 1 auto;", " padding:", ";&:not(:first-child){margin-left:8px;}"], themes_["mixins"].ellipsis, Object(themes_["pick"])({
-  enterprise: '0 12px'
+})(["", " flex:0 1 auto;", ""], themes_["mixins"].ellipsis, Object(themes_["pick"])({
+  enterprise: Object(external_styled_components_["css"])(["&:not(:first-child){margin-left:", ";}"], themes_["variables"].spacingXSmall)
 }));
 var StyledAdornment = external_styled_components_default.a.div.withConfig({
   displayName: "OptionStyles__StyledAdornment",
   componentId: "fyq77p-3"
-})(["flex:0 0 auto;"]);
+})(["flex:0 0 auto;", ""], Object(themes_["pick"])({
+  enterprise: Object(external_styled_components_["css"])(["&:not(:first-child){margin-left:", ";}"], themes_["variables"].spacingXSmall)
+}));
 
 // CONCATENATED MODULE: ./src/RadioBar/RadioBarContext.tsx
 
@@ -234,10 +235,25 @@ function Option(_ref) {
   var _useContext = Object(external_react_["useContext"])(RadioBar_RadioBarContext),
       onClickContext = _useContext.onClick,
       appearanceContext = _useContext.appearance,
-      errorContext = _useContext.error;
+      errorContext = _useContext.error,
+      onKeyDownContext = _useContext.onKeyDown,
+      firstValueContext = _useContext.firstValue,
+      selectedValueContext = _useContext.selectedValue;
 
   if (false) {}
 
+  var tabIndex = -1;
+
+  if (selectedValueContext) {
+    if (value === selectedValueContext) {
+      tabIndex = 0;
+    }
+  } else if (value === firstValueContext) {
+    tabIndex = 0;
+  }
+
+  var focusedTabIndex = tabIndex;
+
   if (appearanceContext === 'prisma') {
     return /*#__PURE__*/external_react_default.a.createElement(StyledClickable, _extends({
       "data-test": "option",
@@ -252,8 +268,14 @@ function Option(_ref) {
       role: "radio",
       "aria-checked": selected,
       $selected: selected,
-      tabIndex: selected ? -1 : undefined,
-      disabled: disabled
+      tabIndex: focusedTabIndex,
+      disabled: disabled,
+      onKeyDown: function onKeyDown(e) {
+        return onKeyDownContext === null || onKeyDownContext === void 0 ? void 0 : onKeyDownContext(e, {
+          value: value,
+          label: label
+        });
+      }
     }), icon && /*#__PURE__*/external_react_default.a.createElement(StyledIcon, null, icon), startAdornment && /*#__PURE__*/external_react_default.a.createElement(StyledAdornment, null, startAdornment), label && /*#__PURE__*/external_react_default.a.createElement(StyledLabel, null, label), endAdornment && /*#__PURE__*/external_react_default.a.createElement(StyledAdornment, null, endAdornment));
   }
 
@@ -275,12 +297,22 @@ function Option(_ref) {
     },
     role: "radio",
     "aria-checked": selected,
-    tabIndex: selected ? -1 : undefined
+    tabIndex: focusedTabIndex,
+    onKeyDown: function onKeyDown(e) {
+      return onKeyDownContext === null || onKeyDownContext === void 0 ? void 0 : onKeyDownContext(e, {
+        value: value,
+        label: label
+      });
+    }
   }), startAdornment && /*#__PURE__*/external_react_default.a.createElement(StyledAdornment, null, startAdornment), label && /*#__PURE__*/external_react_default.a.createElement(StyledLabel, null, label), endAdornment && /*#__PURE__*/external_react_default.a.createElement(StyledAdornment, null, endAdornment));
 }
 
 Option.propTypes = propTypes;
 /* harmony default export */ var RadioBar_Option = (Option);
+// EXTERNAL MODULE: external "@splunk/react-ui/Box"
+var Box_ = __webpack_require__(8);
+var Box_default = /*#__PURE__*/__webpack_require__.n(Box_);
+
 // CONCATENATED MODULE: ./src/RadioBar/RadioBarStyles.ts
 
 
@@ -288,13 +320,18 @@ Option.propTypes = propTypes;
 var StyledRadioBar = external_styled_components_default()(Box_default.a).withConfig({
   displayName: "RadioBarStyles__StyledRadioBar",
   componentId: "gg1b79-0"
-})(["height:", ";padding:2px;border-radius:", ";background:", ";border:1px solid ", ";[data-inline] + &{margin-left:", ";}"], themes_["variables"].inputHeight, themes_["variables"].borderRadius, function (_ref) {
-  var $disabled = _ref.$disabled;
-  return $disabled ? themes_["variables"].interactiveColorBackgroundDisabled : themes_["variables"].interactiveColorBackground;
-}, function (_ref2) {
-  var $error = _ref2.$error;
-  return $error ? themes_["variables"].accentColorNegative : 'transparent';
-}, themes_["variables"].spacingLarge);
+})(["height:", ";", " [data-inline] + &{margin-left:", ";}"], themes_["variables"].inputHeight, Object(themes_["pick"])({
+  prisma: Object(external_styled_components_["css"])(["padding:2px;border-radius:", ";border:1px solid ", ";background:", ";"], themes_["variables"].borderRadius, function (_ref) {
+    var $error = _ref.$error;
+    return $error ? themes_["variables"].accentColorNegative : 'transparent';
+  }, function (_ref2) {
+    var $disabled = _ref2.$disabled;
+    return $disabled ? themes_["variables"].interactiveColorBackgroundDisabled : themes_["variables"].interactiveColorBackground;
+  })
+}), Object(themes_["pick"])({
+  enterprise: themes_["variables"].spacingHalf,
+  prisma: themes_["variables"].spacingSmall
+}));
 
 // CONCATENATED MODULE: ./src/RadioBar/RadioBar.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); }
@@ -372,6 +409,7 @@ var RadioBar_RadioBar = /*#__PURE__*/function (_Component) {
   var _super = _createSuper(RadioBar);
 
   // @docs-props-type RadioBarPropsBase
+  // eslint-disable-line @typescript-eslint/no-explicit-any
   function RadioBar(props) {
     var _this;
 
@@ -381,15 +419,66 @@ var RadioBar_RadioBar = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "controlledExternally", void 0);
 
+    _defineProperty(_assertThisInitialized(_this), "filteredValues", []);
+
     _defineProperty(_assertThisInitialized(_this), "handleClick", function (e, data) {
-      var name = _this.props.name;
+      _this.handleOnChange(e, data);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleOnKeyDown", function (e, _ref) {
+      var value = _ref.value,
+          label = _ref.label;
+      var eventKeyCode = Object(keyboard_["keycode"])(e.nativeEvent);
+      var myTarget = e.currentTarget;
+      var nextTarget = null;
+      var nextIndex = 0;
+
+      var currentIndex = _this.filteredValues.indexOf(value);
+
+      if (eventKeyCode === 'down' || eventKeyCode === 'right') {
+        var _myTarget$parentEleme;
+
+        e.preventDefault();
+        nextIndex = currentIndex + 1;
 
+        if (nextIndex > _this.filteredValues.length - 1) {
+          nextIndex = 0;
+        }
+
+        nextTarget = myTarget.nextSibling ? myTarget.nextSibling : (_myTarget$parentEleme = myTarget.parentElement) === null || _myTarget$parentEleme === void 0 ? void 0 : _myTarget$parentEleme.firstElementChild;
+      } else if (eventKeyCode === 'up' || eventKeyCode === 'left') {
+        var _myTarget$parentEleme2;
+
+        e.preventDefault();
+        nextIndex = currentIndex - 1;
+
+        if (nextIndex < 0) {
+          nextIndex = _this.filteredValues.length - 1;
+        }
+
+        nextTarget = myTarget.previousSibling ? myTarget.previousSibling : (_myTarget$parentEleme2 = myTarget.parentElement) === null || _myTarget$parentEleme2 === void 0 ? void 0 : _myTarget$parentEleme2.lastElementChild;
+      }
+
+      if (nextTarget) {
+        var _nextTarget;
+
+        (_nextTarget = nextTarget) === null || _nextTarget === void 0 ? void 0 : _nextTarget.focus();
+        var nextValue = _this.filteredValues[nextIndex];
+
+        _this.handleOnChange(e, {
+          value: nextValue,
+          label: label
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleOnChange", function (e, data) {
       if (_this.props.value !== data.value) {
         var _this$props$onChange, _this$props;
 
-        (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, e, _objectSpread(_objectSpread({}, data), {}, {
-          name: name
-        }));
+        (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, e, _objectSpread({
+          name: _this.props.name
+        }, data));
 
         if (!_this.isControlled()) {
           _this.setState({
@@ -427,6 +516,8 @@ var RadioBar_RadioBar = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
+      var _this2 = this;
+
       var _this$props2 = this.props,
           appearance = _this$props2.appearance,
           children = _this$props2.children,
@@ -442,13 +533,11 @@ var RadioBar_RadioBar = /*#__PURE__*/function (_Component) {
       var selectedValue = this.isControlled() ? value : this.state.value;
       var isPrisma = splunkTheme.isPrisma;
       var disabled = true;
-      var contextValue = {
-        appearance: isPrisma ? 'prisma' : appearance,
-        onClick: this.handleClick,
-        error: isPrisma ? false : error
-      };
-      var childrenFormatted = external_react_["Children"].toArray(children).filter(external_react_["isValidElement"]).map(function (item, i, _ref) {
-        var length = _ref.length;
+      this.filteredValues = [];
+      var childrenFormatted = external_react_["Children"].toArray(children).filter(external_react_["isValidElement"]).map(function (item, i, _ref2) {
+        var length = _ref2.length;
+
+        _this2.filteredValues.push(item.props.value);
 
         if (item.props && !item.props.disabled) {
           disabled = false;
@@ -461,16 +550,24 @@ var RadioBar_RadioBar = /*#__PURE__*/function (_Component) {
           prepend: i > 0
         });
       });
-      var RadioBarTag = isPrisma ? StyledRadioBar : Box_default.a;
-      return /*#__PURE__*/external_react_default.a.createElement(RadioBarTag, RadioBar_extends({
+      var firstItemValue = this.filteredValues[0];
+      var contextValue = {
+        appearance: isPrisma ? 'prisma' : appearance,
+        onClick: this.handleClick,
+        error: isPrisma ? false : error,
+        onKeyDown: this.handleOnKeyDown,
+        firstValue: firstItemValue,
+        selectedValue: selectedValue
+      };
+      return /*#__PURE__*/external_react_default.a.createElement(StyledRadioBar, RadioBar_extends({
+        flex: true,
         $disabled: disabled,
         $error: error,
         "data-test": "radio-bar",
         "data-test-value": selectedValue,
         role: "radiogroup",
         "aria-labelledby": labelledBy,
-        "aria-describedby": describedBy,
-        flex: true
+        "aria-describedby": describedBy
       }, Object(external_lodash_["omit"])(otherProps, 'onChange')), /*#__PURE__*/external_react_default.a.createElement(RadioBar_RadioBarContext.Provider, {
         value: contextValue
       }, childrenFormatted));
@@ -498,7 +595,7 @@ RadioBarWithThemeOption.Option = RadioBar_Option;
 
 /***/ }),
 
-/***/ 17:
+/***/ 16:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Button");
@@ -531,6 +628,13 @@ module.exports = require("lodash");
 
 module.exports = require("@splunk/react-ui/Box");
 
+/***/ }),
+
+/***/ 9:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/ui-utils/keyboard");
+
 /***/ })
 
 /******/ });

package/RadioList.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 = 126);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -108,7 +108,7 @@ module.exports = require("@splunk/ui-utils/id");
 
 /***/ }),
 
-/***/ 130:
+/***/ 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 = 167);
+/******/ 	return __webpack_require__(__webpack_require__.s = 165);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 12:
+/***/ 11:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -142,7 +142,7 @@ module.exports = require("@splunk/react-ui/EventListener");
 
 /***/ }),
 
-/***/ 167:
+/***/ 165:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -267,7 +267,7 @@ var StyledResize = external_styled_components_default.a.button.withConfig({
 }));
 
 // EXTERNAL MODULE: ./src/utils/updateReactRef.ts
-var updateReactRef = __webpack_require__(12);
+var updateReactRef = __webpack_require__(11);
 
 // CONCATENATED MODULE: ./src/Resize/Resize.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); }

package/ResultsMenu.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 168);
+/******/ 	return __webpack_require__(__webpack_require__.s = 166);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,21 +101,14 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 102:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/ui-utils/userAgent");
-
-/***/ }),
-
-/***/ 103:
+/***/ 100:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/WaitSpinner");
 
 /***/ }),
 
-/***/ 12:
+/***/ 11:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -149,7 +142,7 @@ module.exports = require("@splunk/react-ui/Menu");
 
 /***/ }),
 
-/***/ 168:
+/***/ 166:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -174,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__(102);
+var userAgent_ = __webpack_require__(99);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Menu"
 var Menu_ = __webpack_require__(13);
@@ -185,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__(103);
+var WaitSpinner_ = __webpack_require__(100);
 var WaitSpinner_default = /*#__PURE__*/__webpack_require__.n(WaitSpinner_);
 
 // EXTERNAL MODULE: external "@splunk/themes"
@@ -246,7 +239,7 @@ var StyledLoadingMessage = external_styled_components_default.a.div.withConfig({
 }));
 
 // EXTERNAL MODULE: ./src/utils/updateReactRef.ts
-var updateReactRef = __webpack_require__(12);
+var updateReactRef = __webpack_require__(11);
 
 // CONCATENATED MODULE: ./src/ResultsMenu/ResultsMenu.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); }
@@ -296,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
 };
@@ -350,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) {
@@ -369,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 = {
@@ -434,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() {
@@ -454,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({
@@ -494,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
         }
@@ -551,6 +565,13 @@ module.exports = require("lodash");
 
 module.exports = require("@splunk/ui-utils/i18n");
 
+/***/ }),
+
+/***/ 99:
+/***/ (function(module, exports) {
+
+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 = 169);
+/******/ 	return __webpack_require__(__webpack_require__.s = 167);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 169:
+/***/ 167:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";