@splunk/react-ui 4.5.1 → 4.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (87) hide show
  1. package/Accordion.js +7 -6
  2. package/Anchor.js +2 -2
  3. package/Animation.js +2 -2
  4. package/AnimationToggle.js +2 -2
  5. package/Box.js +2 -2
  6. package/Button.js +8 -8
  7. package/ButtonGroup.js +4 -4
  8. package/ButtonSimple.js +2 -2
  9. package/CHANGELOG.md +33 -0
  10. package/Calendar.js +6 -6
  11. package/Card.js +25 -30
  12. package/CardLayout.js +4 -4
  13. package/Chip.js +2 -2
  14. package/Clickable.js +39 -13
  15. package/CloseButton.js +4 -4
  16. package/Code.js +8 -7
  17. package/CollapsiblePanel.js +6 -9
  18. package/Color.js +42 -42
  19. package/ColumnLayout.js +4 -4
  20. package/ComboBox.js +2 -2
  21. package/Concertina.js +4 -4
  22. package/ControlGroup.js +22 -29
  23. package/Date.js +4 -4
  24. package/DefinitionList.js +2 -2
  25. package/Dropdown.js +2 -2
  26. package/EventListener.js +4 -4
  27. package/FetchOptions.js +8 -8
  28. package/File.js +7 -7
  29. package/FormRows.js +16 -18
  30. package/Heading.js +2 -2
  31. package/Image.js +6 -6
  32. package/JSONTree.js +2 -2
  33. package/Layer.js +8 -8
  34. package/Link.js +4 -4
  35. package/List.js +2 -2
  36. package/Markdown.js +26 -14
  37. package/Menu.js +17 -17
  38. package/Message.js +10 -10
  39. package/Modal.js +43 -14
  40. package/ModalLayer.js +4 -4
  41. package/Monogram.js +2 -2
  42. package/Multiselect.js +255 -13
  43. package/Number.js +2 -2
  44. package/Paginator.js +10 -10
  45. package/Paragraph.js +2 -2
  46. package/Popover.js +6 -6
  47. package/Progress.js +6 -6
  48. package/Resize.js +2 -2
  49. package/ResultsMenu.js +6 -6
  50. package/ScreenReaderContent.js +2 -2
  51. package/Scroll.js +2 -2
  52. package/ScrollContainerContext.js +2 -2
  53. package/Search.js +4 -4
  54. package/Select.js +254 -13
  55. package/SidePanel.js +6 -6
  56. package/Slider.js +12 -6
  57. package/SlidingPanels.js +2 -2
  58. package/StaticContent.js +2 -2
  59. package/StepBar.js +6 -6
  60. package/Switch.js +4 -4
  61. package/TabLayout.js +4 -4
  62. package/Table.js +37 -36
  63. package/Text.js +144 -127
  64. package/Tooltip.js +2 -2
  65. package/TransitionOpen.js +62 -37
  66. package/WaitSpinner.js +2 -2
  67. package/cypress/plugins/index.ts +15 -0
  68. package/cypress/support/commands.ts +1 -0
  69. package/cypress/support/index.ts +9 -0
  70. package/cypress.json +12 -0
  71. package/package.json +15 -6
  72. package/types/src/Clickable/Clickable.d.ts +12 -2
  73. package/types/src/Clickable/NavigationProvider.d.ts +12 -2
  74. package/types/src/Color/Color.d.ts +3 -3
  75. package/types/src/Date/Date.d.ts +3 -3
  76. package/types/src/Modal/Modal.d.ts +2 -0
  77. package/types/src/Modal/ModalContext.d.ts +6 -0
  78. package/types/src/Multiselect/Multiselect.d.ts +1 -0
  79. package/types/src/Number/Number.d.ts +3 -3
  80. package/types/src/RadioBar/RadioBar.d.ts +3 -3
  81. package/types/src/Select/Select.d.ts +8 -3
  82. package/types/src/Select/SelectBase.d.ts +16 -4
  83. package/types/src/Select/matchUtils.d.ts +12 -0
  84. package/types/src/Slider/Slider.d.ts +3 -3
  85. package/types/src/Text/Text.d.ts +12 -5
  86. package/types/src/TransitionOpen/TransitionOpen.d.ts +1 -0
  87. package/usePrevious.js +2 -2
