@splunk/react-ui 4.5.3 → 4.8.0

package/Select.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 163);
+/******/ 	return __webpack_require__(__webpack_require__.s = 171);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -115,7 +115,14 @@ module.exports = require("@splunk/react-ui/Menu");
 
 /***/ }),
 
-/***/ 163:
+/***/ 17:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Button");
+
+/***/ }),
+
+/***/ 171:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -142,8 +149,8 @@ var external_lodash_ = __webpack_require__(4);
 // EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
 var i18n_ = __webpack_require__(5);
 
-// EXTERNAL MODULE: ./src/Select/SelectBase.tsx + 1 modules
-var SelectBase = __webpack_require__(41);
+// EXTERNAL MODULE: ./src/Select/SelectBase.tsx + 2 modules
+var SelectBase = __webpack_require__(42);
 
 // EXTERNAL MODULE: ./src/Select/OptionBase.tsx
 var OptionBase = __webpack_require__(28);
@@ -317,6 +324,7 @@ function Select_defineProperty(obj, key, value) { if (key in obj) { Object.defin
 /** @public */
 
 var Select_propTypes = {
+  allowKeyMatching: external_prop_types_default.a.bool,
   animateLoading: external_prop_types_default.a.bool,
   appearance: external_prop_types_default.a.oneOf(['default', 'link', 'primary', 'pill', 'toggle', 'flat']),
   append: external_prop_types_default.a.bool,
@@ -351,6 +359,7 @@ var Select_propTypes = {
   value: external_prop_types_default.a.oneOfType([external_prop_types_default.a.string, external_prop_types_default.a.number, external_prop_types_default.a.bool])
 };
 var Select_defaultProps = {
+  allowKeyMatching: true,
   animateLoading: false,
   appearance: 'toggle',
   append: false,
@@ -455,13 +464,6 @@ Select_defineProperty(Select_Select, "Divider", SelectBase["a" /* Divider */]);
 
 
 
-/***/ }),
-
-/***/ 17:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-ui/Button");
-
 /***/ }),
 
 /***/ 19:
@@ -478,14 +480,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");
@@ -741,7 +743,7 @@ module.exports = require("lodash");
 
 /***/ }),
 
-/***/ 41:
+/***/ 42:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -765,7 +767,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);
@@ -792,12 +794,15 @@ 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__(44);
+
 // EXTERNAL MODULE: ./src/Select/OptionBase.tsx
 var OptionBase = __webpack_require__(28);
 
@@ -842,23 +847,36 @@ var StyledFilter = external_styled_components_default.a.div.withConfig({
   enterprise: '8px',
   prisma: '10px 16px'
 }));
+var StyledSearchIconWrapper = external_styled_components_default.a.span.withConfig({
+  displayName: "SelectBaseStyles__StyledSearchIconWrapper",
+  componentId: "sc-16cj7sk-4"
+})(["color:", ";pointer-events:none;padding:", ";"], Object(themes_["pick"])({
+  enterprise: {
+    light: themes_["variables"].gray60,
+    dark: themes_["variables"].white
+  },
+  prisma: themes_["variables"].contentColorMuted
+}), Object(themes_["pick"])({
+  comfortable: '0 8px',
+  compact: '0 6px'
+}));
 var StyledCount = external_styled_components_default.a.span.withConfig({
   displayName: "SelectBaseStyles__StyledCount",
-  componentId: "sc-16cj7sk-4"
+  componentId: "sc-16cj7sk-5"
 })(["padding-right:", ";"], Object(themes_["pick"])({
   enterprise: themes_["variables"].spacingQuarter,
   prisma: themes_["variables"].spacingXSmall
 }));
 var StyledControlsLink = external_styled_components_default()(Link_default.a).withConfig({
   displayName: "SelectBaseStyles__StyledControlsLink",
-  componentId: "sc-16cj7sk-5"
+  componentId: "sc-16cj7sk-6"
 })(["", ";"], function (_ref3) {
   var $disabled = _ref3.$disabled;
   return $disabled && Object(external_styled_components_["css"])(["color:", ";"], themes_["variables"].contentColorDisabled);
 });
 var StyledToggleAllControls = external_styled_components_default.a.div.withConfig({
   displayName: "SelectBaseStyles__StyledToggleAllControls",
-  componentId: "sc-16cj7sk-6"
+  componentId: "sc-16cj7sk-7"
 })(["padding:", ";", ""], Object(themes_["pick"])({
   enterprise: "5px 8px",
   prisma: '10px 16px'
@@ -873,6 +891,50 @@ var StyledToggleAllControls = external_styled_components_default.a.div.withConfi
   }
 }));
 
