@splunk/react-ui 4.5.2 → 4.7.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 (145) hide show
  1. package/Accordion.js +10 -9
  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 +13 -13
  7. package/ButtonGroup.js +4 -4
  8. package/ButtonSimple.js +6 -6
  9. package/CHANGELOG.md +42 -1
  10. package/Calendar.js +16 -16
  11. package/Card.js +48 -53
  12. package/CardLayout.js +4 -4
  13. package/Chip.js +10 -10
  14. package/Clickable.js +41 -15
  15. package/CloseButton.js +8 -8
  16. package/Code.js +8 -7
  17. package/CollapsiblePanel.js +11 -14
  18. package/Color.js +48 -48
  19. package/ColumnLayout.js +4 -4
  20. package/ComboBox.js +8 -8
  21. package/Concertina.js +15 -15
  22. package/ControlGroup.js +30 -37
  23. package/Date.js +10 -10
  24. package/DefinitionList.js +2 -2
  25. package/Dropdown.js +4 -4
  26. package/EventListener.js +4 -4
  27. package/FetchOptions.js +8 -8
  28. package/File.js +27 -27
  29. package/FormRows.js +21 -23
  30. package/Heading.js +2 -2
  31. package/Image.js +14 -14
  32. package/JSONTree.js +4 -4
  33. package/Layer.js +10 -10
  34. package/Link.js +6 -6
  35. package/List.js +2 -2
  36. package/Markdown.js +28 -16
  37. package/Menu.js +135 -70
  38. package/Message.js +246 -305
  39. package/MessageBar.d.ts +2 -0
  40. package/MessageBar.js +789 -0
  41. package/Modal.js +95 -61
  42. package/ModalLayer.js +5 -4
  43. package/Monogram.js +4 -4
  44. package/Multiselect.js +293 -42
  45. package/Number.js +8 -8
  46. package/Paginator.js +24 -24
  47. package/Paragraph.js +2 -2
  48. package/Popover.js +12 -12
  49. package/Progress.js +6 -6
  50. package/RadioBar.js +4 -4
  51. package/RadioList.js +2 -2
  52. package/Resize.js +8 -8
  53. package/ResultsMenu.js +25 -23
  54. package/ScreenReaderContent.js +2 -2
  55. package/Scroll.js +6 -6
  56. package/ScrollContainerContext.js +2 -2
  57. package/Search.js +14 -14
  58. package/Select.js +286 -36
  59. package/SidePanel.js +6 -6
  60. package/Slider.js +20 -14
  61. package/SlidingPanels.js +4 -4
  62. package/StaticContent.js +2 -2
  63. package/StepBar.js +18 -18
  64. package/Switch.js +17 -31
  65. package/TabBar.js +60 -46
  66. package/TabLayout.js +4 -4
  67. package/Table.js +63 -55
  68. package/Text.js +163 -146
  69. package/Tooltip.js +14 -14
  70. package/TransitionOpen.js +69 -44
  71. package/WaitSpinner.js +2 -2
  72. package/cypress/plugins/index.ts +15 -0
  73. package/cypress/support/commands.ts +1 -0
  74. package/cypress/support/index.ts +10 -0
  75. package/cypress.json +12 -0
  76. package/package.json +18 -5
  77. package/types/src/Animation/Animation.d.ts +0 -1
  78. package/types/src/Calendar/DateTable.d.ts +0 -1
  79. package/types/src/Clickable/Clickable.d.ts +12 -2
  80. package/types/src/Clickable/NavigationProvider.d.ts +12 -2
  81. package/types/src/Color/Color.d.ts +3 -3
  82. package/types/src/Date/Date.d.ts +3 -3
  83. package/types/src/Date/Icon.d.ts +0 -1
  84. package/types/src/File/Icon.d.ts +0 -1
  85. package/types/src/File/IconCloud.d.ts +0 -1
  86. package/types/src/File/PaperClip.d.ts +0 -1
  87. package/types/src/File/Retry.d.ts +0 -1
  88. package/types/src/File/Trash.d.ts +0 -1
  89. package/types/src/Markdown/renderers/MarkdownCode.d.ts +0 -1
  90. package/types/src/Markdown/renderers/MarkdownCodeBlock.d.ts +0 -1
  91. package/types/src/Markdown/renderers/MarkdownImage.d.ts +0 -1
  92. package/types/src/Menu/Divider.d.ts +0 -1
  93. package/types/src/Message/Link.d.ts +2 -0
  94. package/types/src/Message/Message.d.ts +6 -1
  95. package/types/src/MessageBar/MessageBar.d.ts +28 -0
  96. package/types/src/MessageBar/index.d.ts +2 -0
  97. package/types/src/Modal/Modal.d.ts +3 -0
  98. package/types/src/Modal/ModalContext.d.ts +6 -0
  99. package/types/src/Monogram/Monogram.d.ts +2 -2
  100. package/types/src/Multiselect/Multiselect.d.ts +1 -0
  101. package/types/src/Number/IncrementIcon.d.ts +0 -1
  102. package/types/src/Number/Number.d.ts +3 -3
  103. package/types/src/Paginator/PageSeparator.d.ts +0 -1
  104. package/types/src/Popover/Popover.d.ts +1 -2
  105. package/types/src/RadioBar/RadioBar.d.ts +3 -3
  106. package/types/src/Select/Select.d.ts +8 -3
  107. package/types/src/Select/SelectBase.d.ts +17 -5
  108. package/types/src/Select/matchUtils.d.ts +12 -0
  109. package/types/src/Slider/Slider.d.ts +3 -3
  110. package/types/src/Switch/CheckIcon.d.ts +0 -1
  111. package/types/src/Switch/Switch.d.ts +7 -7
  112. package/types/src/Table/DragHandle.d.ts +0 -1
  113. package/types/src/Table/HeadExpandRowsIcon.d.ts +0 -1
  114. package/types/src/Table/Toggle.d.ts +0 -1
  115. package/types/src/Text/IconOutlinedHide.d.ts +0 -1
  116. package/types/src/Text/IconOutlinedView.d.ts +0 -1
  117. package/types/src/Text/Text.d.ts +12 -5
  118. package/types/src/Tooltip/InfoIcon.d.ts +0 -1
  119. package/types/src/TransitionOpen/TransitionOpen.d.ts +1 -0
  120. package/types/src/icons/Alert.d.ts +0 -1
  121. package/types/src/icons/AlertFilled.d.ts +0 -1
  122. package/types/src/icons/CaretDown.d.ts +0 -1
  123. package/types/src/icons/CaretRight.d.ts +0 -1
  124. package/types/src/icons/Check.d.ts +0 -1
  125. package/types/src/icons/ChevronDown.d.ts +0 -1
  126. package/types/src/icons/ChevronLeft.d.ts +0 -1
  127. package/types/src/icons/ChevronRight.d.ts +0 -1
  128. package/types/src/icons/CrossMark.d.ts +0 -1
  129. package/types/src/icons/External.d.ts +0 -1
  130. package/types/src/icons/InfoFilled.d.ts +0 -1
  131. package/types/src/icons/More.d.ts +0 -1
  132. package/types/src/icons/MoreVertical.d.ts +0 -1
  133. package/types/src/icons/Plus.d.ts +0 -1
  134. package/types/src/icons/SVG.d.ts +0 -1
  135. package/types/src/icons/Search.d.ts +0 -1
  136. package/types/src/icons/Sort.d.ts +0 -1
  137. package/types/src/icons/SortedDown.d.ts +0 -1
  138. package/types/src/icons/SortedUp.d.ts +0 -1
  139. package/types/src/icons/Success.d.ts +0 -1
  140. package/types/src/icons/SuccessFilled.d.ts +0 -1
  141. package/types/src/icons/WarningFilled.d.ts +0 -1
  142. package/types/src/utils/types.d.ts +0 -1
  143. package/unit-test-setup-testing-library.ts +9 -0
  144. package/usePrevious.js +2 -2
  145. package/types/src/Message/Banner.d.ts +0 -8
