@splunk/react-ui 4.6.0 → 4.7.0

package/Modal.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 113);
+/******/ 	return __webpack_require__(__webpack_require__.s = 118);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -108,7 +108,7 @@ module.exports = require("@splunk/ui-utils/id");
 
 /***/ }),
 
-/***/ 113:
+/***/ 118:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -133,11 +133,11 @@ 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__(70);
+var ModalLayer_ = __webpack_require__(77);
 var ModalLayer_default = /*#__PURE__*/__webpack_require__.n(ModalLayer_);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/focus"
-var focus_ = __webpack_require__(25);
+var focus_ = __webpack_require__(26);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/id"
 var id_ = __webpack_require__(10);
@@ -163,7 +163,7 @@ var themes_ = __webpack_require__(0);
 var StyledBox = external_styled_components_default()(Box_default.a).withConfig({
   displayName: "BodyStyles__StyledBox",
   componentId: "lv54z7-0"
-})(["background-color:", ";", " ", " flex:0 1 auto;overflow:auto;@media all and (-ms-high-contrast:none){*::-ms-backdrop,&{max-height:calc(100vh - 180px);}}"], Object(themes_["pick"])({
+})(["background-color:", ";", " flex:0 1 auto;overflow:auto;@media all and (-ms-high-contrast:none){*::-ms-backdrop,&{max-height:calc(100vh - 180px);}}"], Object(themes_["pick"])({
   enterprise: themes_["variables"].backgroundColor,
   prisma: themes_["variables"].backgroundColorDialog
 }), Object(themes_["pick"])({
@@ -175,8 +175,6 @@ var StyledBox = external_styled_components_default()(Box_default.a).withConfig({
     comfortable: Object(external_styled_components_["css"])(["padding:12px 24px;&:first-child{padding-top:36px;}&:last-child{padding-bottom:36px;}"]),
     compact: Object(external_styled_components_["css"])(["padding:8px 24px;&:first-child{padding-top:26px;}&:last-child{padding-bottom:26px;}"])
   }
-}), Object(themes_["pick"])({
-  prisma: Object(external_styled_components_["css"])(["color:", ";"], themes_["variables"].contentColorActive)
 }));
 
 // CONCATENATED MODULE: ./src/Modal/Body.tsx
@@ -281,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__(64);
+var CloseButton_ = __webpack_require__(67);
 var CloseButton_default = /*#__PURE__*/__webpack_require__.n(CloseButton_);
 
 // CONCATENATED MODULE: ./src/Modal/HeaderStyles.ts
@@ -322,10 +320,10 @@ var StyledTitleWrapper = external_styled_components_default.a.div.withConfig({
   displayName: "HeaderStyles__StyledTitleWrapper",
   componentId: "sc-1y722ut-1"
 })(["", ";flex-direction:column;"], themes_["mixins"].reset('flex'));
-var StyledIcon = external_styled_components_default.a.svg.withConfig({
+var StyledIcon = external_styled_components_default.a.div.withConfig({
   displayName: "HeaderStyles__StyledIcon",
   componentId: "sc-1y722ut-2"
-})(["margin-right:16px;", " width:", ";height:", ";padding:2px;border-radius:4px;flex-shrink:0;"], Object(themes_["pick"])({
+})(["display:inline-flex;align-items:center;justify-content:center;margin-right:", ";", " width:", ";height:", ";flex-shrink:0;"], themes_["variables"].spacingLarge, Object(themes_["pick"])({
   prisma: Object(external_styled_components_["css"])(["background-color:", ";"], themes_["variables"].transparent)
 }), Object(themes_["pick"])({
   comfortable: '40px',
@@ -441,7 +439,7 @@ var Styled = external_styled_components_default()(external_react_spring_["animat
   componentId: "sc-5fn8ds-0"
 })(["", ";flex-direction:column;position:fixed;left:50%;transform:translateX(-50%);z-index:", ";", ""], themes_["mixins"].reset('flex'), themes_["variables"].zindexModal, Object(themes_["pick"])({
   enterprise: Object(external_styled_components_["css"])(["box-shadow:0 1px 5px ", ";max-height:calc(100vh - ", " * 4);max-width:calc(100vw - ", " * 4);"], themes_["variables"].black, themes_["variables"].spacing, themes_["variables"].spacing),
-  prisma: Object(external_styled_components_["css"])(["box-shadow:", ";max-height:calc(100vh - ", " * 4);max-width:calc(100vw - ", " * 4);"], themes_["variables"].modalShadow, themes_["variables"].spacingXLarge, themes_["variables"].spacingXLarge)
+  prisma: Object(external_styled_components_["css"])(["box-shadow:", ";max-height:calc(100vh - ", " * 4);max-width:calc(100vw - ", " * 4);border-radius:", ";overflow:hidden;"], themes_["variables"].modalShadow, themes_["variables"].spacingXLarge, themes_["variables"].spacingXLarge, themes_["variables"].borderRadius)
 }));
 
 // CONCATENATED MODULE: ./src/Modal/Modal.tsx
@@ -552,35 +550,43 @@ var Modal_Modal = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleInitialFocus", function () {
-      var initialFocus = _this.props.initialFocus;
-      _this.initialFocusTimeoutId = Object(external_lodash_["defer"])(function () {
-        var focusTarget; // not using the takeFocus() util here because it
-        // doesn't work for all values of "initialFocus"
-        // and it has a nested defer() call, which we want to avoid
-
-        if (_this.initialFocus !== initialFocus) {
-          if (initialFocus === 'first') {
-            if (_this.el) {
-              /* eslint-disable prefer-destructuring */
-
-              /* prefer-desturucting leads to harder-to-read syntax in this case */
-              focusTarget = Object(focus_["getSortedTabbableElements"])(_this.el)[0];
-              /* eslint-enable prefer-destructuring */
-            }
-          } else if (initialFocus === 'container') {
-            focusTarget = _this.el;
-          } else if (_typeof(initialFocus) === 'object') {
-            focusTarget = initialFocus;
-          } // Typescript isn't happy with optional chaining here
+      var _this$props = _this.props,
+          initialFocus = _this$props.initialFocus,
+          open = _this$props.open;
 
+      if (open) {
+        _this.initialFocusTimeoutId = Object(external_lodash_["defer"])(function () {
+          var focusTarget; // not using the takeFocus() util here because it
+          // doesn't work for all values of "initialFocus"
+          // and it has a nested defer() call, which we want to avoid
+
+          if (_this.initialFocus !== initialFocus) {
+            if (initialFocus === 'first') {
+              if (_this.el) {
+                /* eslint-disable prefer-destructuring */
+
+                /* prefer-desturucting leads to harder-to-read syntax in this case */
+                focusTarget = Object(focus_["getSortedTabbableElements"])(_this.el)[0];
+                /* eslint-enable prefer-destructuring */
+              }
+            } else if (initialFocus === 'container') {
+              focusTarget = _this.el;
+            } else if (_typeof(initialFocus) === 'object') {
+              focusTarget = initialFocus;
+            } // Typescript isn't happy with optional chaining here
+
+
+            if (focusTarget != null && 'focus' in focusTarget) {
+              focusTarget.focus();
+            }
 
-          if (focusTarget != null && 'focus' in focusTarget) {
-            focusTarget.focus();
+            _this.initialFocus = initialFocus;
           }
-
-          _this.initialFocus = initialFocus;
-        }
-      });
+        });
+      } else {
+        _this.initialFocus = null;
+        clearTimeout(_this.initialFocusTimeoutId);
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleModalMount", function (element) {
@@ -594,16 +600,16 @@ var Modal_Modal = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleRequestClose", function (e) {
-      var _this$props$onRequest, _this$props;
+      var _this$props$onRequest, _this$props2;
 
       _this.initialFocus = null;
-      (_this$props$onRequest = (_this$props = _this.props).onRequestClose) === null || _this$props$onRequest === void 0 ? void 0 : _this$props$onRequest.call(_this$props, e);
+      (_this$props$onRequest = (_this$props2 = _this.props).onRequestClose) === null || _this$props$onRequest === void 0 ? void 0 : _this$props$onRequest.call(_this$props2, e);
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderModal", function (interpolatedStyle) {
-      var _this$props2 = _this.props,
-          style = _this$props2.style,
-          children = _this$props2.children;
+      var _this$props3 = _this.props,
+          style = _this$props3.style,
+          children = _this$props3.children;
       var top = interpolatedStyle.top,
           opacity = interpolatedStyle.opacity;
       var clonedChildren = external_react_["Children"].toArray(children).filter(external_react_["isValidElement"]);
@@ -631,11 +637,14 @@ var Modal_Modal = /*#__PURE__*/function (_Component) {
   }
 
   _createClass(Modal, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.handleInitialFocus();
+    }
+  }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _this$props3 = this.props,
-          initialFocus = _this$props3.initialFocus,
-          open = _this$props3.open;
+      var initialFocus = this.props.initialFocus;
 
       if (prevProps.initialFocus !== initialFocus) {
         // cancel the defer() set up in handleInitialFocus()
@@ -643,11 +652,7 @@ var Modal_Modal = /*#__PURE__*/function (_Component) {
         clearTimeout(this.initialFocusTimeoutId);
       }
 
-      if (open) {
-        this.handleInitialFocus();
-      } else {
-        this.initialFocus = null;
-      }
+      this.handleInitialFocus();
     }
   }, {
     key: "render",
@@ -697,7 +702,7 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 25:
+/***/ 26:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/ui-utils/focus");
@@ -725,14 +730,14 @@ module.exports = require("lodash");
 
 /***/ }),
 
-/***/ 64:
+/***/ 67:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/CloseButton");
 
 /***/ }),
 
-/***/ 70:
+/***/ 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 = 156);
+/******/ 	return __webpack_require__(__webpack_require__.s = 163);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 156:
+/***/ 163:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -123,7 +123,7 @@ var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_pr
 var Animation_ = __webpack_require__(30);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Layer"
-var Layer_ = __webpack_require__(52);
+var Layer_ = __webpack_require__(55);
 var Layer_default = /*#__PURE__*/__webpack_require__.n(Layer_);
 
 // EXTERNAL MODULE: external "styled-components"
@@ -243,6 +243,7 @@ var ModalLayer_ModalLayer = /*#__PURE__*/function (_Component) {
         return /*#__PURE__*/external_react_default.a.createElement("div", null,
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         renderModal(interpolatedStyle), open && useLayerForClickAway && /*#__PURE__*/external_react_default.a.createElement(StyledClickAwayOverlay, {
+          "data-test": "modal-overlay",
           onMouseDown: _this.handleClickAway,
           key: "clickAway",
           style: {
@@ -328,7 +329,7 @@ module.exports = require("@splunk/react-ui/Animation");
 
 /***/ }),
 
-/***/ 52:
+/***/ 55:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Layer");

package/Monogram.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 157);
+/******/ 	return __webpack_require__(__webpack_require__.s = 164);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,14 +101,14 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 12:
+/***/ 11:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Clickable");
 
 /***/ }),
 
-/***/ 157:
+/***/ 164:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -135,7 +135,7 @@ var external_styled_components_ = __webpack_require__(3);
 var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Clickable"
-var Clickable_ = __webpack_require__(12);
+var Clickable_ = __webpack_require__(11);
 var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
 
 // EXTERNAL MODULE: external "@splunk/themes"

package/Multiselect.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 122);
+/******/ 	return __webpack_require__(__webpack_require__.s = 128);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -108,7 +108,14 @@ module.exports = require("@splunk/ui-utils/id");
 
 /***/ }),
 
-/***/ 11:
+/***/ 100:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Chip");
+
+/***/ }),
+
+/***/ 12:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -135,7 +142,7 @@ function updateReactRef(ref, current) {
 
 /***/ }),
 
