@splunk/react-ui 4.15.0 → 4.16.0

package/Menu.js

@@ -262,7 +262,7 @@ var Heading_ = __webpack_require__(77);
 var Heading_default = /*#__PURE__*/__webpack_require__.n(Heading_);
 
 // EXTERNAL MODULE: external "@splunk/themes/useSplunkTheme"
-var useSplunkTheme_ = __webpack_require__(52);
+var useSplunkTheme_ = __webpack_require__(54);
 var useSplunkTheme_default = /*#__PURE__*/__webpack_require__.n(useSplunkTheme_);
 
 // CONCATENATED MODULE: ./src/Menu/HeadingStyles.ts
@@ -932,7 +932,7 @@ MenuStyles_Styled,
 MenuStyles_Styled, adjacentSiblingStyles);
 
 // EXTERNAL MODULE: ./src/utils/navigateList.ts
-var navigateList = __webpack_require__(55);
+var navigateList = __webpack_require__(57);
 
 // CONCATENATED MODULE: ./src/Menu/Menu.tsx
 function Menu_extends() { Menu_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 Menu_extends.apply(this, arguments); }
@@ -1240,14 +1240,14 @@ module.exports = require("lodash/omit");
 
 /***/ }),
 
-/***/ 52:
+/***/ 54:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/themes/useSplunkTheme");
 
 /***/ }),
 
-/***/ 55:
+/***/ 57:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

package/Modal.js

@@ -151,7 +151,7 @@ var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // 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/keys"
@@ -173,7 +173,7 @@ var focus_ = __webpack_require__(35);
 var id_ = __webpack_require__(13);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ScrollContainerContext"
-var ScrollContainerContext_ = __webpack_require__(49);
+var ScrollContainerContext_ = __webpack_require__(50);
 
 // EXTERNAL MODULE: external "styled-components"
 var external_styled_components_ = __webpack_require__(3);
@@ -767,21 +767,21 @@ module.exports = require("@splunk/ui-utils/focus");
 
 /***/ }),
 
-/***/ 49:
+/***/ 5:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-ui/ScrollContainerContext");
+module.exports = require("lodash/omit");
 
 /***/ }),
 
-/***/ 5:
+/***/ 50:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash/omit");
+module.exports = require("@splunk/react-ui/ScrollContainerContext");
 
 /***/ }),
 
-/***/ 53:
+/***/ 55:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/defer");

package/Multiselect.js

@@ -718,7 +718,7 @@ _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__ = __webpack_require__(56);
 /* 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);
@@ -775,29 +775,36 @@ 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__ = __webpack_require__(53);
 /* 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 _ThemedIcon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
 /* harmony import */ var _SVG__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6);
@@ -827,39 +834,32 @@ function CaretDown(props) {
 }
 
 /***/ }),
-/* 51 */
+/* 53 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/Caret");
 
 /***/ }),
-/* 52 */,
-/* 53 */
+/* 54 */,
+/* 55 */
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/defer");
 
 /***/ }),
-/* 54 */
+/* 56 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/Search");
 
 /***/ }),
-/* 55 */,
-/* 56 */
+/* 57 */,
+/* 58 */
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/without");
 
 /***/ }),
-/* 57 */
-/***/ (function(module, exports) {
-
-module.exports = require("lodash/find");
-
-/***/ }),
-/* 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,
@@ -2703,11 +2722,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 +2758,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 +2775,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/Paginator.js

@@ -134,7 +134,7 @@ var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/format"
-var format_ = __webpack_require__(58);
+var format_ = __webpack_require__(45);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
 var i18n_ = __webpack_require__(4);
@@ -620,17 +620,17 @@ module.exports = require("@splunk/react-icons/ChevronRight");
 
 /***/ }),
 
-/***/ 5:
+/***/ 45:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash/omit");
+module.exports = require("@splunk/ui-utils/format");
 
 /***/ }),
 
-/***/ 58:
+/***/ 5:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/ui-utils/format");
+module.exports = require("lodash/omit");
 
 /***/ }),
 

package/Popover.js

@@ -204,7 +204,7 @@ var clamp_ = __webpack_require__(144);
 var clamp_default = /*#__PURE__*/__webpack_require__.n(clamp_);
 
 // 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/every"
@@ -258,7 +258,7 @@ var Layer_ = __webpack_require__(82);
 var Layer_default = /*#__PURE__*/__webpack_require__.n(Layer_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ScrollContainerContext"
-var ScrollContainerContext_ = __webpack_require__(49);
+var ScrollContainerContext_ = __webpack_require__(50);
 var ScrollContainerContext_default = /*#__PURE__*/__webpack_require__.n(ScrollContainerContext_);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/focus"
@@ -1469,21 +1469,21 @@ module.exports = require("@splunk/react-ui/Animation");
 
 /***/ }),
 
-/***/ 49:
+/***/ 5:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-ui/ScrollContainerContext");
+module.exports = require("lodash/omit");
 
 /***/ }),
 
-/***/ 5:
+/***/ 50:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash/omit");
+module.exports = require("@splunk/react-ui/ScrollContainerContext");
 
 /***/ }),
 
-/***/ 53:
+/***/ 55:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/defer");