package/Multiselect.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 = 122);
85
+ /******/ return __webpack_require__(__webpack_require__.s = 128);
86
86
  /******/ })
87
87
  /************************************************************************/
88
88
  /******/ ({
@@ -108,7 +108,14 @@ module.exports = require("@splunk/ui-utils/id");
108
108
 
109
109
  /***/ }),
110
110
 
111
- /***/ 11:
111
+ /***/ 100:
112
+ /***/ (function(module, exports) {
113
+
114
+ module.exports = require("@splunk/react-ui/Chip");
115
+
116
+ /***/ }),
117
+
118
+ /***/ 12:
112
119
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
113
120
 
114
121
  "use strict";
@@ -135,7 +142,7 @@ function updateReactRef(ref, current) {
135
142
 
136
143
  /***/ }),
137
144
 
138
- /***/ 122:
145
+ /***/ 128:
139
146
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
140
147
 
141
148
  "use strict";
@@ -311,8 +318,8 @@ _defineProperty(Option_Option, "propTypes", propTypes);
311
318
  _defineProperty(Option_Option, "defaultProps", defaultProps);
312
319
 
313
320
  /* harmony default export */ var Multiselect_Option = (Option_Option);
314
- // EXTERNAL MODULE: ./src/Select/SelectBase.tsx + 1 modules
315
- var SelectBase = __webpack_require__(41);
321
+ // EXTERNAL MODULE: ./src/Select/SelectBase.tsx + 2 modules
322
+ var SelectBase = __webpack_require__(42);
316
323
 
317
324
  // CONCATENATED MODULE: ./src/Multiselect/Compact.tsx
318
325
  function Compact_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { Compact_typeof = function _typeof(obj) { return typeof obj; }; } else { Compact_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return Compact_typeof(obj); }