-/***/ 122:
+/***/ 128:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -312,7 +319,7 @@ _defineProperty(Option_Option, "defaultProps", defaultProps);
 
 /* harmony default export */ var Multiselect_Option = (Option_Option);
 // EXTERNAL MODULE: ./src/Select/SelectBase.tsx + 2 modules
-var SelectBase = __webpack_require__(41);
+var SelectBase = __webpack_require__(42);
 
 // CONCATENATED MODULE: ./src/Multiselect/Compact.tsx
 function Compact_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { Compact_typeof = function _typeof(obj) { return typeof obj; }; } else { Compact_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return Compact_typeof(obj); }
@@ -462,7 +469,7 @@ Compact_defineProperty(Compact_Compact, "Heading", Menu_["Heading"]);
 
 /* harmony default export */ var Multiselect_Compact = (Compact_Compact);
 // EXTERNAL MODULE: external "@splunk/ui-utils/filter"
-var filter_ = __webpack_require__(24);
+var filter_ = __webpack_require__(25);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/id"
 var id_ = __webpack_require__(10);
@@ -471,7 +478,7 @@ var id_ = __webpack_require__(10);
 var keyboard_ = __webpack_require__(9);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Chip"
-var Chip_ = __webpack_require__(94);
+var Chip_ = __webpack_require__(100);
 var Chip_default = /*#__PURE__*/__webpack_require__.n(Chip_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ResultsMenu"
@@ -483,7 +490,7 @@ var Popover_ = __webpack_require__(16);
 var Popover_default = /*#__PURE__*/__webpack_require__.n(Popover_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
-var ScreenReaderContent_ = __webpack_require__(15);
+var ScreenReaderContent_ = __webpack_require__(14);
 var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReaderContent_);
 
 // EXTERNAL MODULE: external "styled-components"
@@ -573,7 +580,7 @@ var StyledOverlay = external_styled_components_default.a.div.withConfig({
 });
 
 // EXTERNAL MODULE: ./src/utils/updateReactRef.ts
-var updateReactRef = __webpack_require__(11);
+var updateReactRef = __webpack_require__(12);
 
 // CONCATENATED MODULE: ./src/Multiselect/Normal.tsx
 function Normal_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { Normal_typeof = function _typeof(obj) { return typeof obj; }; } else { Normal_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return Normal_typeof(obj); }
@@ -1447,7 +1454,7 @@ module.exports = require("@splunk/react-ui/Menu");
 
 /***/ }),
 