package/ResultsMenu.js CHANGED
@@ -82,7 +82,7 @@ module.exports =
82
82
  /******/
83
83
  /******/
84
84
  /******/ // Load entry module and return exports
85
- /******/ return __webpack_require__(__webpack_require__.s = 160);
85
+ /******/ return __webpack_require__(__webpack_require__.s = 161);
86
86
  /******/ })
87
87
  /************************************************************************/
88
88
  /******/ ({
@@ -135,7 +135,7 @@ module.exports = require("@splunk/react-ui/Menu");
135
135
 
136
136
  /***/ }),
137
137
 
138
- /***/ 160:
138
+ /***/ 161:
139
139
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
140
140
 
141
141
  "use strict";
@@ -160,7 +160,7 @@ var external_lodash_ = __webpack_require__(4);
160
160
  var i18n_ = __webpack_require__(5);
161
161
 
162
162
  // EXTERNAL MODULE: external "@splunk/ui-utils/userAgent"
163
- var userAgent_ = __webpack_require__(94);
163
+ var userAgent_ = __webpack_require__(96);
164
164
 
165
165
  // EXTERNAL MODULE: external "@splunk/react-ui/Menu"
166
166
  var Menu_ = __webpack_require__(13);
@@ -171,7 +171,7 @@ var external_styled_components_ = __webpack_require__(3);
171
171
  var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
172
172
 
173
173
  // EXTERNAL MODULE: external "@splunk/react-ui/WaitSpinner"
174
- var WaitSpinner_ = __webpack_require__(95);
174
+ var WaitSpinner_ = __webpack_require__(97);
175
175
  var WaitSpinner_default = /*#__PURE__*/__webpack_require__.n(WaitSpinner_);
176
176
 
177
177
  // EXTERNAL MODULE: external "@splunk/themes"
@@ -537,14 +537,14 @@ module.exports = require("@splunk/ui-utils/i18n");
537
537
 
538
538
  /***/ }),
539
539
 
540
- /***/ 94:
540
+ /***/ 96:
541
541
  /***/ (function(module, exports) {
542
542
 
543
543
  module.exports = require("@splunk/ui-utils/userAgent");
544
544
 
545
545
  /***/ }),
546
546
 
547
- /***/ 95:
547
+ /***/ 97:
548
548
  /***/ (function(module, exports) {
549
549
 
550
550
  module.exports = require("@splunk/react-ui/WaitSpinner");
@@ -82,7 +82,7 @@ module.exports =
82
82
  /******/
83
83
  /******/
84
84
  /******/ // Load entry module and return exports
85
- /******/ return __webpack_require__(__webpack_require__.s = 161);
85
+ /******/ return __webpack_require__(__webpack_require__.s = 162);
86
86
  /******/ })
87
87
  /************************************************************************/
88
88
  /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
101
101
 
102
102
  /***/ }),
103
103
 
104
- /***/ 161:
104
+ /***/ 162:
105
105
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
106
106
 
107
107
  "use strict";
package/Scroll.js CHANGED
@@ -82,7 +82,7 @@ module.exports =
82
82
  /******/
83
83
  /******/
84
84
  /******/ // Load entry module and return exports
85
- /******/ return __webpack_require__(__webpack_require__.s = 138);
85
+ /******/ return __webpack_require__(__webpack_require__.s = 139);
86
86
  /******/ })
87
87
  /************************************************************************/
88
88
  /******/ ({
@@ -128,7 +128,7 @@ function updateReactRef(ref, current) {
128
128
 
129
129
  /***/ }),
130
130
 
131
- /***/ 138:
131
+ /***/ 139:
132
132
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
133
133
 
134
134
  "use strict";
@@ -82,12 +82,12 @@ module.exports =
82
82
  /******/
83
83
  /******/
84
84
  /******/ // Load entry module and return exports
85
- /******/ return __webpack_require__(__webpack_require__.s = 174);
85
+ /******/ return __webpack_require__(__webpack_require__.s = 175);
86
86
  /******/ })
