@splunk/react-ui 4.15.0 → 4.16.1

package/Multiselect.js

@@ -236,8 +236,8 @@ function Icon(_ref) {
 
 
   if (prismaSize === 'small') {
-    var SVG = Prisma16 || Prisma24;
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(SVG, _extends({
+    var SVGEnterprise = Prisma16 || Prisma24;
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(SVGEnterprise, _extends({
       width: "16",
       height: "16"
     }, prismaProps));
@@ -245,9 +245,9 @@ function Icon(_ref) {
 
 
   if (density === 'compact') {
-    var _SVG = Prisma20 || Prisma24;
+    var _SVGEnterprise = Prisma20 || Prisma24;
 
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_SVG, _extends({
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_SVGEnterprise, _extends({
       width: "20",
       height: "20"
     }, prismaProps));
@@ -718,8 +718,8 @@ _defineProperty(Option, "defaultProps", defaultProps);
 /* 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__(54);
-/* 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 _splunk_react_icons_enterprise_Search__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(56);
+/* harmony import */ var _splunk_react_icons_enterprise_Search__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_enterprise_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);
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -753,7 +753,7 @@ function Prisma16(_ref2) {
 
 function Search(props) {
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_ThemedIcon__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"], _extends({
-    Enterprise: _splunk_react_icons_Search__WEBPACK_IMPORTED_MODULE_1___default.a,
+    Enterprise: _splunk_react_icons_enterprise_Search__WEBPACK_IMPORTED_MODULE_1___default.a,
     Prisma16: Prisma16,
     Prisma24: Prisma24
   }, props));
@@ -775,30 +775,37 @@ module.exports = require("@splunk/react-ui/Link");
 /***/ }),
 /* 43 */,
 /* 44 */,
-/* 45 */
+/* 45 */,
+/* 46 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/ResultsMenu");
 
 /***/ }),
-/* 46 */,
 /* 47 */,
-/* 48 */
+/* 48 */,
+/* 49 */
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/extend");
 
 /***/ }),
-/* 49 */,
-/* 50 */
+/* 50 */,
+/* 51 */
+/***/ (function(module, exports) {
+
+module.exports = require("lodash/find");
+
+/***/ }),
+/* 52 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return CaretDown; });
 /* 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_Caret__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(51);
-/* harmony import */ var _splunk_react_icons_Caret__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_Caret__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _splunk_react_icons_enterprise_Caret__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(53);
+/* harmony import */ var _splunk_react_icons_enterprise_Caret__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_enterprise_Caret__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);
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -821,45 +828,38 @@ function Prisma24(_ref) {
 
 function CaretDown(props) {
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_ThemedIcon__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"], _extends({
-    Enterprise: _splunk_react_icons_Caret__WEBPACK_IMPORTED_MODULE_1___default.a,
+    Enterprise: _splunk_react_icons_enterprise_Caret__WEBPACK_IMPORTED_MODULE_1___default.a,
     Prisma24: Prisma24
   }, props));
 }
 
 /***/ }),
-/* 51 */
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-icons/Caret");
-
-/***/ }),
-/* 52 */,
 /* 53 */
 /***/ (function(module, exports) {
 
-module.exports = require("lodash/defer");
+module.exports = require("@splunk/react-icons/enterprise/Caret");
 
 /***/ }),
-/* 54 */
+/* 54 */,
+/* 55 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-icons/Search");
+module.exports = require("lodash/defer");
 
 /***/ }),
-/* 55 */,
 /* 56 */
 /***/ (function(module, exports) {
 
-module.exports = require("lodash/without");
+module.exports = require("@splunk/react-icons/enterprise/Search");
 
 /***/ }),
-/* 57 */
+/* 57 */,
+/* 58 */
 /***/ (function(module, exports) {
 
-module.exports = require("lodash/find");
+module.exports = require("lodash/without");
 
 /***/ }),
-/* 58 */,
 /* 59 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -885,7 +885,7 @@ var castArray_ = __webpack_require__(62);
 var castArray_default = /*#__PURE__*/__webpack_require__.n(castArray_);
 
 // EXTERNAL MODULE: external "lodash/find"