-/***/ 15:
+/***/ 14:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/ScreenReaderContent");
@@ -1482,14 +1489,14 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 21:
+/***/ 23:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Text");
 
 /***/ }),
 
-/***/ 24:
+/***/ 25:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/ui-utils/filter");
@@ -1745,7 +1752,7 @@ module.exports = require("lodash");
 
 /***/ }),
 
-/***/ 41:
+/***/ 42:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1769,7 +1776,7 @@ var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_pr
 var external_lodash_ = __webpack_require__(4);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/filter"
-var filter_ = __webpack_require__(24);
+var filter_ = __webpack_require__(25);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/id"
 var id_ = __webpack_require__(10);
@@ -1796,14 +1803,14 @@ var ResultsMenu_ = __webpack_require__(32);
 var ResultsMenu_default = /*#__PURE__*/__webpack_require__.n(ResultsMenu_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Text"
-var Text_ = __webpack_require__(21);
+var Text_ = __webpack_require__(23);
 var Text_default = /*#__PURE__*/__webpack_require__.n(Text_);
 
 // EXTERNAL MODULE: ./src/icons/CaretDown.tsx
 var CaretDown = __webpack_require__(36);
 
 // EXTERNAL MODULE: ./src/icons/Search.tsx
-var Search = __webpack_require__(43);
+var Search = __webpack_require__(44);
 
 // EXTERNAL MODULE: ./src/Select/OptionBase.tsx
 var OptionBase = __webpack_require__(28);
@@ -2101,7 +2108,7 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "dropdown", null);
 