87
87
  /************************************************************************/
88
88
  /******/ ({
89
89
 
90
- /***/ 174:
90
+ /***/ 175:
91
91
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
92
92
 
93
93
  "use strict";
package/Search.js CHANGED
@@ -82,7 +82,7 @@ module.exports =
82
82
  /******/
83
83
  /******/
84
84
  /******/ // Load entry module and return exports
85
- /******/ return __webpack_require__(__webpack_require__.s = 162);
85
+ /******/ return __webpack_require__(__webpack_require__.s = 163);
86
86
  /******/ })
87
87
  /************************************************************************/
88
88
  /******/ ({
@@ -142,7 +142,7 @@ module.exports = require("@splunk/react-ui/Popover");
142
142
 
143
143
  /***/ }),
144
144
 
145
- /***/ 162:
145
+ /***/ 163:
146
146
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
147
147
 
148
148
  "use strict";
@@ -179,7 +179,7 @@ var keyboard_ = __webpack_require__(9);
179
179
  var Menu_ = __webpack_require__(13);
180
180
 
181
181
  // EXTERNAL MODULE: external "@splunk/react-ui/usePrevious"
182
- var usePrevious_ = __webpack_require__(96);
182
+ var usePrevious_ = __webpack_require__(98);
183
183
  var usePrevious_default = /*#__PURE__*/__webpack_require__.n(usePrevious_);
184
184
 
185
185
  // EXTERNAL MODULE: external "@splunk/react-ui/Popover"
@@ -787,7 +787,7 @@ module.exports = require("@splunk/ui-utils/keyboard");
787
787
 
788
788
  /***/ }),
789
789
 
790
- /***/ 96:
790
+ /***/ 98:
791
791
  /***/ (function(module, exports) {
792
792
 
793
793
  module.exports = require("@splunk/react-ui/usePrevious");
package/Select.js CHANGED
@@ -82,7 +82,7 @@ module.exports =
82
82
  /******/
83
83
  /******/
84
84
  /******/ // Load entry module and return exports
85
- /******/ return __webpack_require__(__webpack_require__.s = 163);
85
+ /******/ return __webpack_require__(__webpack_require__.s = 164);
86
86
  /******/ })
87
87
  /************************************************************************/
88
88
  /******/ ({
@@ -115,7 +115,7 @@ module.exports = require("@splunk/react-ui/Menu");
115
115
 
116
116
  /***/ }),
117
117
 
118
- /***/ 163:
118
+ /***/ 164:
119
119
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
120
120
 
121
121
  "use strict";
@@ -142,7 +142,7 @@ var external_lodash_ = __webpack_require__(4);
142
142
  // EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
143
143
  var i18n_ = __webpack_require__(5);
144
144
 
145
- // EXTERNAL MODULE: ./src/Select/SelectBase.tsx + 1 modules
145
+ // EXTERNAL MODULE: ./src/Select/SelectBase.tsx + 2 modules
146
146
  var SelectBase = __webpack_require__(41);
147
147
 
148
148
  // EXTERNAL MODULE: ./src/Select/OptionBase.tsx