+// CONCATENATED MODULE: ./src/Select/matchUtils.ts
+var charFromMatchOption = function charFromMatchOption(option, charIndex) {
+  return option ? option.label.charAt(charIndex).toLowerCase() : '';
+};
+
+var fuzzyMatch = function fuzzyMatch(options, matchChar) {
+  if (!options.length) {
+    return options;
+  }
+
+  var defaultMatch = null;
+  var hasMatch = false;
+  var matches = options.filter(function (option) {
+    var characterValue = charFromMatchOption(option, matchChar.index);
+
+    if (characterValue === matchChar.value) {
+      hasMatch = true;
+      return true;
+    } // If we haven't found a match yet, keep track of the next closest match.
+    // Secondary matching looks for the closest character of a higher value, and failing that, closest of a lower value.
+
+
+    if (!hasMatch) {
+      var defaultValue = charFromMatchOption(defaultMatch, matchChar.index);
+
+      if (!defaultValue) {
+        defaultMatch = option;
+      } else if (characterValue > matchChar.value) {
+        if (defaultValue < matchChar.value) {
+          defaultMatch = option;
+        } else if (defaultValue > characterValue) {
+          defaultMatch = option;
+        }
+      } else if (characterValue > defaultValue) {
+        defaultMatch = option;
+      }
+    }
+
+    return false;
+  });
+  return matches.length === 0 && defaultMatch ? [defaultMatch] : matches;
+};
+
+
 // CONCATENATED MODULE: ./src/Select/SelectBase.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); }
 
@@ -939,7 +1001,10 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 
 
+
+
 var propTypes = {
+  allowKeyMatching: external_prop_types_default.a.bool,
   allowNewValues: external_prop_types_default.a.bool,
   animateLoading: external_prop_types_default.a.bool,
   appearance: external_prop_types_default.a.oneOf(['default', 'link', 'primary', 'pill', 'toggle', 'flat']),
@@ -979,6 +1044,7 @@ var propTypes = {
   values: external_prop_types_default.a.array
 };
 var defaultProps = {
+  allowKeyMatching: true,
   allowNewValues: false,
   animateLoading: false,
   appearance: 'toggle',
@@ -1033,7 +1099,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);
 
@@ -1043,6 +1109,25 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "selectedOptionCount", void 0);
 