-    _defineProperty(_assertThisInitialized(_this), "firstSelectedOption", null);
+    _defineProperty(_assertThisInitialized(_this), "firstSelectedEnabledOption", null);
 
     _defineProperty(_assertThisInitialized(_this), "firstSelectedOptionIndex", void 0);
 
@@ -2246,6 +2253,10 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
       var value = _ref.value;
       e.preventDefault();
 
+      if (!_this.state.open) {
+        return;
+      }
+
       _this.toggleValue(e, value);
     });
 
@@ -2350,8 +2361,8 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
 
         (_this$props$onOpen = (_this$props6 = _this.props).onOpen) === null || _this$props$onOpen === void 0 ? void 0 : _this$props$onOpen.call(_this$props6);
 
-        if (_this.firstSelectedOption && !_this.hasFilter()) {
-          _this.firstSelectedOption.focus();
+        if (_this.firstSelectedEnabledOption && !_this.hasFilter()) {
+          _this.firstSelectedEnabledOption.focus();
         } else {
           var _this$firstSelectedOp;
 
@@ -2398,7 +2409,7 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "handleOptionMount", function (c, itemKey, isFirst) {
       if (isFirst) {
-        _this.firstSelectedOption = c;
+        _this.firstSelectedEnabledOption = c;
       }
 
       if (c == null) {
@@ -2433,7 +2444,7 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
       var childrenTopCount = 0;
       var hasDivider = false; // used to avoid overwriting the selected item ref in multiple mode
 
-      var foundSelected;
+      var foundSelectedAndEnabled;
       var topValues = showSelectedValuesFirst === 'immediately' ? _this.getTopValues() : topValuesState;
       var children = external_react_["Children"].toArray(_this.props.children).reduce(function (acc, item, i) {
         // ignore Headings and Dividers
@@ -2448,7 +2459,7 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
         }
 
         var selected = currentValues && currentValues.indexOf(item.props.value) >= 0;
-        var isFirstSelected = !!selected && !foundSelected;
+        var isFirstSelectedAndEnabled = !!selected && !item.props.disabled && !foundSelectedAndEnabled;
         var useMatchOptions = allowKeyMatching && !multiple && !filter && !isLoadingOptions && !onScrollBottom;
         var itemKey = "".concat(item.props.label, "-").concat(item.props.value);
         var filterIndex = -1;
@@ -2474,12 +2485,12 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
           multiple: multiple,
           role: 'option',
           ref: function ref(element) {
-            return _this.handleOptionMount(element, itemKey, isFirstSelected);
+            return _this.handleOptionMount(element, itemKey, isFirstSelectedAndEnabled);
           }
         });
 
-        if (selected) {
-          foundSelected = true;
+        if (isFirstSelectedAndEnabled) {
+          foundSelectedAndEnabled = true;
         }
 
         if (topValues && topValues.indexOf(item.props.value) >= 0) {
@@ -2855,7 +2866,12 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
         });
 
         if (matchedItem) {
-          acc.push(matchedItem.props.children || matchedItem.props.label); // if not in multiple mode, add the icon
+          acc.push(matchedItem.props.children || matchedItem.props.label);
+
+          if (!matchedItem.props.disabled) {
+            isAnyValueSelected = true;
+          } // if not in multiple mode, add the icon
+
 
           if (!multiple && currentValues.length === 1) {
             icon = matchedItem.props.icon;
@@ -2874,7 +2890,6 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
       label = valuesLabel; // only apply prefix / suffix if the label is not empty
 
       if (label.length > 0) {
-        isAnyValueSelected = true;
         label = this.wrapLabel({
           prefixLabel: prefixLabel,
           label: label,
@@ -2969,7 +2984,8 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
           isLoading: _this2.props.isLoadingOptions,
           id: _this2.menuId
         }, Object(external_lodash_["pick"])(_this2.props, 'noOptionsMessage', 'footerMessage', 'animateLoading', 'loadingMessage'), {
-          style: _objectSpread(_objectSpread({}, internalMenuStyle), _this2.props.menuStyle)
+          style: _objectSpread(_objectSpread({}, internalMenuStyle), _this2.props.menuStyle),
+          tabIndex: currentValues.length > 0 && !isAnyValueSelected ? 0 : undefined
         }), finalChildren);
       };
 
@@ -2987,7 +3003,7 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
           _this2.dropdown = c;
         },
         retainFocus: false,
-        takeFocus: !isAnyValueSelected || !!filterEnabled
+        takeFocus: currentValues.length === 0 || currentValues.length > 0 && !isAnyValueSelected || !!filterEnabled
       }, createMenu);
     }
   }]);