@@ -462,7 +469,7 @@ Compact_defineProperty(Compact_Compact, "Heading", Menu_["Heading"]);
462
469
 
463
470
  /* harmony default export */ var Multiselect_Compact = (Compact_Compact);
464
471
  // EXTERNAL MODULE: external "@splunk/ui-utils/filter"
465
- var filter_ = __webpack_require__(24);
472
+ var filter_ = __webpack_require__(25);
466
473
 
467
474
  // EXTERNAL MODULE: external "@splunk/ui-utils/id"
468
475
  var id_ = __webpack_require__(10);
@@ -471,7 +478,7 @@ var id_ = __webpack_require__(10);
471
478
  var keyboard_ = __webpack_require__(9);
472
479
 
473
480
  // EXTERNAL MODULE: external "@splunk/react-ui/Chip"
474
- var Chip_ = __webpack_require__(92);
481
+ var Chip_ = __webpack_require__(100);
475
482
  var Chip_default = /*#__PURE__*/__webpack_require__.n(Chip_);
476
483
 
477
484
  // EXTERNAL MODULE: external "@splunk/react-ui/ResultsMenu"
@@ -483,7 +490,7 @@ var Popover_ = __webpack_require__(16);
483
490
  var Popover_default = /*#__PURE__*/__webpack_require__.n(Popover_);
484
491
 
485
492
  // EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
486
- var ScreenReaderContent_ = __webpack_require__(15);
493
+ var ScreenReaderContent_ = __webpack_require__(14);
487
494
  var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReaderContent_);
488
495
 
489
496
  // EXTERNAL MODULE: external "styled-components"
@@ -573,7 +580,7 @@ var StyledOverlay = external_styled_components_default.a.div.withConfig({
573
580
  });
574
581
 
575
582
  // EXTERNAL MODULE: ./src/utils/updateReactRef.ts
576
- var updateReactRef = __webpack_require__(11);
583
+ var updateReactRef = __webpack_require__(12);
577
584
 
578
585
  // CONCATENATED MODULE: ./src/Multiselect/Normal.tsx
579
586
  function Normal_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { Normal_typeof = function _typeof(obj) { return typeof obj; }; } else { Normal_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return Normal_typeof(obj); }
