@splunk/react-ui 5.0.0 → 5.1.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 +59 -59
- package/Avatar.js +20 -20
- package/Breadcrumbs.js +46 -46
- package/Button.js +24 -24
- package/CHANGELOG.md +21 -2
- package/Calendar.js +69 -69
- package/Card.js +68 -68
- package/Chip.js +16 -16
- package/Clickable.js +29 -29
- package/Code.js +654 -519
- package/CollapsiblePanel.js +112 -112
- package/Color.js +107 -107
- package/ColumnLayout.js +35 -35
- package/ComboBox.js +190 -206
- package/ControlGroup.js +128 -120
- package/Date.js +148 -146
- package/DefinitionList.js +26 -26
- package/DualListbox.js +701 -717
- package/File.js +403 -403
- package/FormRows.js +66 -63
- package/Image.js +15 -15
- package/JSONTree.js +458 -357
- package/Layer.js +60 -72
- package/Markdown.js +66 -66
- package/Menu.js +44 -44
- package/Modal.js +49 -49
- package/ModalLayer.js +6 -6
- package/Monogram.js +16 -16
- package/Multiselect.js +622 -624
- package/Number.js +100 -100
- package/Paginator.js +7 -7
- package/Popover.js +453 -407
- package/Progress.js +12 -12
- package/Prose.js +6 -6
- package/RadioBar.js +180 -166
- package/RadioList.js +80 -79
- package/ResultsMenu.js +15 -15
- package/Scroll.js +50 -50
- package/Search.js +148 -164
- package/Select.js +668 -670
- package/Slider.js +30 -30
- package/SlidingPanels.js +24 -24
- package/SplitButton.js +50 -50
- package/StepBar.js +100 -100
- package/Switch.js +45 -45
- package/TabBar.js +196 -196
- package/TabLayout.js +16 -16
- package/Table.js +1207 -1193
- package/Text.js +65 -65
- package/TextArea.js +108 -93
- package/Tooltip.js +203 -197
- package/Tree.js +464 -366
- package/package.json +6 -6
- package/stubs-dependencies.d.ts +0 -70
- package/stubs-splunkui.d.ts +4 -0
- package/types/src/Code/Code.d.ts +17 -1
- package/types/src/Code/LineHighlights.d.ts +11 -0
- package/types/src/Code/LineNumbers.d.ts +6 -0
- package/types/src/Code/docs/examples/LineHighlights.d.ts +3 -0
- package/types/src/Code/docs/examples/LineNumbers.d.ts +3 -0
- package/types/src/Code/docs/examples/LineNumbersCustomStart.d.ts +3 -0
- package/types/src/Date/Date.d.ts +6 -1
- package/types/src/DefinitionList/DefinitionList.d.ts +6 -6
- package/types/src/FormRows/FormRows.d.ts +1 -1
- package/types/src/JSONTree/JSONTreeItem.d.ts +5 -2
- package/types/src/Markdown/Markdown.d.ts +1 -1
- package/types/src/Markdown/renderers/MarkdownBlockquote.d.ts +1 -1
- package/types/src/Markdown/renderers/MarkdownCodeBlock.d.ts +1 -1
- package/types/src/Markdown/renderers/index.d.ts +1 -1
- package/types/src/Popover/Popover.d.ts +1 -1
- package/types/src/RadioBar/Option.d.ts +1 -1
- package/types/src/RadioBar/RadioBar.d.ts +13 -6
- package/types/src/RadioBar/RadioBarContext.d.ts +4 -2
- package/types/src/RadioList/RadioList.d.ts +2 -1
- package/types/src/ScreenReaderContent/docs/examples/SkipLink.d.ts +3 -0
- package/types/src/Scroll/Inner.d.ts +1 -1
- package/types/src/Select/Option.d.ts +1 -1
- package/types/src/Select/Select.d.ts +1 -1
- package/types/src/Slider/docs/examples/Controlled.d.ts +1 -1
- package/types/src/TabLayout/Panel.d.ts +0 -1
- package/types/src/Table/Head.d.ts +1 -0
- package/types/src/Table/HeadCell.d.ts +2 -3
- package/types/src/Table/HeadDropdownCell.d.ts +2 -2
- package/types/src/Table/HeadInner.d.ts +4 -4
- package/types/src/Table/KeyboardSensor.d.ts +1 -1
- package/types/src/Table/RowDragCell.d.ts +1 -1
- package/types/src/Tooltip/Tooltip.d.ts +10 -5
- package/types/src/Tree/Item.d.ts +63 -0
- package/types/src/Tree/Tree.d.ts +13 -6
- package/types/src/Tree/TreeContext.d.ts +1 -1
- package/types/src/Tree/index.d.ts +1 -1
- package/types/src/useControlled/useControlled.d.ts +3 -1
- package/useControlled.js +29 -13
- package/types/src/Tree/TreeItem.d.ts +0 -44
package/ComboBox.js
CHANGED
|
@@ -61,28 +61,28 @@
|
|
|
61
61
|
e.r(n);
|
|
62
62
|
// EXPORTS
|
|
63
63
|
e.d(n, {
|
|
64
|
-
Divider: () => /* reexport */
|
|
65
|
-
Heading: () => /* reexport */
|
|
66
|
-
Option: () => /* reexport */
|
|
64
|
+
Divider: () => /* reexport */ f.Divider,
|
|
65
|
+
Heading: () => /* reexport */ f.Heading,
|
|
66
|
+
Option: () => /* reexport */ I,
|
|
67
67
|
default: () => /* reexport */ re
|
|
68
68
|
});
|
|
69
69
|
// CONCATENATED MODULE: external "react"
|
|
70
70
|
const r = require("react");
|
|
71
71
|
var t = e.n(r);
|
|
72
|
-
// CONCATENATED MODULE: external "prop-types"
|
|
73
|
-
const o = require("prop-types");
|
|
74
|
-
var a = e.n(o);
|
|
75
72
|
// CONCATENATED MODULE: external "lodash/extend"
|
|
76
|
-
const
|
|
77
|
-
var
|
|
73
|
+
const o = require("lodash/extend");
|
|
74
|
+
var a = e.n(o);
|
|
78
75
|
// CONCATENATED MODULE: external "lodash/memoize"
|
|
79
|
-
const
|
|
80
|
-
var
|
|
76
|
+
const i = require("lodash/memoize");
|
|
77
|
+
var l = e.n(i);
|
|
81
78
|
// CONCATENATED MODULE: external "lodash/some"
|
|
82
|
-
const
|
|
83
|
-
var
|
|
79
|
+
const u = require("lodash/some");
|
|
80
|
+
var c = e.n(u);
|
|
81
|
+
// CONCATENATED MODULE: external "prop-types"
|
|
82
|
+
const s = require("prop-types");
|
|
83
|
+
var d = e.n(s);
|
|
84
84
|
// CONCATENATED MODULE: external "@splunk/react-ui/Menu"
|
|
85
|
-
const
|
|
85
|
+
const f = require("@splunk/react-ui/Menu");
|
|
86
86
|
// CONCATENATED MODULE: external "@splunk/react-ui/Popover"
|
|
87
87
|
const p = require("@splunk/react-ui/Popover");
|
|
88
88
|
var v = e.n(p);
|
|
@@ -97,15 +97,17 @@
|
|
|
97
97
|
var O = e.n(h);
|
|
98
98
|
// CONCATENATED MODULE: external "@splunk/react-ui/usePrevious"
|
|
99
99
|
const S = require("@splunk/react-ui/usePrevious");
|
|
100
|
-
var
|
|
100
|
+
var k = e.n(S);
|
|
101
101
|
// CONCATENATED MODULE: external "@splunk/ui-utils/filter"
|
|
102
|
-
const
|
|
102
|
+
const C = require("@splunk/ui-utils/filter");
|
|
103
103
|
// CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
|
|
104
|
-
const
|
|
104
|
+
const w = require("@splunk/ui-utils/i18n");
|
|
105
105
|
// CONCATENATED MODULE: external "@splunk/ui-utils/id"
|
|
106
|
-
const
|
|
106
|
+
const P = require("@splunk/ui-utils/id");
|
|
107
107
|
// CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
|
|
108
108
|
const j = require("@splunk/ui-utils/keyboard");
|
|
109
|
+
// CONCATENATED MODULE: external "@splunk/ui-utils/scroll"
|
|
110
|
+
const R = require("@splunk/ui-utils/scroll");
|
|
109
111
|
// CONCATENATED MODULE: ./src/utils/updateReactRef.ts
|
|
110
112
|
/**
|
|
111
113
|
* Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
|
|
@@ -113,7 +115,7 @@
|
|
|
113
115
|
* @param ref - The React callback or object ref. Can be `null` or `undefined`.
|
|
114
116
|
* @param current - The new value of the ref.
|
|
115
117
|
*/
|
|
116
|
-
function
|
|
118
|
+
function M(e, n) {
|
|
117
119
|
if (e) {
|
|
118
120
|
if (typeof e === "function") {
|
|
119
121
|
e(n);
|
|
@@ -126,8 +128,8 @@
|
|
|
126
128
|
}
|
|
127
129
|
}
|
|
128
130
|
// CONCATENATED MODULE: ./src/ComboBox/Option.tsx
|
|
129
|
-
function
|
|
130
|
-
return
|
|
131
|
+
function q() {
|
|
132
|
+
return q = Object.assign ? Object.assign.bind() : function(e) {
|
|
131
133
|
for (var n = 1; n < arguments.length; n++) {
|
|
132
134
|
var r = arguments[n];
|
|
133
135
|
for (var t in r) {
|
|
@@ -135,11 +137,11 @@
|
|
|
135
137
|
}
|
|
136
138
|
}
|
|
137
139
|
return e;
|
|
138
|
-
},
|
|
140
|
+
}, q.apply(null, arguments);
|
|
139
141
|
}
|
|
140
142
|
function E(e, n) {
|
|
141
143
|
if (null == e) return {};
|
|
142
|
-
var r, t, o =
|
|
144
|
+
var r, t, o = B(e, n);
|
|
143
145
|
if (Object.getOwnPropertySymbols) {
|
|
144
146
|
var a = Object.getOwnPropertySymbols(e);
|
|
145
147
|
for (t = 0; t < a.length; t++) {
|
|
@@ -148,7 +150,7 @@
|
|
|
148
150
|
}
|
|
149
151
|
return o;
|
|
150
152
|
}
|
|
151
|
-
function
|
|
153
|
+
function B(e, n) {
|
|
152
154
|
if (null == e) return {};
|
|
153
155
|
var r = {};
|
|
154
156
|
for (var t in e) {
|
|
@@ -159,28 +161,28 @@
|
|
|
159
161
|
}
|
|
160
162
|
return r;
|
|
161
163
|
}
|
|
162
|
-
var
|
|
164
|
+
var D = {
|
|
163
165
|
/** @private */
|
|
164
|
-
active:
|
|
165
|
-
description:
|
|
166
|
-
descriptionPosition:
|
|
167
|
-
disabled:
|
|
168
|
-
elementRef:
|
|
169
|
-
icon:
|
|
170
|
-
label:
|
|
171
|
-
matchRanges:
|
|
172
|
-
start:
|
|
173
|
-
end:
|
|
166
|
+
active: d().bool,
|
|
167
|
+
description: d().string,
|
|
168
|
+
descriptionPosition: d().oneOf([ "right", "bottom" ]),
|
|
169
|
+
disabled: d().bool,
|
|
170
|
+
elementRef: d().oneOfType([ d().func, d().object ]),
|
|
171
|
+
icon: d().node,
|
|
172
|
+
label: d().string,
|
|
173
|
+
matchRanges: d().arrayOf(d().shape({
|
|
174
|
+
start: d().number.isRequired,
|
|
175
|
+
end: d().number.isRequired
|
|
174
176
|
})),
|
|
175
177
|
/** @private */
|
|
176
|
-
onClick:
|
|
177
|
-
truncate:
|
|
178
|
-
value:
|
|
178
|
+
onClick: d().func,
|
|
179
|
+
truncate: d().bool,
|
|
180
|
+
value: d().string.isRequired
|
|
179
181
|
};
|
|
180
182
|
/**
|
|
181
183
|
* An option within a `ComboBox`.
|
|
182
|
-
*/ function
|
|
183
|
-
var n = e.active, o = e.description, a = e.descriptionPosition, i = a === void 0 ? "bottom" : a, l = e.disabled, u = e.elementRef, c = e.icon, s = e.label,
|
|
184
|
+
*/ function A(e) {
|
|
185
|
+
var n = e.active, o = e.description, a = e.descriptionPosition, i = a === void 0 ? "bottom" : a, l = e.disabled, u = e.elementRef, c = e.icon, s = e.label, d = e.matchRanges, p = e.onClick, v = e.truncate, b = e.value, m = E(e, [ "active", "description", "descriptionPosition", "disabled", "elementRef", "icon", "label", "matchRanges", "onClick", "truncate", "value" ]);
|
|
184
186
|
// @docs-props-type OptionPropsBase
|
|
185
187
|
var y = (0, r.useCallback)((function(e) {
|
|
186
188
|
if (!l) {
|
|
@@ -190,11 +192,11 @@
|
|
|
190
192
|
}
|
|
191
193
|
}), [ l, p, b ]);
|
|
192
194
|
var g = (0, r.useCallback)((function(e) {
|
|
193
|
-
|
|
195
|
+
M(u, e);
|
|
194
196
|
}), [ u ]);
|
|
195
197
|
var h = s === undefined ? b : s;
|
|
196
198
|
|
|
197
|
-
return t().createElement(
|
|
199
|
+
return t().createElement(f.Item, q({
|
|
198
200
|
active: n,
|
|
199
201
|
"data-test": "option",
|
|
200
202
|
"data-test-value": b,
|
|
@@ -203,34 +205,16 @@
|
|
|
203
205
|
disabled: l ? "disabled" : undefined,
|
|
204
206
|
elementRef: g,
|
|
205
207
|
startAdornment: c,
|
|
206
|
-
matchRanges:
|
|
208
|
+
matchRanges: d,
|
|
207
209
|
onClick: y,
|
|
208
210
|
truncate: v
|
|
209
211
|
}, m, {
|
|
210
212
|
role: "option"
|
|
211
213
|
}), h);
|
|
212
214
|
}
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
/* harmony default export */ const
|
|
216
|
-
// CONCATENATED MODULE: ./src/utils/scrollIntoViewIfNeeded.ts
|
|
217
|
-
// A utility that attempts to move an element into view by scrolling it's derived parent.
|
|
218
|
-
var A = function e(n) {
|
|
219
|
-
if (!n) {
|
|
220
|
-
return;
|
|
221
|
-
}
|
|
222
|
-
var r = n.offsetParent;
|
|
223
|
-
if (!r) {
|
|
224
|
-
return;
|
|
225
|
-
}
|
|
226
|
-
// Below the bottom of the container.
|
|
227
|
-
if (r.scrollTop + r.clientHeight < n.offsetTop + n.clientHeight) {
|
|
228
|
-
r.scrollTop = n.offsetTop + n.clientHeight - r.clientHeight;
|
|
229
|
-
// Above the top of the container.
|
|
230
|
-
} else if (r.scrollTop > n.offsetTop) {
|
|
231
|
-
r.scrollTop = n.offsetTop;
|
|
232
|
-
}
|
|
233
|
-
};
|
|
215
|
+
A.propTypes = D;
|
|
216
|
+
A.as = "Item";
|
|
217
|
+
/* harmony default export */ const I = A;
|
|
234
218
|
// CONCATENATED MODULE: ./src/ComboBox/ComboBox.tsx
|
|
235
219
|
function x(e) {
|
|
236
220
|
"@babel/helpers - typeof";
|
|
@@ -240,8 +224,8 @@
|
|
|
240
224
|
return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
|
|
241
225
|
}, x(e);
|
|
242
226
|
}
|
|
243
|
-
function
|
|
244
|
-
return
|
|
227
|
+
function T() {
|
|
228
|
+
return T = Object.assign ? Object.assign.bind() : function(e) {
|
|
245
229
|
for (var n = 1; n < arguments.length; n++) {
|
|
246
230
|
var r = arguments[n];
|
|
247
231
|
for (var t in r) {
|
|
@@ -249,9 +233,9 @@
|
|
|
249
233
|
}
|
|
250
234
|
}
|
|
251
235
|
return e;
|
|
252
|
-
},
|
|
236
|
+
}, T.apply(null, arguments);
|
|
253
237
|
}
|
|
254
|
-
function
|
|
238
|
+
function L(e, n) {
|
|
255
239
|
var r = Object.keys(e);
|
|
256
240
|
if (Object.getOwnPropertySymbols) {
|
|
257
241
|
var t = Object.getOwnPropertySymbols(e);
|
|
@@ -261,30 +245,30 @@
|
|
|
261
245
|
}
|
|
262
246
|
return r;
|
|
263
247
|
}
|
|
264
|
-
function
|
|
248
|
+
function H(e) {
|
|
265
249
|
for (var n = 1; n < arguments.length; n++) {
|
|
266
250
|
var r = null != arguments[n] ? arguments[n] : {};
|
|
267
|
-
n % 2 ?
|
|
268
|
-
|
|
269
|
-
})) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) :
|
|
251
|
+
n % 2 ? L(Object(r), !0).forEach((function(n) {
|
|
252
|
+
V(e, n, r[n]);
|
|
253
|
+
})) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : L(Object(r)).forEach((function(n) {
|
|
270
254
|
Object.defineProperty(e, n, Object.getOwnPropertyDescriptor(r, n));
|
|
271
255
|
}));
|
|
272
256
|
}
|
|
273
257
|
return e;
|
|
274
258
|
}
|
|
275
|
-
function
|
|
276
|
-
return (n =
|
|
259
|
+
function V(e, n, r) {
|
|
260
|
+
return (n = z(n)) in e ? Object.defineProperty(e, n, {
|
|
277
261
|
value: r,
|
|
278
262
|
enumerable: !0,
|
|
279
263
|
configurable: !0,
|
|
280
264
|
writable: !0
|
|
281
265
|
}) : e[n] = r, e;
|
|
282
266
|
}
|
|
283
|
-
function
|
|
284
|
-
var n =
|
|
267
|
+
function z(e) {
|
|
268
|
+
var n = F(e, "string");
|
|
285
269
|
return "symbol" == x(n) ? n : n + "";
|
|
286
270
|
}
|
|
287
|
-
function
|
|
271
|
+
function F(e, n) {
|
|
288
272
|
if ("object" != x(e) || !e) return e;
|
|
289
273
|
var r = e[Symbol.toPrimitive];
|
|
290
274
|
if (void 0 !== r) {
|
|
@@ -295,19 +279,19 @@
|
|
|
295
279
|
return ("string" === n ? String : Number)(e);
|
|
296
280
|
}
|
|
297
281
|
function K(e, n) {
|
|
298
|
-
return X(e) || U(e, n) ||
|
|
282
|
+
return X(e) || U(e, n) || N(e, n) || _();
|
|
299
283
|
}
|
|
300
284
|
function _() {
|
|
301
285
|
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
302
286
|
}
|
|
303
|
-
function
|
|
287
|
+
function N(e, n) {
|
|
304
288
|
if (e) {
|
|
305
|
-
if ("string" == typeof e) return
|
|
289
|
+
if ("string" == typeof e) return W(e, n);
|
|
306
290
|
var r = {}.toString.call(e).slice(8, -1);
|
|
307
|
-
return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ?
|
|
291
|
+
return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? W(e, n) : void 0;
|
|
308
292
|
}
|
|
309
293
|
}
|
|
310
|
-
function
|
|
294
|
+
function W(e, n) {
|
|
311
295
|
(null == n || n > e.length) && (n = e.length);
|
|
312
296
|
for (var r = 0, t = Array(n); r < n; r++) {
|
|
313
297
|
t[r] = e[r];
|
|
@@ -365,96 +349,96 @@
|
|
|
365
349
|
/** @public */
|
|
366
350
|
/** @public */
|
|
367
351
|
/** @public */ var G = {
|
|
368
|
-
animateLoading:
|
|
369
|
-
append:
|
|
370
|
-
children:
|
|
371
|
-
controlledFilter:
|
|
372
|
-
defaultPlacement:
|
|
373
|
-
defaultValue:
|
|
374
|
-
describedBy:
|
|
375
|
-
disabled:
|
|
376
|
-
elementRef:
|
|
377
|
-
error:
|
|
378
|
-
footerMessage:
|
|
379
|
-
inline:
|
|
380
|
-
inputId:
|
|
381
|
-
inputRef:
|
|
382
|
-
isLoadingOptions:
|
|
383
|
-
labelledBy:
|
|
384
|
-
loadingMessage:
|
|
385
|
-
menuStyle:
|
|
386
|
-
name:
|
|
387
|
-
noOptionsMessage:
|
|
388
|
-
onBlur:
|
|
389
|
-
onChange:
|
|
390
|
-
onClose:
|
|
391
|
-
onFocus:
|
|
392
|
-
onKeyDown:
|
|
393
|
-
onOpen:
|
|
394
|
-
onScroll:
|
|
395
|
-
onScrollBottom:
|
|
396
|
-
onSelect:
|
|
397
|
-
placeholder:
|
|
398
|
-
prepend:
|
|
399
|
-
value:
|
|
352
|
+
animateLoading: d().bool,
|
|
353
|
+
append: d().bool,
|
|
354
|
+
children: d().node,
|
|
355
|
+
controlledFilter: d().bool,
|
|
356
|
+
defaultPlacement: d().oneOf([ "above", "below", "vertical" ]),
|
|
357
|
+
defaultValue: d().string,
|
|
358
|
+
describedBy: d().string,
|
|
359
|
+
disabled: d().bool,
|
|
360
|
+
elementRef: d().oneOfType([ d().func, d().object ]),
|
|
361
|
+
error: d().bool,
|
|
362
|
+
footerMessage: d().node,
|
|
363
|
+
inline: d().bool,
|
|
364
|
+
inputId: d().string,
|
|
365
|
+
inputRef: d().oneOfType([ d().func, d().object ]),
|
|
366
|
+
isLoadingOptions: d().bool,
|
|
367
|
+
labelledBy: d().string,
|
|
368
|
+
loadingMessage: d().node,
|
|
369
|
+
menuStyle: d().object,
|
|
370
|
+
name: d().string,
|
|
371
|
+
noOptionsMessage: d().node,
|
|
372
|
+
onBlur: d().func,
|
|
373
|
+
onChange: d().func,
|
|
374
|
+
onClose: d().func,
|
|
375
|
+
onFocus: d().func,
|
|
376
|
+
onKeyDown: d().func,
|
|
377
|
+
onOpen: d().func,
|
|
378
|
+
onScroll: d().func,
|
|
379
|
+
onScrollBottom: d().func,
|
|
380
|
+
onSelect: d().func,
|
|
381
|
+
placeholder: d().string,
|
|
382
|
+
prepend: d().bool,
|
|
383
|
+
value: d().string,
|
|
400
384
|
/** @private. */
|
|
401
|
-
virtualization:
|
|
385
|
+
virtualization: d().number
|
|
402
386
|
};
|
|
403
387
|
function J(e, n) {
|
|
404
388
|
var r = n.clientX, t = n.clientY;
|
|
405
389
|
var o = e.getBoundingClientRect(), a = o.top, i = o.left, l = o.bottom, u = o.right;
|
|
406
390
|
return r > i && r < u && t > a && t < l;
|
|
407
391
|
}
|
|
408
|
-
var Q =
|
|
392
|
+
var Q = l()((function(e) {
|
|
409
393
|
var n = e.anchorWidth, r = e.maxHeight, t = e.menuStyle;
|
|
410
|
-
return
|
|
394
|
+
return a()({
|
|
411
395
|
maxHeight: r,
|
|
412
396
|
overflow: "auto",
|
|
413
397
|
width: Math.max(n !== null && n !== void 0 ? n : 0, 200)
|
|
414
398
|
}, t);
|
|
415
399
|
}));
|
|
416
400
|
var Z = {};
|
|
417
|
-
var ee = (0,
|
|
401
|
+
var ee = (0, w._)("Select...");
|
|
418
402
|
/**
|
|
419
403
|
* `ComboBox` allows the user to select a predefined string or enter a new value. Unlike `Select`
|
|
420
404
|
* and `Multiselect`, `Option` value must always be a string.
|
|
421
405
|
*/ function ne(e) {
|
|
422
|
-
var n = e.animateLoading, o = e.append, a = e.children, i = e.controlledFilter, l = e.defaultPlacement, u = l === void 0 ? "vertical" : l,
|
|
406
|
+
var n = e.animateLoading, o = e.append, a = e.children, i = e.controlledFilter, l = e.defaultPlacement, u = l === void 0 ? "vertical" : l, s = e.defaultValue, d = e.describedBy, f = e.disabled, p = e.elementRef, y = e.error, h = e.footerMessage, S = e.inline, q = e.inputId, E = e.inputRef, B = e.isLoadingOptions, D = e.labelledBy, A = e.loadingMessage, x = e.menuStyle, L = x === void 0 ? Z : x, V = e.name, z = e.noOptionsMessage, F = e.onBlur, _ = e.onChange, N = e.onClose, W = e.onFocus, U = e.onKeyDown, X = e.onOpen, $ = e.onScroll, G = e.onScrollBottom, ne = e.onSelect, re = e.placeholder, te = re === void 0 ? ee : re, oe = e.prepend, ae = e.value, ie = e.virtualization, le = Y(e, [ "animateLoading", "append", "children", "controlledFilter", "defaultPlacement", "defaultValue", "describedBy", "disabled", "elementRef", "error", "footerMessage", "inline", "inputId", "inputRef", "isLoadingOptions", "labelledBy", "loadingMessage", "menuStyle", "name", "noOptionsMessage", "onBlur", "onChange", "onClose", "onFocus", "onKeyDown", "onOpen", "onScroll", "onScrollBottom", "onSelect", "placeholder", "prepend", "value", "virtualization" ]);
|
|
423
407
|
// @docs-props-type ComboBoxPropsBase
|
|
424
408
|
var ue = O()({
|
|
425
409
|
componentName: "ComboBox",
|
|
426
410
|
/* eslint-disable-next-line prefer-rest-params */
|
|
427
411
|
componentProps: arguments[0]
|
|
428
412
|
});
|
|
429
|
-
var ce = (0, r.useState)(0), se = K(ce, 2),
|
|
413
|
+
var ce = (0, r.useState)(0), se = K(ce, 2), de = se[0], fe = se[1];
|
|
430
414
|
var pe = (0, r.useState)(null), ve = K(pe, 2), be = ve[0], me = ve[1];
|
|
431
415
|
var ye = (0, r.useState)(false), ge = K(ye, 2), he = ge[0], Oe = ge[1];
|
|
432
|
-
var Se = (0, r.useState)(null),
|
|
433
|
-
var
|
|
434
|
-
var
|
|
435
|
-
var
|
|
436
|
-
var
|
|
416
|
+
var Se = (0, r.useState)(null), ke = K(Se, 2), Ce = ke[0], we = ke[1];
|
|
417
|
+
var Pe = (0, r.useState)(), je = K(Pe, 2), Re = je[0], Me = je[1];
|
|
418
|
+
var qe = (0, r.useState)(s || ""), Ee = K(qe, 2), Be = Ee[0], De = Ee[1];
|
|
419
|
+
var Ae = k()(de);
|
|
420
|
+
var Ie = (0, r.useRef)();
|
|
437
421
|
var xe = (0, r.useRef)(0);
|
|
438
|
-
var
|
|
439
|
-
var
|
|
440
|
-
var
|
|
441
|
-
var
|
|
422
|
+
var Te = (0, r.useRef)(Ae);
|
|
423
|
+
var Le = (0, P.createDOMID)("popover");
|
|
424
|
+
var He = (0, P.createDOMID)("active-item");
|
|
425
|
+
var Ve = (0, r.useCallback)((function() {
|
|
442
426
|
Oe(false);
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
}), [
|
|
446
|
-
var
|
|
427
|
+
Te.current = null;
|
|
428
|
+
N === null || N === void 0 ? void 0 : N();
|
|
429
|
+
}), [ N ]);
|
|
430
|
+
var ze = (0, r.useCallback)((function() {
|
|
447
431
|
if (!he) {
|
|
448
432
|
Oe(true);
|
|
449
|
-
|
|
433
|
+
fe(0);
|
|
450
434
|
X === null || X === void 0 ? void 0 : X();
|
|
451
435
|
}
|
|
452
436
|
}), [ he, X ]);
|
|
453
|
-
var
|
|
454
|
-
return ue ? ae :
|
|
455
|
-
}), [ ue, ae,
|
|
437
|
+
var Fe = (0, r.useCallback)((function() {
|
|
438
|
+
return ue ? ae : Be;
|
|
439
|
+
}), [ ue, ae, Be ]);
|
|
456
440
|
var Ke = (0, r.useCallback)((function() {
|
|
457
|
-
var e =
|
|
441
|
+
var e = Fe();
|
|
458
442
|
var n = r.Children.toArray(a).filter(r.isValidElement);
|
|
459
443
|
var t = !Re && n.find((function(n) {
|
|
460
444
|
return n.props.label !== undefined && n.props.value === e;
|
|
@@ -463,67 +447,67 @@
|
|
|
463
447
|
return t === null || t === void 0 ? void 0 : t.props.label;
|
|
464
448
|
}
|
|
465
449
|
return e;
|
|
466
|
-
}), [ a,
|
|
450
|
+
}), [ a, Fe, Re ]);
|
|
467
451
|
var _e = (0, r.useCallback)((function(e) {
|
|
468
|
-
|
|
469
|
-
|
|
452
|
+
we(e);
|
|
453
|
+
M(E, e);
|
|
470
454
|
}), [ E ]);
|
|
471
|
-
var
|
|
455
|
+
var Ne = (0, r.useCallback)((function(e) {
|
|
472
456
|
me(e);
|
|
473
|
-
|
|
457
|
+
M(p, e);
|
|
474
458
|
}), [ p ]);
|
|
475
|
-
var
|
|
476
|
-
if (
|
|
477
|
-
|
|
459
|
+
var We = (0, r.useCallback)((function(e) {
|
|
460
|
+
if (Te.current !== de) {
|
|
461
|
+
(0, R.scrollIntoViewIfNeeded)(e);
|
|
478
462
|
}
|
|
479
|
-
}), [
|
|
463
|
+
}), [ de, Te ]);
|
|
480
464
|
var Ue = (0, r.useCallback)((function(e, n) {
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
}), [
|
|
465
|
+
ze();
|
|
466
|
+
W === null || W === void 0 ? void 0 : W(e, n);
|
|
467
|
+
}), [ W, ze ]);
|
|
484
468
|
var Xe = (0, r.useCallback)((function(e, n) {
|
|
485
469
|
var r = n.value, t = n.selectedOption;
|
|
486
470
|
e.stopPropagation();
|
|
487
471
|
var o = t ? undefined : r;
|
|
488
|
-
|
|
472
|
+
fe(0);
|
|
489
473
|
Me(o);
|
|
490
474
|
if (!ue) {
|
|
491
|
-
|
|
475
|
+
De(r);
|
|
492
476
|
}
|
|
493
477
|
_ === null || _ === void 0 ? void 0 : _(e, {
|
|
494
478
|
value: r,
|
|
495
|
-
name:
|
|
479
|
+
name: V
|
|
496
480
|
});
|
|
497
|
-
}), [ ue,
|
|
481
|
+
}), [ ue, V, _ ]);
|
|
498
482
|
var Ye = (0, r.useCallback)((function(e, n) {
|
|
499
|
-
Xe(e,
|
|
483
|
+
Xe(e, H(H({}, n), {}, {
|
|
500
484
|
selectedOption: true
|
|
501
485
|
}));
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
}), [
|
|
486
|
+
Ce === null || Ce === void 0 ? void 0 : Ce.focus();
|
|
487
|
+
Ve();
|
|
488
|
+
}), [ Ve, Xe, Ce ]);
|
|
505
489
|
var $e = (0, r.useCallback)((function(e) {
|
|
506
490
|
e.stopPropagation();
|
|
507
|
-
if (!
|
|
508
|
-
|
|
491
|
+
if (!f) {
|
|
492
|
+
ze();
|
|
509
493
|
}
|
|
510
|
-
}), [
|
|
494
|
+
}), [ f, ze ]);
|
|
511
495
|
var Ge = (0, r.useCallback)((function(e) {
|
|
512
496
|
var n = e.event, r = e.reason;
|
|
513
497
|
var t = r === "offScreen" || r === "escapeKey" || r === "clickAway" && be && !J(be, n);
|
|
514
498
|
if (t) {
|
|
515
|
-
|
|
499
|
+
Ve();
|
|
516
500
|
}
|
|
517
|
-
}), [ be,
|
|
501
|
+
}), [ be, Ve ]);
|
|
518
502
|
var Je = (0, r.useCallback)((function(e) {
|
|
519
|
-
if (he && !
|
|
503
|
+
if (he && !B) {
|
|
520
504
|
G === null || G === void 0 ? void 0 : G(e);
|
|
521
505
|
}
|
|
522
|
-
}), [
|
|
506
|
+
}), [ B, he, G ]);
|
|
523
507
|
var Qe = (0, r.useMemo)((function() {
|
|
524
|
-
var e =
|
|
508
|
+
var e = Fe();
|
|
525
509
|
var n = r.Children.toArray(a).filter(r.isValidElement);
|
|
526
|
-
var o =
|
|
510
|
+
var o = c()(n, (function(n) {
|
|
527
511
|
if (n.props.label === undefined) {
|
|
528
512
|
return n.props.value === e;
|
|
529
513
|
}
|
|
@@ -533,8 +517,8 @@
|
|
|
533
517
|
return n.props.value === e;
|
|
534
518
|
}));
|
|
535
519
|
if (!o && e) {
|
|
536
|
-
n.unshift( t().createElement(
|
|
537
|
-
description: (0,
|
|
520
|
+
n.unshift( t().createElement(I, {
|
|
521
|
+
description: (0, w._)("(New value)"),
|
|
538
522
|
descriptionPosition: "right",
|
|
539
523
|
key: "currentValueOption",
|
|
540
524
|
value: e,
|
|
@@ -543,14 +527,14 @@
|
|
|
543
527
|
}
|
|
544
528
|
// Highlight Active
|
|
545
529
|
xe.current = 0;
|
|
546
|
-
|
|
547
|
-
var l = (0,
|
|
530
|
+
Ie.current = undefined;
|
|
531
|
+
var l = (0, C.stringToKeywords)(Re ? e : Ke());
|
|
548
532
|
return (i ? n : n.filter((function(e) {
|
|
549
533
|
if (e.props.label !== undefined) {
|
|
550
|
-
return (0,
|
|
534
|
+
return (0, C.testPhrase)(e.props.label, l);
|
|
551
535
|
}
|
|
552
536
|
if (e.props.value !== undefined) {
|
|
553
|
-
return (0,
|
|
537
|
+
return (0, C.testPhrase)(e.props.value, l);
|
|
554
538
|
}
|
|
555
539
|
return true;
|
|
556
540
|
// Keep all headers and non-interactive options
|
|
@@ -559,19 +543,19 @@
|
|
|
559
543
|
// ignore non-Option items such as Headings and Dividers
|
|
560
544
|
return n;
|
|
561
545
|
}
|
|
562
|
-
var a = xe.current ===
|
|
546
|
+
var a = xe.current === de;
|
|
563
547
|
xe.current += 1;
|
|
564
548
|
var u = n.props.label !== undefined ? n.props.label : n.props.value;
|
|
565
549
|
var c = n.props.matchRanges;
|
|
566
|
-
var s = !i && e && (o || t > 0) ? (0,
|
|
550
|
+
var s = !i && e && (o || t > 0) ? (0, C.keywordLocations)(u, l) || undefined : undefined;
|
|
567
551
|
if (a) {
|
|
568
552
|
if (!n.props.disabled) {
|
|
569
|
-
|
|
553
|
+
Ie.current = n.props.value;
|
|
570
554
|
}
|
|
571
555
|
|
|
572
556
|
return (0, r.cloneElement)(n, {
|
|
573
|
-
elementRef:
|
|
574
|
-
id:
|
|
557
|
+
elementRef: We,
|
|
558
|
+
id: He,
|
|
575
559
|
onClick: Ye,
|
|
576
560
|
matchRanges: c || s,
|
|
577
561
|
active: true
|
|
@@ -583,10 +567,10 @@
|
|
|
583
567
|
matchRanges: c || s
|
|
584
568
|
});
|
|
585
569
|
}));
|
|
586
|
-
}), [
|
|
570
|
+
}), [ de, He, a, i, Ke, Fe, We, Ye, Re ]);
|
|
587
571
|
var Ze = (0, r.useCallback)((function(e) {
|
|
588
572
|
var n = xe.current;
|
|
589
|
-
var t =
|
|
573
|
+
var t = Ie.current;
|
|
590
574
|
var o = e.key, i = e.nativeEvent;
|
|
591
575
|
if (he) {
|
|
592
576
|
switch (o) {
|
|
@@ -601,23 +585,23 @@
|
|
|
601
585
|
}
|
|
602
586
|
|
|
603
587
|
case "Tab":
|
|
604
|
-
|
|
588
|
+
Ve();
|
|
605
589
|
break;
|
|
606
590
|
|
|
607
591
|
case "ArrowDown":
|
|
608
|
-
|
|
592
|
+
fe((function(e) {
|
|
609
593
|
return Math.min(e + 1, n - 1);
|
|
610
594
|
}));
|
|
611
595
|
if (a && G) {
|
|
612
596
|
var l = r.Children.count(a) - 2;
|
|
613
|
-
if (
|
|
597
|
+
if (de === l) {
|
|
614
598
|
Je(e);
|
|
615
599
|
}
|
|
616
600
|
}
|
|
617
601
|
break;
|
|
618
602
|
|
|
619
603
|
case "ArrowUp":
|
|
620
|
-
|
|
604
|
+
fe((function(e) {
|
|
621
605
|
return Math.max(e - 1, 0);
|
|
622
606
|
}));
|
|
623
607
|
break;
|
|
@@ -628,33 +612,33 @@
|
|
|
628
612
|
} else if ((0, j.addsCharacter)(i) !== false ||
|
|
629
613
|
// Safari 9.0 returns undefined
|
|
630
614
|
o === "Enter" || o === "Backspace" || o === "ArrowDown" || o === "ArrowUp") {
|
|
631
|
-
|
|
615
|
+
ze();
|
|
632
616
|
}
|
|
633
617
|
U === null || U === void 0 ? void 0 : U(e);
|
|
634
|
-
}), [
|
|
635
|
-
var en =
|
|
618
|
+
}), [ de, a, Ve, Je, Ye, he, U, G, ze ]);
|
|
619
|
+
var en = Fe();
|
|
636
620
|
var nn = Ke();
|
|
637
621
|
var rn = function e(r) {
|
|
638
622
|
var o = r.anchorWidth, a = r.maxHeight;
|
|
639
623
|
var i = Q({
|
|
640
624
|
anchorWidth: o,
|
|
641
625
|
maxHeight: a,
|
|
642
|
-
menuStyle:
|
|
626
|
+
menuStyle: L
|
|
643
627
|
});
|
|
644
628
|
var l = {
|
|
645
629
|
animateLoading: n,
|
|
646
630
|
controlledExternally: ue,
|
|
647
631
|
footerMessage: h,
|
|
648
|
-
isLoading:
|
|
649
|
-
loadingMessage:
|
|
650
|
-
noOptionsMessage:
|
|
632
|
+
isLoading: B,
|
|
633
|
+
loadingMessage: A,
|
|
634
|
+
noOptionsMessage: z,
|
|
651
635
|
onScroll: $,
|
|
652
636
|
onScrollBottom: G ? Je : undefined,
|
|
653
637
|
style: i
|
|
654
638
|
};
|
|
655
639
|
if (ie) {
|
|
656
640
|
|
|
657
|
-
return t().createElement(b.VirtualizedResultsMenu,
|
|
641
|
+
return t().createElement(b.VirtualizedResultsMenu, T({
|
|
658
642
|
virtualization: ie
|
|
659
643
|
}, l), Qe);
|
|
660
644
|
}
|
|
@@ -662,30 +646,30 @@
|
|
|
662
646
|
return t().createElement(m(), l, Qe);
|
|
663
647
|
};
|
|
664
648
|
|
|
665
|
-
return t().createElement(g(),
|
|
649
|
+
return t().createElement(g(), T({
|
|
666
650
|
append: o,
|
|
667
|
-
"aria-activedescendant": he && Array.isArray(Qe) && Qe.length > 0 ?
|
|
651
|
+
"aria-activedescendant": he && Array.isArray(Qe) && Qe.length > 0 ? He : undefined,
|
|
668
652
|
"aria-expanded": he,
|
|
669
|
-
"aria-controls": he ?
|
|
653
|
+
"aria-controls": he ? Le : undefined,
|
|
670
654
|
autoCapitalize: "off",
|
|
671
655
|
autoComplete: "off",
|
|
672
656
|
autoCorrect: "off",
|
|
673
657
|
canClear: true,
|
|
674
658
|
"data-test": "combo-box",
|
|
675
|
-
"data-test-popover-id":
|
|
659
|
+
"data-test-popover-id": Le,
|
|
676
660
|
"data-test-label": nn,
|
|
677
661
|
"data-test-value": en,
|
|
678
662
|
"data-test-open": he && !!be,
|
|
679
|
-
describedBy:
|
|
680
|
-
disabled:
|
|
681
|
-
elementRef:
|
|
663
|
+
describedBy: d,
|
|
664
|
+
disabled: f,
|
|
665
|
+
elementRef: Ne,
|
|
682
666
|
error: y,
|
|
683
667
|
inline: S,
|
|
684
|
-
inputId:
|
|
668
|
+
inputId: q,
|
|
685
669
|
inputRef: _e,
|
|
686
|
-
labelledBy:
|
|
687
|
-
name:
|
|
688
|
-
onBlur:
|
|
670
|
+
labelledBy: D,
|
|
671
|
+
name: V,
|
|
672
|
+
onBlur: F,
|
|
689
673
|
onFocus: Ue,
|
|
690
674
|
onChange: Xe,
|
|
691
675
|
onClick: $e,
|
|
@@ -702,15 +686,15 @@
|
|
|
702
686
|
autoCloseWhenOffScreen: true,
|
|
703
687
|
canCoverAnchor: false,
|
|
704
688
|
defaultPlacement: u,
|
|
705
|
-
id:
|
|
689
|
+
id: Le,
|
|
706
690
|
onRequestClose: Ge,
|
|
707
691
|
open: he && !!be,
|
|
708
692
|
repositionMode: "flip"
|
|
709
693
|
}, rn));
|
|
710
694
|
}
|
|
711
|
-
ne.Divider =
|
|
712
|
-
ne.Heading =
|
|
713
|
-
ne.Option =
|
|
695
|
+
ne.Divider = f.Divider;
|
|
696
|
+
ne.Heading = f.Heading;
|
|
697
|
+
ne.Option = I;
|
|
714
698
|
ne.propTypes = G;
|
|
715
699
|
/* harmony default export */ const re = ne;
|
|
716
700
|
// CONCATENATED MODULE: ./src/ComboBox/index.ts
|