+    _defineProperty(_assertThisInitialized(_this), "optionRefsByKey", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "matchCharacter", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "matchTimeout", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "currentMatchOptions", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "availableMatchOptions", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "resetMatches", function () {
+      _this.matchCharacter = null;
+      _this.currentMatchOptions = [];
+
+      if (_this.matchTimeout) {
+        clearTimeout(_this.matchTimeout);
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "handleSelectAll", function (e) {
       var _this$getCurrentValue, _this$props$onChange, _this$props2;
 
@@ -1159,9 +1244,69 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
       var value = _ref.value;
       e.preventDefault();
 
+      if (!_this.state.open) {
+        return;
+      }
+
       _this.toggleValue(e, value);
     });
 
+    _defineProperty(_assertThisInitialized(_this), "handleMenuOptionKeyDown", function (e, optionIndex) {
+      var currentKey = e.nativeEvent.key; // Checking for a single character to avoid complications from double-byte languages and emojis.
+
+      if (currentKey.length === 1) {
+        var matches = [];
+        var character = {
+          index: 0,
+          value: currentKey
+        };
+
+        if (!_this.matchCharacter) {
+          if (currentKey === ' ') {
+            _this.resetMatches();
+
+            return;
+          }
+
+          matches = fuzzyMatch(_this.availableMatchOptions, character);
+        } else if (_this.currentMatchOptions.length > 1) {
+          character.index = _this.matchCharacter.index + 1;
+          matches = fuzzyMatch(_this.currentMatchOptions, character);
+        }
+
+        if (matches.length) {
+          var matchIndex = 0; // If the active option is a first character match, cycle to the next matching option.
+
+          if (character.index === 0 && matches.length > 1) {
+            var activeMatchIndex = matches.indexOf(_this.availableMatchOptions[optionIndex]);
+
+            if (activeMatchIndex >= 0) {
+              matchIndex = activeMatchIndex === matches.length - 1 ? 0 : activeMatchIndex + 1;
+            }
+          }
+
+          var optionToFocusRef = _this.optionRefsByKey[matches[matchIndex].itemKey];
+
+          if (optionToFocusRef != null) {
+            var _optionToFocusRef$foc;
+
+            optionToFocusRef === null || optionToFocusRef === void 0 ? void 0 : (_optionToFocusRef$foc = optionToFocusRef.focus) === null || _optionToFocusRef$foc === void 0 ? void 0 : _optionToFocusRef$foc.call(optionToFocusRef);
+          }
+        }
+
+        _this.currentMatchOptions = matches;
+        _this.matchCharacter = character;
+
+        if (_this.matchTimeout) {
+          clearTimeout(_this.matchTimeout);
+        }
+
+        _this.matchTimeout = setTimeout(_this.resetMatches, 500);
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "handleTextChange", function (e, _ref2) {
       var _this$props$onFilterC, _this$props5;
 
@@ -1207,8 +1352,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;
 
@@ -1253,8 +1398,16 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleSelectedItemMount", function (c) {
-      _this.firstSelectedOption = c;
+    _defineProperty(_assertThisInitialized(_this), "handleOptionMount", function (c, itemKey, isFirst) {
+      if (isFirst) {
+        _this.firstSelectedEnabledOption = c;
+      }
+
+      if (c == null) {
+        delete _this.optionRefsByKey[itemKey];
+      } else {
+        _this.optionRefsByKey[itemKey] = c;
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "createChildren", function () {
@@ -1263,10 +1416,13 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
           textHasFocus = _this$state.textHasFocus,
           topValuesState = _this$state.topValues;
       var _this$props10 = _this.props,
+          allowKeyMatching = _this$props10.allowKeyMatching,
           allowNewValues = _this$props10.allowNewValues,
           filter = _this$props10.filter,
           multiple = _this$props10.multiple,
-          showSelectedValuesFirst = _this$props10.showSelectedValuesFirst;
+          showSelectedValuesFirst = _this$props10.showSelectedValuesFirst,
+          isLoadingOptions = _this$props10.isLoadingOptions,
+          onScrollBottom = _this$props10.onScrollBottom;
 
       var currentValues = _this.getCurrentValues();
 
@@ -1274,11 +1430,12 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
       _this.firstSelectedOptionIndex = undefined;
       _this.selectedOptionCount = 0;
       _this.activeValue = undefined;
+      _this.availableMatchOptions = [];
       var foundExactMatch;
       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
@@ -1292,19 +1449,39 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
           foundExactMatch = true;
         }
 
-        var selected = currentValues && currentValues.indexOf(item.props.value) >= 0; // Format the Menu.Item
+        var selected = currentValues && currentValues.indexOf(item.props.value) >= 0;
+        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;
+
+        if (useMatchOptions && !item.props.disabled && !item.props.hidden) {
+          _this.availableMatchOptions.push({
+            itemKey: itemKey,
+            label: item.props.label,
+            value: item.props.value
+          });
+
+          filterIndex = _this.availableMatchOptions.length - 1;
+        } // Format the Menu.Item
+
 
         var clonedItem = /*#__PURE__*/Object(external_react_["cloneElement"])(item, {
           key: item.key || i,
           onClick: _this.handleMenuOptionClick,
+          onKeyDown: useMatchOptions ? function (e) {
+            return _this.handleMenuOptionKeyDown(e, filterIndex);
+          } : undefined,
           selected: selected,
           multiple: multiple,
           role: 'option',
-          ref: selected && !foundSelected ? _this.handleSelectedItemMount : undefined
+          ref: function ref(element) {
+            return _this.handleOptionMount(element, itemKey, isFirstSelectedAndEnabled);
+          }
         });
 
-        if (selected) {
-          foundSelected = true;
+        if (isFirstSelectedAndEnabled) {
+          foundSelectedAndEnabled = true;
         }
 
         if (topValues && topValues.indexOf(item.props.value) >= 0) {
@@ -1473,6 +1650,11 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
     _this.availableOptionCount = 0;
     _this.firstSelectedOptionIndex = undefined;
     _this.selectedOptionCount = 0;
+    _this.matchCharacter = null;
+    _this.matchTimeout = null;
+    _this.currentMatchOptions = [];
+    _this.availableMatchOptions = [];
+    _this.optionRefsByKey = {};
 
     if (false) {}
 
@@ -1614,7 +1796,6 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
         "data-test": "filter"
       }, /*#__PURE__*/external_react_default.a.createElement(Text_default.a, {
         value: filterKeyword,
-        appearance: "search",
         autoCapitalize: "off",
         autoComplete: "off",
         autoCorrect: "off",
@@ -1630,7 +1811,14 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
         "aria-activedescendant": this.activeItemId,
         "aria-controls": this.menuId,
         inputRef: inputRef,
-        inputId: inputId
+        inputId: inputId,
+        canClear: true,
+        startAdornment: /*#__PURE__*/external_react_default.a.createElement(StyledSearchIconWrapper, null, /*#__PURE__*/external_react_default.a.createElement(Search["a" /* default */], {
+          role: "presentation",
+          enterpriseSize: "16px",
+          inline: false,
+          screenReaderText: Object(i18n_["_"])('Search')
+        }))
       })), multiple && hasChildren && selectControls);
     }
   }, {
@@ -1669,7 +1857,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;
@@ -1688,7 +1881,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,
@@ -1783,7 +1975,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);
       };
 
@@ -1801,7 +1994,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);
     }
   }]);