@@ -1401,6 +1408,7 @@ var Multiselect_Multiselect = /*#__PURE__*/function (_Component) {
1401
1408
  Multiselect_createClass(Multiselect, [{
1402
1409
  key: "render",
1403
1410
  // @docs-props-type MultiselectPropsBase
1411
+ // TODO: SUI-3402, this can be removed when ControlGroup no longer needs to inspect componentType
1404
1412
  value: function render() {
1405
1413
  if (isCompact(this.props)) {
1406
1414
  return /*#__PURE__*/external_react_default.a.createElement(Multiselect_Compact, Multiselect_extends({
@@ -1423,6 +1431,8 @@ Multiselect_defineProperty(Multiselect_Multiselect, "propTypes", Multiselect_pro
1423
1431
 
1424
1432
  Multiselect_defineProperty(Multiselect_Multiselect, "defaultProps", Multiselect_defaultProps);
1425
1433
 
1434
+ Multiselect_defineProperty(Multiselect_Multiselect, "componentType", 'Multiselect');
1435
+
1426
1436
  Multiselect_defineProperty(Multiselect_Multiselect, "Option", Multiselect_Option);
1427
1437
 
1428
1438
  Multiselect_defineProperty(Multiselect_Multiselect, "Heading", Menu_["Heading"]);
@@ -1444,7 +1454,7 @@ module.exports = require("@splunk/react-ui/Menu");
1444
1454
 
1445
1455
  /***/ }),
1446
1456
 
1447
- /***/ 15:
1457
+ /***/ 14:
1448
1458
  /***/ (function(module, exports) {
1449
1459
 
1450
1460
  module.exports = require("@splunk/react-ui/ScreenReaderContent");
@@ -1479,14 +1489,14 @@ module.exports = require("react");
1479
1489
 
1480
1490
  /***/ }),
1481
1491
 
1482
- /***/ 21:
1492
+ /***/ 23:
1483
1493
  /***/ (function(module, exports) {
1484
1494
 
1485
1495
  module.exports = require("@splunk/react-ui/Text");
1486
1496
 
1487
1497
  /***/ }),
1488
1498
 
1489
- /***/ 24:
1499
+ /***/ 25:
1490
1500
  /***/ (function(module, exports) {
1491
1501
 
1492
1502
  module.exports = require("@splunk/ui-utils/filter");
@@ -1742,7 +1752,7 @@ module.exports = require("lodash");
1742
1752
 
1743
1753
  /***/ }),
1744
1754
 
1745
- /***/ 41:
1755
+ /***/ 42:
1746
1756
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
1747
1757
 
1748
1758
  "use strict";
@@ -1766,7 +1776,7 @@ var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_pr
1766
1776
  var external_lodash_ = __webpack_require__(4);
1767
1777
 
1768
1778
  // EXTERNAL MODULE: external "@splunk/ui-utils/filter"
1769
- var filter_ = __webpack_require__(24);
1779
+ var filter_ = __webpack_require__(25);
1770
1780
 
1771
1781
  // EXTERNAL MODULE: external "@splunk/ui-utils/id"
1772
1782
  var id_ = __webpack_require__(10);
@@ -1793,12 +1803,15 @@ var ResultsMenu_ = __webpack_require__(32);
1793
1803
  var ResultsMenu_default = /*#__PURE__*/__webpack_require__.n(ResultsMenu_);
1794
1804
 
1795
1805
  // EXTERNAL MODULE: external "@splunk/react-ui/Text"
1796
- var Text_ = __webpack_require__(21);
1806
+ var Text_ = __webpack_require__(23);
1797
1807
  var Text_default = /*#__PURE__*/__webpack_require__.n(Text_);
1798
1808
 
1799
1809
  // EXTERNAL MODULE: ./src/icons/CaretDown.tsx
1800
1810
  var CaretDown = __webpack_require__(36);
1801
1811
 
1812
+ // EXTERNAL MODULE: ./src/icons/Search.tsx
1813
+ var Search = __webpack_require__(44);
1814
+
1802
1815
  // EXTERNAL MODULE: ./src/Select/OptionBase.tsx
1803
1816
  var OptionBase = __webpack_require__(28);
1804
1817
 
@@ -1843,23 +1856,36 @@ var StyledFilter = external_styled_components_default.a.div.withConfig({
1843
1856
  enterprise: '8px',
1844
1857
  prisma: '10px 16px'
1845
1858
  }));
1859
+ var StyledSearchIconWrapper = external_styled_components_default.a.span.withConfig({
1860
+ displayName: "SelectBaseStyles__StyledSearchIconWrapper",
1861
+ componentId: "sc-16cj7sk-4"
1862
+ })(["color:", ";pointer-events:none;padding:", ";"], Object(themes_["pick"])({
1863
+ enterprise: {
1864
+ light: themes_["variables"].gray60,
1865
+ dark: themes_["variables"].white
1866
+ },
1867
+ prisma: themes_["variables"].contentColorMuted
1868
+ }), Object(themes_["pick"])({
1869
+ comfortable: '0 8px',
1870
+ compact: '0 6px'
1871
+ }));
1846
1872
  var StyledCount = external_styled_components_default.a.span.withConfig({
1847
1873
  displayName: "SelectBaseStyles__StyledCount",
1848
- componentId: "sc-16cj7sk-4"
1874
+ componentId: "sc-16cj7sk-5"
1849
1875
  })(["padding-right:", ";"], Object(themes_["pick"])({
1850
1876
  enterprise: themes_["variables"].spacingQuarter,
1851
1877
  prisma: themes_["variables"].spacingXSmall
1852
1878
  }));
1853
1879
  var StyledControlsLink = external_styled_components_default()(Link_default.a).withConfig({
1854
1880
  displayName: "SelectBaseStyles__StyledControlsLink",
1855
- componentId: "sc-16cj7sk-5"
1881
+ componentId: "sc-16cj7sk-6"
1856
1882
  })(["", ";"], function (_ref3) {
1857
1883
  var $disabled = _ref3.$disabled;
1858
1884
  return $disabled && Object(external_styled_components_["css"])(["color:", ";"], themes_["variables"].contentColorDisabled);
1859
1885
  });
1860
1886
  var StyledToggleAllControls = external_styled_components_default.a.div.withConfig({
1861
1887
  displayName: "SelectBaseStyles__StyledToggleAllControls",
1862
- componentId: "sc-16cj7sk-6"
1888
+ componentId: "sc-16cj7sk-7"
1863
1889
  })(["padding:", ";", ""], Object(themes_["pick"])({
1864
1890
  enterprise: "5px 8px",
1865
1891
  prisma: '10px 16px'
@@ -1874,6 +1900,50 @@ var StyledToggleAllControls = external_styled_components_default.a.div.withConfi
1874
1900
  }
1875
1901
  }));
1876
1902
 
1903
+ // CONCATENATED MODULE: ./src/Select/matchUtils.ts
1904
+ var charFromMatchOption = function charFromMatchOption(option, charIndex) {
1905
+ return option ? option.label.charAt(charIndex).toLowerCase() : '';
1906
+ };
1907
+
1908
+ var fuzzyMatch = function fuzzyMatch(options, matchChar) {
1909
+ if (!options.length) {
1910
+ return options;
1911
+ }
1912
+
1913
+ var defaultMatch = null;
1914
+ var hasMatch = false;
1915
+ var matches = options.filter(function (option) {
1916
+ var characterValue = charFromMatchOption(option, matchChar.index);
1917
+
1918
+ if (characterValue === matchChar.value) {
1919
+ hasMatch = true;
1920
+ return true;
1921
+ } // If we haven't found a match yet, keep track of the next closest match.
1922
+ // Secondary matching looks for the closest character of a higher value, and failing that, closest of a lower value.
1923
+
1924
+
1925
+ if (!hasMatch) {
1926
+ var defaultValue = charFromMatchOption(defaultMatch, matchChar.index);
1927
+
1928
+ if (!defaultValue) {
1929
+ defaultMatch = option;
1930
+ } else if (characterValue > matchChar.value) {
1931
+ if (defaultValue < matchChar.value) {
1932
+ defaultMatch = option;
1933
+ } else if (defaultValue > characterValue) {
1934
+ defaultMatch = option;
1935
+ }
1936
+ } else if (characterValue > defaultValue) {
1937
+ defaultMatch = option;
1938
+ }
1939
+ }
1940
+
1941
+ return false;
1942
+ });
1943
+ return matches.length === 0 && defaultMatch ? [defaultMatch] : matches;
1944
+ };
1945
+
1946
+
1877
1947
  // CONCATENATED MODULE: ./src/Select/SelectBase.tsx
1878
1948
  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); }
1879
1949
 
@@ -1940,7 +2010,10 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
1940
2010
 
1941
2011
 
1942
2012
 
2013
+
2014
+
1943
2015
  var propTypes = {
2016
+ allowKeyMatching: external_prop_types_default.a.bool,
1944
2017
  allowNewValues: external_prop_types_default.a.bool,
1945
2018
  animateLoading: external_prop_types_default.a.bool,
1946
2019
  appearance: external_prop_types_default.a.oneOf(['default', 'link', 'primary', 'pill', 'toggle', 'flat']),
@@ -1980,6 +2053,7 @@ var propTypes = {
1980
2053
  values: external_prop_types_default.a.array
1981
2054
  };
1982
2055
  var defaultProps = {
2056
+ allowKeyMatching: true,
1983
2057
  allowNewValues: false,
1984
2058
  animateLoading: false,
1985
2059
  appearance: 'toggle',
@@ -2034,7 +2108,7 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
2034
2108
 
2035
2109
  _defineProperty(_assertThisInitialized(_this), "dropdown", null);
2036
2110
 
2037
- _defineProperty(_assertThisInitialized(_this), "firstSelectedOption", null);
2111
+ _defineProperty(_assertThisInitialized(_this), "firstSelectedEnabledOption", null);
2038
2112
 
2039
2113
  _defineProperty(_assertThisInitialized(_this), "firstSelectedOptionIndex", void 0);
2040
2114
 
@@ -2044,6 +2118,25 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
2044
2118
 
2045
2119
  _defineProperty(_assertThisInitialized(_this), "selectedOptionCount", void 0);
2046
2120
 
2121
+ _defineProperty(_assertThisInitialized(_this), "optionRefsByKey", void 0);
2122
+
2123
+ _defineProperty(_assertThisInitialized(_this), "matchCharacter", void 0);
2124
+
2125
+ _defineProperty(_assertThisInitialized(_this), "matchTimeout", void 0);
2126
+
2127
+ _defineProperty(_assertThisInitialized(_this), "currentMatchOptions", void 0);
2128
+
2129
+ _defineProperty(_assertThisInitialized(_this), "availableMatchOptions", void 0);
2130
+
2131
+ _defineProperty(_assertThisInitialized(_this), "resetMatches", function () {
2132
+ _this.matchCharacter = null;
2133
+ _this.currentMatchOptions = [];
2134
+
2135
+ if (_this.matchTimeout) {
2136
+ clearTimeout(_this.matchTimeout);
2137
+ }
2138
+ });
2139
+
2047
2140
  _defineProperty(_assertThisInitialized(_this), "handleSelectAll", function (e) {
2048
2141
  var _this$getCurrentValue, _this$props$onChange, _this$props2;
2049
2142
 
@@ -2160,9 +2253,69 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
2160
2253
  var value = _ref.value;
2161
2254
  e.preventDefault();
2162
2255
 
2256
+ if (!_this.state.open) {
2257
+ return;
2258
+ }
2259
+
2163
2260
  _this.toggleValue(e, value);
2164
2261
  });
2165
2262
 
2263
+ _defineProperty(_assertThisInitialized(_this), "handleMenuOptionKeyDown", function (e, optionIndex) {
2264
+ var currentKey = e.nativeEvent.key; // Checking for a single character to avoid complications from double-byte languages and emojis.
2265
+
2266
+ if (currentKey.length === 1) {
2267
+ var matches = [];
2268
+ var character = {
2269
+ index: 0,
2270
+ value: currentKey
2271
+ };
2272
+
2273
+ if (!_this.matchCharacter) {
2274
+ if (currentKey === ' ') {
2275
+ _this.resetMatches();
2276
+
2277
+ return;
2278
+ }
2279
+
2280
+ matches = fuzzyMatch(_this.availableMatchOptions, character);
2281
+ } else if (_this.currentMatchOptions.length > 1) {
2282
+ character.index = _this.matchCharacter.index + 1;
2283
+ matches = fuzzyMatch(_this.currentMatchOptions, character);
2284
+ }
2285
+
2286
+ if (matches.length) {
2287
+ var matchIndex = 0; // If the active option is a first character match, cycle to the next matching option.
2288
+
2289
+ if (character.index === 0 && matches.length > 1) {
2290
+ var activeMatchIndex = matches.indexOf(_this.availableMatchOptions[optionIndex]);
2291
+
2292
+ if (activeMatchIndex >= 0) {
2293
+ matchIndex = activeMatchIndex === matches.length - 1 ? 0 : activeMatchIndex + 1;
2294
+ }
2295
+ }
2296
+
2297
+ var optionToFocusRef = _this.optionRefsByKey[matches[matchIndex].itemKey];
2298
+
2299
+ if (optionToFocusRef != null) {
2300
+ var _optionToFocusRef$foc;
2301
+
2302
+ optionToFocusRef === null || optionToFocusRef === void 0 ? void 0 : (_optionToFocusRef$foc = optionToFocusRef.focus) === null || _optionToFocusRef$foc === void 0 ? void 0 : _optionToFocusRef$foc.call(optionToFocusRef);
2303
+ }
2304
+ }
2305
+
2306
+ _this.currentMatchOptions = matches;
2307
+ _this.matchCharacter = character;
2308
+
2309
+ if (_this.matchTimeout) {
2310
+ clearTimeout(_this.matchTimeout);
2311
+ }
2312
+
2313
+ _this.matchTimeout = setTimeout(_this.resetMatches, 500);
2314
+ e.preventDefault();
2315
+ e.stopPropagation();
2316
+ }
2317
+ });
2318
+
2166
2319
  _defineProperty(_assertThisInitialized(_this), "handleTextChange", function (e, _ref2) {
2167
2320
  var _this$props$onFilterC, _this$props5;
2168
2321
 
@@ -2208,8 +2361,8 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
2208
2361
 
2209
2362
  (_this$props$onOpen = (_this$props6 = _this.props).onOpen) === null || _this$props$onOpen === void 0 ? void 0 : _this$props$onOpen.call(_this$props6);
2210
2363
 
2211
- if (_this.firstSelectedOption && !_this.hasFilter()) {
2212
- _this.firstSelectedOption.focus();
2364
+ if (_this.firstSelectedEnabledOption && !_this.hasFilter()) {
2365
+ _this.firstSelectedEnabledOption.focus();
2213
2366
  } else {
2214
2367
  var _this$firstSelectedOp;
2215
2368
 
@@ -2254,8 +2407,16 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
2254
2407
  }
2255
2408
  });
2256
2409
 
2257
- _defineProperty(_assertThisInitialized(_this), "handleSelectedItemMount", function (c) {
2258
- _this.firstSelectedOption = c;
2410
+ _defineProperty(_assertThisInitialized(_this), "handleOptionMount", function (c, itemKey, isFirst) {
2411
+ if (isFirst) {
2412
+ _this.firstSelectedEnabledOption = c;
2413
+ }
2414
+
2415
+ if (c == null) {
2416
+ delete _this.optionRefsByKey[itemKey];
2417
+ } else {
2418
+ _this.optionRefsByKey[itemKey] = c;
2419
+ }
2259
2420
  });
2260
2421
 
2261
2422
  _defineProperty(_assertThisInitialized(_this), "createChildren", function () {
@@ -2264,10 +2425,13 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
2264
2425
  textHasFocus = _this$state.textHasFocus,
2265
2426
  topValuesState = _this$state.topValues;
2266
2427
  var _this$props10 = _this.props,
2428
+ allowKeyMatching = _this$props10.allowKeyMatching,
2267
2429
  allowNewValues = _this$props10.allowNewValues,
2268
2430
  filter = _this$props10.filter,
2269
2431
  multiple = _this$props10.multiple,
2270
- showSelectedValuesFirst = _this$props10.showSelectedValuesFirst;
2432
+ showSelectedValuesFirst = _this$props10.showSelectedValuesFirst,
2433
+ isLoadingOptions = _this$props10.isLoadingOptions,
2434
+ onScrollBottom = _this$props10.onScrollBottom;
2271
2435
 
2272
2436
  var currentValues = _this.getCurrentValues();
2273
2437
 
@@ -2275,11 +2439,12 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
2275
2439
  _this.firstSelectedOptionIndex = undefined;
2276
2440
  _this.selectedOptionCount = 0;
2277
2441
  _this.activeValue = undefined;
2442
+ _this.availableMatchOptions = [];
2278
2443
  var foundExactMatch;
2279
2444
  var childrenTopCount = 0;
2280
2445
  var hasDivider = false; // used to avoid overwriting the selected item ref in multiple mode
2281
2446
 
2282
- var foundSelected;
2447
+ var foundSelectedAndEnabled;
2283
2448
  var topValues = showSelectedValuesFirst === 'immediately' ? _this.getTopValues() : topValuesState;
2284
2449
  var children = external_react_["Children"].toArray(_this.props.children).reduce(function (acc, item, i) {
2285
2450
  // ignore Headings and Dividers
@@ -2293,19 +2458,39 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
2293
2458
  foundExactMatch = true;
2294
2459
  }
2295
2460
 
2296
- var selected = currentValues && currentValues.indexOf(item.props.value) >= 0; // Format the Menu.Item
2461
+ var selected = currentValues && currentValues.indexOf(item.props.value) >= 0;
2462
+ var isFirstSelectedAndEnabled = !!selected && !item.props.disabled && !foundSelectedAndEnabled;
2463
+ var useMatchOptions = allowKeyMatching && !multiple && !filter && !isLoadingOptions && !onScrollBottom;
2464
+ var itemKey = "".concat(item.props.label, "-").concat(item.props.value);
2465
+ var filterIndex = -1;
2466
+
2467
+ if (useMatchOptions && !item.props.disabled && !item.props.hidden) {
2468
+ _this.availableMatchOptions.push({
2469
+ itemKey: itemKey,
2470
+ label: item.props.label,
2471
+ value: item.props.value
2472
+ });
2473
+
2474
+ filterIndex = _this.availableMatchOptions.length - 1;
2475
+ } // Format the Menu.Item
2476
+
2297
2477
 
2298
2478
  var clonedItem = /*#__PURE__*/Object(external_react_["cloneElement"])(item, {
2299
2479
  key: item.key || i,
2300
2480
  onClick: _this.handleMenuOptionClick,
2481
+ onKeyDown: useMatchOptions ? function (e) {
2482
+ return _this.handleMenuOptionKeyDown(e, filterIndex);
2483
+ } : undefined,
2301
2484
  selected: selected,
2302
2485
  multiple: multiple,
2303
2486
  role: 'option',
2304
- ref: selected && !foundSelected ? _this.handleSelectedItemMount : undefined
2487
+ ref: function ref(element) {
2488
+ return _this.handleOptionMount(element, itemKey, isFirstSelectedAndEnabled);
2489
+ }
2305
2490
  });
2306
2491
 
2307
- if (selected) {
2308
- foundSelected = true;
2492
+ if (isFirstSelectedAndEnabled) {
2493
+ foundSelectedAndEnabled = true;
2309
2494
  }
2310
2495
 
2311
2496
  if (topValues && topValues.indexOf(item.props.value) >= 0) {
@@ -2474,6 +2659,11 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
2474
2659
  _this.availableOptionCount = 0;
2475
2660
  _this.firstSelectedOptionIndex = undefined;
2476
2661
  _this.selectedOptionCount = 0;
2662
+ _this.matchCharacter = null;
2663
+ _this.matchTimeout = null;
2664
+ _this.currentMatchOptions = [];
2665
+ _this.availableMatchOptions = [];
2666
+ _this.optionRefsByKey = {};
2477
2667
 
2478
2668
  if (false) {}
2479
2669
 
@@ -2615,7 +2805,6 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
2615
2805
  "data-test": "filter"
2616
2806
  }, /*#__PURE__*/external_react_default.a.createElement(Text_default.a, {
2617
2807
  value: filterKeyword,
2618
- appearance: "search",
2619
2808
  autoCapitalize: "off",
2620
2809
  autoComplete: "off",
2621
2810
  autoCorrect: "off",
@@ -2631,7 +2820,14 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
2631
2820
  "aria-activedescendant": this.activeItemId,
2632
2821
  "aria-controls": this.menuId,
2633
2822
  inputRef: inputRef,
2634
- inputId: inputId
2823
+ inputId: inputId,
2824
+ canClear: true,
2825
+ startAdornment: /*#__PURE__*/external_react_default.a.createElement(StyledSearchIconWrapper, null, /*#__PURE__*/external_react_default.a.createElement(Search["a" /* default */], {
2826
+ role: "presentation",
2827
+ enterpriseSize: "16px",
2828
+ inline: false,
2829
+ screenReaderText: Object(i18n_["_"])('Search')
2830
+ }))
2635
2831
  })), multiple && hasChildren && selectControls);
2636
2832
  }
2637
2833
  }, {
@@ -2670,7 +2866,12 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
2670
2866
  });
2671
2867
 
2672
2868
  if (matchedItem) {
2673
- acc.push(matchedItem.props.children || matchedItem.props.label); // if not in multiple mode, add the icon
2869
+ acc.push(matchedItem.props.children || matchedItem.props.label);
2870
+
2871
+ if (!matchedItem.props.disabled) {
2872
+ isAnyValueSelected = true;
2873
+ } // if not in multiple mode, add the icon
2874
+
2674
2875
 
2675
2876
  if (!multiple && currentValues.length === 1) {
2676
2877
  icon = matchedItem.props.icon;
@@ -2689,7 +2890,6 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
2689
2890
  label = valuesLabel; // only apply prefix / suffix if the label is not empty
2690
2891
 
2691
2892
  if (label.length > 0) {
2692
- isAnyValueSelected = true;
2693
2893
  label = this.wrapLabel({
2694
2894
  prefixLabel: prefixLabel,
2695
2895
  label: label,
@@ -2784,7 +2984,8 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
2784
2984
  isLoading: _this2.props.isLoadingOptions,
2785
2985
  id: _this2.menuId
2786
2986
  }, Object(external_lodash_["pick"])(_this2.props, 'noOptionsMessage', 'footerMessage', 'animateLoading', 'loadingMessage'), {
2787
- style: _objectSpread(_objectSpread({}, internalMenuStyle), _this2.props.menuStyle)
2987
+ style: _objectSpread(_objectSpread({}, internalMenuStyle), _this2.props.menuStyle),
2988
+ tabIndex: currentValues.length > 0 && !isAnyValueSelected ? 0 : undefined
2788
2989
  }), finalChildren);
2789
2990
  };
2790
2991
 
@@ -2802,7 +3003,7 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
2802
3003
  _this2.dropdown = c;
2803
3004
  },
2804
3005
  retainFocus: false,
2805
- takeFocus: !isAnyValueSelected || !!filterEnabled
3006
+ takeFocus: currentValues.length === 0 || currentValues.length > 0 && !isAnyValueSelected || !!filterEnabled
2806
3007
  }, createMenu);
2807
3008
  }
2808
3009
  }]);
@@ -2825,6 +3026,56 @@ _defineProperty(SelectBase_SelectBase, "invalidLinkAppearanceProps", ['append',
2825
3026
  /* harmony default export */ var Select_SelectBase = __webpack_exports__["c"] = (SelectBase_SelectBase);
2826
3027
 
2827
3028
 
3029
+ /***/ }),
3030
+
3031
+ /***/ 44:
3032
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
3033
+
3034
+ "use strict";
3035
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Search; });
3036
+ /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
3037
+ /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
3038
+ /* harmony import */ var _splunk_react_icons_Search__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(51);
3039
+ /* harmony import */ var _splunk_react_icons_Search__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_Search__WEBPACK_IMPORTED_MODULE_1__);
3040
+ /* harmony import */ var _ThemedIcon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
3041
+ /* harmony import */ var _SVG__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6);
3042
+ 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); }
3043
+
3044
+
3045
+
3046
+
3047
+
3048
+
3049
+ function Prisma24(_ref) {
3050
+ var otherProps = _extends({}, _ref);
3051
+
3052
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_SVG__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"], _extends({
3053
+ viewBox: "0 0 24 24"
3054
+ }, otherProps), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("path", {
3055
+ 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",
3056
+ fill: "currentColor"
3057
+ }));
3058
+ }
3059
+
3060
+ function Prisma16(_ref2) {
3061
+ var otherProps = _extends({}, _ref2);
3062
+
3063
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_SVG__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"], _extends({
3064
+ viewBox: "0 0 16 16"
3065
+ }, otherProps), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("path", {
3066
+ 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",
3067
+ fill: "currentColor"
3068
+ }));
3069
+ }
3070
+
3071
+ function Search(props) {
3072
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_ThemedIcon__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"], _extends({
3073
+ Enterprise: _splunk_react_icons_Search__WEBPACK_IMPORTED_MODULE_1___default.a,
3074
+ Prisma16: Prisma16,
3075
+ Prisma24: Prisma24
3076
+ }, props));
3077
+ }
3078
+
2828
3079
  /***/ }),
2829
3080
 
2830
3081
  /***/ 5:
@@ -2834,6 +3085,13 @@ module.exports = require("@splunk/ui-utils/i18n");
2834
3085
 
2835
3086
  /***/ }),
2836
3087
 
3088
+ /***/ 51:
3089
+ /***/ (function(module, exports) {
3090
+
3091
+ module.exports = require("@splunk/react-icons/Search");
3092
+
3093
+ /***/ }),
3094
+
2837
3095
  /***/ 6:
2838
3096
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
2839
3097
 
@@ -2989,13 +3247,6 @@ module.exports = require("@splunk/react-ui/Box");
2989
3247
 
2990
3248
  module.exports = require("@splunk/ui-utils/keyboard");
2991
3249
 
2992
- /***/ }),
2993
-
2994
- /***/ 92:
2995
- /***/ (function(module, exports) {
2996
-
2997
- module.exports = require("@splunk/react-ui/Chip");
2998
-
2999
3250
  /***/ })
3000
3251
 
3001
3252
  /******/ });