@splunk/react-ui 4.15.0 → 4.16.1

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 (69) hide show
  1. package/Animation.js +2 -2
  2. package/Button.js +32 -30
  3. package/ButtonSimple.js +54 -50
  4. package/CHANGELOG.md +27 -2
  5. package/Calendar.js +12 -12
  6. package/Card.js +10 -10
  7. package/Chip.js +10 -10
  8. package/CloseButton.js +8 -8
  9. package/CollapsiblePanel.js +8 -8
  10. package/Color.js +14 -14
  11. package/ColumnLayout.js +2 -2
  12. package/ComboBox.js +4 -4
  13. package/ControlGroup.js +26 -16
  14. package/Date.js +10 -5
  15. package/Dropdown.js +56 -15
  16. package/File.js +33 -24
  17. package/FormRows.js +6 -6
  18. package/Heading.js +10 -46
  19. package/Image.js +13 -13
  20. package/Link.js +2 -2
  21. package/MIGRATION.md +21 -0
  22. package/Menu.js +20 -20
  23. package/Message.js +24 -24
  24. package/MessageBar.js +24 -24
  25. package/Modal.js +7 -7
  26. package/Multiselect.js +197 -177
  27. package/Number.js +5 -5
  28. package/Paginator.js +19 -19
  29. package/Popover.js +7 -7
  30. package/Progress.js +2 -2
  31. package/Scroll.js +5 -5
  32. package/Search.js +4 -4
  33. package/Select.js +187 -167
  34. package/SplitButton.js +2 -2
  35. package/StepBar.js +10 -10
  36. package/Switch.js +4 -4
  37. package/TabBar.js +2 -2
  38. package/TabLayout.js +3 -0
  39. package/Table.js +95 -46
  40. package/Text.js +19 -19
  41. package/TextArea.js +15 -15
  42. package/Tooltip.js +5 -5
  43. package/Typography.js +1 -1
  44. package/WaitSpinner.js +2 -2
  45. package/package.json +6 -7
  46. package/types/src/Button/Button.d.ts +5 -2
  47. package/types/src/Button/docs/examples/Basic.d.ts +2 -2
  48. package/types/src/ButtonSimple/ButtonSimple.d.ts +10 -11
  49. package/types/src/Date/Icon.d.ts +1 -1
  50. package/types/src/Dropdown/Dropdown.d.ts +12 -7
  51. package/types/src/File/Icon.d.ts +1 -1
  52. package/types/src/File/IconCloud.d.ts +1 -1
  53. package/types/src/File/PaperClip.d.ts +1 -1
  54. package/types/src/File/Retry.d.ts +1 -1
  55. package/types/src/File/Trash.d.ts +1 -1
  56. package/types/src/Multiselect/Compact.d.ts +4 -0
  57. package/types/src/Multiselect/Multiselect.d.ts +4 -1
  58. package/types/src/Number/IncrementIcon.d.ts +1 -1
  59. package/types/src/Select/Select.d.ts +4 -2
  60. package/types/src/Select/SelectBase.d.ts +13 -1
  61. package/types/src/TabLayout/Panel.d.ts +3 -0
  62. package/types/src/TabLayout/TabLayout.d.ts +2 -0
  63. package/types/src/Table/Body.d.ts +2 -0
  64. package/types/src/Table/Row.d.ts +11 -3
  65. package/types/src/Table/Table.d.ts +5 -3
  66. package/types/src/Text/IconOutlinedHide.d.ts +1 -1
  67. package/types/src/Text/IconOutlinedView.d.ts +1 -1
  68. package/types/src/Tooltip/InfoIcon.d.ts +1 -1
  69. package/types/src/Typography/Typography.d.ts +1 -1
package/Select.js CHANGED
@@ -875,8 +875,8 @@ _defineProperty(Option, "defaultProps", defaultProps);
875
875
  /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Search; });
876
876
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
877
877
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
878
- /* harmony import */ var _splunk_react_icons_Search__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(54);
879
- /* harmony import */ var _splunk_react_icons_Search__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_Search__WEBPACK_IMPORTED_MODULE_1__);
878
+ /* harmony import */ var _splunk_react_icons_enterprise_Search__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(56);
879
+ /* harmony import */ var _splunk_react_icons_enterprise_Search__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_enterprise_Search__WEBPACK_IMPORTED_MODULE_1__);
880
880
  /* harmony import */ var _ThemedIcon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
881
881
  /* harmony import */ var _SVG__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6);
882
882
  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); }