-var find_ = __webpack_require__(57);
+var find_ = __webpack_require__(51);
 var find_default = /*#__PURE__*/__webpack_require__.n(find_);
 
 // EXTERNAL MODULE: external "lodash/forEachRight"
@@ -921,7 +921,7 @@ var uniq_ = __webpack_require__(105);
 var uniq_default = /*#__PURE__*/__webpack_require__.n(uniq_);
 
 // EXTERNAL MODULE: external "lodash/without"
-var without_ = __webpack_require__(56);
+var without_ = __webpack_require__(58);
 var without_default = /*#__PURE__*/__webpack_require__.n(without_);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/filter"
@@ -948,7 +948,7 @@ var Link_default = /*#__PURE__*/__webpack_require__.n(Link_);
 var Menu_ = __webpack_require__(15);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ResultsMenu"
-var ResultsMenu_ = __webpack_require__(45);
+var ResultsMenu_ = __webpack_require__(46);
 var ResultsMenu_default = /*#__PURE__*/__webpack_require__.n(ResultsMenu_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Text"
@@ -956,7 +956,7 @@ var Text_ = __webpack_require__(30);
 var Text_default = /*#__PURE__*/__webpack_require__.n(Text_);
 
 // EXTERNAL MODULE: ./src/icons/CaretDown.tsx
-var CaretDown = __webpack_require__(50);
+var CaretDown = __webpack_require__(52);
 
 // EXTERNAL MODULE: ./src/icons/Search.tsx
 var Search = __webpack_require__(39);
@@ -1595,19 +1595,145 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "createToggle", function () {
+      var _this$getCurrentValue4;
+
+      var _this$props11 = _this.props,
+          toggle = _this$props11.toggle,
+          appearance = _this$props11.appearance,
+          children = _this$props11.children,
+          describedBy = _this$props11.describedBy,
+          disabled = _this$props11.disabled,
+          elementRef = _this$props11.elementRef,
+          error = _this$props11.error,
+          inline = _this$props11.inline,
+          labelledBy = _this$props11.labelledBy,
+          labelText = _this$props11.labelText,
+          multiple = _this$props11.multiple,
+          placeholder = _this$props11.placeholder,
+          prefixLabel = _this$props11.prefixLabel,
+          required = _this$props11.required,
+          suffixLabel = _this$props11.suffixLabel;
+      var icon;
+      var label; // Generate buttonLabels
+
+      var currentValues = (_this$getCurrentValue4 = _this.getCurrentValues()) !== null && _this$getCurrentValue4 !== void 0 ? _this$getCurrentValue4 : [];
+      var childrenArray = external_react_["Children"].toArray(children);
+      var valuesLabel = currentValues.reduce(function (acc, value, index, orig) {
+        var matchedItem = find_default()(childrenArray, function (item) {
+          return isOption(item) && item.props.value === value;
+        });
+
+        if (matchedItem) {
+          acc.push(matchedItem.props.children || matchedItem.props.label); // if not in multiple mode, add the icon
+
+          if (!multiple && currentValues.length === 1) {
+            icon = matchedItem.props.icon;
+          }
+        } else if (multiple) {
+          // only add values that don't match an option in "multiple" mode to preserve old behaviour
+          acc.push(value);
+        }
+
+        if (index < orig.length - 1) {
+          acc.push(Object(i18n_["_"])(', '));
+        }
+
+        return acc;
+      }, []);
+      label = valuesLabel; // only apply prefix / suffix if the label is not empty
+
+      if (label.length > 0) {
+        label = _this.wrapLabel({
+          prefixLabel: prefixLabel,
+          label: label,
+          suffixLabel: suffixLabel
+        });
+      } // single <Select> behaviour is to show the placeholder if all parts of the the label
+      // are empty strings so we replicate this behaviour here
+
+
+      if (label.length === 0 || !multiple && label.every(function (labelNode) {
+        return labelNode === '';
+      })) {
+        label = [placeholder];
+      }
+
+      var ariaLabel = label; // If there's more than one item selected, read out the selected total
+      // rather than reading out each selected item
+
+      if (label.length > 1) {
+        ariaLabel = _this.wrapLabel({
+          prefixLabel: prefixLabel,
+          label: ["".concat(currentValues.length, " items selected")],
+          suffixLabel: suffixLabel
+        });
+      }
+
+      var commonProps = _objectSpread({
+        'aria-describedby': describedBy,
+        'aria-label': "".concat(labelText ? "".concat(labelText, ", ") : '').concat(ariaLabel),
+        'aria-labelledby': labelText ? undefined : labelledBy,
+        'aria-multiselectable': multiple,
+        'aria-required': required,
+        'data-select-appearance': appearance,
+        'data-test': multiple ? 'multiselect' : 'select',
+        disabled: disabled,
+        elementRef: elementRef,
+        error: error
+      }, omit_default()(_this.props, keys_default()(SelectBase.propTypes)));
+
+      if (multiple) {
+        commonProps['data-test-values'] = JSON.stringify(currentValues);
+      } else {
+        var _currentValues = _slicedToArray(currentValues, 1),
+            dataTestValue = _currentValues[0];
+
+        commonProps['data-test-value'] = dataTestValue;
+      }
+
+      if (toggle) {
+        return /*#__PURE__*/Object(external_react_["cloneElement"])(toggle, commonProps);
+      }
+
+      if (appearance === 'link') {
+        return /*#__PURE__*/external_react_default.a.createElement(Link_default.a, _extends({}, commonProps, {
+          "data-select-appearance": "link"
+        }), !!icon && /*#__PURE__*/external_react_default.a.createElement(StyledLinkIcon, null, icon), label || placeholder, /*#__PURE__*/external_react_default.a.createElement(StyledLinkCaret, null, /*#__PURE__*/external_react_default.a.createElement(CaretDown["a" /* default */], {
+          enterpriseSize: 0.5,
+          prismaSize: "small"
+        })));
+      }
+
+      return /*#__PURE__*/external_react_default.a.createElement(StyledButton, _extends({}, commonProps, {
+        $multiple: multiple,
+        appearance: appearance,
+        label: label,
+        error: error,
+        icon: icon,
+        inline: inline,
+        isMenu: true,
+        role: "listbox" // @ts-expect-error - accept inconsistency with Button
+        ,
+        onClick: _this.props.onClick
+      }, pick_default()(_this.props, SelectBase.invalidLinkAppearanceProps)), !!currentValues.length && multiple && /*#__PURE__*/external_react_default.a.createElement(StyledCount, {
+        "data-role": "count"
+      }, "(", currentValues.length, ")"));
+    });
+
     _defineProperty(_assertThisInitialized(_this), "createChildren", function () {
       var _this$state = _this.state,
           filterKeyword = _this$state.filterKeyword,
           textHasFocus = _this$state.textHasFocus,
           topValuesState = _this$state.topValues;
-      var _this$props11 = _this.props,
-          allowKeyMatching = _this$props11.allowKeyMatching,
-          allowNewValues = _this$props11.allowNewValues,
-          filter = _this$props11.filter,
-          multiple = _this$props11.multiple,
-          showSelectedValuesFirst = _this$props11.showSelectedValuesFirst,
-          isLoadingOptions = _this$props11.isLoadingOptions,
-          onScrollBottom = _this$props11.onScrollBottom;
+      var _this$props12 = _this.props,
+          allowKeyMatching = _this$props12.allowKeyMatching,
+          allowNewValues = _this$props12.allowNewValues,
+          filter = _this$props12.filter,
+          multiple = _this$props12.multiple,
+          showSelectedValuesFirst = _this$props12.showSelectedValuesFirst,
+          isLoadingOptions = _this$props12.isLoadingOptions,
+          onScrollBottom = _this$props12.onScrollBottom;
 
       var currentValues = _this.getCurrentValues();
 
@@ -1870,10 +1996,10 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "getTopValues",
     value: function getTopValues() {
-      var _this$getCurrentValue4;
+      var _this$getCurrentValue5;
 
       // in non-multiple mode, don't move values to the top of the list
-      return this.props.multiple && this.props.showSelectedValuesFirst !== 'never' ? (_this$getCurrentValue4 = this.getCurrentValues()) !== null && _this$getCurrentValue4 !== void 0 ? _this$getCurrentValue4 : [] : [];
+      return this.props.multiple && this.props.showSelectedValuesFirst !== 'never' ? (_this$getCurrentValue5 = this.getCurrentValues()) !== null && _this$getCurrentValue5 !== void 0 ? _this$getCurrentValue5 : [] : [];
     }
   }, {
     key: "isControlled",
@@ -1888,13 +2014,13 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "toggleValue",
     value: function toggleValue(e, value) {
-      var _this$getCurrentValue5, _this$props$onChange3, _this$props13;
+      var _this$getCurrentValue6, _this$props$onChange3, _this$props14;
 
-      var values = (_this$getCurrentValue5 = this.getCurrentValues()) !== null && _this$getCurrentValue5 !== void 0 ? _this$getCurrentValue5 : [];
+      var values = (_this$getCurrentValue6 = this.getCurrentValues()) !== null && _this$getCurrentValue6 !== void 0 ? _this$getCurrentValue6 : [];
       var currentIndex = values.indexOf(value);
-      var _this$props12 = this.props,
-          name = _this$props12.name,
-          multiple = _this$props12.multiple;
+      var _this$props13 = this.props,
+          name = _this$props13.name,
+          multiple = _this$props13.multiple;
       var newValues;
 
       if (multiple) {
@@ -1932,7 +2058,7 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
         this.focus();
       }
 
-      (_this$props$onChange3 = (_this$props13 = this.props).onChange) === null || _this$props$onChange3 === void 0 ? void 0 : _this$props$onChange3.call(_this$props13, e, {
+      (_this$props$onChange3 = (_this$props14 = this.props).onChange) === null || _this$props$onChange3 === void 0 ? void 0 : _this$props$onChange3.call(_this$props14, e, {
         values: newValues,
         name: name
       });
@@ -1954,10 +2080,10 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
       var hasChildren = _ref4.hasChildren,
           placement = _ref4.placement;
       var filterKeyword = this.state.filterKeyword;
-      var _this$props14 = this.props,
-          inputId = _this$props14.inputId,
-          inputRef = _this$props14.inputRef,
-          multiple = _this$props14.multiple; // only visually disable these as opposed to fully disabling to avoid losing keyboard focus - see SUI-2731
+      var _this$props15 = this.props,
+          inputId = _this$props15.inputId,
+          inputRef = _this$props15.inputRef,
+          multiple = _this$props15.multiple; // only visually disable these as opposed to fully disabling to avoid losing keyboard focus - see SUI-2731
 
       var selectControls = /*#__PURE__*/external_react_default.a.createElement(StyledToggleAllControls, {
         $placement: placement,
@@ -2009,133 +2135,26 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$getCurrentValue6,
+      var _this$getCurrentValue7,
           _this2 = this;
 
-      var _this$props15 = this.props,
-          appearance = _this$props15.appearance,
-          children = _this$props15.children,
-          defaultPlacement = _this$props15.defaultPlacement,
-          describedBy = _this$props15.describedBy,
-          disabled = _this$props15.disabled,
-          elementRef = _this$props15.elementRef,
-          error = _this$props15.error,
-          inline = _this$props15.inline,
-          inputId = _this$props15.inputId,
-          labelledBy = _this$props15.labelledBy,
-          labelText = _this$props15.labelText,
-          multiple = _this$props15.multiple,
-          required = _this$props15.required,
-          placeholder = _this$props15.placeholder,
-          prefixLabel = _this$props15.prefixLabel,
-          repositionMode = _this$props15.repositionMode,
-          suffixLabel = _this$props15.suffixLabel;
-      var icon;
-      var label;
+      var _this$props16 = this.props,
+          children = _this$props16.children,
+          defaultPlacement = _this$props16.defaultPlacement,
+          inputId = _this$props16.inputId,
+          multiple = _this$props16.multiple,
+          repositionMode = _this$props16.repositionMode;
       var filterEnabled = this.hasFilter();
-      var isAnyValueSelected = false; // Generate buttonLabels
-
+      var currentValues = (_this$getCurrentValue7 = this.getCurrentValues()) !== null && _this$getCurrentValue7 !== void 0 ? _this$getCurrentValue7 : [];
       var childrenArray = external_react_["Children"].toArray(children);
-      var currentValues = (_this$getCurrentValue6 = this.getCurrentValues()) !== null && _this$getCurrentValue6 !== void 0 ? _this$getCurrentValue6 : [];
-      var valuesLabel = currentValues.reduce(function (acc, value, index, orig) {
+      var isAnyValueSelected = currentValues.some(function (value) {
         var matchedItem = find_default()(childrenArray, function (item) {
           return isOption(item) && item.props.value === value;
         });
-
-        if (matchedItem) {
-          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;
-          }
-        } else if (multiple) {
-          // only add values that don't match an option in "multiple" mode to preserve old behaviour
-          acc.push(value);
-        }
-
-        if (index < orig.length - 1) {
-          acc.push(Object(i18n_["_"])(', '));
-        }
-
-        return acc;
-      }, []);
-      label = valuesLabel; // only apply prefix / suffix if the label is not empty
-
-      if (label.length > 0) {
-        label = this.wrapLabel({
-          prefixLabel: prefixLabel,
-          label: label,
-          suffixLabel: suffixLabel
-        });
-      } // single <Select> behaviour is to show the placeholder if all parts of the the label
-      // are empty strings so we replicate this behaviour here
-
-
-      if (label.length === 0 || !multiple && label.every(function (labelNode) {
-        return labelNode === '';
-      })) {
-        label = [placeholder];
-      }
-
-      var ariaLabel = label; // If there's more than one item selected, read out the selected total
-      // rather than reading out each selected item
-
-      if (label.length > 1) {
-        ariaLabel = this.wrapLabel({
-          prefixLabel: prefixLabel,
-          label: ["".concat(currentValues.length, " items selected")],
-          suffixLabel: suffixLabel
-        });
-      }
-
+        return matchedItem && !matchedItem.props.disabled;
+      });
       var finalChildren = this.createChildren();
-
-      var commonProps = _objectSpread({
-        'aria-describedby': describedBy,
-        'aria-label': "".concat(labelText ? "".concat(labelText, ", ") : '').concat(ariaLabel),
-        'aria-labelledby': labelText ? undefined : labelledBy,
-        'aria-multiselectable': multiple,
-        'aria-required': required,
-        'data-select-appearance': appearance,
-        'data-test': multiple ? 'multiselect' : 'select',
-        disabled: disabled,
-        elementRef: elementRef,
-        error: error
-      }, omit_default()(this.props, keys_default()(SelectBase.propTypes)));
-
-      if (multiple) {
-        commonProps['data-test-values'] = JSON.stringify(currentValues);
-      } else {
-        var _currentValues = _slicedToArray(currentValues, 1),
-            dataTestValue = _currentValues[0];
-
-        commonProps['data-test-value'] = dataTestValue;
-      }
-
-      var toggle = appearance === 'link' ? /*#__PURE__*/external_react_default.a.createElement(Link_default.a, _extends({}, commonProps, {
-        "data-select-appearance": "link"
-      }), !!icon && /*#__PURE__*/external_react_default.a.createElement(StyledLinkIcon, null, icon), label || placeholder, /*#__PURE__*/external_react_default.a.createElement(StyledLinkCaret, null, /*#__PURE__*/external_react_default.a.createElement(CaretDown["a" /* default */], {
-        enterpriseSize: 0.5,
-        prismaSize: "small"
-      }))) : /*#__PURE__*/external_react_default.a.createElement(StyledButton, _extends({}, commonProps, {
-        $multiple: multiple,
-        appearance: appearance,
-        label: label,
-        error: error,
-        icon: icon,
-        inline: inline,
-        isMenu: true,
-        role: "listbox" // @ts-expect-error - accept inconsistency with Button
-        ,
-        onClick: this.props.onClick
-      }, pick_default()(this.props, SelectBase.invalidLinkAppearanceProps)), !!currentValues.length && multiple && /*#__PURE__*/external_react_default.a.createElement(StyledCount, {
-        "data-role": "count"
-      }, "(", currentValues.length, ")"));
+      var toggle = this.createToggle();
 
       var createMenu = function createMenu(_ref5) {
         var anchorWidth = _ref5.anchorWidth,
@@ -2174,6 +2193,7 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
         onRequestOpen: this.handleRequestOpen,
         onRequestClose: this.handleRequestClose,
         open: this.state.open,
+        openWithArrowKeys: true,
         repositionMode: repositionMode,
         defaultPlacement: filterEnabled ? defaultPlacement : undefined,
         canCoverAnchor: Object(ssrWindow["a" /* getWindow */])().innerHeight < 500,
@@ -2703,11 +2723,11 @@ Compact_defineProperty(Compact_Compact, "Heading", Menu_["Heading"]);
 
 /* harmony default export */ var Multiselect_Compact = (Compact_Compact);
 // EXTERNAL MODULE: external "lodash/defer"
-var defer_ = __webpack_require__(53);
+var defer_ = __webpack_require__(55);
 var defer_default = /*#__PURE__*/__webpack_require__.n(defer_);
 
 // EXTERNAL MODULE: external "lodash/extend"
-var extend_ = __webpack_require__(48);
+var extend_ = __webpack_require__(49);
 var extend_default = /*#__PURE__*/__webpack_require__.n(extend_);
 
 // EXTERNAL MODULE: external "lodash/get"
@@ -2739,7 +2759,7 @@ var pickBy_ = __webpack_require__(71);
 var pickBy_default = /*#__PURE__*/__webpack_require__.n(pickBy_);
 
 // EXTERNAL MODULE: external "lodash/without"
-var without_ = __webpack_require__(56);
+var without_ = __webpack_require__(58);
 var without_default = /*#__PURE__*/__webpack_require__.n(without_);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/filter"
@@ -2756,7 +2776,7 @@ var Chip_ = __webpack_require__(142);
 var Chip_default = /*#__PURE__*/__webpack_require__.n(Chip_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ResultsMenu"
-var ResultsMenu_ = __webpack_require__(45);
+var ResultsMenu_ = __webpack_require__(46);
 var ResultsMenu_default = /*#__PURE__*/__webpack_require__.n(ResultsMenu_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Popover"

package/Number.js

@@ -165,9 +165,9 @@ var keyboard_ = __webpack_require__(9);
 // EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
 var i18n_ = __webpack_require__(4);
 
-// EXTERNAL MODULE: external "@splunk/react-icons/SVG"
-var SVG_ = __webpack_require__(32);
-var SVG_default = /*#__PURE__*/__webpack_require__.n(SVG_);
+// EXTERNAL MODULE: external "@splunk/react-icons/SVGEnterprise"
+var SVGEnterprise_ = __webpack_require__(32);
+var SVGEnterprise_default = /*#__PURE__*/__webpack_require__.n(SVGEnterprise_);
 
 // CONCATENATED MODULE: ./src/Number/IncrementIcon.tsx
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -177,7 +177,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 /* eslint-disable max-len */
 
 function SortedUp(props) {
-  return /*#__PURE__*/external_react_default.a.createElement(SVG_default.a, _extends({
+  return /*#__PURE__*/external_react_default.a.createElement(SVGEnterprise_default.a, _extends({
     viewBox: "0 0 933 600"
   }, props), /*#__PURE__*/external_react_default.a.createElement("path", {
     fill: "currentColor",
@@ -835,7 +835,7 @@ module.exports = require("@splunk/react-ui/Text");
 /***/ 32:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-icons/SVG");
+module.exports = require("@splunk/react-icons/SVGEnterprise");
 
 /***/ }),