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