@@ -3012,14 +3028,14 @@ _defineProperty(SelectBase_SelectBase, "invalidLinkAppearanceProps", ['append',
 
 /***/ }),
 
-/***/ 43:
+/***/ 44:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Search; });
 /* 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_Search__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(48);
+/* harmony import */ var _splunk_react_icons_Search__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(51);
 /* harmony import */ var _splunk_react_icons_Search__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_Search__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);
@@ -3062,17 +3078,17 @@ function Search(props) {
 
 /***/ }),
 
-/***/ 48:
+/***/ 5:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-icons/Search");
+module.exports = require("@splunk/ui-utils/i18n");
 
 /***/ }),
 
-/***/ 5:
+/***/ 51:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/ui-utils/i18n");
+module.exports = require("@splunk/react-icons/Search");
 
 /***/ }),
 
@@ -3231,13 +3247,6 @@ module.exports = require("@splunk/react-ui/Box");
 
 module.exports = require("@splunk/ui-utils/keyboard");
 
-/***/ }),
-
-/***/ 94:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-ui/Chip");
-
 /***/ })
 
 /******/ });

package/Number.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 138);
+/******/ 	return __webpack_require__(__webpack_require__.s = 144);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,14 +101,14 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 12:
+/***/ 11:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Clickable");
 
 /***/ }),
 
-/***/ 138:
+/***/ 144:
 /***/ (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__(23);
+var SVG_ = __webpack_require__(24);
 var SVG_default = /*#__PURE__*/__webpack_require__.n(SVG_);
 
 // CONCATENATED MODULE: ./src/Number/IncrementIcon.tsx
@@ -166,11 +166,11 @@ var Button_ = __webpack_require__(17);
 var Button_default = /*#__PURE__*/__webpack_require__.n(Button_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Clickable"
-var Clickable_ = __webpack_require__(12);
+var Clickable_ = __webpack_require__(11);
 var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Text"
-var Text_ = __webpack_require__(21);
+var Text_ = __webpack_require__(23);
 var Text_default = /*#__PURE__*/__webpack_require__.n(Text_);
 
 // CONCATENATED MODULE: ./src/Number/NumberStyles.ts
@@ -779,14 +779,14 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 21:
+/***/ 23:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Text");
 
 /***/ }),
 
-/***/ 23:
+/***/ 24:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/SVG");