@@ -317,6 +317,7 @@ function Select_defineProperty(obj, key, value) { if (key in obj) { Object.defin
317
317
  /** @public */
318
318
 
319
319
  var Select_propTypes = {
320
+ allowKeyMatching: external_prop_types_default.a.bool,
320
321
  animateLoading: external_prop_types_default.a.bool,
321
322
  appearance: external_prop_types_default.a.oneOf(['default', 'link', 'primary', 'pill', 'toggle', 'flat']),
322
323
  append: external_prop_types_default.a.bool,
@@ -351,6 +352,7 @@ var Select_propTypes = {
351
352
  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])
352
353
  };
353
354
  var Select_defaultProps = {
355
+ allowKeyMatching: true,
354
356
  animateLoading: false,
355
357
  appearance: 'toggle',
356
358
  append: false,
@@ -798,6 +800,9 @@ var Text_default = /*#__PURE__*/__webpack_require__.n(Text_);
798
800
  // EXTERNAL MODULE: ./src/icons/CaretDown.tsx
799
801
  var CaretDown = __webpack_require__(36);
800
802
 
803
+ // EXTERNAL MODULE: ./src/icons/Search.tsx
804
+ var Search = __webpack_require__(43);
805
+
801
806
  // EXTERNAL MODULE: ./src/Select/OptionBase.tsx
802
807
  var OptionBase = __webpack_require__(28);
803
808
 
@@ -842,23 +847,36 @@ var StyledFilter = external_styled_components_default.a.div.withConfig({
842
847
  enterprise: '8px',
843
848
  prisma: '10px 16px'
844
849
  }));
850
+ var StyledSearchIconWrapper = external_styled_components_default.a.span.withConfig({
851
+ displayName: "SelectBaseStyles__StyledSearchIconWrapper",
852
+ componentId: "sc-16cj7sk-4"
853
+ })(["color:", ";pointer-events:none;padding:", ";"], Object(themes_["pick"])({
854
+ enterprise: {
855
+ light: themes_["variables"].gray60,
856
+ dark: themes_["variables"].white
857
+ },
858
+ prisma: themes_["variables"].contentColorMuted
859
+ }), Object(themes_["pick"])({
860
+ comfortable: '0 8px',
861
+ compact: '0 6px'
862
+ }));
845
863
  var StyledCount = external_styled_components_default.a.span.withConfig({
846
864
  displayName: "SelectBaseStyles__StyledCount",
847
- componentId: "sc-16cj7sk-4"
865
+ componentId: "sc-16cj7sk-5"
848
866
  })(["padding-right:", ";"], Object(themes_["pick"])({
849
867
  enterprise: themes_["variables"].spacingQuarter,
850
868
  prisma: themes_["variables"].spacingXSmall
851
869
  }));
852
870
  var StyledControlsLink = external_styled_components_default()(Link_default.a).withConfig({
853
871
  displayName: "SelectBaseStyles__StyledControlsLink",
854
- componentId: "sc-16cj7sk-5"
872
+ componentId: "sc-16cj7sk-6"
855
873
  })(["", ";"], function (_ref3) {
856
874
  var $disabled = _ref3.$disabled;
857
875
  return $disabled && Object(external_styled_components_["css"])(["color:", ";"], themes_["variables"].contentColorDisabled);
858
876
  });
859
877
  var StyledToggleAllControls = external_styled_components_default.a.div.withConfig({
860
878
  displayName: "SelectBaseStyles__StyledToggleAllControls",
861
- componentId: "sc-16cj7sk-6"
879
+ componentId: "sc-16cj7sk-7"
862
880
  })(["padding:", ";", ""], Object(themes_["pick"])({
863
881
  enterprise: "5px 8px",
864
882
  prisma: '10px 16px'
@@ -873,6 +891,50 @@ var StyledToggleAllControls = external_styled_components_default.a.div.withConfi
873
891
  }
874
892
  }));
875
893
 
894
+ // CONCATENATED MODULE: ./src/Select/matchUtils.ts
895
+ var charFromMatchOption = function charFromMatchOption(option, charIndex) {
896
+ return option ? option.label.charAt(charIndex).toLowerCase() : '';
897
+ };
898
+
899
+ var fuzzyMatch = function fuzzyMatch(options, matchChar) {
900
+ if (!options.length) {
901
+ return options;
902
+ }
903
+
904
+ var defaultMatch = null;
905
+ var hasMatch = false;
906
+ var matches = options.filter(function (option) {
907
+ var characterValue = charFromMatchOption(option, matchChar.index);
908
+
909
+ if (characterValue === matchChar.value) {
910
+ hasMatch = true;
911
+ return true;
912
+ } // If we haven't found a match yet, keep track of the next closest match.
913
+ // Secondary matching looks for the closest character of a higher value, and failing that, closest of a lower value.
914
+
915
+
916
+ if (!hasMatch) {
917
+ var defaultValue = charFromMatchOption(defaultMatch, matchChar.index);
918
+
919
+ if (!defaultValue) {
920
+ defaultMatch = option;
921
+ } else if (characterValue > matchChar.value) {
922
+ if (defaultValue < matchChar.value) {
923
+ defaultMatch = option;
924
+ } else if (defaultValue > characterValue) {
925
+ defaultMatch = option;
926
+ }
927
+ } else if (characterValue > defaultValue) {
928
+ defaultMatch = option;
929
+ }
930
+ }
931
+
932
+ return false;
933
+ });
934
+ return matches.length === 0 && defaultMatch ? [defaultMatch] : matches;
935
+ };
936
+
937
+
876
938
  // CONCATENATED MODULE: ./src/Select/SelectBase.tsx