@@ -910,7 +910,7 @@ function Prisma16(_ref2) {
910
910
 
911
911
  function Search(props) {
912
912
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_ThemedIcon__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"], _extends({
913
- Enterprise: _splunk_react_icons_Search__WEBPACK_IMPORTED_MODULE_1___default.a,
913
+ Enterprise: _splunk_react_icons_enterprise_Search__WEBPACK_IMPORTED_MODULE_1___default.a,
914
914
  Prisma16: Prisma16,
915
915
  Prisma24: Prisma24
916
916
  }, props));
@@ -939,7 +939,7 @@ module.exports = require("@splunk/react-ui/Link");
939
939
 
940
940
  /***/ }),
941
941
 
942
- /***/ 45:
942
+ /***/ 46:
943
943
  /***/ (function(module, exports) {
944
944
 
945
945
  module.exports = require("@splunk/react-ui/ResultsMenu");
@@ -953,15 +953,22 @@ module.exports = require("lodash/omit");
953
953
 
954
954
  /***/ }),
955
955
 
956
- /***/ 50:
956
+ /***/ 51:
957
+ /***/ (function(module, exports) {
958
+
959
+ module.exports = require("lodash/find");
960
+
961
+ /***/ }),
962
+
963
+ /***/ 52:
957
964
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
958
965
 
959
966
  "use strict";
960
967
  /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return CaretDown; });
961
968
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
962
969
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
963
- /* harmony import */ var _splunk_react_icons_Caret__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(51);
964
- /* harmony import */ var _splunk_react_icons_Caret__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_Caret__WEBPACK_IMPORTED_MODULE_1__);
970
+ /* harmony import */ var _splunk_react_icons_enterprise_Caret__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(53);
971
+ /* harmony import */ var _splunk_react_icons_enterprise_Caret__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_enterprise_Caret__WEBPACK_IMPORTED_MODULE_1__);
965
972
  /* harmony import */ var _ThemedIcon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
966
973
  /* harmony import */ var _SVG__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6);
967
974
  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); }
@@ -984,38 +991,31 @@ function Prisma24(_ref) {
984
991
 
985
992
  function CaretDown(props) {
986
993
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_ThemedIcon__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"], _extends({
987
- Enterprise: _splunk_react_icons_Caret__WEBPACK_IMPORTED_MODULE_1___default.a,
994
+ Enterprise: _splunk_react_icons_enterprise_Caret__WEBPACK_IMPORTED_MODULE_1___default.a,
988
995
  Prisma24: Prisma24
989
996
  }, props));
990
997
  }
991
998
 
992
999
  /***/ }),
993
1000
 
994
- /***/ 51:
995
- /***/ (function(module, exports) {
996
-
997
- module.exports = require("@splunk/react-icons/Caret");
998
-
999
- /***/ }),
1000
-
1001
- /***/ 54:
1001
+ /***/ 53:
1002
1002
  /***/ (function(module, exports) {
1003
1003
 
1004
- module.exports = require("@splunk/react-icons/Search");
1004
+ module.exports = require("@splunk/react-icons/enterprise/Caret");
1005
1005
 
1006
1006
  /***/ }),
1007
1007
 
1008
1008
  /***/ 56:
1009
1009
  /***/ (function(module, exports) {
1010
1010
 
1011
- module.exports = require("lodash/without");
1011
+ module.exports = require("@splunk/react-icons/enterprise/Search");
1012
1012
 
1013
1013
  /***/ }),
1014
1014
 
1015
- /***/ 57:
1015
+ /***/ 58:
1016
1016
  /***/ (function(module, exports) {
1017
1017
 
1018
- module.exports = require("lodash/find");
1018
+ module.exports = require("lodash/without");
1019
1019
 
1020
1020
  /***/ }),
1021
1021
 
@@ -1044,7 +1044,7 @@ var castArray_ = __webpack_require__(62);
1044
1044
  var castArray_default = /*#__PURE__*/__webpack_require__.n(castArray_);
1045
1045
 
1046
1046
  // EXTERNAL MODULE: external "lodash/find"
1047
- var find_ = __webpack_require__(57);
1047
+ var find_ = __webpack_require__(51);
1048
1048
  var find_default = /*#__PURE__*/__webpack_require__.n(find_);
1049
1049
 
1050
1050
  // EXTERNAL MODULE: external "lodash/forEachRight"
@@ -1080,7 +1080,7 @@ var uniq_ = __webpack_require__(105);
1080
1080
  var uniq_default = /*#__PURE__*/__webpack_require__.n(uniq_);
1081
1081
 
1082
1082
  // EXTERNAL MODULE: external "lodash/without"
1083
- var without_ = __webpack_require__(56);
1083
+ var without_ = __webpack_require__(58);
1084
1084
  var without_default = /*#__PURE__*/__webpack_require__.n(without_);
1085
1085
 
1086
1086
  // EXTERNAL MODULE: external "@splunk/ui-utils/filter"