@@ -1824,6 +2017,56 @@ _defineProperty(SelectBase_SelectBase, "invalidLinkAppearanceProps", ['append',
 /* harmony default export */ var Select_SelectBase = __webpack_exports__["c"] = (SelectBase_SelectBase);
 
 
+/***/ }),
+
+/***/ 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__(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);
+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); }
+
+
+
+
+
+
+function Prisma24(_ref) {
+  var otherProps = _extends({}, _ref);
+
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_SVG__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"], _extends({
+    viewBox: "0 0 24 24"
+  }, otherProps), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("path", {
+    d: "M10.5,3.0015 C14.6421,3.0015 18,6.3593 18,10.5015 C18,12.2112 17.4279,13.7873 16.4647,15.0489 L20.7077,19.292 C21.0983,19.6825 21.0983,20.3156 20.7077,20.7062 C20.3172,21.0967 19.6841,21.0967 19.2935,20.7062 L15.0509,16.4635 C13.7888,17.4283 12.2113,18.0015 10.5,18.0015 C6.3579,18.0015 3,14.6436 3,10.5015 C3,6.3593 6.3579,3.0015 10.5,3.0015 Z M10.5,5.0015 C7.4624,5.0015 5,7.4639 5,10.5015 C5,13.539 7.4624,16.0015 10.5,16.0015 C13.5376,16.0015 16,13.539 16,10.5015 C16,7.4639 13.5376,5.0015 10.5,5.0015 Z",
+    fill: "currentColor"
+  }));
+}
+
+function Prisma16(_ref2) {
+  var otherProps = _extends({}, _ref2);
+
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_SVG__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"], _extends({
+    viewBox: "0 0 16 16"
+  }, otherProps), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("path", {
+    d: "M6.85277,2.0015 C9.53288,2.0015 11.7055,4.1741 11.7055,6.8542 C11.7055,7.8463 11.4079,8.7688 10.897,9.5373 L10.9245,9.5098 L14.0018,12.5871 L12.5876,14.0014 L9.51025,10.924 L9.53587,10.8984 C8.76733,11.4093 7.84481,11.707 6.85277,11.707 C4.17266,11.707 2,9.5343 2,6.8542 C2,4.1741 4.17266,2.0015 6.85277,2.0015 Z M6.85277,4.0015 C5.27723,4.0015 4,5.2787 4,6.8542 C4,8.4298 5.27723,9.707 6.85277,9.707 C8.42831,9.707 9.70554,8.4298 9.70554,6.8542 C9.70554,5.2787 8.42831,4.0015 6.85277,4.0015 Z",
+    fill: "currentColor"
+  }));
+}
+
+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,
+    Prisma16: Prisma16,
+    Prisma24: Prisma24
+  }, props));
+}
+
 /***/ }),
 
 /***/ 5:
@@ -1833,6 +2076,13 @@ module.exports = require("@splunk/ui-utils/i18n");
 
 /***/ }),
 
+/***/ 51:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-icons/Search");
+
+/***/ }),
+
 /***/ 6:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 

package/SidePanel.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 164);
+/******/ 	return __webpack_require__(__webpack_require__.s = 172);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 164:
+/***/ 172:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -123,7 +123,7 @@ 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__(68);
+var ModalLayer_ = __webpack_require__(77);
 var ModalLayer_default = /*#__PURE__*/__webpack_require__.n(ModalLayer_);
 
 // EXTERNAL MODULE: external "styled-components"
@@ -131,7 +131,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/TransitionOpen"
-var TransitionOpen_ = __webpack_require__(47);
+var TransitionOpen_ = __webpack_require__(52);
 var TransitionOpen_default = /*#__PURE__*/__webpack_require__.n(TransitionOpen_);
 
 // EXTERNAL MODULE: external "@splunk/themes"
@@ -365,14 +365,14 @@ module.exports = require("lodash");
 
 /***/ }),
 
-/***/ 47:
+/***/ 52:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/TransitionOpen");
 
 /***/ }),
 
-/***/ 68:
+/***/ 77:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/ModalLayer");