877
939
  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); }
878
940
 
@@ -939,7 +1001,10 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
939
1001
 
940
1002
 
941
1003
 
1004
+
1005
+
942
1006
  var propTypes = {
1007
+ allowKeyMatching: external_prop_types_default.a.bool,
943
1008
  allowNewValues: external_prop_types_default.a.bool,
944
1009
  animateLoading: external_prop_types_default.a.bool,
945
1010
  appearance: external_prop_types_default.a.oneOf(['default', 'link', 'primary', 'pill', 'toggle', 'flat']),
@@ -979,6 +1044,7 @@ var propTypes = {
979
1044
  values: external_prop_types_default.a.array
980
1045
  };
981
1046
  var defaultProps = {
1047
+ allowKeyMatching: true,
982
1048
  allowNewValues: false,
983
1049
  animateLoading: false,
984
1050
  appearance: 'toggle',
@@ -1043,6 +1109,25 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
1043
1109
 
1044
1110
  _defineProperty(_assertThisInitialized(_this), "selectedOptionCount", void 0);
1045
1111
 
1112
+ _defineProperty(_assertThisInitialized(_this), "optionRefsByKey", void 0);
1113
+
1114
+ _defineProperty(_assertThisInitialized(_this), "matchCharacter", void 0);
1115
+
1116
+ _defineProperty(_assertThisInitialized(_this), "matchTimeout", void 0);
1117
+
1118
+ _defineProperty(_assertThisInitialized(_this), "currentMatchOptions", void 0);
1119
+
1120
+ _defineProperty(_assertThisInitialized(_this), "availableMatchOptions", void 0);
1121
+
1122
+ _defineProperty(_assertThisInitialized(_this), "resetMatches", function () {
1123
+ _this.matchCharacter = null;
1124
+ _this.currentMatchOptions = [];
1125
+
1126
+ if (_this.matchTimeout) {
1127
+ clearTimeout(_this.matchTimeout);
1128
+ }
1129
+ });
1130
+
1046
1131
  _defineProperty(_assertThisInitialized(_this), "handleSelectAll", function (e) {
1047
1132
  var _this$getCurrentValue, _this$props$onChange, _this$props2;
1048
1133
 
@@ -1162,6 +1247,62 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
1162
1247
  _this.toggleValue(e, value);
1163
1248
  });
1164
1249
 
1250
+ _defineProperty(_assertThisInitialized(_this), "handleMenuOptionKeyDown", function (e, optionIndex) {
1251
+ var currentKey = e.nativeEvent.key; // Checking for a single character to avoid complications from double-byte languages and emojis.
1252
+
1253
+ if (currentKey.length === 1) {
1254
+ var matches = [];
1255
+ var character = {
1256
+ index: 0,
1257
+ value: currentKey
1258
+ };
1259
+
1260
+ if (!_this.matchCharacter) {
1261
+ if (currentKey === ' ') {
1262
+ _this.resetMatches();
1263
+
1264
+ return;
1265
+ }
1266
+
1267
+ matches = fuzzyMatch(_this.availableMatchOptions, character);
1268
+ } else if (_this.currentMatchOptions.length > 1) {
1269
+ character.index = _this.matchCharacter.index + 1;
1270
+ matches = fuzzyMatch(_this.currentMatchOptions, character);
1271
+ }
1272
+
1273
+ if (matches.length) {
1274
+ var matchIndex = 0; // If the active option is a first character match, cycle to the next matching option.
1275
+
1276
+ if (character.index === 0 && matches.length > 1) {
1277
+ var activeMatchIndex = matches.indexOf(_this.availableMatchOptions[optionIndex]);
1278
+
1279
+ if (activeMatchIndex >= 0) {
1280
+ matchIndex = activeMatchIndex === matches.length - 1 ? 0 : activeMatchIndex + 1;
1281
+ }
1282
+ }
1283
+
1284
+ var optionToFocusRef = _this.optionRefsByKey[matches[matchIndex].itemKey];
1285
+
1286
+ if (optionToFocusRef != null) {
1287
+ var _optionToFocusRef$foc;
1288
+
1289
+ optionToFocusRef === null || optionToFocusRef === void 0 ? void 0 : (_optionToFocusRef$foc = optionToFocusRef.focus) === null || _optionToFocusRef$foc === void 0 ? void 0 : _optionToFocusRef$foc.call(optionToFocusRef);
1290
+ }
1291
+ }
1292
+
1293
+ _this.currentMatchOptions = matches;
1294
+ _this.matchCharacter = character;
1295
+
1296
+ if (_this.matchTimeout) {
1297
+ clearTimeout(_this.matchTimeout);
1298
+ }
1299
+
1300
+ _this.matchTimeout = setTimeout(_this.resetMatches, 500);
1301
+ e.preventDefault();
1302
+ e.stopPropagation();
1303
+ }
1304
+ });
1305
+
1165
1306
  _defineProperty(_assertThisInitialized(_this), "handleTextChange", function (e, _ref2) {
1166
1307
  var _this$props$onFilterC, _this$props5;
1167
1308
 
@@ -1253,8 +1394,16 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
1253
1394
  }
1254
1395
  });
1255
1396
 
1256
- _defineProperty(_assertThisInitialized(_this), "handleSelectedItemMount", function (c) {
1257
- _this.firstSelectedOption = c;
1397
+ _defineProperty(_assertThisInitialized(_this), "handleOptionMount", function (c, itemKey, isFirst) {
1398
+ if (isFirst) {
1399
+ _this.firstSelectedOption = c;
1400
+ }
1401
+
1402
+ if (c == null) {
1403
+ delete _this.optionRefsByKey[itemKey];
1404
+ } else {
1405
+ _this.optionRefsByKey[itemKey] = c;
1406
+ }
1258
1407
  });
1259
1408
 
1260
1409
  _defineProperty(_assertThisInitialized(_this), "createChildren", function () {
@@ -1263,10 +1412,13 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
1263
1412
  textHasFocus = _this$state.textHasFocus,
1264
1413
  topValuesState = _this$state.topValues;
1265
1414
  var _this$props10 = _this.props,
1415
+ allowKeyMatching = _this$props10.allowKeyMatching,
1266
1416
  allowNewValues = _this$props10.allowNewValues,
1267
1417
  filter = _this$props10.filter,
1268
1418
  multiple = _this$props10.multiple,
1269
- showSelectedValuesFirst = _this$props10.showSelectedValuesFirst;
1419
+ showSelectedValuesFirst = _this$props10.showSelectedValuesFirst,
1420
+ isLoadingOptions = _this$props10.isLoadingOptions,
1421
+ onScrollBottom = _this$props10.onScrollBottom;
1270
1422
 
1271
1423
  var currentValues = _this.getCurrentValues();
1272
1424
 
@@ -1274,6 +1426,7 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
1274
1426
  _this.firstSelectedOptionIndex = undefined;
1275
1427
  _this.selectedOptionCount = 0;
1276
1428
  _this.activeValue = undefined;
1429
+ _this.availableMatchOptions = [];
1277
1430
  var foundExactMatch;
1278
1431
  var childrenTopCount = 0;
1279
1432
  var hasDivider = false; // used to avoid overwriting the selected item ref in multiple mode
@@ -1292,15 +1445,35 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
1292
1445
  foundExactMatch = true;
1293
1446
  }
1294
1447
 
1295
- var selected = currentValues && currentValues.indexOf(item.props.value) >= 0; // Format the Menu.Item
1448
+ var selected = currentValues && currentValues.indexOf(item.props.value) >= 0;
1449
+ var isFirstSelected = !!selected && !foundSelected;
1450
+ var useMatchOptions = allowKeyMatching && !multiple && !filter && !isLoadingOptions && !onScrollBottom;
1451
+ var itemKey = "".concat(item.props.label, "-").concat(item.props.value);
1452
+ var filterIndex = -1;
1453
+
1454
+ if (useMatchOptions && !item.props.disabled && !item.props.hidden) {
1455
+ _this.availableMatchOptions.push({
1456
+ itemKey: itemKey,
1457
+ label: item.props.label,
1458
+ value: item.props.value
1459
+ });
1460
+
1461
+ filterIndex = _this.availableMatchOptions.length - 1;
1462
+ } // Format the Menu.Item
1463
+
1296
1464
 
1297
1465
  var clonedItem = /*#__PURE__*/Object(external_react_["cloneElement"])(item, {
1298
1466
  key: item.key || i,
1299
1467
  onClick: _this.handleMenuOptionClick,
1468
+ onKeyDown: useMatchOptions ? function (e) {
1469
+ return _this.handleMenuOptionKeyDown(e, filterIndex);
1470
+ } : undefined,
1300
1471
  selected: selected,
1301
1472
  multiple: multiple,
1302
1473
  role: 'option',
1303
- ref: selected && !foundSelected ? _this.handleSelectedItemMount : undefined
1474
+ ref: function ref(element) {
1475
+ return _this.handleOptionMount(element, itemKey, isFirstSelected);
1476
+ }
1304
1477
  });
1305
1478
 
1306
1479
  if (selected) {
@@ -1473,6 +1646,11 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
1473
1646
  _this.availableOptionCount = 0;
1474
1647
  _this.firstSelectedOptionIndex = undefined;
1475
1648
  _this.selectedOptionCount = 0;
1649
+ _this.matchCharacter = null;
1650
+ _this.matchTimeout = null;
1651
+ _this.currentMatchOptions = [];
1652
+ _this.availableMatchOptions = [];
1653
+ _this.optionRefsByKey = {};
1476
1654
 
1477
1655
  if (false) {}
1478
1656
 
@@ -1614,7 +1792,6 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
1614
1792
  "data-test": "filter"
1615
1793
  }, /*#__PURE__*/external_react_default.a.createElement(Text_default.a, {
1616
1794
  value: filterKeyword,
1617
- appearance: "search",
1618
1795
  autoCapitalize: "off",
1619
1796
  autoComplete: "off",
1620
1797
  autoCorrect: "off",
@@ -1630,7 +1807,14 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
1630
1807
  "aria-activedescendant": this.activeItemId,
1631
1808
  "aria-controls": this.menuId,
1632
1809
  inputRef: inputRef,
1633
- inputId: inputId
1810
+ inputId: inputId,
1811
+ canClear: true,
1812
+ startAdornment: /*#__PURE__*/external_react_default.a.createElement(StyledSearchIconWrapper, null, /*#__PURE__*/external_react_default.a.createElement(Search["a" /* default */], {
1813
+ role: "presentation",
1814
+ enterpriseSize: "16px",
1815
+ inline: false,
1816
+ screenReaderText: Object(i18n_["_"])('Search')
1817
+ }))
1634
1818
  })), multiple && hasChildren && selectControls);
1635
1819
  }
1636
1820
  }, {
@@ -1824,6 +2008,63 @@ _defineProperty(SelectBase_SelectBase, "invalidLinkAppearanceProps", ['append',
1824
2008
  /* harmony default export */ var Select_SelectBase = __webpack_exports__["c"] = (SelectBase_SelectBase);
1825
2009
 
1826
2010
 
2011
+ /***/ }),
2012
+
2013
+ /***/ 43:
2014
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
2015
+
2016
+ "use strict";
2017
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Search; });
2018
+ /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
2019
+ /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
2020
+ /* harmony import */ var _splunk_react_icons_Search__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(48);
2021
+ /* harmony import */ var _splunk_react_icons_Search__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_Search__WEBPACK_IMPORTED_MODULE_1__);
2022
+ /* harmony import */ var _ThemedIcon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
2023
+ /* harmony import */ var _SVG__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6);
2024
+ 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); }
2025
+
2026
+
2027
+
2028
+
2029
+
2030
+
2031
+ function Prisma24(_ref) {
2032
+ var otherProps = _extends({}, _ref);
2033
+
2034
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_SVG__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"], _extends({
2035
+ viewBox: "0 0 24 24"
2036
+ }, otherProps), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("path", {
2037
+ 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",
2038
+ fill: "currentColor"
2039
+ }));
2040
+ }
2041
+
2042
+ function Prisma16(_ref2) {
2043
+ var otherProps = _extends({}, _ref2);
2044
+
2045
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_SVG__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"], _extends({
2046
+ viewBox: "0 0 16 16"
2047
+ }, otherProps), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("path", {
2048
+ 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",
2049
+ fill: "currentColor"
2050
+ }));
2051
+ }
2052
+
2053
+ function Search(props) {
2054
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_ThemedIcon__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"], _extends({
2055
+ Enterprise: _splunk_react_icons_Search__WEBPACK_IMPORTED_MODULE_1___default.a,
2056
+ Prisma16: Prisma16,
2057
+ Prisma24: Prisma24
2058
+ }, props));
2059
+ }
2060
+
2061
+ /***/ }),
2062
+
2063
+ /***/ 48:
2064
+ /***/ (function(module, exports) {
2065
+
2066
+ module.exports = require("@splunk/react-icons/Search");
2067
+
1827
2068
  /***/ }),