@@ -1107,7 +1107,7 @@ var Link_default = /*#__PURE__*/__webpack_require__.n(Link_);
1107
1107
  var Menu_ = __webpack_require__(15);
1108
1108
 
1109
1109
  // EXTERNAL MODULE: external "@splunk/react-ui/ResultsMenu"
1110
- var ResultsMenu_ = __webpack_require__(45);
1110
+ var ResultsMenu_ = __webpack_require__(46);
1111
1111
  var ResultsMenu_default = /*#__PURE__*/__webpack_require__.n(ResultsMenu_);
1112
1112
 
1113
1113
  // EXTERNAL MODULE: external "@splunk/react-ui/Text"
@@ -1115,7 +1115,7 @@ var Text_ = __webpack_require__(30);
1115
1115
  var Text_default = /*#__PURE__*/__webpack_require__.n(Text_);
1116
1116
 
1117
1117
  // EXTERNAL MODULE: ./src/icons/CaretDown.tsx
1118
- var CaretDown = __webpack_require__(50);
1118
+ var CaretDown = __webpack_require__(52);
1119
1119
 
1120
1120
  // EXTERNAL MODULE: ./src/icons/Search.tsx
1121
1121
  var Search = __webpack_require__(39);
@@ -1754,19 +1754,145 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
1754
1754
  }
1755
1755
  });
1756
1756
 
