@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.
- package/Animation.js +2 -2
- package/Button.js +32 -30
- package/ButtonSimple.js +54 -50
- package/CHANGELOG.md +27 -2
- package/Calendar.js +12 -12
- package/Card.js +10 -10
- package/Chip.js +10 -10
- package/CloseButton.js +8 -8
- package/CollapsiblePanel.js +8 -8
- package/Color.js +14 -14
- package/ColumnLayout.js +2 -2
- package/ComboBox.js +4 -4
- package/ControlGroup.js +26 -16
- package/Date.js +10 -5
- package/Dropdown.js +56 -15
- package/File.js +33 -24
- package/FormRows.js +6 -6
- package/Heading.js +10 -46
- package/Image.js +13 -13
- package/Link.js +2 -2
- package/MIGRATION.md +21 -0
- package/Menu.js +20 -20
- package/Message.js +24 -24
- package/MessageBar.js +24 -24
- package/Modal.js +7 -7
- package/Multiselect.js +197 -177
- package/Number.js +5 -5
- package/Paginator.js +19 -19
- package/Popover.js +7 -7
- package/Progress.js +2 -2
- package/Scroll.js +5 -5
- package/Search.js +4 -4
- package/Select.js +187 -167
- package/SplitButton.js +2 -2
- package/StepBar.js +10 -10
- package/Switch.js +4 -4
- package/TabBar.js +2 -2
- package/TabLayout.js +3 -0
- package/Table.js +95 -46
- package/Text.js +19 -19
- package/TextArea.js +15 -15
- package/Tooltip.js +5 -5
- package/Typography.js +1 -1
- package/WaitSpinner.js +2 -2
- package/package.json +6 -7
- package/types/src/Button/Button.d.ts +5 -2
- package/types/src/Button/docs/examples/Basic.d.ts +2 -2
- package/types/src/ButtonSimple/ButtonSimple.d.ts +10 -11
- package/types/src/Date/Icon.d.ts +1 -1
- package/types/src/Dropdown/Dropdown.d.ts +12 -7
- package/types/src/File/Icon.d.ts +1 -1
- package/types/src/File/IconCloud.d.ts +1 -1
- package/types/src/File/PaperClip.d.ts +1 -1
- package/types/src/File/Retry.d.ts +1 -1
- package/types/src/File/Trash.d.ts +1 -1
- package/types/src/Multiselect/Compact.d.ts +4 -0
- package/types/src/Multiselect/Multiselect.d.ts +4 -1
- package/types/src/Number/IncrementIcon.d.ts +1 -1
- package/types/src/Select/Select.d.ts +4 -2
- package/types/src/Select/SelectBase.d.ts +13 -1
- package/types/src/TabLayout/Panel.d.ts +3 -0
- package/types/src/TabLayout/TabLayout.d.ts +2 -0
- package/types/src/Table/Body.d.ts +2 -0
- package/types/src/Table/Row.d.ts +11 -3
- package/types/src/Table/Table.d.ts +5 -3
- package/types/src/Text/IconOutlinedHide.d.ts +1 -1
- package/types/src/Text/IconOutlinedView.d.ts +1 -1
- package/types/src/Tooltip/InfoIcon.d.ts +1 -1
- 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
|
|
879
|
-
/* harmony import */ var
|
|
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:
|
|
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
|
-
/***/
|
|
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
|
-
/***/
|
|
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
|
|
964
|
-
/* harmony import */ var
|
|
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:
|
|
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
|
-
/***/
|
|
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/
|
|
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("
|
|
1011
|
+
module.exports = require("@splunk/react-icons/enterprise/Search");
|
|
1012
1012
|
|
|
1013
1013
|
/***/ }),
|
|
1014
1014
|
|
|
1015
|
-
/***/
|
|
1015
|
+
/***/ 58:
|
|
1016
1016
|
/***/ (function(module, exports) {
|
|
1017
1017
|
|
|
1018
|
-
module.exports = require("lodash/
|
|
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__(
|
|
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__(
|
|
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__(
|
|
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__(
|
|
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$
|
|
1763
|
-
allowKeyMatching = _this$
|
|
1764
|
-
allowNewValues = _this$
|
|
1765
|
-
filter = _this$
|
|
1766
|
-
multiple = _this$
|
|
1767
|
-
showSelectedValuesFirst = _this$
|
|
1768
|
-
isLoadingOptions = _this$
|
|
1769
|
-
onScrollBottom = _this$
|
|
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$
|
|
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$
|
|
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$
|
|
2176
|
+
var _this$getCurrentValue6, _this$props$onChange3, _this$props14;
|
|
2051
2177
|
|
|
2052
|
-
var values = (_this$
|
|
2178
|
+
var values = (_this$getCurrentValue6 = this.getCurrentValues()) !== null && _this$getCurrentValue6 !== void 0 ? _this$getCurrentValue6 : [];
|
|
2053
2179
|
var currentIndex = values.indexOf(value);
|
|
2054
|
-
var _this$
|
|
2055
|
-
name = _this$
|
|
2056
|
-
multiple = _this$
|
|
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$
|
|
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$
|
|
2117
|
-
inputId = _this$
|
|
2118
|
-
inputRef = _this$
|
|
2119
|
-
multiple = _this$
|
|
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$
|
|
2297
|
+
var _this$getCurrentValue7,
|
|
2172
2298
|
_this2 = this;
|
|
2173
2299
|
|
|
2174
|
-
var _this$
|
|
2175
|
-
|
|
2176
|
-
|
|
2177
|
-
|
|
2178
|
-
|
|
2179
|
-
|
|
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
|
|
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
|
|
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
|
-
|
|
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
|
|
2491
|
-
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(
|
|
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
|
|
2519
|
+
var _SVGEnterprise = Prisma20 || Prisma24;
|
|
2500
2520
|
|
|
2501
|
-
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(
|
|
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__(
|
|
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
|
-
/***/
|
|
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
|
|
637
|
-
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(
|
|
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
|
|
645
|
+
var _SVGEnterprise = Prisma20 || Prisma24;
|
|
646
646
|
|
|
647
|
-
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(
|
|
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__(
|
|
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
|
-
/***/
|
|
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__(
|
|
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
|
-
/***/
|
|
772
|
+
/***/ 57:
|
|
773
773
|
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
774
774
|
|
|
775
775
|
"use strict";
|