1828
2069
 
1829
2070
  /***/ 5:
package/SidePanel.js CHANGED
@@ -82,7 +82,7 @@ module.exports =
82
82
  /******/
83
83
  /******/
84
84
  /******/ // Load entry module and return exports
85
- /******/ return __webpack_require__(__webpack_require__.s = 164);
85
+ /******/ return __webpack_require__(__webpack_require__.s = 165);
86
86
  /******/ })
87
87
  /************************************************************************/
88
88
  /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
101
101
 
102
102
  /***/ }),
103
103
 
104
- /***/ 164:
104
+ /***/ 165:
105
105
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
106
106
 
107
107
  "use strict";
@@ -123,7 +123,7 @@ var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_pr
123
123
  var external_lodash_ = __webpack_require__(4);
124
124
 
125
125
  // EXTERNAL MODULE: external "@splunk/react-ui/ModalLayer"
126
- var ModalLayer_ = __webpack_require__(68);
126
+ var ModalLayer_ = __webpack_require__(70);
127
127
  var ModalLayer_default = /*#__PURE__*/__webpack_require__.n(ModalLayer_);
128
128
 
129
129
  // EXTERNAL MODULE: external "styled-components"
@@ -131,7 +131,7 @@ var external_styled_components_ = __webpack_require__(3);
131
131
  var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
132
132
 
133
133
  // EXTERNAL MODULE: external "@splunk/react-ui/TransitionOpen"
134
- var TransitionOpen_ = __webpack_require__(47);
134
+ var TransitionOpen_ = __webpack_require__(49);
135
135
  var TransitionOpen_default = /*#__PURE__*/__webpack_require__.n(TransitionOpen_);
136
136
 
137
137
  // EXTERNAL MODULE: external "@splunk/themes"
@@ -365,14 +365,14 @@ module.exports = require("lodash");
365
365
 
366
366
  /***/ }),
367
367
 
368
- /***/ 47:
368
+ /***/ 49:
369
369
  /***/ (function(module, exports) {
370
370
 
371
371
  module.exports = require("@splunk/react-ui/TransitionOpen");
372
372
 
373
373
  /***/ }),
374
374
 
375
- /***/ 68:
375
+ /***/ 70:
376
376
  /***/ (function(module, exports) {
377
377
 
378
378
  module.exports = require("@splunk/react-ui/ModalLayer");