1757
+ _defineProperty(_assertThisInitialized(_this), "createToggle", function () {
1758
+ var _this$getCurrentValue4;
1759
+
1760
+ var _this$props11 = _this.props,
1761
+ toggle = _this$props11.toggle,
1762
+ appearance = _this$props11.appearance,
1763
+ children = _this$props11.children,
1764
+ describedBy = _this$props11.describedBy,
1765
+ disabled = _this$props11.disabled,
1766
+ elementRef = _this$props11.elementRef,
1767
+ error = _this$props11.error,
1768
+ inline = _this$props11.inline,
1769
+ labelledBy = _this$props11.labelledBy,
1770
+ labelText = _this$props11.labelText,
1771
+ multiple = _this$props11.multiple,
1772
+ placeholder = _this$props11.placeholder,
1773
+ prefixLabel = _this$props11.prefixLabel,
1774
+ required = _this$props11.required,
1775
+ suffixLabel = _this$props11.suffixLabel;
1776
+ var icon;
1777
+ var label; // Generate buttonLabels
1778
+
1779
+ var currentValues = (_this$getCurrentValue4 = _this.getCurrentValues()) !== null && _this$getCurrentValue4 !== void 0 ? _this$getCurrentValue4 : [];
1780
+ var childrenArray = external_react_["Children"].toArray(children);
1781
+ var valuesLabel = currentValues.reduce(function (acc, value, index, orig) {
1782
+ var matchedItem = find_default()(childrenArray, function (item) {
1783
+ return isOption(item) && item.props.value === value;
1784
+ });
1785
+
1786
+ if (matchedItem) {
1787
+ acc.push(matchedItem.props.children || matchedItem.props.label); // if not in multiple mode, add the icon
1788
+
1789
+ if (!multiple && currentValues.length === 1) {
1790
+ icon = matchedItem.props.icon;
1791
+ }
1792
+ } else if (multiple) {
1793
+ // only add values that don't match an option in "multiple" mode to preserve old behaviour
1794
+ acc.push(value);
1795
+ }
1796
+
1797
+ if (index < orig.length - 1) {
1798
+ acc.push(Object(i18n_["_"])(', '));
1799
+ }
1800
+
1801
+ return acc;
1802
+ }, []);
1803
+ label = valuesLabel; // only apply prefix / suffix if the label is not empty
1804
+
1805
+ if (label.length > 0) {
1806
+ label = _this.wrapLabel({
1807
+ prefixLabel: prefixLabel,
1808
+ label: label,
1809
+ suffixLabel: suffixLabel
1810
+ });
1811
+ } // single <Select> behaviour is to show the placeholder if all parts of the the label
1812
+ // are empty strings so we replicate this behaviour here
1813
+
1814
+
1815
+ if (label.length === 0 || !multiple && label.every(function (labelNode) {
1816
+ return labelNode === '';
1817
+ })) {
1818
+ label = [placeholder];
1819
+ }
1820
+
1821
+ var ariaLabel = label; // If there's more than one item selected, read out the selected total
1822
+ // rather than reading out each selected item
1823
+
1824
+ if (label.length > 1) {
1825
+ ariaLabel = _this.wrapLabel({
1826
+ prefixLabel: prefixLabel,
1827
+ label: ["".concat(currentValues.length, " items selected")],
1828
+ suffixLabel: suffixLabel
1829
+ });
1830
+ }
1831
+
1832
+ var commonProps = _objectSpread({
1833
+ 'aria-describedby': describedBy,
1834
+ 'aria-label': "".concat(labelText ? "".concat(labelText, ", ") : '').concat(ariaLabel),
1835
+ 'aria-labelledby': labelText ? undefined : labelledBy,
1836
+ 'aria-multiselectable': multiple,
1837
+ 'aria-required': required,
1838
+ 'data-select-appearance': appearance,
1839
+ 'data-test': multiple ? 'multiselect' : 'select',
1840
+ disabled: disabled,
1841
+ elementRef: elementRef,
1842
+ error: error
1843
+ }, omit_default()(_this.props, keys_default()(SelectBase.propTypes)));
1844
+
1845
+ if (multiple) {
1846
+ commonProps['data-test-values'] = JSON.stringify(currentValues);
1847
+ } else {
1848
+ var _currentValues = _slicedToArray(currentValues, 1),
1849
+ dataTestValue = _currentValues[0];
1850
+
1851
+ commonProps['data-test-value'] = dataTestValue;
1852
+ }
1853
+
1854
+ if (toggle) {
1855
+ return /*#__PURE__*/Object(external_react_["cloneElement"])(toggle, commonProps);
1856
+ }
1857
+
1858
+ if (appearance === 'link') {
1859
+ return /*#__PURE__*/external_react_default.a.createElement(Link_default.a, _extends({}, commonProps, {
1860
+ "data-select-appearance": "link"
1861
+ }), !!icon && /*#__PURE__*/external_react_default.a.createElement(StyledLinkIcon, null, icon), label || placeholder, /*#__PURE__*/external_react_default.a.createElement(StyledLinkCaret, null, /*#__PURE__*/external_react_default.a.createElement(CaretDown["a" /* default */], {
1862
+ enterpriseSize: 0.5,
1863
+ prismaSize: "small"
1864
+ })));
1865
+ }
1866
+
1867
+ return /*#__PURE__*/external_react_default.a.createElement(StyledButton, _extends({}, commonProps, {
1868
+ $multiple: multiple,
1869
+ appearance: appearance,
1870
+ label: label,
1871
+ error: error,
1872
+ icon: icon,
1873
+ inline: inline,
1874
+ isMenu: true,
1875
+ role: "listbox" // @ts-expect-error - accept inconsistency with Button
1876
+ ,
1877
+ onClick: _this.props.onClick
1878
+ }, pick_default()(_this.props, SelectBase.invalidLinkAppearanceProps)), !!currentValues.length && multiple && /*#__PURE__*/external_react_default.a.createElement(StyledCount, {
1879
+ "data-role": "count"
1880
+ }, "(", currentValues.length, ")"));
1881
+ });
1882
+
1757
1883
  _defineProperty(_assertThisInitialized(_this), "createChildren", function () {
1758
1884
  var _this$state = _this.state,
1759
1885
  filterKeyword = _this$state.filterKeyword,
1760
1886
  textHasFocus = _this$state.textHasFocus,
1761
1887
  topValuesState = _this$state.topValues;
1762
- var _this$props11 = _this.props,
1763
- allowKeyMatching = _this$props11.allowKeyMatching,
1764
- allowNewValues = _this$props11.allowNewValues,
1765
- filter = _this$props11.filter,
1766
- multiple = _this$props11.multiple,
1767
- showSelectedValuesFirst = _this$props11.showSelectedValuesFirst,
1768
- isLoadingOptions = _this$props11.isLoadingOptions,
1769
- onScrollBottom = _this$props11.onScrollBottom;
1888
+ var _this$props12 = _this.props,
1889
+ allowKeyMatching = _this$props12.allowKeyMatching,
1890
+ allowNewValues = _this$props12.allowNewValues,
1891
+ filter = _this$props12.filter,
1892
+ multiple = _this$props12.multiple,
1893
+ showSelectedValuesFirst = _this$props12.showSelectedValuesFirst,
1894
+ isLoadingOptions = _this$props12.isLoadingOptions,
1895
+ onScrollBottom = _this$props12.onScrollBottom;
1770
1896
 
1771
1897
  var currentValues = _this.getCurrentValues();
1772
1898
 
@@ -2029,10 +2155,10 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
2029
2155
  }, {
2030
2156
  key: "getTopValues",
2031
2157
  value: function getTopValues() {
2032
- var _this$getCurrentValue4;
2158
+ var _this$getCurrentValue5;
2033
2159
 
2034
2160
  // in non-multiple mode, don't move values to the top of the list
2035
- return this.props.multiple && this.props.showSelectedValuesFirst !== 'never' ? (_this$getCurrentValue4 = this.getCurrentValues()) !== null && _this$getCurrentValue4 !== void 0 ? _this$getCurrentValue4 : [] : [];
2161
+ return this.props.multiple && this.props.showSelectedValuesFirst !== 'never' ? (_this$getCurrentValue5 = this.getCurrentValues()) !== null && _this$getCurrentValue5 !== void 0 ? _this$getCurrentValue5 : [] : [];
2036
2162
  }
2037
2163
  }, {
2038
2164
  key: "isControlled",
@@ -2047,13 +2173,13 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
2047
2173
  }, {
2048
2174
  key: "toggleValue",
2049
2175
  value: function toggleValue(e, value) {
2050
- var _this$getCurrentValue5, _this$props$onChange3, _this$props13;
2176
+ var _this$getCurrentValue6, _this$props$onChange3, _this$props14;
2051
2177
 
2052
- var values = (_this$getCurrentValue5 = this.getCurrentValues()) !== null && _this$getCurrentValue5 !== void 0 ? _this$getCurrentValue5 : [];
2178
+ var values = (_this$getCurrentValue6 = this.getCurrentValues()) !== null && _this$getCurrentValue6 !== void 0 ? _this$getCurrentValue6 : [];
2053
2179
  var currentIndex = values.indexOf(value);
2054
- var _this$props12 = this.props,
2055
- name = _this$props12.name,
2056
- multiple = _this$props12.multiple;
2180
+ var _this$props13 = this.props,
2181
+ name = _this$props13.name,
2182
+ multiple = _this$props13.multiple;
2057
2183
  var newValues;
2058
2184
 
2059
2185
  if (multiple) {
@@ -2091,7 +2217,7 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
2091
2217
  this.focus();
2092
2218
  }
2093
2219
 
2094
- (_this$props$onChange3 = (_this$props13 = this.props).onChange) === null || _this$props$onChange3 === void 0 ? void 0 : _this$props$onChange3.call(_this$props13, e, {
2220
+ (_this$props$onChange3 = (_this$props14 = this.props).onChange) === null || _this$props$onChange3 === void 0 ? void 0 : _this$props$onChange3.call(_this$props14, e, {
2095
2221
  values: newValues,
2096
2222
  name: name
2097
2223
  });
@@ -2113,10 +2239,10 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
2113
2239
  var hasChildren = _ref4.hasChildren,
2114
2240
  placement = _ref4.placement;
2115
2241
  var filterKeyword = this.state.filterKeyword;
2116
- var _this$props14 = this.props,
2117
- inputId = _this$props14.inputId,
2118
- inputRef = _this$props14.inputRef,
2119
- multiple = _this$props14.multiple; // only visually disable these as opposed to fully disabling to avoid losing keyboard focus - see SUI-2731
2242
+ var _this$props15 = this.props,
2243
+ inputId = _this$props15.inputId,
2244
+ inputRef = _this$props15.inputRef,
2245
+ multiple = _this$props15.multiple; // only visually disable these as opposed to fully disabling to avoid losing keyboard focus - see SUI-2731
2120
2246
 
2121
2247
  var selectControls = /*#__PURE__*/external_react_default.a.createElement(StyledToggleAllControls, {
2122
2248
  $placement: placement,
@@ -2168,133 +2294,26 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
2168
2294
  }, {
2169
2295
  key: "render",
2170
2296
  value: function render() {
2171
- var _this$getCurrentValue6,
2297
+ var _this$getCurrentValue7,
2172
2298
  _this2 = this;
2173
2299
 
2174
- var _this$props15 = this.props,
2175
- appearance = _this$props15.appearance,
2176
- children = _this$props15.children,
2177
- defaultPlacement = _this$props15.defaultPlacement,
2178
- describedBy = _this$props15.describedBy,
2179
- disabled = _this$props15.disabled,
2180
- elementRef = _this$props15.elementRef,
2181
- error = _this$props15.error,
2182
- inline = _this$props15.inline,
2183
- inputId = _this$props15.inputId,
2184
- labelledBy = _this$props15.labelledBy,
2185
- labelText = _this$props15.labelText,
2186
- multiple = _this$props15.multiple,
2187
- required = _this$props15.required,
2188
- placeholder = _this$props15.placeholder,
2189
- prefixLabel = _this$props15.prefixLabel,
2190
- repositionMode = _this$props15.repositionMode,
2191
- suffixLabel = _this$props15.suffixLabel;
2192
- var icon;
2193
- var label;
2300
+ var _this$props16 = this.props,
2301
+ children = _this$props16.children,
2302
+ defaultPlacement = _this$props16.defaultPlacement,
2303
+ inputId = _this$props16.inputId,
2304
+ multiple = _this$props16.multiple,
2305
+ repositionMode = _this$props16.repositionMode;
2194
2306
  var filterEnabled = this.hasFilter();
2195
- var isAnyValueSelected = false; // Generate buttonLabels
2196
-
2307
+ var currentValues = (_this$getCurrentValue7 = this.getCurrentValues()) !== null && _this$getCurrentValue7 !== void 0 ? _this$getCurrentValue7 : [];
2197
2308
  var childrenArray = external_react_["Children"].toArray(children);
2198
- var currentValues = (_this$getCurrentValue6 = this.getCurrentValues()) !== null && _this$getCurrentValue6 !== void 0 ? _this$getCurrentValue6 : [];
2199
- var valuesLabel = currentValues.reduce(function (acc, value, index, orig) {
2309
+ var isAnyValueSelected = currentValues.some(function (value) {
2200
2310
  var matchedItem = find_default()(childrenArray, function (item) {
2201
2311
  return isOption(item) && item.props.value === value;
2202
2312
  });
2203
-
2204
- if (matchedItem) {
2205
- acc.push(matchedItem.props.children || matchedItem.props.label);
2206
-
2207
- if (!matchedItem.props.disabled) {
2208
- isAnyValueSelected = true;
2209
- } // if not in multiple mode, add the icon
2210
-
2211
-
2212
- if (!multiple && currentValues.length === 1) {
2213
- icon = matchedItem.props.icon;
2214
- }
2215
- } else if (multiple) {
2216
- // only add values that don't match an option in "multiple" mode to preserve old behaviour
2217
- acc.push(value);
2218
- }
2219
-
2220
- if (index < orig.length - 1) {
2221
- acc.push(Object(i18n_["_"])(', '));
2222
- }
2223
-
2224
- return acc;
2225
- }, []);
2226
- label = valuesLabel; // only apply prefix / suffix if the label is not empty
2227
-
2228
- if (label.length > 0) {
2229
- label = this.wrapLabel({
2230
- prefixLabel: prefixLabel,
2231
- label: label,
2232
- suffixLabel: suffixLabel
2233
- });
2234
- } // single <Select> behaviour is to show the placeholder if all parts of the the label
2235
- // are empty strings so we replicate this behaviour here
2236
-
2237
-
2238
- if (label.length === 0 || !multiple && label.every(function (labelNode) {
2239
- return labelNode === '';
2240
- })) {
2241
- label = [placeholder];
2242
- }
2243
-
2244
- var ariaLabel = label; // If there's more than one item selected, read out the selected total
2245
- // rather than reading out each selected item
2246
-
2247
- if (label.length > 1) {
2248
- ariaLabel = this.wrapLabel({
2249
- prefixLabel: prefixLabel,
2250
- label: ["".concat(currentValues.length, " items selected")],
2251
- suffixLabel: suffixLabel
2252
- });
2253
- }
2254
-
2313
+ return matchedItem && !matchedItem.props.disabled;
2314
+ });
2255
2315
  var finalChildren = this.createChildren();
2256
-
2257
- var commonProps = _objectSpread({
2258
- 'aria-describedby': describedBy,
2259
- 'aria-label': "".concat(labelText ? "".concat(labelText, ", ") : '').concat(ariaLabel),
2260
- 'aria-labelledby': labelText ? undefined : labelledBy,
2261
- 'aria-multiselectable': multiple,
2262
- 'aria-required': required,
2263
- 'data-select-appearance': appearance,
2264
- 'data-test': multiple ? 'multiselect' : 'select',
2265
- disabled: disabled,
2266
- elementRef: elementRef,
2267
- error: error
2268
- }, omit_default()(this.props, keys_default()(SelectBase.propTypes)));
2269
-
2270
- if (multiple) {
2271
- commonProps['data-test-values'] = JSON.stringify(currentValues);
2272
- } else {
2273
- var _currentValues = _slicedToArray(currentValues, 1),
2274
- dataTestValue = _currentValues[0];
2275
-
2276
- commonProps['data-test-value'] = dataTestValue;
2277
- }
2278
-
2279
- var toggle = appearance === 'link' ? /*#__PURE__*/external_react_default.a.createElement(Link_default.a, _extends({}, commonProps, {
2280
- "data-select-appearance": "link"
2281
- }), !!icon && /*#__PURE__*/external_react_default.a.createElement(StyledLinkIcon, null, icon), label || placeholder, /*#__PURE__*/external_react_default.a.createElement(StyledLinkCaret, null, /*#__PURE__*/external_react_default.a.createElement(CaretDown["a" /* default */], {
2282
- enterpriseSize: 0.5,
2283
- prismaSize: "small"
2284
- }))) : /*#__PURE__*/external_react_default.a.createElement(StyledButton, _extends({}, commonProps, {
2285
- $multiple: multiple,
2286
- appearance: appearance,
2287
- label: label,
2288
- error: error,
2289
- icon: icon,
2290
- inline: inline,
2291
- isMenu: true,
2292
- role: "listbox" // @ts-expect-error - accept inconsistency with Button
2293
- ,
2294
- onClick: this.props.onClick
2295
- }, pick_default()(this.props, SelectBase.invalidLinkAppearanceProps)), !!currentValues.length && multiple && /*#__PURE__*/external_react_default.a.createElement(StyledCount, {
2296
- "data-role": "count"
2297
- }, "(", currentValues.length, ")"));
2316
+ var toggle = this.createToggle();
2298
2317
 
2299
2318
  var createMenu = function createMenu(_ref5) {
2300
2319
  var anchorWidth = _ref5.anchorWidth,
@@ -2333,6 +2352,7 @@ var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
2333
2352
  onRequestOpen: this.handleRequestOpen,
2334
2353
  onRequestClose: this.handleRequestClose,
2335
2354
  open: this.state.open,
2355
+ openWithArrowKeys: true,
2336
2356
  repositionMode: repositionMode,
2337
2357
  defaultPlacement: filterEnabled ? defaultPlacement : undefined,
2338
2358
  canCoverAnchor: Object(ssrWindow["a" /* getWindow */])().innerHeight < 500,
@@ -2487,8 +2507,8 @@ function Icon(_ref) {
2487
2507
 
2488
2508
 
2489
2509
  if (prismaSize === 'small') {
2490
- var SVG = Prisma16 || Prisma24;
2491
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(SVG, _extends({
2510
+ var SVGEnterprise = Prisma16 || Prisma24;
2511
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(SVGEnterprise, _extends({
2492
2512
  width: "16",
2493
2513
  height: "16"
2494
2514
  }, prismaProps));
@@ -2496,9 +2516,9 @@ function Icon(_ref) {
2496
2516
 
2497
2517
 
2498
2518
  if (density === 'compact') {
2499
- var _SVG = Prisma20 || Prisma24;
2519
+ var _SVGEnterprise = Prisma20 || Prisma24;
2500
2520
 
2501
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_SVG, _extends({
2521
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_SVGEnterprise, _extends({
2502
2522
  width: "20",
2503
2523
  height: "20"
2504
2524
  }, prismaProps));
package/SplitButton.js CHANGED
@@ -134,7 +134,7 @@ var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_)
134
134
  var external_prop_types_ = __webpack_require__(1);
135
135
  var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
136
136
 
137
- // EXTERNAL MODULE: external "@splunk/react-icons/ChevronDown"
137
+ // EXTERNAL MODULE: external "@splunk/react-icons/enterprise/ChevronDown"
138
138
  var ChevronDown_ = __webpack_require__(66);
139
139
  var ChevronDown_default = /*#__PURE__*/__webpack_require__.n(ChevronDown_);
140
140
 
@@ -498,7 +498,7 @@ module.exports = require("lodash/omit");
498
498
  /***/ 66:
499
499
  /***/ (function(module, exports) {
500
500
 
501
- module.exports = require("@splunk/react-icons/ChevronDown");
501
+ module.exports = require("@splunk/react-icons/enterprise/ChevronDown");
502
502
 
503
503
  /***/ }),
504
504
 
package/StepBar.js CHANGED
@@ -131,7 +131,7 @@ var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_pr
131
131
  var id_ = __webpack_require__(13);
132
132
 
133
133
  // EXTERNAL MODULE: external "@splunk/themes/useSplunkTheme"
134
- var useSplunkTheme_ = __webpack_require__(52);
134
+ var useSplunkTheme_ = __webpack_require__(54);
135
135
  var useSplunkTheme_default = /*#__PURE__*/__webpack_require__.n(useSplunkTheme_);
136
136
 
137
137
  // EXTERNAL MODULE: external "styled-components"
@@ -141,7 +141,7 @@ var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(exte
141
141
  // EXTERNAL MODULE: external "@splunk/themes"
142
142
  var themes_ = __webpack_require__(0);
143
143
 
144
- // EXTERNAL MODULE: external "@splunk/react-icons/Error"
144
+ // EXTERNAL MODULE: external "@splunk/react-icons/enterprise/Error"
145
145
  var Error_ = __webpack_require__(69);
146
146
  var Error_default = /*#__PURE__*/__webpack_require__.n(Error_);
147
147
 
@@ -178,7 +178,7 @@ function AlertFilled(props) {
178
178
  Prisma24: Prisma24
179
179
  }, props));
180
180
  }
181
- // EXTERNAL MODULE: external "@splunk/react-icons/Success"
181
+ // EXTERNAL MODULE: external "@splunk/react-icons/enterprise/Success"
182
182
  var Success_ = __webpack_require__(70);
183
183
  var Success_default = /*#__PURE__*/__webpack_require__.n(Success_);
184
184
 
@@ -504,7 +504,7 @@ module.exports = require("styled-components");
504
504
 
505
505
  /***/ }),
506
506
 
507
- /***/ 52:
507
+ /***/ 54:
508
508
  /***/ (function(module, exports) {
509
509
 
510
510
  module.exports = require("@splunk/themes/useSplunkTheme");
@@ -539,7 +539,7 @@ function SVG(props) {
539
539
  /***/ 69:
540
540
  /***/ (function(module, exports) {
541
541
 
542
- module.exports = require("@splunk/react-icons/Error");
542
+ module.exports = require("@splunk/react-icons/enterprise/Error");
543
543
 
544
544
  /***/ }),
545
545
 
@@ -633,8 +633,8 @@ function Icon(_ref) {
633
633
 
634
634
 
635
635
  if (prismaSize === 'small') {
636
- var SVG = Prisma16 || Prisma24;
637
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(SVG, _extends({
636
+ var SVGEnterprise = Prisma16 || Prisma24;
637
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(SVGEnterprise, _extends({
638
638
  width: "16",
639
639
  height: "16"
640
640
  }, prismaProps));
@@ -642,9 +642,9 @@ function Icon(_ref) {
642
642
 
643
643
 
644
644
  if (density === 'compact') {
645
- var _SVG = Prisma20 || Prisma24;
645
+ var _SVGEnterprise = Prisma20 || Prisma24;
646
646
 
647
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_SVG, _extends({
647
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_SVGEnterprise, _extends({
648
648
  width: "20",
649
649
  height: "20"
650
650
  }, prismaProps));
@@ -664,7 +664,7 @@ Icon.defaultProps = defaultProps;
664
664
  /***/ 70:
665
665
  /***/ (function(module, exports) {
666
666
 
667
- module.exports = require("@splunk/react-icons/Success");
667
+ module.exports = require("@splunk/react-icons/enterprise/Success");
668
668
 
669
669
  /***/ })
670
670
 
package/Switch.js CHANGED
@@ -141,7 +141,7 @@ var external_prop_types_ = __webpack_require__(1);
141
141
  var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
142
142
 
143
143
  // EXTERNAL MODULE: external "@splunk/react-ui/AnimationToggle"
144
- var AnimationToggle_ = __webpack_require__(47);
144
+ var AnimationToggle_ = __webpack_require__(48);
145
145
  var AnimationToggle_default = /*#__PURE__*/__webpack_require__.n(AnimationToggle_);
146
146
 
147
147
  // EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
@@ -151,7 +151,7 @@ var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReade
151
151
  // EXTERNAL MODULE: external "@splunk/ui-utils/id"
152
152
  var id_ = __webpack_require__(13);
153
153
 
154
- // EXTERNAL MODULE: external "@splunk/react-icons/Check"
154
+ // EXTERNAL MODULE: external "@splunk/react-icons/enterprise/Check"
155
155
  var Check_ = __webpack_require__(65);
156
156
  var Check_default = /*#__PURE__*/__webpack_require__.n(Check_);
157
157
 
@@ -745,7 +745,7 @@ module.exports = require("styled-components");
745
745
 
746
746
  /***/ }),
747
747
 
748
- /***/ 47:
748
+ /***/ 48:
749
749
  /***/ (function(module, exports) {
750
750
 
751
751
  module.exports = require("@splunk/react-ui/AnimationToggle");
@@ -755,7 +755,7 @@ module.exports = require("@splunk/react-ui/AnimationToggle");
755
755
  /***/ 65:
756
756
  /***/ (function(module, exports) {
757
757
 
758
- module.exports = require("@splunk/react-icons/Check");
758
+ module.exports = require("@splunk/react-icons/enterprise/Check");
759
759
 
760
760
  /***/ }),
761
761
 
package/TabBar.js CHANGED
@@ -594,7 +594,7 @@ _defineProperty(Tab_Tab, "contextType", TabBar_TabBarContext);
594
594
 
595
595
  /* harmony default export */ var TabBar_Tab = (Tab_Tab);
596
596
  // EXTERNAL MODULE: ./src/utils/navigateList.ts
597
- var navigateList = __webpack_require__(55);
597
+ var navigateList = __webpack_require__(57);
598
598
 
599
599
  // CONCATENATED MODULE: ./src/TabBar/TabBar.tsx
600
600
  function TabBar_extends() { TabBar_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 TabBar_extends.apply(this, arguments); }
@@ -769,7 +769,7 @@ module.exports = require("styled-components");
769
769
 
770
770
  /***/ }),
771
771
 
772
- /***/ 55:
772
+ /***/ 57:
773
773
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
774
774
 
775
775
  "use strict";